[CastIt.Server.ClientApp] Added a hub context

Wolfteam · Aug 21, 2021 · 140eaa5 · 140eaa5
1 parent 4fb2d17
commit 140eaa5
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 6 deletions.
diff --git a/CastIt.Server/ClientApp/src/app.tsx b/CastIt.Server/ClientApp/src/app.tsx
@@ -7,6 +7,7 @@ import { AppRoutes, PlayerRoutes } from './routes';
 import { Suspense } from 'react';
 import ServerMessage from './components/server_message';
 import { TranslationContextProvider } from './context/translations.context';
+import { CastItHubContextProvider } from './context/castit_hub.context';
 
 const theme = createTheme({
     palette: {
@@ -42,12 +43,14 @@ function App() {
                 <ThemeProvider theme={theme}>
                     <CssBaseline />
                     <TranslationContextProvider>
-                        <ServerMessage>
-                            <Suspense fallback={loading}>
-                                <AppRoutes />
-                                <PlayerRoutes />
-                            </Suspense>
-                        </ServerMessage>
+                        <CastItHubContextProvider>
+                            <ServerMessage>
+                                <Suspense fallback={loading}>
+                                    <AppRoutes />
+                                    <PlayerRoutes />
+                                </Suspense>
+                            </ServerMessage>
+                        </CastItHubContextProvider>
                     </TranslationContextProvider>
                 </ThemeProvider>
             </BrowserRouter>

diff --git a/CastIt.Server/ClientApp/src/context/castit_hub.context.tsx b/CastIt.Server/ClientApp/src/context/castit_hub.context.tsx
@@ -0,0 +1,34 @@
+import { createContext, Dispatch, SetStateAction, useContext, useEffect } from 'react';
+import { CastItHubService } from '../services/castithub.service';
+
+interface ICastItHubContext {
+    connection: CastItHubService;
+    isConnected: boolean;
+    isError: boolean;
+}
+
+const initialValue: ICastItHubContext = {
+    connection: new CastItHubService(),
+    isConnected: false,
+    isError: false,
+};
+
+export const CastItHubContext = createContext<[ICastItHubContext, Dispatch<SetStateAction<ICastItHubContext>>]>([initialValue, (s) => s]);
+
+export const CastItHubContextProvider = (children: any): JSX.Element => {
+    const [hub, setHub] = useContext(CastItHubContext);
+
+    useEffect(() => {
+        hub.connection
+            .connect()
+            .then(() => {
+                setHub((s) => ({ ...s, isConnected: true, isError: false }));
+            })
+            .catch((error) => {
+                console.log(error);
+                setHub((s) => ({ ...s, isConnected: false, isError: true }));
+            });
+    }, [hub, setHub]);
+
+    return <CastItHubContext.Provider value={[hub, setHub]}>{children.children}</CastItHubContext.Provider>;
+};
diff --git a/CastIt.Server/ClientApp/src/utils/app_constants.ts b/CastIt.Server/ClientApp/src/utils/app_constants.ts
@@ -0,0 +1 @@
+export const defaultImg = `${process.env.PUBLIC_URL}/no_img.png`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const defaultImg = `${process.env.PUBLIC_URL}/no_img.png`;