Revert "feat: session expired modal (#933)" (#1040)

This reverts commit c699ad5 since it breaks UX. We will bring it back later

zubhub_frontend/zubhub/public/locales/en/translation.json

@@ -1190,11 +1190,5 @@
       "text": "Get inspired by thousands of creators around the world.",
       "buttonLabel": "Get Started"
     }
-  },
-  "sessionExpired": {
-    "heading": "Session Expired",
-    "title": "Your session has expired",
-    "text": "You will be redirected to the login page.",
-    "buttonLabel": "ok"
   }
 }

zubhub_frontend/zubhub/public/locales/hi/translation.json

@@ -1092,11 +1092,5 @@
       "text": "दुनिया भर के हजारों रचनाकारों से प्रेरणा लें।",
       "buttonLabel": "शुरू हो जाओ"
     }
-  },
-  "sessionExpired": {
-    "heading": "सत्र समाप्त",
-    "title": "आपका सत्र समाप्त हो गया है",
-    "text": "आप लॉगिन पेज पर रीडायरेक्ट किए जाएंगे।",
-    "buttonLabel": "ठीक है"
   }
 }

zubhub_frontend/zubhub/src/App.js

@@ -10,9 +10,9 @@ import ProtectedRoute from './components/protected_route/ProtectedRoute';
 import ZubhubAPI from '../src/api/api';
 import { updateTheme } from './theme';
 import ScrollToTop from './ScrollToTop';
-import SessionExpiredModal from './components/sessionExpired/sessionExpired';
 
 const SearchResults = React.lazy(() => import('./views/search_results/SearchResults'));
+
 const Signup = React.lazy(() => import('./views/signup/Signup'));
 const Login = React.lazy(() => import('./views/login/Login'));
 const PasswordReset = React.lazy(() => import('./views/password_reset/PasswordReset'));
@@ -492,14 +492,7 @@ function App(props) {
               </PageWrapper>
             )}
           />
-          <Route
-            path="/session-expired"
-            render={routeProps => (
-              <PageWrapper {...routeProps} {...props}>
-                <LazyImport LazyComponent={SessionExpiredModal} {...routeProps} {...props} />
-              </PageWrapper>
-            )}
-          />
+
           <Route
             path="*"
             render={routeProps => (

zubhub_frontend/zubhub/src/components/modals/modal.styles.js

@@ -22,8 +22,7 @@ export const modalStyles = theme => ({
     dialogContainer: {
         '& .MuiDialog-paper': {
             overflow: 'visible !important'
-        },
-        backdropFilter: 'blur(15px)',
+        }
     },
     dialogPaper: {
         borderRadius: 8,

zubhub_frontend/zubhub/src/store/actions/authActions.js

@@ -88,7 +88,7 @@ export const logout = args => {
  */
 export const getAuthUser = props => {
   return dispatch => {
-      return API.getAuthUser(props.auth.token)
+    return API.getAuthUser(props.auth.token)
       .then(res => {
         if (!res.id) {
           dispatch(
@@ -121,7 +121,6 @@ export const getAuthUser = props => {
   };
 };
 
-
 export const AccountStatus = args => {
   return () => {
     return API.getAccountStatus(args.token).catch(() => {

zubhub_frontend/zubhub/src/views/PageWrapper.jsx

@@ -111,36 +111,13 @@ function PageWrapper(props) {
     setPrevScrollPos(currentScrollPos);
   }, [prevScrollPos]);
 
-  useEffect(() => {
-    if (!props.auth.token) {
-      props.history.push('/session-expired')
-    }
-  }, [props.auth.token])
-
   useEffect(() => {
     window.addEventListener('scroll', handleScroll);
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
   }, [handleScroll]);
 
-  const unprotectedRoutes = [
-    '/',
-    '/signup',
-    '/login',
-    '/password-reset',
-    '/projects/:id',
-    '/ambassadors',
-    '/creators/:username',
-    '/privacy_policy',
-    '/terms_of_use',
-    '/about',
-    '/challenge',
-    '/email-confirm',
-    '/password-reset-confirm',
-    '/session-expired'
-  ];
-
   const throttledFetchOptions = useMemo(
     () =>
       throttle(async (query, searchType) => {
@@ -188,6 +165,19 @@ function PageWrapper(props) {
     throttledFetchOptions.cancel();
   }, []);
 
+  useEffect(() => {
+    handleSetState({ loading: true });
+    fetchHero(props)
+      .then(() => {
+        if (props.auth.token) {
+          return props.getAuthUser(props);
+        }
+      })
+      .finally(() => {
+        handleSetState({ loading: false });
+      });
+  }, [props.auth.token]);
+
   useEffect(() => {
     handleSetState(handleProfileMenuClose());
   }, [trigger]);
@@ -250,14 +240,42 @@ function PageWrapper(props) {
       <Container className={classes.childrenContainer} maxWidth="lg">
         {props.auth?.token ? <DashboardLayout>{loading ? <LoadingPage /> : props.children}</DashboardLayout> : null}
         {!props.auth?.token &&
-          !unprotectedRoutes.includes(props.match?.path) && (
+          ![
+            '/',
+            '/signup',
+            '/login',
+            '/projects/:id',
+            '/ambassadors',
+            '/creators/:username',
+            '/privacy_policy',
+            '/terms_of_use',
+            '/about',
+            '/challenge',
+            '/password-reset',
+            '/email-confirm',
+            '/password-reset-confirm'
+          ].includes(props.match?.path) && (
             <div style={{ minHeight: '80vh' }}>
               <NotFoundPage />
             </div>
           )}
       </Container>
       {!props.auth?.token &&
-        unprotectedRoutes.includes(props.match?.path) && <div style={{ minHeight: '90vh' }}>{props.children}</div>}
+        [
+          '/',
+          '/signup',
+          '/login',
+          '/password-reset',
+          '/projects/:id',
+          '/ambassadors',
+          '/creators/:username',
+          '/privacy_policy',
+          '/terms_of_use',
+          '/about',
+          '/challenge',
+          '/email-confirm',
+          '/password-reset-confirm'
+        ].includes(props.match?.path) && <div style={{ minHeight: '90vh' }}>{props.children}</div>}
 
       <footer className={clsx('footer-distributed', classes.footerStyle)}>
         <Box>