Fix loading bug

src/contexts/GroupStateContext.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from 'react';
+import { createContext, useContext } from 'react';
 
 const GroupsStateContext = createContext(undefined);
 
@@ -12,13 +12,4 @@ function useGroupState() {
   return state;
 }
 
-// eslint-disable-next-line react/prop-types
-function GroupsStateProvider({ value, children }) {
-  return (
-        <GroupsStateContext.Provider value={value}>
-            {children}
-        </GroupsStateContext.Provider>
-  );
-}
-
-export { GroupsStateContext as default, useGroupState, GroupsStateProvider };
+export { GroupsStateContext as default, useGroupState };

src/contexts/GroupsContextDispatch.jsx

@@ -1,4 +1,5 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useReducer } from 'react';
+import GroupsStateContext from './GroupStateContext.jsx';
 
 const GroupsDispatchContext = createContext(undefined);
 
@@ -65,10 +66,18 @@ function useGroups() {
 }
 
 // eslint-disable-next-line react/prop-types
-function GroupsProvider({ value, children }) {
+function GroupsProvider({ children }) {
+  const [state, dispatch] = useReducer(groupReducer, {
+    groups: [],
+    images: [],
+    index: -1,
+  });
+
   return (
-    <GroupsDispatchContext.Provider value={value}>
-      {children}
+    <GroupsDispatchContext.Provider value={dispatch}>
+      <GroupsStateContext.Provider value={state}>
+        {children}
+      </GroupsStateContext.Provider>
     </GroupsDispatchContext.Provider>
   );
 }

src/contexts/UserContextDispatch.jsx

@@ -1,4 +1,5 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useReducer } from 'react';
+import UserStateContext from './UserStateContext.jsx';
 
 const UserDispatchContext = createContext(null);
 
@@ -14,10 +15,14 @@ function userReducer(state, action) {
 }
 
 // eslint-disable-next-line react/prop-types
