Merge pull request #11 from onemanfighter/amitraikwar-rs/ARMP-99/add-…

…setting-store

[Setup]: Adding setting store and wallpaper slice

craco.config.js

@@ -19,6 +19,12 @@ module.exports = {
         __dirname,
         './src/store/processStore/selector',
       ),
+      // Settings store
+      '@settingsStore': path.resolve(__dirname, './src/store/settingsStore'),
+      '@settingsStore/selector': path.resolve(
+        __dirname,
+        './src/store/settingsStore/selector',
+      ),
     },
   },
 };

jest.config.js

@@ -34,6 +34,9 @@ module.exports = {
     // Process store
     '@processStore': '<rootDir>/src/store/processStore',
     '@processStore/selector': '<rootDir>/src/store/processStore/selector',
+    // Settings store
+    '@settingsStore': '<rootDir>/src/store/settingsStore',
+    '@settingsStore/selector': '<rootDir>/src/store/settingsStore/selector',
   },
   transform: {
     '.+\\.(css|scss|png|jpg|svg)$': 'jest-transform-stub',

src/store/processStore/processStore/processStore.ts

@@ -8,7 +8,7 @@ import { createPowerSlice } from '../slice';
 export const processStore = create<ProcessStoreState>()(
   persist(
     immer((...api) => ({
-      MainMac: createPowerSlice(...api),
+      Power: createPowerSlice(...api),
     })),
     {
       name: 'processStore',

src/store/processStore/processStore/types.ts

@@ -2,7 +2,7 @@ import { StateCreator } from 'zustand';
 import { PowerStateSlice } from '../slice';
 
 export interface ProcessStoreState {
-  MainMac: PowerStateSlice;
+  Power: PowerStateSlice;
 }
 
 export type ProcessStoreSlice<T> = StateCreator<

src/store/processStore/selector/Power/Power.selector.ts

@@ -1,9 +1,9 @@
 import { ProcessStoreState } from '@processStore';
 
 const powerSelector = (state: ProcessStoreState) => ({
-  onState: state.MainMac.onState,
-  turnOn: state.MainMac.turnOn,
-  turnOff: state.MainMac.turnOff,
+  onState: state.Power.onState,
+  turnOn: state.Power.turnOn,
+  turnOff: state.Power.turnOff,
 });
 
 export { powerSelector };

src/store/processStore/selector/Power/__tests__/Power.selector.test.ts

@@ -3,7 +3,7 @@ import { OnState, processStore } from '@processStore';
 import { powerSelector } from '../Power.selector';
 
 describe('Power selector', () => {
-  it('should return default modal state', () => {
+  it('should return default power state', () => {
     const { result } = renderHook(() => processStore(powerSelector));
 
     expect(result.current.onState).toEqual(OnState.OFF);

src/store/processStore/slice/Modal/Power.slice.ts

@@ -7,8 +7,8 @@ const defaultPowerState: PowerState = {
 
 const createPowerSlice: ProcessStoreSlice<PowerStateSlice> = (set) => ({
   ...defaultPowerState,
-  turnOn: () => set((state) => void (state.MainMac.onState = OnState.ON)),
-  turnOff: () => set((state) => void (state.MainMac.onState = OnState.OFF)),
+  turnOn: () => set((state) => void (state.Power.onState = OnState.ON)),
+  turnOff: () => set((state) => void (state.Power.onState = OnState.OFF)),
 });
 
 export default createPowerSlice;

src/store/processStore/slice/Modal/__tests__/Power.slice.test.ts

@@ -5,22 +5,22 @@ describe('Power slice', () => {
   it('should return default on state', () => {
     const { result } = renderHook(() => processStore());
 
-    expect(result.current.MainMac.onState).toEqual(OnState.OFF);
+    expect(result.current.Power.onState).toEqual(OnState.OFF);
   });
 
   it('should return on stat on calling turnOn', () => {
     const { result } = renderHook(() => processStore());
 
-    result.current.MainMac.turnOn();
+    result.current.Power.turnOn();
 
-    expect(result.current.MainMac.onState).toEqual(OnState.ON);
+    expect(result.current.Power.onState).toEqual(OnState.ON);
   });
 
   it('should return on stat off calling turnOff', () => {
     const { result } = renderHook(() => processStore());
 
-    result.current.MainMac.turnOff();
+    result.current.Power.turnOff();
 
-    expect(result.current.MainMac.onState).toEqual(OnState.OFF);
+    expect(result.current.Power.onState).toEqual(OnState.OFF);
   });
 });

src/store/settingsStore/index.ts

@@ -0,0 +1,2 @@
+export * from './settingsStore';
+export * from './slice';

src/store/settingsStore/selector/Wallpaper/Wallpaper.selector.ts

@@ -0,0 +1,9 @@
+import { SettingsStoreState } from '@settingsStore';
+
+const wallpaperSelector = (state: SettingsStoreState) => ({
+  wallpaper: state.Wallpaper.type,
+  setWallpaper: state.Wallpaper.setWallpaper,
+  resetWallpaper: state.Wallpaper.resetWallpaper,
+});
+
+export { wallpaperSelector };

src/store/settingsStore/selector/Wallpaper/__tests__/Wallpaper.selector.test.ts

@@ -0,0 +1,27 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { wallpaperSelector } from '../Wallpaper.selector';
+import { Wallpapers, settingsStore } from '@settingsStore';
+
+describe('Wallpaper selector', () => {
+  it('should return default wallpaper state', () => {
+    const { result } = renderHook(() => settingsStore(wallpaperSelector));
+
+    expect(result.current.wallpaper).toEqual(Wallpapers.ImageA);
+  });
+
+  it('should set wallpaper using setWallpaper method', () => {
+    const { result } = renderHook(() => settingsStore(wallpaperSelector));
+
+    result.current.setWallpaper(Wallpapers.ImageB);
+
+    expect(result.current.wallpaper).toEqual(Wallpapers.ImageB);
+  });
+
+  it('should reset wallpaper using resetWallpaper method', () => {
+    const { result } = renderHook(() => settingsStore(wallpaperSelector));
+
+    result.current.resetWallpaper();
+
+    expect(result.current.wallpaper).toEqual(Wallpapers.ImageA);
+  });
+});

src/store/settingsStore/selector/Wallpaper/index.ts

@@ -0,0 +1 @@
+export { wallpaperSelector } from './Wallpaper.selector';

src/store/settingsStore/selector/index.ts

@@ -0,0 +1,3 @@
+export { useShallow } from 'zustand/react/shallow';
+
+export * from './Wallpaper';

src/store/settingsStore/settingsStore/index.ts

@@ -0,0 +1,2 @@
+export type { SettingsStoreState, SettingsStoreSlice } from './types';
+export { settingsStore } from './settingsStore';

src/store/settingsStore/settingsStore/settingsStore.ts

@@ -0,0 +1,18 @@
+import { create } from 'zustand';
+
+import { immer } from 'zustand/middleware/immer';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import { SettingsStoreState } from './types';
+import { createWallpaperSlice } from '../slice';
+
+export const settingsStore = create<SettingsStoreState>()(
+  persist(
+    immer((...api) => ({
+      Wallpaper: createWallpaperSlice(...api),
+    })),
+    {
+      name: 'processStore',
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+);

src/store/settingsStore/settingsStore/types.ts

@@ -0,0 +1,13 @@
+import { StateCreator } from 'zustand';
+import { WallpaperStateSlice } from '../slice/Wallpaper/types';
+
+export interface SettingsStoreState {
+  Wallpaper: WallpaperStateSlice;
+}
+
+export type SettingsStoreSlice<T> = StateCreator<
+  SettingsStoreState,
+  [['zustand/immer', never]],
+  [],
+  T
+>;

src/store/settingsStore/slice/Wallpaper/Wallpaper.slice.ts

@@ -0,0 +1,22 @@
+import { SettingsStoreSlice } from '../../settingsStore/types';
+import { WallpaperState, WallpaperStateSlice, Wallpapers } from './types';
+
+const defaultWallpaperState: WallpaperState = {
+  type: Wallpapers.ImageA,
+};
+
+const createWallpaperSlice: SettingsStoreSlice<WallpaperStateSlice> = (
+  set,
+) => ({
+  ...defaultWallpaperState,
+  setWallpaper: (type) =>
+    set((state) => {
+      state.Wallpaper.type = type;
+    }),
+  resetWallpaper: () =>
+    set((state) => {
+      state.Wallpaper.type = defaultWallpaperState.type;
+    }),
+});
+
+export default createWallpaperSlice;

src/store/settingsStore/slice/Wallpaper/__tests__/Wallpaper.slice.test.ts

@@ -0,0 +1,27 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { settingsStore } from '@settingsStore';
+import { Wallpapers } from '../types';
+
+describe('Wallpaper slice', () => {
+  it('should return default wallpaper type', () => {
+    const { result } = renderHook(() => settingsStore());
+
+    expect(result.current.Wallpaper.type).toEqual(Wallpapers.ImageA);
+  });
+
+  it('should return image type if set using setWallpaper', () => {
+    const { result } = renderHook(() => settingsStore());
+
+    result.current.Wallpaper.setWallpaper(Wallpapers.ImageB);
+
+    expect(result.current.Wallpaper.type).toEqual(Wallpapers.ImageB);
+  });
+
+  it('should return default wallpaper if resetWallpaper is called', () => {
+    const { result } = renderHook(() => settingsStore());
+
+    result.current.Wallpaper.resetWallpaper();
+
+    expect(result.current.Wallpaper.type).toEqual(Wallpapers.ImageA);
+  });
+});

src/store/settingsStore/slice/Wallpaper/index.ts

@@ -0,0 +1,3 @@
+export { default as createWallpaperSlice } from './Wallpaper.slice';
+export type { WallpaperStateSlice, WallpaperState } from './types';
+export { Wallpapers } from './types';

src/store/settingsStore/slice/Wallpaper/types.ts

@@ -0,0 +1,24 @@
+export enum Wallpapers {
+  ImageA = 'ImageA',
+  ImageB = 'ImageB',
+}
+
+export type WallpaperState = {
+  type: Wallpapers;
+};
+
+export interface WallpaperStateAction {
+  /**
+   * Turn on the power
+   * @returns void
+   */
+  setWallpaper: (type: Wallpapers) => void;
+
+  /**
+   * Turn off the power
+   * @returns void
+   */
+  resetWallpaper: () => void;
+}
+
+export type WallpaperStateSlice = WallpaperState & WallpaperStateAction;

src/store/settingsStore/slice/index.ts

@@ -0,0 +1 @@
+export * from './Wallpaper';

tsconfig.path.json

@@ -11,7 +11,10 @@
       "@uiStore/selector": ["src/store/uiStore/selector"],
       // Process store
       "@processStore": ["src/store/processStore"],
-      "@processStore/selector": ["src/store/processStore/selector"]
+      "@processStore/selector": ["src/store/processStore/selector"],
+      // Settings store
+      "@settingsStore": ["src/store/settingsStore"],
+      "@settingsStore/selector": ["src/store/settingsStore/selector"]
     }
   }
 }