Merge pull request #19 from PepperDash/websocket-updates

Websocket updates

src/lib/shared/disconnectedMessage/DisconnectedMessage.module.scss

@@ -0,0 +1,3 @@
+.mwfit {
+  max-width: fit-content;
+}

src/lib/shared/disconnectedMessage/DisconnectedMessage.tsx

@@ -1,12 +1,18 @@
+import { useError, useShowReconnect, useWebsocketContext } from "src/lib";
+import classes from './DisconnectedMessage.module.scss';
+
 const DisconnectedMessage = () => {
-
-  return<>
+  const { reconnect } = useWebsocketContext();
+  const errorMessage = useError();
+  const showReconnect = useShowReconnect();
 
-    <div className="disconnected-message">
-      <h1>Disconnected</h1>
-      <p>Reconnecting...</p>
-    </div>
 
+  return<>
+    <div className={`disconnected-message ${classes.mwfit} mx-auto text-center`}>
+      <h1>Disconnected</h1>      
+      {errorMessage && <h5>{errorMessage}</h5>}
+      {showReconnect && <button className="btn btn-secondary btn-lg" onClick={reconnect}>Reconnect</button>}
+    </div>
   </>
 }
 

src/lib/shared/hooks/index.ts

@@ -4,3 +4,5 @@ export * from "./useGetDeviceStateFromRoomConfiguration";
 export * from "./usePressHoldRelease";
 export * from "./useRoomIBasicVolumeWithFeedback";
 export * from "./useTimeAndDate";
+export * from "./useOverflow";
+export * from "./useScroll";

src/lib/shared/hooks/useOverflow.ts

@@ -0,0 +1,36 @@
+import { RefObject, useLayoutEffect, useState } from "react";
+
+export function useOverflow<T extends HTMLElement | undefined>(ref:RefObject<T | undefined>, callback?:(hasOverflowVertical: boolean, hasOverflowHorizontal: boolean) => void):UseIsOverflowProps {
+  const [overflowHorizontal, setOverflowHorizontal] = useState(false);
+  const [overflowVertical, setOverflowVertical] = useState(false);
+
+
+  useLayoutEffect(() => {
+    const { current } = ref;
+
+    const trigger = () => {
+      const hasOverflowVertical = current && current.scrollHeight > current.clientHeight;
+      const hasOverflowHorizontal = current && current.scrollWidth > current.clientWidth;
+
+      setOverflowVertical(hasOverflowVertical ?? false);
+      setOverflowHorizontal(hasOverflowHorizontal ?? false);
+
+      if (!callback) return;
+
+      callback(hasOverflowVertical ?? false, hasOverflowHorizontal ?? false);
+    }
+
+    if (!current) return;
+
+    trigger();
+  }, [ref, callback])
+
+  return { overflowHorizontal, overflowVertical };
+}
+
+export interface UseIsOverflowProps {
+  overflowHorizontal: boolean;
+  overflowVertical: boolean;
+}
+
+export default useOverflow;

src/lib/shared/hooks/useScroll.ts

