Merge pull request #20 from PepperDash/error-box-update

Error box update & theme saving/recall

src/lib/shared/hooks/interfaces/index.ts

@@ -29,3 +29,4 @@ export * from "./useITransport";
 export * from "./useMobileControlTouchpanelController";
 export * from "./useTwoWayDisplayBase";
 export * from "./useIRunDefaultPresentRoute";
+export * from "./useITheme";

src/lib/shared/hooks/interfaces/useITheme.ts

@@ -0,0 +1,22 @@
+import { useGetDevice } from "src/lib";
+import { MobileControlTouchpanelState } from "src/lib/types/state/state/MobileControlTouchpanelState";
+import { useWebsocketContext } from "src/lib/utils";
+
+export function useITheme(touchpanelKey: string):IThemeReturn {
+  const { sendMessage } = useWebsocketContext();
+  const tpState = useGetDevice<MobileControlTouchpanelState>(touchpanelKey);
+
+  const saveTheme = (theme: string) => {
+    sendMessage(`/device/${touchpanelKey}/saveTheme`, { value: theme });
+  }
+
+  return {
+    currentTheme: tpState?.theme,
+    saveTheme,
+  }
+}
+
+interface IThemeReturn {
+  currentTheme?: string;
+  saveTheme: (theme: string) => void;
+}

src/lib/shared/layout/ErrorBox.tsx

@@ -1,7 +1,23 @@
-import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { useNavigate, useRouteError, isRouteErrorResponse } from "react-router-dom";
 
 export const ErrorBox = () => {
+  const [showError, setShowError] = useState(false);
   const navigate = useNavigate();
+  const error = useRouteError();
+
+  let errorMessage: string;
+
+  if (isRouteErrorResponse(error)) {
+    errorMessage = error.statusText;
+  } else if (error instanceof Error) {
+    errorMessage = error.message;
+  } else if (typeof error === 'string') { 
+    errorMessage = error;
+  } else {
+    console.error(error);
+    errorMessage = 'Unknown error';
+  }
 
   return (
     <div className="d-flex flex-column align-items-center gap-5">
@@ -13,6 +29,10 @@ export const ErrorBox = () => {
       <button className="btn btn-primary p-2" onClick={() => navigate(-1)}>
         Go Back
       </button>
+      <button className="btn btn-primary p-2" onClick={() => setShowError(!showError)}>
+        {showError ? 'Hide error message' : 'Show error message'}
+      </button>        
+      {showError && <p>{errorMessage}</p>}
     </div>
   );
 };

src/lib/store/runtimeConfig/runtimeConfig.slice.ts

@@ -14,6 +14,7 @@ const initialState: RuntimeConfigState = {
     disconnectionMessage: '',
     token: '',
     currentRoomKey: '',
+    touchpanelKey: '',
     roomData: {
         clientId: '',
         roomKey: '',
@@ -57,6 +58,9 @@ const runtimeConfigSlice = createSlice({
             state.roomData.userCode = action.payload.userCode;
             state.roomData.qrUrl = action.payload.qrUrl;
         },
+        setTouchpanelKey(state, action: PayloadAction<string>) {
+            state.touchpanelKey = action.payload;
+        }
     }
 })
 
@@ -71,6 +75,7 @@ export interface RuntimeConfigState {
     token: string;
     roomData: RoomData;
     currentRoomKey: string;
+    touchpanelKey: string;
 }
 
 export interface UserCode {

src/lib/store/runtimeConfig/runtimeSelectors.ts

@@ -10,4 +10,8 @@ export const useSystemUuid = () => useAppSelector((state) => state.runtimeConfig
 
 export const useUserCode = () => useAppSelector((state) => state.runtimeConfig.roomData.userCode);
 
-export const useServerIsRunningOnProcessorHardware = () => useAppSelector((state) => state.runtimeConfig.serverIsRunningOnProcessorHardware);
+export const useServerIsRunningOnProcessorHardware = () => useAppSelector((state) => state.runtimeConfig.serverIsRunningOnProcessorHardware);
+
+export const useTouchpanelKey = () => useAppSelector((state) => state.runtimeConfig.touchpanelKey);
+
+export const useIsTouchpanel = () => useAppSelector((state) => state.runtimeConfig.touchpanelKey !== '');

src/lib/types/state/state/MobileControlTouchpanelState.ts

@@ -1,6 +1,6 @@
 import { DeviceState } from './DeviceState';
 
-export interface MobileControlTouchpanelState extends DeviceState, ITswAppControlMessengerState, ITswZoomControlMessengerState  {
+export interface MobileControlTouchpanelState extends DeviceState, ITswAppControlMessengerState, ITswZoomControlMessengerState, IThemeMessengerState  {
 
 }
 
@@ -11,4 +11,8 @@ interface ITswAppControlMessengerState {
 interface ITswZoomControlMessengerState {
   inCall?: boolean;
   incomingCall?: boolean;
+}
+
+interface IThemeMessengerState {
+  theme?: string;
 }

src/lib/utils/WebsocketProvider.tsx

@@ -267,7 +267,14 @@ const WebsocketProvider = ({ children }: { children: ReactNode }) => {
               return;
             }
             if (message.type.startsWith("/system/")) {
-              switch (message.type) {                
+              switch (message.type) {          
+                case "/system/touchpanelKey":
+                  store.dispatch(
+                    runtimeConfigActions.setTouchpanelKey(
+                      message.content as string
+                    )
+                  );
+                  break;
                 case "/system/roomKey":
                   store.dispatch(
                     runtimeConfigActions.setCurrentRoomKey(