ruidy/devbook_ts
1
0
Fork 0
mirror of https://github.com/rjNemo/devbook_ts synced 2026-06-09 20:16:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use an enum for routes and statuses

Browse source
This commit is contained in:
Ruidy Nemausat 2020-05-14 17:39:10 +02:00
parent 7bd8c49305
commit 81c9db61bb
13 changed files with 74 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
cypress/integration/router.spec.js
View file

@ -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');
});
});

2
package.json
View file

@ -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",

20
src/components/NavBar.tsx
View file

@ -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>

28
src/constants/routes.ts
View file

@ -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;

8
src/pages/Dashboard.tsx
View file

@ -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>

1
src/pages/EditProfile.tsx
View file

@ -1,4 +1,5 @@
import React, {FC} from 'react';
// Style
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {
faTwitter,

6
src/pages/Landing.tsx
View file

@ -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>

6
src/pages/NotFound.tsx
View file

@ -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>

6
src/pages/SignIn.tsx
View file

@ -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>
);

6
src/pages/SignUp.tsx
View file

@ -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>
);

4
src/router/PrivateRoute.tsx
View file

@ -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},
}}
/>

24
src/router/Router.tsx
View file

@ -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>
);

8
yarn.lock
View file

@ -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"