@@ -0,0 +1,55 @@
+import { RefObject, useLayoutEffect, useState } from "react";
+
+export function useScroll<T extends HTMLElement | undefined>(ref: RefObject<T | undefined>): UseScrollProps {  
+
+  const [horizontalScrollPosition, setHorizontalScrollPosition] = useState(ref?.current?.scrollLeft ?? 0);
+  const [verticalScrollPosition, setVerticalScrollPosition] = useState(ref?.current?.scrollTop ?? 0);
+
+  const scrollHorizontal = (increment: number) => {
+    const { current } = ref;
+
+    if (!current) return;
+
+    console.log(current.scrollLeft);
+
+    current.scrollLeft += increment;
+
+    console.log(current.scrollLeft);
+  }
+
+  const scrollVertical = (increment: number) => {
+    const { current } = ref;
+
+    if (!current) return;
+
+    console.log(current.scrollTop);
+
+    current.scrollTop += increment;
+
+    console.log(current.scrollTop);
+  }
+
+  useLayoutEffect(() => {
+    const { current } = ref;
+
+    const trigger = () => {           
+      setHorizontalScrollPosition(current?.scrollLeft ?? 0);
+      setVerticalScrollPosition(current?.scrollTop ?? 0); 
+    }
+
+    if (!current) return;
+
+    trigger();
+  }, [ref])
+
+  return {horizontalScrollPosition, verticalScrollPosition, scrollHorizontal, scrollVertical};
+}
+
+export default useScroll;
+
+export interface UseScrollProps {
+  scrollHorizontal: (increment: number) => void;
+  scrollVertical: (increment: number) => void;
+  horizontalScrollPosition: number;
+  verticalScrollPosition: number;
+}

src/lib/store/runtimeConfig/runtimeSelectors.ts

@@ -4,4 +4,10 @@ export const useWsIsConnected = () => useAppSelector((state) => state.runtimeCon
 
 export const useRoomKey = () => useAppSelector((state) => state.runtimeConfig.currentRoomKey);
 
-export const useClientId = () => useAppSelector((state) => state.runtimeConfig.roomData.clientId);
+export const useClientId = () => useAppSelector((state) => state.runtimeConfig.roomData.clientId);
+
+export const useSystemUuid = () => useAppSelector((state) => state.runtimeConfig.roomData.systemUuid);
+
+export const useUserCode = () => useAppSelector((state) => state.runtimeConfig.roomData.userCode);
+
+export const useServerIsRunningOnProcessorHardware = () => useAppSelector((state) => state.runtimeConfig.serverIsRunningOnProcessorHardware);

src/lib/store/ui/ui.slice.ts

@@ -1,6 +1,8 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 
 const initialState: UiConfigState = {
+  showReconnect: false,
+  error: '',
   modalVisibility: {
     showShutdownModal: false,
     showIncomingCallModal: false,
@@ -38,10 +40,18 @@ const uiSlice = createSlice({
 
       state.popoverVisibility[action.payload.popoverGroup][action.payload.popoverId] = action.payload.value;
     },
+    setErrorMessage(state, action: PayloadAction<string>) {
+      state.error = action.payload;
+    },
+    setShowReconnect(state, action: PayloadAction<boolean>) { 
+      state.showReconnect = action.payload;
+    }
   }
 })
 
 export interface UiConfigState {
+  showReconnect: boolean;
+  error: string;
   modalVisibility: Record<modalType | string, boolean>;
   popoverVisibility: Record<popoverGroup | string, Record<string, boolean>>;
 }

src/lib/store/ui/uiSelectors.ts

@@ -17,3 +17,7 @@ export const useGetCurrentPopoverIdForGroup = (popoverGroup: string) => useAppSe
 });
 
 export const useShowPopoverById = (popoverGroup: string, popoverId: string) => useAppSelector((state) => state.ui.popoverVisibility[popoverGroup]?.[popoverId]);
+
+export const useError = () => useAppSelector((state) => state.ui.error);
+
+export const useShowReconnect = () => useAppSelector((state) => state.ui.showReconnect);

src/lib/utils/WebsocketContext.ts

@@ -6,13 +6,15 @@ export interface WebsocketContextType {
   sendSimpleMessage: (type: string, payload: boolean | number | string ) => void;
   addEventHandler: (eventType: string, key: string, callback: (data: Message) => void) => void;
   removeEventHandler: (eventType: string, key: string) => void;
+  reconnect: () => void;
 }
 
 const WebsocketContext = createContext<WebsocketContextType>({
   sendMessage: () => null,
   sendSimpleMessage: () => null,
   addEventHandler: () => null,
   removeEventHandler: () => null,
+  reconnect: () => null,
 });
 
 export default WebsocketContext;