testing typescript store

storeTs/settingsTs.ts

@@ -0,0 +1,58 @@
+import create, {GetState, SetState, StateCreator, StoreApi} from 'zustand';
+// import { MyState } from "./storeTs";
+
+type colorType = {
+    r:number, 
+    g:number, 
+    b:number
+}
+
+export interface SettingsSlice {
+    device: string;
+    setDevice: (newDevice:string) => void;
+    devices: [];
+    setDevices: (newDevices:any) => void;
+    iframe: string;
+    setIframe: (ip:string) => void;
+    audioDevice: string;
+    setAudioDevice: (newDevice:string) => void;
+    audioDevices: [];
+    setAudioDevices: (newDevices:any) => void;
+    color: colorType;
+    setColor: (newColor:colorType) => void;
+  }
+
+const storeSettings: StateCreator<SettingsSlice> | StoreApi<SettingsSlice> = (set, get) => ({  
+
+    device: '',
+    setDevice: (newDevice:string) => set(() => ({
+        device: newDevice
+    })),
+
+    devices: [],
+    setDevices: (newDevices:any) => set(() => ({
+        devices: newDevices
+    })),
+
+    iframe: '',
+    setIframe: (ip:string) => set(() => ({
+        iframe: ip
+    })),  
+
+    audioDevice: 'default',
+    setAudioDevice: (newDevice:string) => set(() => ({
+        audioDevice: newDevice
+    })),
+
+    audioDevices: [],
+    setAudioDevices: (newDevices:any) => set(() => ({
+        audioDevices: newDevices
+    })),
+
+    color: { r: 50, g: 100, b: 150 },
+    setColor: (newColor:colorType) => set(() => ({
+        color: newColor
+    })),   
+
+})
+export default storeSettings

storeTs/storeTs.ts

@@ -0,0 +1,40 @@
+import create, {GetState, SetState, StateCreator, StoreApi} from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import storeSettings, {SettingsSlice} from './settingsTs';
+import storeUI, {UiSlice} from './uiTs';
+
+// export type MyState = UiSlice & SettingsSlice;
+
+// type StateFromFunctions<T extends [...any]> = T extends [infer F, ...(infer R)]
+//   ? F extends (...args: any) => object
+//     ? StateFromFunctions<R> & ReturnType<F>
+//     : unknown
+//   : unknown;
+
+
+// export type State = StateFromFunctions<[
+//   typeof storeUI,
+//   typeof storeSettings
+// ]>;
+
+// const useStore = create<State>((set, get) => ({
+//         ...storeUI(set, get),
+//         ...storeSettings(set, get)
+//     }))
+
+interface IStore extends UiSlice, SettingsSlice {}
+
+export const useStore = create<IStore>((set, get, api) => ({
+  ...storeUI(
+    set as unknown as SetState<UiSlice>,
+    get as GetState<UiSlice>,
+    api as unknown as StoreApi<UiSlice>,
+  ),
+  ...storeSettings(
+    set as unknown as SetState<SettingsSlice>,
+    get as GetState<SettingsSlice>,
+    api as unknown as StoreApi<SettingsSlice>,
+  ),
+}));
+
+export default useStore

storeTs/uiTs.ts

@@ -0,0 +1,25 @@
+import create, {GetState, SetState, StateCreator, StoreApi} from 'zustand';
+// import { MyState } from "./storeTs";
+
+export interface UiSlice {
+    leftBarOpen: Boolean;
+    setLeftBarOpen: (data:Boolean) => void;
+    bottomBarOpen: Boolean;
+    setBottomBarOpen: (data:Boolean) => void;
+  }
+
+const storeUI: StateCreator<UiSlice> | StoreApi<UiSlice> = (set, get) => ({
+
+    leftBarOpen: true,
+    setLeftBarOpen: (data:Boolean) => set(() => ({
+        leftBarOpen: data
+    })),
+
+    bottomBarOpen: false,
+    setBottomBarOpen: (data:Boolean) => set(() => ({
+        bottomBarOpen: data
+    })),
+
+
+})
+export default storeUI