From 81c9db61bb315cc843a0b91a6c180d780048019f Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Thu, 14 May 2020 17:39:10 +0200
Subject: [PATCH] use an enum for routes and statuses

---
 cypress/integration/router.spec.js | 24 ++++++++++++------------
 package.json                       |  2 +-
 src/components/NavBar.tsx          | 20 ++++++++++----------
 src/constants/routes.ts            | 28 ++++++++++++++++------------
 src/pages/Dashboard.tsx            |  8 ++++----
 src/pages/EditProfile.tsx          |  1 +
 src/pages/Landing.tsx              |  6 +++---
 src/pages/NotFound.tsx             |  6 +++---
 src/pages/SignIn.tsx               |  6 +++---
 src/pages/SignUp.tsx               |  6 +++---
 src/router/PrivateRoute.tsx        |  4 ++--
 src/router/Router.tsx              | 24 ++++++++++++------------
 yarn.lock                          |  8 ++++----
 13 files changed, 74 insertions(+), 69 deletions(-)

diff --git a/cypress/integration/router.spec.js b/cypress/integration/router.spec.js
index 95f5121..de84149 100644
--- a/cypress/integration/router.spec.js
+++ b/cypress/integration/router.spec.js
@@ -1,58 +1,58 @@
-import * as ROUTES from '../../src/constants/routes';
+import Routes from '../../src/constants/Routes';
 
 describe('App Router', () => {
   it('contains Landing page', () => {
-    cy.visit(ROUTES.LANDING);
+    cy.visit(Routes.LANDING);
     cy.get('section');
   });
 
   it('contains SignUp page', () => {
-    cy.visit(ROUTES.SIGN_UP);
+    cy.visit(Routes.SIGN_UP);
     cy.get('section');
   });
 
   it('contains SignIn page', () => {
-    cy.visit(ROUTES.SIGN_IN);
+    cy.visit(Routes.SIGN_IN);
     cy.get('section');
   });
 
   it('contains Developers page', () => {
-    cy.visit(ROUTES.DEVELOPERS);
+    cy.visit(Routes.DEVELOPERS);
     cy.get('section');
   });
 
   it('contains Profile page', () => {
-    cy.visit(ROUTES.PROFILE);
+    cy.visit(Routes.PROFILE);
     cy.get('section');
   });
 
   it('contains Edit Profile page', () => {
-    cy.visit(ROUTES.EDIT_PROFILE);
+    cy.visit(Routes.EDIT_PROFILE);
     cy.get('section');
   });
 
   it('contains Add Experience page', () => {
-    cy.visit(ROUTES.ADD_EXPERIENCE);
+    cy.visit(Routes.ADD_EXPERIENCE);
     cy.get('section');
   });
 
   it('contains Add Education page', () => {
-    cy.visit(ROUTES.ADD_EDUCATION);
+    cy.visit(Routes.ADD_EDUCATION);
     cy.get('section');
   });
 
   it('contains Dashboard page', () => {
-    cy.visit(ROUTES.DASHBOARD);
+    cy.visit(Routes.DASHBOARD);
     cy.get('section');
   });
 
   it('contains Post page', () => {
-    cy.visit(ROUTES.POST);
+    cy.visit(Routes.POST);
     cy.get('section');
   });
 
   it('contains Posts page', () => {
-    cy.visit(ROUTES.POSTS);
+    cy.visit(Routes.POSTS);
     cy.get('section');
   });
 });
diff --git a/package.json b/package.json
index 31db85a..8b26dce 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "redux-firestore": "^0.13.0",
-    "typescript": "~3.7.2"
+    "typescript": "^3.9.2"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index a17b763..606b0ff 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,7 +1,7 @@
 import React, {FC} from 'react';
 // Routing
 import {Link} from 'react-router-dom';
-import * as ROUTES from '../constants/routes';
+import Routes from '../constants/routes';
 //Redux
 import {WithFirebaseProps} from 'react-redux-firebase';
 import {enhance} from '../store/firebase';
