userContext

public/style.css

+#modal {
+  background-color: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#modal:empty {
+  display: none;
+}
+
+#modal > div {
+  background-color: #ffffff;
+  max-width: 500px;
+  padding: 10px;
+  border-radius: 5px;
+  text-align: center;
+}

src/core/App.tsx

-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import styled from 'styled-components';
 import Footer from './components/Footer';
 import Header from './components/Header';
 import MainRouting from './components/MainRouting';
-import UserContext, { IProfile } from './context/UserContext';
+import { UserStateProvider } from './context/UserContext';
 
 const Container = styled.div`
   height: 100%;
@@ -18,23 +18,8 @@ const MainContent = styled.div`
 `;
 
 function App() {
-  const [user, setUser] = useState({ loggedIn: false, profile: {} as IProfile });
-
-  useEffect(() => {
-    fetch('/api/v1/users/me')
-      .then((response) => {
-        if (!response.ok) return false;
-        return response.json();
-      })
-      .then((profile) => {
-        if (profile) {
-          setUser({ loggedIn: true, profile });
-        }
-      });
-  }, []);
-
   return (
-    <UserContext.Provider value={user}>
+    <UserStateProvider>
       <Router>
         <Container>
           <Header />
@@ -44,7 +29,7 @@ function App() {
           <Footer />
         </Container>
       </Router>
-    </UserContext.Provider>
+    </UserStateProvider>
   );
 }
 

src/core/components/ContextTest.tsx

 import React, { useContext } from 'react';
-import UserContext from '../context/UserContext';
+import { userContext } from '../context/UserContext';
 
 const ContextTest = () => {
-  const user = useContext(UserContext);
-  console.log(user.profile);
-  return <div>{user.loggedIn ? user.profile.name : 'Not logged in!'}</div>;
+  const { state: user } = useContext(userContext);
+  console.log(user.name);
+  return <div>{user ? user.name : 'Not logged in!'}</div>;
 };
 
 export default ContextTest;

src/core/context/UserContext.tsx

-import { createContext } from 'react';
+import React, { createContext, ReactNode, useReducer } from 'react';
 
+// Interface definitions
 interface IWarnings extends Document {
   text: string;
   date: Date;
@@ -26,6 +27,41 @@ export interface IProfile {
   warnings: [IWarnings] | [];
 }
 
-const UserContext = createContext({ loggedIn: false, profile: {} as IProfile });
+type Props = {
+  children: ReactNode;
+};
 
-export default UserContext;
+interface IContextProps {
+  state: IProfile;
+  dispatch: ({ type }: { type: string }) => void;
+}
+
+// Context
+const initialState = {
+  external_id: 'abcd',
+  studentCardNumber: '1234',
+  roomNumber: 104,
+  picture: 'alma.jpg',
+  role: Role.User,
+  email: 'alma@gmail.com',
+  name: 'Nagy Gizike',
+  warning: [],
+};
+export const userContext = createContext({} as IContextProps);
+const { Provider } = userContext;
+
+export const UserStateProvider: React.FunctionComponent<Props> = (props: Props) => {
+  const { children } = props;
+  const [state, dispatch] = useReducer((prevState: any, action: any) => {
+    switch (action.type) {
+      case 'update':
+        return action.payload;
+      default:
+        return prevState; // do nothing
+    }
+  }, initialState);
+
+  return <Provider value={{ state, dispatch }}>{children}</Provider>;
+};
+
+export default { userContext, UserStateProvider };