Merge pull request #5 from MauMauStudios/developmaunt

Developmaunt

docker-compose.yml

@@ -4,14 +4,21 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-      #target: final
     container_name: 'MauMau-Client'
     ports:
       - '3000:3000'
     restart: always
     networks:
       - MauMau
+    labels:
+      traefik.enable: "true"
+      traefik.http.routers.maumau.entrypoints: "websecure"
+      traefik.http.routers.maumau.rule: "Host(`mau-mau.nl`)"
+      traefik.http.routers.maumau.tls: "true"
+      traefik.http.routers.maumau.tls.certresolver: "lets-encrypt"
+      traefik.docker.network: "traefik"
 networks:
   MauMau:
-    # hier later extern naar client
     driver: bridge
+  traefik:
+      external: true

src/index.tsx

@@ -2,14 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import ThemeContextProvider from "./utils/contexts/ThemeContext";
+import AuthContextProvider from "./utils/contexts/AuthContext";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+    document.getElementById('root') as HTMLElement
 );
 root.render(
-  <React.StrictMode>
+    <React.StrictMode>
-      <ThemeContextProvider>
+        <AuthContextProvider>
-          <App />
+            <ThemeContextProvider>
-      </ThemeContextProvider>
+                <App/>
-  </React.StrictMode>
+            </ThemeContextProvider>
+        </AuthContextProvider>
+    </React.StrictMode>
 );

src/layout/pages/MainLobby.tsx

@@ -14,8 +14,8 @@ const MainLobby = () => {
     const handleCreateRoom = () => {
         fetch(ROOM_URL, {
             method: 'POST',
-        }).then(r => r.json()).then(data => {
+        }).then(res => res.json()).then(room => {
-            navigateTo(`/room/${data}`)
+            navigateTo(`/room/${room}`);
         });
     }
 

src/utils/contexts/AuthContext.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+const AUTH_URL = `http://${process.env.REACT_APP_API_URL}/auth`;
+
+interface IAuthContext {
+    sessionToken: string
+}
+
+const AuthContext = React.createContext<IAuthContext>({
+    sessionToken: ''
+});
+
+export const useAuth = () => React.useContext(AuthContext);
+
+const AuthContextProvider = ({children}: any) => {
+    const [sessionToken] = React.useState('');
+
+    React.useEffect(() => {
+        const token =  window.localStorage.getItem('session_token');
+        if (!token) {
+            fetch(AUTH_URL, {
+                method: 'GET'
+            }).then(res => res.json()).then(token => {
+                window.localStorage.setItem('session_token', token);
+            });
+        }
+    }, []);
+
+    return (
+        <AuthContext.Provider value={{sessionToken}}>
+            {children}
+        </AuthContext.Provider>
+    );
+};
+
+export default AuthContextProvider;