refactor: refactor store so it makes more sense

GUI/ETVR/src/components/Camera/CameraIndicator/CameraIndicator.tsx

@@ -1,4 +1,4 @@
-import { CameraStatus } from '@src/store/mdns/mdns'
+import { CameraStatus } from '@src/store/camera/camera'
 import { ActiveStatus, GenerateMatrixShadow } from '@src/utils/utils'
 
 export interface ICameraStatus {

GUI/ETVR/src/components/Camera/index.tsx

@@ -3,7 +3,7 @@ import { FaSolidGear } from 'solid-icons/fa'
 import CameraStatusIndicator from './CameraIndicator/CameraIndicator'
 import { setRestDevice } from '@src/store/api/restAPI'
 import { restDevice } from '@src/store/api/selectors'
-import { ICamera } from '@src/store/mdns/mdns'
+import { ICamera } from '@src/store/camera/camera'
 import { setOpenModal } from '@src/store/ui/ui'
 import { ActiveStatus } from '@src/utils/utils'
 

GUI/ETVR/src/pages/Home/index.tsx

@@ -1,42 +1,31 @@
 import { Text } from '@hope-ui/core'
-import { createSignal, Show, For, createEffect } from 'solid-js'
+import { createSignal, Show, For } from 'solid-js'
 import icons from '@assets/images/index'
 import { Camera } from '@components/Camera'
 import { CustomPopover } from '@components/header/CustomPopover'
-import { ICamera } from '@src/store/mdns/mdns'
-import { cameras } from '@src/store/mdns/selectors'
+import { cameras } from '@src/store/camera/selectors'
 import { CAMERA_VIEW_MODE } from '@src/utils/enums'
 
 const CameraHandler = () => {
     return (
         <Show
-            when={Object.keys(cameras()).length > 0}
+            when={cameras().length > 0}
             fallback={
                 <div class="flex flex-col items-center justify-center w-full h-full">
                     <Text size="2xl" class="font-bold tracking-[0.10rem] text-[white]">
                         No cameras found
                     </Text>
                 </div>
             }>
-            <For each={Object.values(cameras())}>
-                {(value) => {
-                    const camera = value as ICamera
+            <For each={cameras()}>
+                {(camera) => {
                     return <Camera {...camera} />
                 }}
             </For>
         </Show>
     )
 }
 
-/* {
-    ;() => {
-        for (const values of _cameras.values()) {
-            const value = values as ICamera
-            return <Camera {...value} />
-        }
-    }
-} */
-
 const Main = () => {
     const [selectMode, setSelectMode] = createSignal(CAMERA_VIEW_MODE.GRIP)
     return (

GUI/ETVR/src/routes/Routes.tsx

@@ -2,8 +2,8 @@
 import { useRoutes } from '@solidjs/router'
 import { lazy, onMount } from 'solid-js'
 import { routes } from '.'
-import { setConnectedUser } from '@src/store/mdns/mdns'
-import { connectedUserName } from '@src/store/mdns/selectors'
+import { connectedUserName } from '@src/store/ui/selectors'
+import { setConnectedUser } from '@src/store/ui/ui'
 
 const Header = lazy(() => import('@components/header/index'))
 

GUI/ETVR/src/store/api/restAPI.ts

@@ -42,11 +42,11 @@ export const defaultState: IRest = {
  * const endpoint = endpointsMap.get('ping')
  * endpoint.url // '/ping'
  * endpoint.type // 'GET'
- * 
+ *
  * These endpoints are built into the REST API server on the ESP32
- * 
+ *
  * @description
- * **URL Example** - `http://<ip>:81/control/command/<endpoint>` 
+ * **URL Example** - `http://<ip>:81/control/command/<endpoint>`
  */
 export const endpointsMap: Map<string, IEndpoint> = new Map<string, IEndpoint>([
     ['ping', { url: '/control/command/ping', type: RESTType.GET }],

GUI/ETVR/src/store/camera/camera.ts

@@ -0,0 +1,72 @@
+import { createMemo } from 'solid-js'
+import { createStore, produce } from 'solid-js/store'
+
+export enum CameraStatus {
+    ACTIVE = 'ACTIVE',
+    DISABLED = 'DISABLED',
+    LOADING = 'LOADING',
+    FAILED = 'FAILED',
+}
+
+export enum CameraType {
+    WIRELESS = 'WIRELESS',
+}
+
+export interface ICamera {
+    status: CameraStatus
+    type: CameraType
+    address: string
+    activeCameraSection: string
+}
+
+const tempCameraComponents: ICamera[] = [
+    {
+        status: CameraStatus.LOADING,
+        type: CameraType.WIRELESS,
+        address: '192.168.0.204',
+        activeCameraSection: 'Left Eye',
+    },
+    {
+        status: CameraStatus.LOADING,
+        type: CameraType.WIRELESS,
+        address: '192.168.0.232',
+        activeCameraSection: 'Right Eye',
+    },
+]
+
+interface ICameraStore {
+    cameras: ICamera[]
+}
+
+export const defaultState: ICameraStore = {
+    cameras: tempCameraComponents,
+}
+
+const [state, setState] = createStore<ICameraStore>(defaultState)
+
+export const setAddCamera = (camera: ICamera) => {
+    setState(
+        produce((s) => {
+            s.cameras.push(camera)
+        })
+    )
+}
+
+export const setRemoveCamera = (camera: ICamera) => {
+    setState(
+        produce((s) => {
+            s.cameras = s.cameras.filter((c: { address: string }) => c.address !== camera.address)
+        })
+    )
+}
+
+export const setCameraStatus = (camera: ICamera, status: CameraStatus) => {
+    setState(
+        produce((s) => {
+            s.cameras = s.cameras.filter((c: { address: string }) => c.address !== camera.address)
+            s.cameras.push({ ...camera, status })
+        })
+    )
+}
+
+export const cameraState = createMemo(() => state)

GUI/ETVR/src/store/camera/selectors.ts

@@ -0,0 +1,10 @@
+import { createMemo } from 'solid-js'
+import { cameraState } from './camera'
+
+export const cameras = createMemo(() => cameraState().cameras)
+export const cameraAddresses = createMemo(() =>
+    cameraState().cameras.map((c: { address: string }) => c.address)
+)
+export const cameraStatus = createMemo(() =>
+    cameraState().cameras.map((c: { status: string }) => c.status)
+)

GUI/ETVR/src/store/mdns/mdns.ts

@@ -1,86 +1,27 @@
 import { createMemo } from 'solid-js'
 import { createStore, produce } from 'solid-js/store'
 
-export enum CameraStatus {
+export enum MdnsStatus {
     ACTIVE = 'ACTIVE',
     DISABLED = 'DISABLED',
     LOADING = 'LOADING',
     FAILED = 'FAILED',
 }
 
-export enum CameraType {
-    WIRELESS = 'WIRELESS',
-}
-
-export interface ICamera {
-    status: CameraStatus
-    type: CameraType
-    address: string
-    activeCameraSection: string
-}
-
 interface IMdnsStore {
-    connectedUser: string
-    restClient: string
-    camerasMap: ICameraComponents
-}
-
-interface ICameraComponents {
-    [key: string]: ICamera
-}
-
-/* TEMPORARY - REMOVE WHEN NOT NEEDED */
-/* const staticCamerasGenerator = new Array(5).fill(0).map(() => ({
-    status: CameraStatus.LOADING,
-    type: CameraType.WIRELESS,
-    address: `${Math.floor(Math.random() * 255)}`,
-    activeCameraSection: 'Left Eye',
-})) */
-
-const tempCameraComponents: ICameraComponents = {
-    '192.168.0.204': {
-        status: CameraStatus.LOADING,
-        type: CameraType.WIRELESS,
-        address: '192.168.0.204',
-        activeCameraSection: 'Left Eye',
-    },
-    '192.168.0.232': {
-        status: CameraStatus.LOADING,
-        type: CameraType.WIRELESS,
-        address: '192.168.0.232',
-        activeCameraSection: 'Left Eye',
-    },
-
+    mdnsStatus: MdnsStatus
 }
 
 export const defaultState: IMdnsStore = {
-    connectedUser: '',
-    restClient: '',
-    camerasMap: tempCameraComponents
+    mdnsStatus: MdnsStatus.DISABLED,
 }
 
 const [state, setState] = createStore<IMdnsStore>(defaultState)
 
-export const setConnectedUser = (userName: string) => {
-    setState(
-        produce((s) => {
-            s.connectedUser = userName
-        })
-    )
-}
-
-export const setAddCamera = (camera: ICamera) => {
-    setState(
-        produce((s) => {
-            s.camerasMap[camera.address] = camera
-        })
-    )
-}
-
-export const setRemoveCamera = (cameraAddress: string) => {
+export const setMdnsStatus = (status: MdnsStatus) => {
     setState(
         produce((s) => {
-            delete s.camerasMap[cameraAddress]
+            s.mdnsStatus = status
         })
     )
 }

GUI/ETVR/src/store/mdns/selectors.ts

@@ -1,6 +1,4 @@
 import { createMemo } from 'solid-js'
 import { mdnsState } from './mdns'
 
-export const connectedUserName = createMemo(() => mdnsState().connectedUser)
-export const cameras = createMemo(() => mdnsState().camerasMap)
-export const cameraAddresses = createMemo(() => Object.keys(mdnsState().camerasMap))
+export const mdnsStatus = createMemo(() => mdnsState().mdnsStatus)

GUI/ETVR/src/store/ui/selectors.ts

@@ -1,14 +1,7 @@
 import { createMemo } from 'solid-js'
 import { uiState } from './ui'
 
-export const connectingStatus = createMemo(() => {
-    return uiState().connecting
-})
-
-export const openModalStatus = createMemo(() => {
-    return uiState().openModal
-})
-
-export const menuOpenStatus = createMemo(() => {
-    return uiState().menuOpen
-})
+export const connectingStatus = createMemo(() => uiState().connecting)
+export const openModalStatus = createMemo(() => uiState().openModal)
+export const menuOpenStatus = createMemo(() => uiState().menuOpen)
+export const connectedUserName = createMemo(() => uiState().connectedUser)

GUI/ETVR/src/store/ui/ui.ts

@@ -28,13 +28,15 @@ interface IUiStore {
     connecting?: boolean
     openModal?: boolean
     menuOpen?: IMenuOpen | null
+    connectedUser: string
 }
 
 export const defaultState = {
     loader: { [loaderType.MDNS_CONNECTING]: false, [loaderType.REST_CLIENT]: false },
     connecting: false,
     openModal: false,
     menuOpen: null,
+    connectedUser: '',
 }
 
 const [state, setState] = createStore<IUiStore>(defaultState)
@@ -66,4 +68,12 @@ export const setOpenModal = (openModal: boolean) => {
     )
 }
 
+export const setConnectedUser = (userName: string) => {
+    setState(
+        produce((s) => {
+            s.connectedUser = userName
+        })
+    )
+}
+
 export const uiState = createMemo(() => state)

GUI/ETVR/src/utils/hooks/useRequest.ts

@@ -2,7 +2,7 @@ import { invoke } from '@tauri-apps/api/tauri'
 import { createSignal, createEffect } from 'solid-js'
 import { setRestStatus, RESTStatus } from '@src/store/api/restAPI'
 import { endpoints } from '@src/store/api/selectors'
-import { cameras } from '@src/store/mdns/selectors'
+import { cameras } from '@src/store/camera/selectors'
 
 interface IProps {
     endpointName: string

GUI/ETVR/src/utils/utils.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
 
-import { CameraStatus } from '@src/store/mdns/mdns'
+import { CameraStatus } from '@src/store/camera/camera'
 
 export const ACTIVE_SHADOW = '0 0 0 0 0.121333  0 0 0 0 0.866667  0 0 0 0 0  0 0 0 1 0'
 export const LOADING_SHADOW = '0 0 0 0 1  0 0 0 0 0.20166699999999999  0 0 0 0 -1.878667  0 0 0 1 0'