Merge pull request #137 from VikramjeetD/redirect

Redirect fixes
Dryft-bits · Jun 13, 2020 · d37011d · d37011d
2 parents 4a62b66 + 1a79698
commit d37011d
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 25 deletions.
diff --git a/client/src/components/authorization/CheckLoggedIn.jsx b/client/src/components/authorization/CheckLoggedIn.jsx
@@ -3,38 +3,38 @@ import { Redirect } from "react-router-dom";
 import { useGetData } from "use-axios-react";
 import { connect } from "react-redux";
 import { verifyLogin } from "../../redux/actions/auth";
-import { makeStyles } from '@material-ui/core/styles';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles } from "@material-ui/core/styles";
+import LinearProgress from "@material-ui/core/LinearProgress";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 const CheckLoggedIn = ({ verifyLogin }) => {
   useEffect(() => {
     verifyLogin();
   }, [verifyLogin]);
   const [userInfo, loading] = useGetData("/api/current_user");
-  const useStyles = makeStyles((theme) => ({
+  const useStyles = makeStyles(theme => ({
     root: {
-      width: '100%',
-      '& > * + *': {
-        marginTop: theme.spacing(2),
-      },
-    },
+      width: "100%",
+      "& > * + *": {
+        marginTop: theme.spacing(2)
+      }
+    }
   }));
 
-  const useStylesCircular = makeStyles((theme) => ({
+  const useStylesCircular = makeStyles(theme => ({
     root: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      '& > * + *': {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "& > * + *": {
         marginLeft: theme.spacing(2),
-        marginTop: theme.spacing(2),
-      },
-    },
+        marginTop: theme.spacing(2)
+      }
+    }
   }));
   const Cclasses = useStylesCircular();
   const classes = useStyles();
-  if (loading) {
+  if (loading || (localStorage.getItem("loggedIn") && !userInfo)) {
     return (
       <>
         <div className={classes.root}>
@@ -43,7 +43,8 @@ const CheckLoggedIn = ({ verifyLogin }) => {
         <div className={Cclasses.root}>
           <CircularProgress />
         </div>
-      </>/*<Redirect to='/checkloggedin'></Redirect>*/);
+      </> /*<Redirect to='/checkloggedin'></Redirect>*/
+    );
   } else if (!userInfo) {
     return <Redirect to='/'></Redirect>;
   } else {

diff --git a/client/src/components/routes/PrivateRoute.jsx b/client/src/components/routes/PrivateRoute.jsx
@@ -4,6 +4,9 @@ import { useGetData } from "use-axios-react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { verifyLogin } from "../../redux/actions/auth";
+import { makeStyles } from "@material-ui/core/styles";
+import LinearProgress from "@material-ui/core/LinearProgress";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 const PrivateRoute = ({
   component: Component,
@@ -13,16 +16,43 @@ const PrivateRoute = ({
   ...rest
 }) => {
   const [userInfo, loading] = useGetData("/api/current_user");
+  const useStyles = makeStyles(theme => ({
+    root: {
+      width: "100%",
+      "& > * + *": {
+        marginTop: theme.spacing(2)
+      }
+    }
+  }));
 
+  const useStylesCircular = makeStyles(theme => ({
+    root: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "& > * + *": {
+        marginLeft: theme.spacing(2),
+        marginTop: theme.spacing(2)
+      }
+    }
+  }));
+  const Cclasses = useStylesCircular();
+  const classes = useStyles();
   return (
     <Route
       {...rest}
       render={props =>
         !localStorage.getItem("loggedIn") ? (
           <Redirect to='/'></Redirect>
         ) : loading ? (
-          // Put a cool animation here
-          <div>Loading...</div>
+          <>
+            <div className={classes.root}>
+              <LinearProgress />
+            </div>
+            <div className={Cclasses.root}>
+              <CircularProgress />
+            </div>
+          </>
         ) : !((!submitted && userInfo.submittedForm) || submitted) ? (
           <Redirect to='/helform'></Redirect>
         ) : (

diff --git a/client/src/components/tabs/Landing.jsx b/client/src/components/tabs/Landing.jsx
@@ -1,8 +1,14 @@
 import React from "react";
 import "../../styles/Landing.css";
 import configuration from "../../config/constants.js";
+import { useGetData } from "use-axios-react";
+import { Redirect } from "react-router-dom";
+
 export const Landing = () => {
-  return (
+  const [userInfo, loading] = useGetData("/api/current_user");
+  return userInfo && localStorage.getItem("loggedIn") ? (
+    <Redirect to='/checkloggedin'></Redirect>
+  ) : (
     <section className='landing body'>
       <div className='dark-overlay'>
         <div className='landing-inner'>
@@ -26,11 +32,9 @@ export const Landing = () => {
           </div>
         </div>
       </div>
-      <div>
-      </div>
+      <div></div>
     </section>
   );
 };
 
-
 export default Landing;