Skip to content

Commit 280f350

Browse files
ZanzyTHEbarZanzyTHEbar
committed
refactor: refactor store so it makes more sense
1 parent 4ee6adf commit 280f350

File tree

13 files changed

+116
-103
lines changed

13 files changed

+116
-103
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CameraStatus } from '@src/store/mdns/mdns'
1+
import { CameraStatus } from '@src/store/camera/camera'
22
import { ActiveStatus, GenerateMatrixShadow } from '@src/utils/utils'
33

44
export interface ICameraStatus {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { FaSolidGear } from 'solid-icons/fa'
33
import CameraStatusIndicator from './CameraIndicator/CameraIndicator'
44
import { setRestDevice } from '@src/store/api/restAPI'
55
import { restDevice } from '@src/store/api/selectors'
6-
import { ICamera } from '@src/store/mdns/mdns'
6+
import { ICamera } from '@src/store/camera/camera'
77
import { setOpenModal } from '@src/store/ui/ui'
88
import { ActiveStatus } from '@src/utils/utils'
99

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

+5-16
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,31 @@
11
import { Text } from '@hope-ui/core'
2-
import { createSignal, Show, For, createEffect } from 'solid-js'
2+
import { createSignal, Show, For } from 'solid-js'
33
import icons from '@assets/images/index'
44
import { Camera } from '@components/Camera'
55
import { CustomPopover } from '@components/header/CustomPopover'
6-
import { ICamera } from '@src/store/mdns/mdns'
7-
import { cameras } from '@src/store/mdns/selectors'
6+
import { cameras } from '@src/store/camera/selectors'
87
import { CAMERA_VIEW_MODE } from '@src/utils/enums'
98

109
const CameraHandler = () => {
1110
return (
1211
<Show
13-
when={Object.keys(cameras()).length > 0}
12+
when={cameras().length > 0}
1413
fallback={
1514
<div class="flex flex-col items-center justify-center w-full h-full">
1615
<Text size="2xl" class="font-bold tracking-[0.10rem] text-[white]">
1716
No cameras found
1817
</Text>
1918
</div>
2019
}>
21-
<For each={Object.values(cameras())}>
22-
{(value) => {
23-
const camera = value as ICamera
20+
<For each={cameras()}>
21+
{(camera) => {
2422
return <Camera {...camera} />
2523
}}
2624
</For>
2725
</Show>
2826
)
2927
}
3028

31-
/* {
32-
;() => {
33-
for (const values of _cameras.values()) {
34-
const value = values as ICamera
35-
return <Camera {...value} />
36-
}
37-
}
38-
} */
39-
4029
const Main = () => {
4130
const [selectMode, setSelectMode] = createSignal(CAMERA_VIEW_MODE.GRIP)
4231
return (

‎GUI/ETVR/src/routes/Routes.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import { useRoutes } from '@solidjs/router'
33
import { lazy, onMount } from 'solid-js'
44
import { routes } from '.'
5-
import { setConnectedUser } from '@src/store/mdns/mdns'
6-
import { connectedUserName } from '@src/store/mdns/selectors'
5+
import { connectedUserName } from '@src/store/ui/selectors'
6+
import { setConnectedUser } from '@src/store/ui/ui'
77

88
const Header = lazy(() => import('@components/header/index'))
99

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,11 @@ export const defaultState: IRest = {
4242
* const endpoint = endpointsMap.get('ping')
4343
* endpoint.url // '/ping'
4444
* endpoint.type // 'GET'
45-
*
45+
*
4646
* These endpoints are built into the REST API server on the ESP32
47-
*
47+
*
4848
* @description
49-
* **URL Example** - `http://<ip>:81/control/command/<endpoint>`
49+
* **URL Example** - `http://<ip>:81/control/command/<endpoint>`
5050
*/
5151
export const endpointsMap: Map<string, IEndpoint> = new Map<string, IEndpoint>([
5252
['ping', { url: '/control/command/ping', type: RESTType.GET }],

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

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { createMemo } from 'solid-js'
2+
import { createStore, produce } from 'solid-js/store'
3+
4+
export enum CameraStatus {
5+
ACTIVE = 'ACTIVE',
6+
DISABLED = 'DISABLED',
7+
LOADING = 'LOADING',
8+
FAILED = 'FAILED',
9+
}
10+
11+
export enum CameraType {
12+
WIRELESS = 'WIRELESS',
13+
}
14+
15+
export interface ICamera {
16+
status: CameraStatus
17+
type: CameraType
18+
address: string
19+
activeCameraSection: string
20+
}
21+
22+
const tempCameraComponents: ICamera[] = [
23+
{
24+
status: CameraStatus.LOADING,
25+
type: CameraType.WIRELESS,
26+
address: '192.168.0.204',
27+
activeCameraSection: 'Left Eye',
28+
},
29+
{
30+
status: CameraStatus.LOADING,
31+
type: CameraType.WIRELESS,
32+
address: '192.168.0.232',
33+
activeCameraSection: 'Right Eye',
34+
},
35+
]
36+
37+
interface ICameraStore {
38+
cameras: ICamera[]
39+
}
40+
41+
export const defaultState: ICameraStore = {
42+
cameras: tempCameraComponents,
43+
}
44+
45+
const [state, setState] = createStore<ICameraStore>(defaultState)
46+
47+
export const setAddCamera = (camera: ICamera) => {
48+
setState(
49+
produce((s) => {
50+
s.cameras.push(camera)
51+
})
52+
)
53+
}
54+
55+
export const setRemoveCamera = (camera: ICamera) => {
56+
setState(
57+
produce((s) => {
58+
s.cameras = s.cameras.filter((c: { address: string }) => c.address !== camera.address)
59+
})
60+
)
61+
}
62+
63+
export const setCameraStatus = (camera: ICamera, status: CameraStatus) => {
64+
setState(
65+
produce((s) => {
66+
s.cameras = s.cameras.filter((c: { address: string }) => c.address !== camera.address)
67+
s.cameras.push({ ...camera, status })
68+
})
69+
)
70+
}
71+
72+
export const cameraState = createMemo(() => state)

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

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { createMemo } from 'solid-js'
2+
import { cameraState } from './camera'
3+
4+
export const cameras = createMemo(() => cameraState().cameras)
5+
export const cameraAddresses = createMemo(() =>
6+
cameraState().cameras.map((c: { address: string }) => c.address)
7+
)
8+
export const cameraStatus = createMemo(() =>
9+
cameraState().cameras.map((c: { status: string }) => c.status)
10+
)

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

+5-64
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,27 @@
11
import { createMemo } from 'solid-js'
22
import { createStore, produce } from 'solid-js/store'
33

4-
export enum CameraStatus {
4+
export enum MdnsStatus {
55
ACTIVE = 'ACTIVE',
66
DISABLED = 'DISABLED',
77
LOADING = 'LOADING',
88
FAILED = 'FAILED',
99
}
1010

11-
export enum CameraType {
12-
WIRELESS = 'WIRELESS',
13-
}
14-
15-
export interface ICamera {
16-
status: CameraStatus
17-
type: CameraType
18-
address: string
19-
activeCameraSection: string
20-
}
21-
2211
interface IMdnsStore {
23-
connectedUser: string
24-
restClient: string
25-
camerasMap: ICameraComponents
26-
}
27-
28-
interface ICameraComponents {
29-
[key: string]: ICamera
30-
}
31-
32-
/* TEMPORARY - REMOVE WHEN NOT NEEDED */
33-
/* const staticCamerasGenerator = new Array(5).fill(0).map(() => ({
34-
status: CameraStatus.LOADING,
35-
type: CameraType.WIRELESS,
36-
address: `${Math.floor(Math.random() * 255)}`,
37-
activeCameraSection: 'Left Eye',
38-
})) */
39-
40-
const tempCameraComponents: ICameraComponents = {
41-
'192.168.0.204': {
42-
status: CameraStatus.LOADING,
43-
type: CameraType.WIRELESS,
44-
address: '192.168.0.204',
45-
activeCameraSection: 'Left Eye',
46-
},
47-
'192.168.0.232': {
48-
status: CameraStatus.LOADING,
49-
type: CameraType.WIRELESS,
50-
address: '192.168.0.232',
51-
activeCameraSection: 'Left Eye',
52-
},
53-
12+
mdnsStatus: MdnsStatus
5413
}
5514

5615
export const defaultState: IMdnsStore = {
57-
connectedUser: '',
58-
restClient: '',
59-
camerasMap: tempCameraComponents
16+
mdnsStatus: MdnsStatus.DISABLED,
6017
}
6118

6219
const [state, setState] = createStore<IMdnsStore>(defaultState)
6320

64-
export const setConnectedUser = (userName: string) => {
65-
setState(
66-
produce((s) => {
67-
s.connectedUser = userName
68-
})
69-
)
70-
}
71-
72-
export const setAddCamera = (camera: ICamera) => {
73-
setState(
74-
produce((s) => {
75-
s.camerasMap[camera.address] = camera
76-
})
77-
)
78-
}
79-
80-
export const setRemoveCamera = (cameraAddress: string) => {
21+
export const setMdnsStatus = (status: MdnsStatus) => {
8122
setState(
8223
produce((s) => {
83-
delete s.camerasMap[cameraAddress]
24+
s.mdnsStatus = status
8425
})
8526
)
8627
}

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

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import { createMemo } from 'solid-js'
22
import { mdnsState } from './mdns'
33

4-
export const connectedUserName = createMemo(() => mdnsState().connectedUser)
5-
export const cameras = createMemo(() => mdnsState().camerasMap)
6-
export const cameraAddresses = createMemo(() => Object.keys(mdnsState().camerasMap))
4+
export const mdnsStatus = createMemo(() => mdnsState().mdnsStatus)

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

+4-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
11
import { createMemo } from 'solid-js'
22
import { uiState } from './ui'
33

4-
export const connectingStatus = createMemo(() => {
5-
return uiState().connecting
6-
})
7-
8-
export const openModalStatus = createMemo(() => {
9-
return uiState().openModal
10-
})
11-
12-
export const menuOpenStatus = createMemo(() => {
13-
return uiState().menuOpen
14-
})
4+
export const connectingStatus = createMemo(() => uiState().connecting)
5+
export const openModalStatus = createMemo(() => uiState().openModal)
6+
export const menuOpenStatus = createMemo(() => uiState().menuOpen)
7+
export const connectedUserName = createMemo(() => uiState().connectedUser)

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

+10
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,15 @@ interface IUiStore {
2828
connecting?: boolean
2929
openModal?: boolean
3030
menuOpen?: IMenuOpen | null
31+
connectedUser: string
3132
}
3233

3334
export const defaultState = {
3435
loader: { [loaderType.MDNS_CONNECTING]: false, [loaderType.REST_CLIENT]: false },
3536
connecting: false,
3637
openModal: false,
3738
menuOpen: null,
39+
connectedUser: '',
3840
}
3941

4042
const [state, setState] = createStore<IUiStore>(defaultState)
@@ -66,4 +68,12 @@ export const setOpenModal = (openModal: boolean) => {
6668
)
6769
}
6870

71+
export const setConnectedUser = (userName: string) => {
72+
setState(
73+
produce((s) => {
74+
s.connectedUser = userName
75+
})
76+
)
77+
}
78+
6979
export const uiState = createMemo(() => state)

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { invoke } from '@tauri-apps/api/tauri'
22
import { createSignal, createEffect } from 'solid-js'
33
import { setRestStatus, RESTStatus } from '@src/store/api/restAPI'
44
import { endpoints } from '@src/store/api/selectors'
5-
import { cameras } from '@src/store/mdns/selectors'
5+
import { cameras } from '@src/store/camera/selectors'
66

77
interface IProps {
88
endpointName: string

‎GUI/ETVR/src/utils/utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable */
22

3-
import { CameraStatus } from '@src/store/mdns/mdns'
3+
import { CameraStatus } from '@src/store/camera/camera'
44

55
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'
66
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'

0 commit comments

Comments
 (0)