From 09be65e0352af7d10b870c607e67ab9f03154f3e Mon Sep 17 00:00:00 2001 From: JustSong Date: Sun, 23 Apr 2023 20:00:47 +0800 Subject: [PATCH] Index page is done --- web/src/App.js | 3 + web/src/context/Status/index.js | 19 ++++++ web/src/context/Status/reducer.js | 20 ++++++ web/src/index.js | 24 ++++--- web/src/pages/Home/index.js | 110 ++++++++++++++++++------------ 5 files changed, 120 insertions(+), 56 deletions(-) create mode 100644 web/src/context/Status/index.js create mode 100644 web/src/context/Status/reducer.js diff --git a/web/src/App.js b/web/src/App.js index 89ca42aa..67315021 100644 --- a/web/src/App.js +++ b/web/src/App.js @@ -14,6 +14,7 @@ import PasswordResetForm from './components/PasswordResetForm'; import GitHubOAuth from './components/GitHubOAuth'; import PasswordResetConfirm from './components/PasswordResetConfirm'; import { UserContext } from './context/User'; +import { StatusContext } from './context/Status'; import Channel from './pages/Channel'; import Token from './pages/Token'; import EditToken from './pages/Token/EditToken'; @@ -26,6 +27,7 @@ const About = lazy(() => import('./pages/About')); function App() { const [userState, userDispatch] = useContext(UserContext); + const [statusState, statusDispatch] = useContext(StatusContext); const loadUser = () => { let user = localStorage.getItem('user'); @@ -39,6 +41,7 @@ function App() { const { success, data } = res.data; if (success) { localStorage.setItem('status', JSON.stringify(data)); + statusDispatch({ type: 'set', payload: data }); localStorage.setItem('footer_html', data.footer_html); if ( data.version !== process.env.REACT_APP_VERSION && diff --git a/web/src/context/Status/index.js b/web/src/context/Status/index.js new file mode 100644 index 00000000..71f0682b --- /dev/null +++ b/web/src/context/Status/index.js @@ -0,0 +1,19 @@ +// contexts/User/index.jsx + +import React from 'react'; +import { initialState, reducer } from './reducer'; + +export const StatusContext = React.createContext({ + state: initialState, + dispatch: () => null, +}); + +export const StatusProvider = ({ children }) => { + const [state, dispatch] = React.useReducer(reducer, initialState); + + return ( + + {children} + + ); +}; \ No newline at end of file diff --git a/web/src/context/Status/reducer.js b/web/src/context/Status/reducer.js new file mode 100644 index 00000000..ec9ac6ae --- /dev/null +++ b/web/src/context/Status/reducer.js @@ -0,0 +1,20 @@ +export const reducer = (state, action) => { + switch (action.type) { + case 'set': + return { + ...state, + status: action.payload, + }; + case 'unset': + return { + ...state, + status: undefined, + }; + default: + return state; + } +}; + +export const initialState = { + status: undefined, +}; diff --git a/web/src/index.js b/web/src/index.js index a844792a..eca5c3c0 100644 --- a/web/src/index.js +++ b/web/src/index.js @@ -10,20 +10,22 @@ import './index.css'; import { UserProvider } from './context/User'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; - +import { StatusProvider } from './context/Status'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - -
- - - - -