Migrated Todo Component to App Route

stanleyowen · Jun 5, 2021 · 8f5d381 · 8f5d381
1 parent 0e60bb8
commit 8f5d381
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 54 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -6,7 +6,7 @@ import './App.min.css'
 import { setNotification, NOTIFICATION_TYPES } from './libraries/setNotification'
 
 import Navbar from './components/navbar.component'
-import Welcome from './components/welcome.component'
+import Landing from './components/landing.component'
 import Register from './components/register.component'
 import Login from './components/login.component'
 import Logout from './components/logout.component'
@@ -26,20 +26,20 @@ import TermsAndConditions from './components/terms-and-condition.component'
 export default function App() {
   const [server, setServer] = useState()
   const [userData, setUserData] = useState({ isLoading: true, type: {}, credentials: {} })
-  const protectedRoute = ['', 'edit', 'account']
-  const redirectRoute = ['welcome', 'login', 'get-started']
+  const protectedRoute = ['app', 'edit', 'account']
+  const redirectRoute = ['login', 'get-started']
   const server_list = ['http://localhost:5000', 'https://otlio-us.herokuapp.com', 'https://otlio-eu.herokuapp.com']
   const info = JSON.parse(localStorage.getItem('info'))
 
   if(info && info.status && info.message) {
     setNotification(info.status === 200 ? NOTIFICATION_TYPES.SUCCESS : NOTIFICATION_TYPES.DANGER, info.message)
     localStorage.removeItem('info')
   }
-  if(!userData.isLoading && userData.authenticated){
+  if(!userData.isLoading && userData.authenticated) {
     redirectRoute.forEach(a => {
-      if(window.location.pathname.split('/')[1] === a) window.location='/'
+      if(window.location.pathname.split('/')[1] === a) window.location='/app'
     })
-  }else if(!userData.isLoading && !userData.authenticated){
+  }else if(!userData.isLoading && !userData.authenticated) {
     protectedRoute.forEach(a => {
       if(window.location.pathname.split('/')[1] === a) window.location=`/login?next=${encodeURIComponent(window.location.pathname)}`
     })
@@ -89,8 +89,8 @@ export default function App() {
     <Router>
       <Navbar userData={userData} />
       <Switch>
-        <Route path='/' exact component={() => <Home userData={userData} />} />
-        <Route path='/welcome' component={Welcome} />
+        <Route path='/' exact component={Landing} />
+        <Route path='/app' component={() => <Home userData={userData} />} />
         <Route path='/get-started' component={() => <Register userData={userData} />} />
         <Route path='/login' component={() => <Login userData={userData} />} />
         <Route path='/logout' component={() => <Logout userData={userData} />} />

diff --git a/client/src/components/404.component.js b/client/src/components/404.component.js
@@ -16,7 +16,7 @@ const PageNotFound = ({ userData }) => {
                     <h1 className="blue-text monospace">Page Not Found</h1>
                     <h3 className="mt-20 monospace">Oops! We are sorry, we can't find the page you were looking for.</h3>
                     <h3 className="mt-20 monospace">If you're experiencing a critical issue, please <a className="animation__underline" href="/support">contact support</a>.</h3>
-                    <a className="oauth-box outline-blue isCentered block mt-30 mb-20 p-12 button monospace" href={userData.authenticated ? '/':'/welcome'}>Back to Home</a>
+                    <a className="oauth-box outline-blue isCentered block mt-30 mb-20 p-12 button monospace" href={userData.authenticated ? '/app':'/'}>Back to Home</a>
                     <div className="footer__socialBtn mb-20">
                         <Tooltip title="Contact Support" arrow><a href="/support" rel="noopener">
                             <FontAwesomeIcon icon={faEnvelope} style={{ fontSize: "1.8em" }} />

diff --git a/client/src/components/account.component.js b/client/src/components/account.component.js
@@ -255,7 +255,7 @@ const Account = ({ userData }) => {
                                     </button>
                                 </div>
                                 <div className="m-10">
-                                    <button className="oauth-box primary mt-20" onClick={() => window.location='logout'}>
+                                    <button className="oauth-box primary mt-20" onClick={() => window.location='/logout'}>
                                         <FontAwesomeIcon icon={faSignOutAlt} size='2x'/> <p>Sign Out</p>
                                     </button>
                                 </div>

diff --git a/client/src/components/edit.component.js b/client/src/components/edit.component.js
@@ -40,7 +40,7 @@ const Edit = ({ userData }) => {
                     setTimeout(() => getData(), 5000)
                 }else {
                     localStorage.setItem('info', JSON.stringify(err.response.data))
-                    window.location='/'
+                    window.location='/app'
                 }
             })
         }
@@ -62,7 +62,7 @@ const Edit = ({ userData }) => {
         async function submitData() {
             btn.innerText = "Updating..."; btn.setAttribute("disabled", "true"); btn.classList.add("disabled")
             await axios.put(`${SERVER_URL}/todo/data`, data, { headers: { 'XSRF-TOKEN': getCSRFToken() }, withCredentials: true })
-            .then(res => { localStorage.setItem('info', JSON.stringify(res.data)); window.location='/' })
+            .then(res => { localStorage.setItem('info', JSON.stringify(res.data)); window.location='/app' })
             .catch(err => setNotification(NOTIFICATION_TYPES.DANGER, err.response.data.message))
             btn.innerText = "Update"; btn.removeAttribute("disabled"); btn.classList.remove("disabled")
         }

diff --git a/client/src/components/welcome.component.js → client/src/components/landing.component.js b/client/src/components/welcome.component.js → client/src/components/landing.component.js
@@ -1,4 +1,4 @@
-import aos from 'aos';
+import aos from 'aos'
 import axios from 'axios'
 import 'aos/dist/aos.css'
 import React, { useEffect, useState } from 'react'
@@ -21,17 +21,14 @@ const Landing = () => {
         organizingEasier: false,
         security: false,
         cloud: false,
-        theme: false,
+        // theme: false,
         github: false,
         support: false
     })
 
     const handleChange = (a, b) => setProperties({ ...properties, [a]: b })
 
     useEffect(() => {
-        var x = 0; var index = 0; var interval
-        const element = document.querySelector('.text-animation')
-        const data = element.getAttribute('data-elements').split(',')
         async function getRepoInfo() {
             await axios.all([axios.get(GITHUB_API), axios.get(`${GITHUB_API}/releases`)])
             .then(res => {
@@ -42,32 +39,11 @@ const Landing = () => {
                 if(version !== latestVersion) setNotification(NOTIFICATION_TYPES.WARNING, `Version ${latestVersion} is available`)
             })
             .catch(err => {
-                if(err.response.data.message) setNotification(NOTIFICATION_TYPES.DANGER, `ERR: ${err.response.data.message}`)
-                else setNotification(NOTIFICATION_TYPES.DANGER, "ERR: Couldn't Fetch GitHub Data")
+                if(err.response.data.message) setNotification(NOTIFICATION_TYPES.DANGER, `Error: ${err.response.data.message}`)
+                else setNotification(NOTIFICATION_TYPES.DANGER, "Error in Fetching GitHub Data")
             })
         }
-        async function type() {
-            const text = data[x].substring(0, index+1)
-            element.innerText = text
-            index++
-            if(text === data[x]) {
-                clearInterval(interval)
-                setTimeout(() => interval = setInterval(backspace, 15), 1000)
-            }
-        }
-        async function backspace() {
-            const text = data[x].substring(0, index-1)
-            element.innerText = text
-            index--
-            if(text === '') {
-                index = 0
-                clearInterval(interval)
-                x === (data.length-1) ? x=0 : x++
-                setTimeout(() => interval = setInterval(type, 80), 100)
-            }
-        }
         if(star && license && version) getRepoInfo()
-        interval = setInterval(type, 80)
     },[star, stars, license, version])
 
     useEffect(() => {
@@ -80,7 +56,10 @@ const Landing = () => {
                     if(i >= data) return
                     i = i + (data > 400 ? Math.round(data/200) : data > 200 ? 10 : data > 25 ? 2 : 1)
                     if(i > data) i = data
-                    setTimeout(() => {element.innerText=i; updateValue()}, data < 50 ? 300 : data < 500 ? 30 : 15)
+                    setTimeout(() => {
+                        element.innerText=i
+                        updateValue()
+                    }, data < 50 ? 300 : data < 500 ? 30 : 15)
                 }
                 updateValue()
             })
@@ -90,6 +69,33 @@ const Landing = () => {
         }, { threshold: [1] }).observe(document.getElementById('counter'))
     }, [stars])
 
+    useEffect(() => {
+        var x = 0; var index = 0; var interval
+        const element = document.querySelector('.text-animation')
+        const data = element.getAttribute('data-elements').split(',')
+        async function type() {
+            const text = data[x].substring(0, index+1)
+            element.innerText = text
+            index++
+            if(text === data[x]) {
+                clearInterval(interval)
+                setTimeout(() => interval = setInterval(backspace, 15), 1000)
+            }
+        }
+        async function backspace() {
+            const text = data[x].substring(0, index-1)
+            element.innerText = text
+            index--
+            if(text === '') {
+                index = 0
+                clearInterval(interval)
+                x === (data.length-1) ? x=0 : x++
+                setTimeout(() => interval = setInterval(type, 80), 100)
+            }
+        }
+        interval = setInterval(type, 80)
+    }, [])
+
     return (
         <div>
             <div className="main">
@@ -153,7 +159,7 @@ const Landing = () => {
                         <CardActionArea className="rounded-corner">
                             <div className="p-12">
                                 <h1 className="raleway mb-20 blue-text">Open Source Project</h1>
-                                <h3 className="raleway">Otlio is completely an open source project which is hosted publicly on <span className="blue-text">GitHub</span>.</h3>
+                                <h3 className="raleway">Otlio is an open source project which is hosted publicly on <span className="blue-text">GitHub</span>.</h3>
                             </div>
                         </CardActionArea>
                         <table className="table-col-3 monospace no-border full-width block h2" cellPadding="0" cellSpacing="0" data-aos="fade-right" id="counter">
@@ -187,7 +193,7 @@ const Landing = () => {
                     {properties.support ? null : <Skeleton variant="rect" animation="wave" className="center-object" width="100%" height="100%" />} <img className={(properties.support ? "":"none ") + "center-object pc-device"} data-aos="fade-left" src="https://res.cloudinary.com/stanleyowen/image/upload/v1622188175/otlio/95cc64dd2825f9df13ec4ad683ecf339_ukjqzi.webp" alt="Customer Support" onLoad={() => handleChange('support', true)} />
                 </div>
             </div>
-            <div className="projects__container" id="additional-feature">
+            <div className="projects__container" id="additional-feature" data-aos="fade-down">
                 <div className="m-10">
                     <div className="projects__card">
                         <div className="blue-text flex">

diff --git a/client/src/components/login.component.js b/client/src/components/login.component.js
@@ -82,7 +82,7 @@ const Login = ({ userData }) => {
         async function submitData() {
             btn.innerText = "Logging In..."; btn.setAttribute("disabled", "true"); btn.classList.add("disabled")
             await axios.post(`${SERVER_URL}/account/login`, login, { headers: { 'XSRF-TOKEN': getCSRFToken() }, withCredentials: true })
-            .then(() => window.location = next ? next : '/')
+            .then(() => window.location = next ? next : '/app')
             .catch(err => {
                 if(err.response.status === 302) {handleChange('sendOTP', true); handleChange('verify', true)}
                 else setNotification(NOTIFICATION_TYPES.DANGER, err.response.data.message)
@@ -105,7 +105,7 @@ const Login = ({ userData }) => {
         async function submitData() {
             btn.innerText = "Verifying..."; btn.setAttribute("disabled", "true"); btn.classList.add("disabled")
             await axios.post(`${SERVER_URL}/account/otp`, {...data, rememberMe: login.rememberMe}, { headers: { 'XSRF-TOKEN': getCSRFToken() }, withCredentials: true })
-            .then(() => window.location = next ? next : '/')
+            .then(() => window.location = next ? next : '/app')
             .catch(err => {
                 setNotification(NOTIFICATION_TYPES.DANGER, err.response.data.message)
                 document.getElementById('token-1').focus()

diff --git a/client/src/components/navbar.component.js b/client/src/components/navbar.component.js
@@ -16,7 +16,7 @@ const Navbar = ({ userData }) => {
             document.body.classList.add("dark")
         }
         if(!isLoading && authenticated) {
-            setValue_a(['Dashboard','/', <FontAwesomeIcon icon={faListUl} style={{ fontSize: "1.5em" }} />])
+            setValue_a(['Dashboard','/app', <FontAwesomeIcon icon={faListUl} style={{ fontSize: "1.5em" }} />])
             setValue_b(['Sign Out','/logout', <FontAwesomeIcon icon={faSignOutAlt} style={{ fontSize: "1.5em" }} />])
             setValue_c(['Account Settings','/account', <FontAwesomeIcon icon={faUser} style={{ fontSize: "1.4em" }} />])
         }else {
@@ -46,7 +46,7 @@ const Navbar = ({ userData }) => {
     return (
         <div>
             <div className="navbar">
-                <a className="navbar__logo" href={ authenticated ? '/':'/welcome' }>Otlio</a>
+                <a className="navbar__logo" href={ authenticated ? '/app':'/' }>Otlio</a>
                 <div className="navbar__menu" id="navbar__menu">
                     <a className="animation__underline" href={value_a[1]}>
                         <span className="icons"><Tooltip title={value_a[0] ? value_a[0] : ''}><span>{value_a[2]}</span></Tooltip></span>

diff --git a/client/src/components/register-oauth.component.js b/client/src/components/register-oauth.component.js
@@ -43,7 +43,7 @@ const OAuth = ({ userData }) => {
         async function submitData() {
             btn.innerText = "Creating..."; btn.setAttribute("disabled", "true"); btn.classList.add("disabled")
             await axios.post(`${SERVER_URL}/oauth/${service}/register`, data, { headers: { 'XSRF-TOKEN': getCSRFToken() }, withCredentials: true })
-            .then(() => window.location = '/')
+            .then(() => window.location = '/app')
             .catch(err => setNotification(NOTIFICATION_TYPES.DANGER, err.response.data.message))
             btn.innerText = "Create Account"; btn.removeAttribute("disabled"); btn.classList.remove("disabled")
         }

diff --git a/client/src/components/req-oauth.component.js b/client/src/components/req-oauth.component.js
@@ -13,13 +13,13 @@ const ReqOAuth = ({ userData }) => {
                 if(authenticated){
                     localStorage.setItem('info', JSON.stringify(res.data))
                     window.location='/account'
-                }else window.location='/'
+                }else window.location='/app'
             })
             .catch(err => {
-                if(err.response.status === 302) err.response.data.url ? window.location = err.response.data.url : window.location='/login'
+                if(err.response.status === 302) window.location = err.response.data.url ? err.response.data.url : '/login'
                 else {
                     localStorage.setItem('info', JSON.stringify(err.response.data))
-                    authenticated ? window.location='/account' : window.location='/login'
+                    window.location = authenticated ? '/account' : '/login'
                 }
             })
         }

diff --git a/client/src/components/reset-password.component.js b/client/src/components/reset-password.component.js
@@ -60,7 +60,7 @@ const ResetPassword = ({ userData }) => {
         async function submitData() {
             btn.innerText = "Saving..."; btn.setAttribute("disabled", "true"); btn.classList.add("disabled")
             await axios.post(`${SERVER_URL}/account/reset-password`, data, { headers: { 'XSRF-TOKEN': getCSRFToken() }, withCredentials: true })
-            .then(() => window.location = '/')
+            .then(() => window.location = '/app')
             .catch(err => setNotification(NOTIFICATION_TYPES.DANGER, err.response.data.message))
             btn.innerText = "Save Password"; btn.removeAttribute("disabled"); btn.classList.remove("disabled")
         }

diff --git a/client/src/components/support.component.js b/client/src/components/support.component.js
@@ -84,7 +84,7 @@ const Support = ({ userData }) => {
                     (<div className="center-object">
                         <h1 className="blue-text monospace">Message Sent</h1>
                         <h3 className="mt-20 monospace">Thank you for submitting the details. We have received your issue(s) and or enhancement(s), and you should receive an email from us after 48 hours.</h3>
-                        <button className="oauth-box google isCentered block mt-30 mb-20 p-12 button" onClick={() => authenticated ? window.location='/' : window.location='/get-started'}>Back to Home</button>
+                        <button className="oauth-box google isCentered block mt-30 mb-20 p-12 button" onClick={() => window.location = authenticated ? '/app' : '/get-started'}>Back to Home</button>
                     </div>) :
                     (<div className="no-padding mb-20">
                         <div className="form__contact no-margin">

diff --git a/client/src/components/verify-account.component.js b/client/src/components/verify-account.component.js
@@ -11,7 +11,7 @@ const VerifyAccount = ({ userData }) => {
             await axios.get(`${SERVER_URL}/account/verify`, { params: { id, token, type: 'accountVerification' }, withCredentials: true })
             .then(res => {
                 localStorage.setItem('info', JSON.stringify(res.data))
-                window.location='/'
+                window.location='/app'
             })
             .catch(err => {
                 if(err.response.status >= 500) setTimeout(() => validateData(), 5000)