Merge pull request #180 from Rubix982/redirect-fix

Redirect fix

client/src/App.js

@@ -26,28 +26,26 @@ import UserProvider from './components/userDataContext'
 import LoginUserProvider from './components/LoginUserContext';
 
 function App() {
-  let loggedIn = (localStorage.getItem('loggedIn') === 'true') ? true : false;
-  let isFirstLogin = (localStorage.getItem('firstLogin') === ' true') ? true : false;
   return (
     <>
       <LoginUserProvider>
         <UserProvider>
           <Router>
             <Switch>
               <Route exact path="/">
-                {loggedIn ? <Feed /> : <Home />}
+                <Home />
               </Route>
               <Route exact path="/feed" >
-                {isFirstLogin ? <FirstLogin /> : <Feed />}
+                <Feed />
               </Route>
               <Route exact path="/profile/:handle" component={Profile} />
               <Route exact path='/notification' component={Notification} />
               <Route exact path="/privacy" component={PrivacyPolicy} />
               <Route exact path="/publish">
-                {loggedIn ? <Publish /> : <Home />}
+                <Publish />
               </Route>
               <Route exact path="/first" >
-                {isFirstLogin ? <FirstLogin /> : <Feed />}
+                <FirstLogin />
               </Route>
               <Route exact path="/about" component={AboutUs} />
               <Route exact path="/contact" component={Contact} />
@@ -59,7 +57,7 @@ function App() {
               <Route exact path="/post/:id" component={Post} />
               <Route exact path="/verify/:hash" component={Verify}  />
               <Route exact path="/login">
-                {loggedIn ? <Feed /> : <Login />}
+                <Login />
               </Route>
               <Route exact path="/register" component={Register} />
               <Route exact path="/forgetPassword" component={ForgetPassword} />

client/src/components/FirstLogin/MainContent.js

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { useHistory } from "react-router-dom";
 import ComponentStyling from '../../style/FirstLogin/MainContent.module.css';
 import { sendFirstLoginToBackend } from '../../services/first.js';
+import { loginUserContext } from '../LoginUserContext';
 
 const MainContent = () => {
-
+  const { firstLogin } = useContext(loginUserContext);
   const booleanList = [false, false, false, false,
     false, false, false, false,
     false, false, false, false, false,
@@ -64,7 +65,7 @@ const MainContent = () => {
         location: locationState
       });
       alert('Sucessfully filled the form!')
-      localStorage.setItem('firstLogin', 'false')
+      firstLogin.setter(false);
     } catch (error) {
       alert(`Unable to submit form due to error "${error.message}"`)
     }

client/src/components/Login/MainContent.js

@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { loginUser } from '../../services/login'
 import ComponentStyling from '../../style/Login/MainContent.module.css';
+import { loginUserContext } from '../LoginUserContext';
 
 const MainContent = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const history = useHistory();
+  const { login, firstLogin, verified } = useContext(loginUserContext);
 
   return (
     <div className={ComponentStyling.content}>
@@ -35,9 +37,10 @@ const MainContent = () => {
         <input onClick={async () => {
           try {
             const { verificationStatus, firstLoginStatus } = await loginUser(email, password);
-            localStorage.setItem('loggedIn', true);
-            localStorage.setItem('firstLogin', firstLoginStatus);
             setTimeout(() => {
+              login.setter(true);
+              firstLogin.setter(firstLoginStatus);
+              verified.setter(verificationStatus);
               history.push('/feed');
             }, 3000);
           } catch (error) {

client/src/components/LoginUserContext.js

@@ -3,14 +3,15 @@ import React, { createContext, useState, useEffect } from 'react';
 export const loginUserContext = createContext();
 
 const LoginUserProvider = ({ children }) => {
-  const loginState = useState(false);
-  const firstLoginState = useState(true);
+  const loginState = useState((localStorage.getItem('loggedIn') === 'true') ? true : false);
+  const firstLoginState = useState((localStorage.getItem('loggedIn') === 'true') ? true : false);
+  const verifiedState = useState((localStorage.getItem('verified') === 'true') ? true : false);
 
   useEffect(() => {
-    (loginState[1])((localStorage.getItem('loggedIn') === 'true') ? true : false);
-    (firstLoginState[1])((localStorage.getItem('firstLogin') === 'true') ? true : false);
-
-  }, [loginState[0]])
+    localStorage.setItem('loggedIn', loginState[0]);
+    localStorage.setItem('firstLogin', firstLoginState[0]);
+    localStorage.setItem('verified', verifiedState[0]);
+  }, [loginState[0], firstLoginState[0], verifiedState[0]])
 
   return (
     <loginUserContext.Provider value={{
@@ -21,6 +22,10 @@ const LoginUserProvider = ({ children }) => {
       firstLogin: {
         state: firstLoginState[0],
         setter: firstLoginState[1],
+      },
+      verified: {
+        state: verifiedState[0],
+        setter: verifiedState[1],
       }
     }}>
       {children}

client/src/components/Navbar.js

@@ -9,6 +9,7 @@ import Logo from '../assets/img/icon/Logo.svg';
 import { RightAlign } from './FlexAlignment';
 import SearchBar from './SearchBar';
 import { userContext } from './userDataContext';
+import { loginUserContext } from './LoginUserContext';
 
 // Service
 import { logMeOutService } from '../services/logout.js';
@@ -17,6 +18,7 @@ import { logMeOutService } from '../services/logout.js';
 import ComponentStyling from '../style/Navbar.module.css';
 
 const Navbar = () => {
+  const { login, firstLogin, verified } = useContext(loginUserContext);
 
   const history = useHistory();
   const userData = useContext(userContext);
@@ -25,8 +27,7 @@ const Navbar = () => {
     try {
       await logMeOutService();
       setTimeout(() => {
-        localStorage.removeItem('loggedIn');
-        localStorage.removeItem('firstLogin');
+        login.setter(false);
         history.push('/login');
       }, 2000);
     } catch (error) {

client/src/components/Profile/ProfileContext.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, createContext } from 'react';
+import { useHistory } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
 import API from '../../API/API';
 
@@ -8,6 +9,7 @@ const ProfileProvider = ({ children }) => {
   const profileData = useState({});
   const followState = useState(false);
   const loadingState = useState(true);
+  const history = useHistory();
   const { handle } = useParams();
 
   useEffect(async () => {
@@ -21,7 +23,8 @@ const ProfileProvider = ({ children }) => {
       (followState[1])(status);
       (loadingState[1])(false);
     } catch (error) {
-      alert('No user exists with the given handle')
+      alert('No user exists with the given handle');
+      history.push('/feed');
     }
   }, [])
 

client/src/components/userDataContext.js

@@ -5,25 +5,25 @@ import { loginUserContext } from './LoginUserContext';
 export const userContext = createContext();
 
 const UserProvider = (props) => {
-
+    const { login } = useContext(loginUserContext);
     const [userName, setUserName] = useState('');
     const [imageSource, setImageSource] = useState('');
     const [userHandle, setUserHandle] = useState('');
-    let loggedIn = (localStorage.getItem('loggedIn') === 'true') ? true : false;
+    const [loading, setLoading] = useState(false);
 
     useEffect(async () => {
-        if (loggedIn) {
-            try {
-                const response = await API.getRequest(`${process.env.REACT_APP_API_URL}/navbar`);
-                setUserHandle(response.Handle);
-                setUserName(response.Username);
-                setImageSource('/assets/img/profile_pictures/' + response.ProfilePicture);
-                return setImageSource;
-            } catch (error) {
-                throw new Error(error.message);
-            }
+      if (login.state) {
+        try {
+          const response = await API.getRequest(`${process.env.REACT_APP_API_URL}/navbar`);
+          setUserHandle(response.Handle);
+          setUserName(response.Username);
+          setImageSource('/assets/img/profile_pictures/' + response.ProfilePicture);
+          return setImageSource;
+        } catch (error) {
+          alert(error.message);
         }
-    }, []);
+      }
+    }, [login.state]);
 
     return (
         <userContext.Provider value={{

client/src/pages/FirstLogin.js

@@ -1,18 +1,26 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Template from '../components/Login-Register-FP/template';
 import { MainContent } from '../components/FirstLogin/MainContent';
 import ImageSource from '../assets/FirstLogin/firstLogin.jpg';
+import { loginUserContext } from '../components/LoginUserContext';
+import Feed from './feed';
 
 const FirstLogin = () => {
+  const { login, firstLogin } = useContext(loginUserContext);
+
   const LeftAlignStyle = {
     overflowY: 'scroll',
   };
 
-  return (
-    <Template bgUrl={ImageSource} style={LeftAlignStyle}>
-      <MainContent />
-    </Template>
-  );
+  if (login.state && firstLogin.state) {
+    return (
+      <Template bgUrl={ImageSource} style={LeftAlignStyle}>
+        <MainContent />
+      </Template>
+    );
+  }
+
+  return (<Feed />);
 };
 
 export default FirstLogin;

client/src/pages/Login.js

@@ -1,11 +1,22 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Template from '../components/Login-Register-FP/template';
 import MainContent from '../components/Login/MainContent';
+import { loginUserContext } from '../components/LoginUserContext';
+import Feed from './feed';
 
-const Login = () => (
-  <Template>
-    <MainContent />
-  </Template>
-);
+const Login = () => {
+  const { login } = useContext(loginUserContext);
+
+  if(!login.state) {
+    return (
+      <Template>
+        <MainContent />
+      </Template>
+    );
+  }
+
+  return (<Feed/>);
+
+};
 
 export default Login;

client/src/pages/feed.js

@@ -1,24 +1,30 @@
 import React, { useContext } from 'react';
 import Container from '../components/FullViewContainer';
 import MainContent from '../components/NewsFeed/MainContent';
-import FirstLogin from './FirstLogin.js';
-
+import { loginUserContext } from '../components/LoginUserContext';
 // the div is for navbar
 import Navbar from '../components/Navbar';
+import Home from './home';
 
 const Feed = () => {
+  const { login } = useContext(loginUserContext);
 
-  return (
-  <Container
-    style={{
-      backgroundColor: '#18191a',
-      display: 'grid',
-      gridTemplateRows: '10% 90%',
-    }}
-  >
-    <Navbar first_name="Tashik" title="Terrabuzz" />
-    <MainContent />
-  </Container>)
+  if (login.state) {
+    return (
+      <Container
+        style={{
+          backgroundColor: '#18191a',
+          display: 'grid',
+          gridTemplateRows: '10% 90%',
+        }}
+      >
+        <Navbar first_name="Tashik" title="Terrabuzz" />
+        <MainContent />
+      </Container>
+    )
+  }
+
+  return (<Home />);
 };
 
 export default Feed;

client/src/pages/publish.js

@@ -1,20 +1,30 @@
-import React from 'react';
+import React, { useContext } from 'react';
 
 // Component imports
 import MainContent from '../components/Publish/MainContent';
 import PublishHeader from '../components/Publish/PublishHeader';
 import PublishProvider from '../components/Publish/PublishContext';
+import { loginUserContext } from '../components/LoginUserContext';
+import Home from './home';
 
 // Styling
 import PublishStyling from '../style/Publish/Publish.module.css';
 
-const Publish = () => (
-  <PublishProvider>
-    <div className={PublishStyling.container}>
-      <PublishHeader />
-      <MainContent />
-    </div>
-  </PublishProvider>
-);
+const Publish = () => {
+  const { login } = useContext(loginUserContext);
+
+  if(login.state) {
+    return (
+      <PublishProvider>
+        <div className={PublishStyling.container}>
+          <PublishHeader />
+          <MainContent />
+        </div>
+      </PublishProvider>
+    );
+  }
+
+  return (<Home />);
+};
 
 export default Publish;

client/src/style/Navbar.module.css

@@ -48,7 +48,7 @@
 }
 
 .searchBox input {
-  height: 94%;
+  height: 92%;
   width: 100%;
   background-image: url("../../src/assets/img/icon/Search.svg");
   background-repeat: no-repeat;
@@ -87,6 +87,7 @@
 }
 
 .active {
+  background-color: black;
   transition: 0.3s;
 }
 

server/routes/index.js

@@ -10,7 +10,7 @@ Router.get('/feed', authorizeUser, indexContoller.getUserFeed);
 Router.get('/profile/:handle', forwardUnAuthorizedUser, indexContoller.getUserProfile);
 Router.get('/post/:id', indexContoller.getPost);
 Router.get('/like/:id', authorizeUser, indexContoller.getLike);
-Router.get('/follow/:handle', authorizeUser, indexContoller.getFollow);
+Router.get('/follow/:handle', forwardUnAuthorizedUser, indexContoller.getFollow);
 Router.get('/search-interest', authorizeUser, indexContoller.searchInterest);
 Router.get('/search-user', authorizeUser, indexContoller.searchUser);
 Router.get('/settings', authorizeUser, indexContoller.getSettings);