Skip to content

Commit d88c36a

Browse files
ndorinndorin
committed
feat: integrate appId handling across components and enhance mobile control functionality
1 parent cb5b37c commit d88c36a

13 files changed

Lines changed: 305 additions & 149 deletions

‎src/App.tsx‎

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { Navigate, Route, Routes } from "react-router-dom";
44
import ConfigFile from "./features/ConfigFile";
55
import DebugConsole from "./features/DebugConsole/DebugConsole";
66
import DeviceList from "./features/DeviceList";
7-
import MainLayout from './features/MainLayout';
7+
import MainLayout from "./features/MainLayout";
8+
import MobileControl from './features/MobileControl';
89
import Types from "./features/Types";
910
import Versions from "./features/Versions";
1011
import { LogMessage } from "./shared/types/LogMessage";
@@ -23,8 +24,9 @@ function App() {
2324
const [stopSession] = useStopDebugSessionMutation();
2425

2526
//* FUNCTIONS *******************************************************/
26-
const join = async () => {
27-
const res = await startSession().unwrap();
27+
const join = async (appId: string) => {
28+
if (!appId) return;
29+
const res = await startSession({ appId }).unwrap();
2830

2931
console.log("Joining debug session at " + res.url);
3032

@@ -46,12 +48,13 @@ function App() {
4648
setWebsocket(ws);
4749
};
4850

49-
const stop = () => {
51+
const stop = (appId: string) => {
5052
if (!websocket) return;
5153

5254
console.log("Stopping debug session");
5355
websocket.close();
54-
stopSession();
56+
if (!appId) return;
57+
stopSession({ appId });
5558
};
5659

5760
const clear = () => {
@@ -67,29 +70,30 @@ function App() {
6770
};
6871

6972
return (
70-
<Suspense fallback={null}>
71-
<Routes>
72-
<Route path="/" element={<Navigate to="/app01/versions" replace />} />
73-
<Route path=":appId" element={<MainLayout isConnected={isConnected} />}>
74-
<Route path="versions" element={<Versions />} />
75-
<Route path="config" element={<ConfigFile />} />
76-
<Route path="devices" element={<DeviceList />} />
77-
<Route path="types" element={<Types />} />
78-
<Route
79-
path="console"
80-
element={
81-
<DebugConsole
82-
messages={messages}
83-
isConnected={isConnected}
84-
join={join}
85-
stop={stop}
86-
clear={clear}
87-
/>
88-
}
73+
<Suspense fallback={null}>
74+
<Routes>
75+
<Route path="/" element={<Navigate to="/app01/versions" replace />} />
76+
<Route path=":appId" element={<MainLayout isConnected={isConnected} />}>
77+
<Route path="versions" element={<Versions />} />
78+
<Route path="config" element={<ConfigFile />} />
79+
<Route path="devices" element={<DeviceList />} />
80+
<Route path="types" element={<Types />} />
81+
<Route path="mobileControl" element={<MobileControl />} />
82+
<Route
83+
path="console"
84+
element={
85+
<DebugConsole
86+
messages={messages}
87+
isConnected={isConnected}
88+
join={join}
89+
stop={stop}
90+
clear={clear}
8991
/>
90-
</Route>
91-
</Routes>
92-
</Suspense>
92+
}
93+
/>
94+
</Route>
95+
</Routes>
96+
</Suspense>
9397
);
9498
}
9599

‎src/features/ConfigFile.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { Editor, OnMount, useMonaco } from "@monaco-editor/react";
2+
import { skipToken } from "@reduxjs/toolkit/query";
23
import { useEffect, useRef } from "react";
4+
import useAppParams from "../shared/hooks/useAppParams";
35
import { useGetConfigQuery } from "../store/apiSlice";
46

57
type IConfigViewer = Parameters<OnMount>[0];
68

79
const ConfigFile = () => {
8-
const { data: config } = useGetConfigQuery();
10+
const { appId } = useAppParams();
11+
const { data: config } = useGetConfigQuery(appId ? { appId } : skipToken);
912

1013
if (!config) {
1114
return <div>Loading...</div>;
@@ -17,7 +20,7 @@ const ConfigFile = () => {
1720
export default ConfigFile;
1821

1922
const ConfigFileRender = ({ config }: { config: any }) => {
20-
console.log("ConfigFileRender == ", config);
23+
console.log("ConfigFileRender == ", config);
2124
const monaco = useMonaco();
2225
const editorRef = useRef<IConfigViewer | null>(null);
2326

‎src/features/DebugConsole/DebugConsole.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import { skipToken } from '@reduxjs/toolkit/query';
12
import { useState } from "react";
23
import { Button, Form } from "react-bootstrap";
34
import ListFiltersHeader from "../../shared/ListFiltersHeader";
5+
import useAppParams from '../../shared/hooks/useAppParams';
46
import { LogMessage } from '../../shared/types/LogMessage';
57
import {
68
useGetDoNotLoadConfigOnNextBootQuery,
@@ -17,9 +19,10 @@ import { useFilteredMessages } from "./hooks/useFilteredMessages";
1719
const DebugConsole = ({messages, isConnected, join, stop, clear}: DebugConsoleProps) => {
1820
//* HOOKS ***********************************************************/
1921
const [showModal, setShowModal] = useState(false);
22+
const { appId } = useAppParams();
2023

2124
const { data: doNotLoadConfigOnNextBoot } =
22-
useGetDoNotLoadConfigOnNextBootQuery();
25+
useGetDoNotLoadConfigOnNextBootQuery(appId ? { appId } : skipToken);
2326

2427
const [setDoNotLoadConfig] = useSetDoNotLoadConfigOnNextBootMutation();
2528
const [restart] = useSetRestartMutation();
@@ -33,11 +36,12 @@ const DebugConsole = ({messages, isConnected, join, stop, clear}: DebugConsolePr
3336
};
3437

3538
const clickLoadConfig = () => {
39+
if(!appId) return;
3640
console.log("Loading config");
37-
loadConfig();
41+
loadConfig({ appId });
3842
};
3943

40-
if (!doNotLoadConfigOnNextBoot) return null;
44+
if (!doNotLoadConfigOnNextBoot || !appId) return null;
4145

4246
//* RENDER **********************************************************/
4347
return (
@@ -48,12 +52,12 @@ const DebugConsole = ({messages, isConnected, join, stop, clear}: DebugConsolePr
4852
</div>
4953
<div className="d-flex align-items-center justify-content-start mb-2">
5054
{!isConnected ? (
51-
<Button className="mx-1" variant="primary" size="sm" onClick={join}>
55+
<Button className="mx-1" variant="primary" size="sm" onClick={() => join(appId)}>
5256
Start Debug Session
5357
</Button>
5458
)
5559
: (
56-
<Button className="mx-1" variant="primary" size="sm" onClick={stop}>
60+
<Button className="mx-1" variant="primary" size="sm" onClick={() => stop(appId)}>
5761
Stop Debug Session
5862
</Button>
5963
)}
@@ -65,11 +69,12 @@ const DebugConsole = ({messages, isConnected, join, stop, clear}: DebugConsolePr
6569
name="doNotLoadConfig"
6670
id="doNotLoadConfig"
6771
checked={doNotLoadConfigOnNextBoot?.doNotLoadConfigOnNextBoot}
68-
onChange={() =>
72+
onChange={() => {
73+
if(!appId) return;
6974
setDoNotLoadConfig(
70-
!doNotLoadConfigOnNextBoot?.doNotLoadConfigOnNextBoot
75+
{ appId, doNotLoadConfigOnNextBoot: !doNotLoadConfigOnNextBoot?.doNotLoadConfigOnNextBoot }
7176
)
72-
}
77+
}}
7378
/>
7479
{doNotLoadConfigOnNextBoot?.doNotLoadConfigOnNextBoot && (
7580
<Button
@@ -107,7 +112,8 @@ const DebugConsole = ({messages, isConnected, join, stop, clear}: DebugConsolePr
107112
show={showModal}
108113
handleClose={() => setShowModal(false)}
109114
handleConfirm={() => {
110-
restart();
115+
if(!appId) return;
116+
restart({ appId });
111117
setShowModal(false);
112118
}}
113119
/>
@@ -121,8 +127,8 @@ export default DebugConsole;
121127
interface DebugConsoleProps {
122128
messages: LogMessage[];
123129
isConnected: boolean;
124-
join: () => void;
125-
stop: () => void;
130+
join: (appId: string) => void;
131+
stop: (appId: string) => void;
126132
clear: () => void;
127133
}
128134

‎src/features/DebugConsole/DebugFilters.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
import { useMemo } from 'react';
33
import { FilterClearButton } from '../../shared/FilterClearButton';
44
import { FilterDropdownSearchParams } from '../../shared/FilterDropdownSearchParams';
5+
import useAppParams from '../../shared/hooks/useAppParams';
56
import { IdLabel } from '../../shared/types/IdLabel';
67
import { useGetDevicesQuery } from '../../store/apiSlice';
78
import { debugConsts, debugSearchParams, logLevelOpts } from "./debugConsts";
89

910

1011
export const DebugFilters = () => {
11-
const { data: devices } = useGetDevicesQuery();
12+
const { appId } = useAppParams();
13+
const { data: devices } = useGetDevicesQuery(appId ? { appId } : skipToken);
1214

1315
const items = useMemo(() => {
1416
if (!devices) return [{ id: debugConsts.GLOBAL, label: "Global"}];

‎src/features/DebugConsole/MinimumLogLevelDropdown.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1+
import { skipToken } from '@reduxjs/toolkit/query';
12
import { Dropdown } from "react-bootstrap";
3+
import useAppParams from '../../shared/hooks/useAppParams';
24
import { IconDarkChevronDown } from '../../shared/icons';
35
import {
46
useGetMinimumLogLevelQuery,
57
useSetMinimumLogLevelMutation,
68
} from "../../store/apiSlice";
79

810
const MinimumLogLevelDropdown = () => {
9-
const { data: currentLogLevel } = useGetMinimumLogLevelQuery();
11+
const { appId } = useAppParams();
12+
const { data: currentLogLevel } = useGetMinimumLogLevelQuery(appId ? { appId } : skipToken);
1013

1114
const [setLogLevel] = useSetMinimumLogLevelMutation();
1215

13-
if (!currentLogLevel) return null;
16+
if (!currentLogLevel || !appId) return null;
1417

1518
return (
1619
<Dropdown>
@@ -25,42 +28,42 @@ const MinimumLogLevelDropdown = () => {
2528
<Dropdown.Menu className="shadow">
2629
<Dropdown.Item
2730
onClick={() => {
28-
setLogLevel("Information");
31+
setLogLevel({ appId, minimumLevel: "Information" });
2932
}}
3033
>
3134
Information
3235
</Dropdown.Item>
3336
<Dropdown.Item
3437
onClick={() => {
35-
setLogLevel("Warning");
38+
setLogLevel({ appId, minimumLevel: "Warning" });
3639
}}
3740
>
3841
Warning
3942
</Dropdown.Item>
4043
<Dropdown.Item
4144
onClick={() => {
42-
setLogLevel("Error");
45+
setLogLevel({ appId, minimumLevel: "Error" });
4346
}}
4447
>
4548
Error
4649
</Dropdown.Item>
4750
<Dropdown.Item
4851
onClick={() => {
49-
setLogLevel("Fatal");
52+
setLogLevel({ appId, minimumLevel: "Fatal" });
5053
}}
5154
>
5255
Fatal
5356
</Dropdown.Item>
5457
<Dropdown.Item
5558
onClick={() => {
56-
setLogLevel("Debug");
59+
setLogLevel({ appId, minimumLevel: "Debug" });
5760
}}
5861
>
5962
Debug
6063
</Dropdown.Item>
6164
<Dropdown.Item
6265
onClick={() => {
63-
setLogLevel("Verbose");
66+
setLogLevel({ appId, minimumLevel: "Verbose" });
6467
}}
6568
>
6669
Verbose

‎src/features/DeviceDetail.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import { skipToken } from '@reduxjs/toolkit/query';
12
import { useState } from "react";
23
import { Button, Form, Modal } from "react-bootstrap";
4+
import useAppParams from '../shared/hooks/useAppParams';
35
import {
46
DeviceFeedbacks,
57
DeviceMethods,
@@ -12,15 +14,11 @@ import {
1214
} from "../store/apiSlice";
1315

1416
const DeviceDetail = ({ item }: DeviceDetailProps) => {
15-
const { data: properties } = useGetDevicePropertiesQuery(item.Key, {
16-
skip: !item?.Key,
17-
});
18-
const { data: methods } = useGetDeviceMethodsQuery(item.Key, {
19-
skip: !item?.Key,
20-
});
21-
const { data: feedbacks } = useGetDeviceFeedbacksQuery(item.Key, {
22-
skip: !item?.Key,
23-
});
17+
const { appId } = useAppParams();
18+
const { data: properties } = useGetDevicePropertiesQuery(appId && item?.Key ? { appId, key: item.Key } : skipToken
19+
);
20+
const { data: methods } = useGetDeviceMethodsQuery(appId && item?.Key ? { appId, key: item.Key } : skipToken);
21+
const { data: feedbacks } = useGetDeviceFeedbacksQuery(appId && item?.Key ? { appId, key: item.Key } : skipToken);
2422

2523
console.log("DeviceDetail == ", { item, properties, methods, feedbacks });
2624

@@ -50,6 +48,7 @@ const DeviceDetailRender = ({
5048
feedbacks,
5149
deviceKey,
5250
}: DeviceDetailRenderProps) => {
51+
const { appId } = useAppParams();
5352
const [selectedMethod, setSelectedMethod] = useState<DeviceMethods | null>(null);
5453
const [paramValues, setParamValues] = useState<Record<string, string>>({});
5554
const [executeMethod, { isLoading: isExecuting }] = useSetDeviceJsonCommandMutation();
@@ -65,8 +64,8 @@ const DeviceDetailRender = ({
6564
};
6665

6766
const handleExecute = async () => {
68-
if (!selectedMethod) return;
69-
await executeMethod({ deviceKey, methodName: selectedMethod.Name, params: Object.values(paramValues) });
67+
if (!selectedMethod || !appId) return;
68+
await executeMethod({ appId, deviceKey, methodName: selectedMethod.Name, params: Object.values(paramValues) });
7069
handleClose();
7170
};
7271

‎src/features/MainLayout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ const MainLayout = ({ isConnected }: { isConnected: boolean }) => {
66
return (
77
<div className="d-flex flex-column overflow-hidden h-100">
88
<TopNav isConnected={isConnected} />
9-
<Outlet />
9+
<div className='p-2 overflow-hidden h-100'>
10+
<Outlet />
11+
</div>
1012
</div>
1113
)
1214
}

0 commit comments

Comments
 (0)