@@ -17,23 +17,23 @@ interface IProps extends WithFirebaseProps<User> {
 }
 
 /**
- * Main Navbar serves navigation routes.
+ * Main Navbar serves navigation Routes.
  */
 const NavBar: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
   const publicLinks = (
     <ul data-testid="publicLinks">
       <li>
-        <Link to={ROUTES.DEVELOPERS} data-testid="devsLink">
+        <Link to={Routes.DEVELOPERS} data-testid="devsLink">
           Developers
         </Link>
       </li>
       <li>
-        <Link to={ROUTES.SIGN_UP} data-testid="signupLink">
+        <Link to={Routes.SIGN_UP} data-testid="signupLink">
           Register
         </Link>
       </li>
       <li>
-        <Link to={ROUTES.SIGN_IN} data-testid="loginLink">
+        <Link to={Routes.SIGN_IN} data-testid="loginLink">
           Login
         </Link>
       </li>
@@ -43,24 +43,24 @@ const NavBar: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
   const privateLinks = (
     <ul data-testid="privateLinks">
       <li>
-        <Link to={ROUTES.DEVELOPERS} data-testid="devsLink">
+        <Link to={Routes.DEVELOPERS} data-testid="devsLink">
           Developers
         </Link>
       </li>
       <li>
-        <Link to={ROUTES.POSTS} data-testid="postsLink">
+        <Link to={Routes.POSTS} data-testid="postsLink">
           Posts
         </Link>
       </li>
       <li>
-        <Link to={ROUTES.DASHBOARD} data-testid="dashboardLink">
+        <Link to={Routes.DASHBOARD} data-testid="dashboardLink">
           <FontAwesomeIcon icon={faUser} />
           <span className="hide-sm"> Dashboard</span>
         </Link>
       </li>
       <li>
         <Link
-          to={ROUTES.SIGN_IN}
+          to={Routes.SIGN_IN}
           data-testid="logoutLink"
           onClick={() => firebase.logout()}
         >
@@ -77,7 +77,7 @@ const NavBar: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
   return (
     <nav className="navbar bg-dark">
       <h1>
-        <Link to={ROUTES.LANDING} data-testid="homeLink">
+        <Link to={Routes.LANDING} data-testid="homeLink">
           <FontAwesomeIcon icon={faCode} /> DevBook
         </Link>
       </h1>
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index 33e8207..1908343 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -1,15 +1,19 @@
 /**
- * Register all routes here for easy future modification.
+ * Register all Routes here for easy future modification.
  * Paths must start with '/'
  */
-export const LANDING: string = '/';
-export const SIGN_UP: string = '/signup';
-export const SIGN_IN: string = '/signin';
-export const DEVELOPERS: string = '/developers';
-export const PROFILE: string = '/profile';
-export const EDIT_PROFILE: string = '/edit-profile';
-export const DASHBOARD: string = '/dashboard';
-export const ADD_EXPERIENCE: string = '/add-experience';
-export const ADD_EDUCATION: string = '/add-education';
-export const POST: string = '/post';
-export const POSTS: string = '/posts';
+enum Routes {
+  LANDING = '/',
+  SIGN_UP = '/signup',
+  SIGN_IN = '/signin',
+  DEVELOPERS = '/developers',
+  PROFILE = '/profile',
+  EDIT_PROFILE = '/edit-profile',
+  DASHBOARD = '/dashboard',
+  ADD_EXPERIENCE = '/add-experience',
+  ADD_EDUCATION = '/add-education',
+  POST = '/post',
+  POSTS = '/posts',
+}
+
+export default Routes;
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 7b21930..10ffcb6 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -4,7 +4,7 @@ import {WithFirebaseProps} from 'react-redux-firebase';
 import {enhance} from '../store/firebase';
 // Routing
 import {Link} from 'react-router-dom';
-import * as ROUTES from '../constants/routes';
+import Routes from '../constants/routes';
 // Style
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {
@@ -36,13 +36,13 @@ const Dashboard: FC<IProps> = ({
     <section className="container">
       <Header title="Dashboard" lead={`Welcome ${displayName}`} />
       <div className="dash-buttons">
-        <Link to={ROUTES.EDIT_PROFILE} className="btn btn-light">
+        <Link to={Routes.EDIT_PROFILE} className="btn btn-light">
           <FontAwesomeIcon icon={faUserCircle} /> Edit Profile
         </Link>
-        <Link to={ROUTES.ADD_EXPERIENCE} className="btn btn-light">
+        <Link to={Routes.ADD_EXPERIENCE} className="btn btn-light">
           <FontAwesomeIcon icon={faBlackTie} /> Add Experience
         </Link>
-        <Link to={ROUTES.ADD_EDUCATION} className="btn btn-light">
+        <Link to={Routes.ADD_EDUCATION} className="btn btn-light">
           <FontAwesomeIcon icon={faGraduationCap} /> Add Education
         </Link>
       </div>
diff --git a/src/pages/EditProfile.tsx b/src/pages/EditProfile.tsx
index 5243433..a130933 100644
--- a/src/pages/EditProfile.tsx
+++ b/src/pages/EditProfile.tsx
@@ -1,4 +1,5 @@
 import React, {FC} from 'react';
+// Style
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {
   faTwitter,
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index 776a466..e02a2e4 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -1,6 +1,6 @@
 import React, {FC} from 'react';
 import {Link} from 'react-router-dom';
-import * as ROUTES from '../constants/routes';
+import Routes from '../constants/routes';
 import Header from '../components/Header';
 
 /**
@@ -16,10 +16,10 @@ const Landing: FC = () => (
           icon="code"
         />
         <div className="buttons">
-          <Link to={ROUTES.SIGN_UP} className="btn btn-primary">
+          <Link to={Routes.SIGN_UP} className="btn btn-primary">
             Sign up
           </Link>
-          <Link to={ROUTES.SIGN_IN} className="btn btn-light">
+          <Link to={Routes.SIGN_IN} className="btn btn-light">
             Login
           </Link>
         </div>
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index 544dfcd..c4383bb 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -1,7 +1,7 @@
 import React, {FC} from 'react';
 import {Link} from 'react-router-dom';
 import Header from '../components/Header';
-import * as ROUTES from '../constants/routes';
+import Routes from '../constants/routes';
 
 const NotFound: FC = () => (
   <section className="not-found">
@@ -13,10 +13,10 @@ const NotFound: FC = () => (
           icon="not-found"
         />
         <div className="buttons">
-          <Link to={ROUTES.SIGN_UP} className="btn btn-primary">
+          <Link to={Routes.SIGN_UP} className="btn btn-primary">
             Sign up
           </Link>
-          <Link to={ROUTES.SIGN_IN} className="btn btn-light">
+          <Link to={Routes.SIGN_IN} className="btn btn-light">
             Login
           </Link>
         </div>
diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx
index cd1635f..d4b0a17 100644
--- a/src/pages/SignIn.tsx
+++ b/src/pages/SignIn.tsx
@@ -4,7 +4,7 @@ import {WithFirebaseProps} from 'react-redux-firebase';
 import {enhance} from '../store/firebase';
 // Routing
 import {Link, Redirect} from 'react-router-dom';
-import * as ROUTES from '../constants/routes';
+import Routes from '../constants/routes';
 // Style
 import GoogleButton from 'react-google-button';
 import Header from '../components/Header';
@@ -58,7 +58,7 @@ const SignIn: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
 
   // redirect to dashboard if connected
   if (isLoaded && !isEmpty) {
-    return <Redirect to={ROUTES.DASHBOARD} />;
+    return <Redirect to={Routes.DASHBOARD} />;
   }
 
   return (
@@ -98,7 +98,7 @@ const SignIn: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
         />
       </form>
       <p className="my-1">
-        Don't have an account? <Link to={ROUTES.SIGN_UP}>Sign up</Link>
+        Don't have an account? <Link to={Routes.SIGN_UP}>Sign up</Link>
       </p>
     </section>
   );
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index 2438b9e..cbddce5 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -1,7 +1,7 @@
 import React, {FC, useState} from 'react';
 // Routing
 import {Link, Redirect} from 'react-router-dom';
-import * as ROUTES from '../constants/routes';
+import Routes from '../constants/routes';
 // Redux
 import {WithFirebaseProps} from 'react-redux-firebase';
 import {enhance} from '../store/firebase';
@@ -64,7 +64,7 @@ const SignUp: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
 
   // redirect to dashboard if connected
   if (isLoaded && !isEmpty) {
-    return <Redirect to={ROUTES.DASHBOARD} />;
+    return <Redirect to={Routes.DASHBOARD} />;
   }
 
   return (
@@ -131,7 +131,7 @@ const SignUp: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
         />
       </form>
       <p className="my-1">
-        Already have an account? <Link to={ROUTES.SIGN_IN}>Sign in</Link>
+        Already have an account? <Link to={Routes.SIGN_IN}>Sign in</Link>
       </p>
     </section>
   );
diff --git a/src/router/PrivateRoute.tsx b/src/router/PrivateRoute.tsx
index 39be7da..924e3f7 100644
--- a/src/router/PrivateRoute.tsx
+++ b/src/router/PrivateRoute.tsx
@@ -1,7 +1,7 @@
 import React, {FC} from 'react';
 // Routing
 import {Route, Redirect} from 'react-router-dom';
-import * as ROUTES from '../constants/routes';
+import Routes from '../constants/routes';
 // Redux
 import {isLoaded, isEmpty} from 'react-redux-firebase';
 import {useSelector} from 'react-redux';
@@ -34,7 +34,7 @@ const PrivateRoute: FC<IProps> = ({
         ) : (
           <Redirect
             to={{
-              pathname: ROUTES.SIGN_IN,
+              pathname: Routes.SIGN_IN,
               state: {from: location},
             }}
           />
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
index 4863a65..2d65705 100644
--- a/src/router/Router.tsx
+++ b/src/router/Router.tsx
@@ -12,27 +12,27 @@ import AddEducation from '../pages/AddEducation';
 import PostPage from '../pages/Post';
 import Posts from '../pages/Posts';
 import NotFound from '../pages/NotFound';
-import * as ROUTES from '../constants/routes';
+import Routes from '../constants/routes';
 import PrivateRoute from './PrivateRoute';
 
 /** Register navigation paths accessible */
 const Router: FC = () => (
   <Switch>
-    <Route exact path={ROUTES.LANDING} component={Landing} />
-    <Route exact path={ROUTES.SIGN_UP} component={SignUp} />
-    <Route exact path={ROUTES.SIGN_IN} component={SignIn} />
-    <Route exact path={ROUTES.DEVELOPERS} component={Developers} />
-    <Route exact path={ROUTES.PROFILE} component={Profile} />
-    <PrivateRoute exact path={ROUTES.EDIT_PROFILE} component={EditProfile} />
-    <PrivateRoute exact path={ROUTES.DASHBOARD} component={Dashboard} />
+    <Route exact path={Routes.LANDING} component={Landing} />
+    <Route exact path={Routes.SIGN_UP} component={SignUp} />
+    <Route exact path={Routes.SIGN_IN} component={SignIn} />
+    <Route exact path={Routes.DEVELOPERS} component={Developers} />
+    <Route exact path={Routes.PROFILE} component={Profile} />
+    <PrivateRoute exact path={Routes.EDIT_PROFILE} component={EditProfile} />
+    <PrivateRoute exact path={Routes.DASHBOARD} component={Dashboard} />
     <PrivateRoute
       exact
-      path={ROUTES.ADD_EXPERIENCE}
+      path={Routes.ADD_EXPERIENCE}
       component={AddExperience}
     />
-    <PrivateRoute exact path={ROUTES.ADD_EDUCATION} component={AddEducation} />
-    <PrivateRoute exact path={ROUTES.POST} component={PostPage} />
-    <PrivateRoute exact path={ROUTES.POSTS} component={Posts} />
+    <PrivateRoute exact path={Routes.ADD_EDUCATION} component={AddEducation} />
+    <PrivateRoute exact path={Routes.POST} component={PostPage} />
+    <PrivateRoute exact path={Routes.POSTS} component={Posts} />
     <Route component={NotFound} />
   </Switch>
 );
diff --git a/yarn.lock b/yarn.lock
index 8522ce0..669364c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11243,10 +11243,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@~3.7.2:
-  version "3.7.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"
-  integrity sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==
+typescript@^3.9.2:
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.2.tgz#64e9c8e9be6ea583c54607677dd4680a1cf35db9"
+  integrity sha512-q2ktq4n/uLuNNShyayit+DTobV2ApPEo/6so68JaD5ojvc/6GClBipedB9zNWYxRSAlZXAe405Rlijzl6qDiSw==
 
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"