-function UserProvider({ value, children }) {
+function UserProvider({ children }) {
+  const [state, dispatch] = useReducer(userReducer, {});
+
   return (
-    <UserDispatchContext.Provider value={value}>
-      {children}
+    <UserDispatchContext.Provider value={dispatch}>
+      <UserStateContext.Provider value={state}>
+        {children}
+      </UserStateContext.Provider>
     </UserDispatchContext.Provider>
   );
 }

src/contexts/UserStateContext.jsx

@@ -1,16 +1,7 @@
-import React, { createContext, useContext } from 'react';
+import { createContext, useContext } from 'react';
 
 const UserStateContext = createContext(undefined);
 
-// eslint-disable-next-line react/prop-types
-function UserStateProvider({ value, children }) {
-  return (
-        <UserStateContext.Provider value={value}>
-            {children}
-        </UserStateContext.Provider>
-  );
-}
-
 function useUserState() {
   const userState = useContext(UserStateContext);
 
@@ -21,4 +12,4 @@ function useUserState() {
   return userState;
 }
 
-export { UserStateContext as default, useUserState, UserStateProvider };
+export { UserStateContext as default, useUserState };

src/index.jsx

@@ -12,6 +12,8 @@ import reportWebVitals from './reportWebVitals';
 import 'antd/dist/antd.css';
 import './scss/ant-overrides.scss';
 import './scss/index.scss';
+import { UserProvider } from './contexts/UserContextDispatch.jsx';
+import { GroupsProvider } from './contexts/GroupsContextDispatch.jsx';
 
 message.config({ maxCount: 1 });
 
@@ -23,7 +25,11 @@ ReactDOM.render(
           <LandingPage />
         </Route>
         <Route exact path="/">
-          <MainPage />
+          <UserProvider>
+            <GroupsProvider>
+              <MainPage />
+            </GroupsProvider>
+          </UserProvider>
         </Route>
         <Route exact path="/verify">
           <VerifyEmailPage />

src/pages/MainPage.jsx

@@ -2,7 +2,6 @@
 import React, {
   useState,
   useEffect,
-  useReducer,
   useRef,
 } from 'react';
 import { useHistory } from 'react-router-dom';
@@ -14,18 +13,15 @@ import Navbar from '../components/dashboard/Navbar.jsx';
 import Sidebar from '../components/dashboard/Sidebar.jsx';
 import PhotoGrid from '../components/dashboard/PhotoGrid.jsx';
 import API, { BASE_URL } from '../api/API';
-import { UserStateProvider } from '../contexts/UserStateContext.jsx';
 import {
-  groupReducer, GroupsProvider,
+  useGroups,
 } from '../contexts/GroupsContextDispatch.jsx';
-import { GroupsStateProvider } from '../contexts/GroupStateContext.jsx';
 import GroupMenuButton from '../components/dashboard/GroupMenuButton.jsx';
-import {
-  UserProvider,
-  userReducer,
-} from '../contexts/UserContextDispatch.jsx';
+import { useUser } from '../contexts/UserContextDispatch.jsx';
 import { LoadingProvider } from '../contexts/LoadingContext.jsx';
 import { SocketProvider } from '../contexts/SocketContext.jsx';
+import { useGroupState } from '../contexts/GroupStateContext.jsx';
+import { useUserState } from '../contexts/UserStateContext.jsx';
 
 const socket = io(BASE_URL, {
   transports: ['websocket'],
@@ -47,12 +43,10 @@ function MainPage() {
   // Using an initial value of -1 here so that groupData can
   // trigger updates when its value is set to 0 on mount.
   // It'll be set to 0 if there is at least one group to load.
-  const [groupData, groupDispatch] = useReducer(groupReducer, {
-    groups: [],
-    images: [],
-    index: -1,
-  });
-  const [user, userDispatch] = useReducer(userReducer, {});
+  const groupData = useGroupState();
+  const groupDispatch = useGroups().dispatch;
+  const user = useUserState();
+  const userDispatch = useUser().dispatch;
   const [groupTitle, setGroupTitle] = useState('');
   const [isLoadingGroups, setLoadingGroups] = useState(true);
   const [isLoadingImages, setLoadingImages] = useState(true);
@@ -330,46 +324,38 @@ function MainPage() {
 
   return (
     <SocketProvider value={socket}>
-      <UserStateProvider value={user}>
-        <UserProvider value={userDispatch}>
-          <GroupsProvider value={groupDispatch}>
-            <GroupsStateProvider value={groupData}>
-              <LoadingProvider value={loadingStates}>
-                <div className="main-page-body">
-                  <Navbar />
-                  <div className="body-content">
-                    <Sidebar />
-                    <div className="main-content">
-                      <Skeleton
-                        active
-                        className="title-skeleton"
-                        loading={isLoadingGroups}
-                        paragraph={{ rows: 0 }}
-                      >
-                        <div className="group-title-row">
-                          <h1 className="group-title" title={groupTitle}>
-                            {groupTitle}
-                          </h1>
-                          {groupData.groups.length > 0 && (
-                            <GroupMenuButton
-                              className="group-action-btn"
-                              isOwner={isGroupOwner}
-                            />
-                          )}
-                        </div>
-                      </Skeleton>
-                      <PhotoGrid
-                        photos={groupData.images}
-                        isGroupOwner={isGroupOwner}
-                      />
-                    </div>
-                  </div>
+      <LoadingProvider value={loadingStates}>
+        <div className="main-page-body">
+          <Navbar />
+          <div className="body-content">
+            <Sidebar />
+            <div className="main-content">
+              <Skeleton
+                active
+                className="title-skeleton"
+                loading={isLoadingGroups}
+                paragraph={{ rows: 0 }}
+              >
+                <div className="group-title-row">
+                  <h1 className="group-title" title={groupTitle}>
+                    {groupTitle}
+                  </h1>
+                  {groupData.groups.length > 0 && (
+                    <GroupMenuButton
+                      className="group-action-btn"
+                      isOwner={isGroupOwner}
+                    />
+                  )}
                 </div>
-              </LoadingProvider>
-            </GroupsStateProvider>
-          </GroupsProvider>
-        </UserProvider>
-      </UserStateProvider>
+              </Skeleton>
+              <PhotoGrid
+                photos={groupData.images}
+                isGroupOwner={isGroupOwner}
+              />
+            </div>
+          </div>
+        </div>
+      </LoadingProvider>
     </SocketProvider>
   );
 }