From e966ccc63f9bc26511a049852eb7f0744ecf1b4b Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Thu, 27 Aug 2020 21:46:42 +0200
Subject: [PATCH] userContext
---
public/style.css | 24 +++++++++++++++++
src/core/App.tsx | 23 +++-------------
src/core/components/ContextTest.tsx | 8 +++---
src/core/context/UserContext.tsx | 42 ++++++++++++++++++++++++++---
4 files changed, 71 insertions(+), 26 deletions(-)
create mode 100644 public/style.css
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..5b9993a
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,24 @@
+#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;
+}
diff --git a/src/core/App.tsx b/src/core/App.tsx
index 9193494..3053fbe 100644
--- a/src/core/App.tsx
+++ b/src/core/App.tsx
@@ -1,10 +1,10 @@
-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>
);
}
diff --git a/src/core/components/ContextTest.tsx b/src/core/components/ContextTest.tsx
index 6dcc599..9d99473 100644
--- a/src/core/components/ContextTest.tsx
+++ b/src/core/components/ContextTest.tsx
@@ -1,10 +1,10 @@
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;
diff --git a/src/core/context/UserContext.tsx b/src/core/context/UserContext.tsx
index c231730..d7f8437 100644
--- a/src/core/context/UserContext.tsx
+++ b/src/core/context/UserContext.tsx
@@ -1,5 +1,6 @@
-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 };
--
GitLab