ruidy/devbook_ts
1
0
Fork 0
mirror of https://github.com/rjNemo/devbook_ts synced 2026-06-12 13:36: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', () => { describe('App Router', () => {
it('contains Landing page', () => { it('contains Landing page', () => {
cy.visit(ROUTES.LANDING); cy.visit(Routes.LANDING);
cy.get('section'); cy.get('section');
}); });
it('contains SignUp page', () => { it('contains SignUp page', () => {
cy.visit(ROUTES.SIGN_UP); cy.visit(Routes.SIGN_UP);
cy.get('section'); cy.get('section');
}); });
it('contains SignIn page', () => { it('contains SignIn page', () => {
cy.visit(ROUTES.SIGN_IN); cy.visit(Routes.SIGN_IN);
cy.get('section'); cy.get('section');
}); });
it('contains Developers page', () => { it('contains Developers page', () => {
cy.visit(ROUTES.DEVELOPERS); cy.visit(Routes.DEVELOPERS);
cy.get('section'); cy.get('section');
}); });
it('contains Profile page', () => { it('contains Profile page', () => {
cy.visit(ROUTES.PROFILE); cy.visit(Routes.PROFILE);
cy.get('section'); cy.get('section');
}); });
it('contains Edit Profile page', () => { it('contains Edit Profile page', () => {
cy.visit(ROUTES.EDIT_PROFILE); cy.visit(Routes.EDIT_PROFILE);
cy.get('section'); cy.get('section');
}); });
it('contains Add Experience page', () => { it('contains Add Experience page', () => {
cy.visit(ROUTES.ADD_EXPERIENCE); cy.visit(Routes.ADD_EXPERIENCE);
cy.get('section'); cy.get('section');
}); });
it('contains Add Education page', () => { it('contains Add Education page', () => {
cy.visit(ROUTES.ADD_EDUCATION); cy.visit(Routes.ADD_EDUCATION);
cy.get('section'); cy.get('section');
}); });
it('contains Dashboard page', () => { it('contains Dashboard page', () => {
cy.visit(ROUTES.DASHBOARD); cy.visit(Routes.DASHBOARD);
cy.get('section'); cy.get('section');
}); });
it('contains Post page', () => { it('contains Post page', () => {
cy.visit(ROUTES.POST); cy.visit(Routes.POST);
cy.get('section'); cy.get('section');
}); });
it('contains Posts page', () => { it('contains Posts page', () => {
cy.visit(ROUTES.POSTS); cy.visit(Routes.POSTS);
cy.get('section'); cy.get('section');
}); });
}); });

2
package.json
View file

@ -30,7 +30,7 @@
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "3.4.1", "react-scripts": "3.4.1",
"redux-firestore": "^0.13.0", "redux-firestore": "^0.13.0",
"typescript": "~3.7.2" "typescript": "^3.9.2"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

20
src/components/NavBar.tsx
View file

@ -1,7 +1,7 @@
import React, {FC} from 'react'; import React, {FC} from 'react';
// Routing // Routing
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import * as ROUTES from '../constants/routes'; import Routes from '../constants/routes';
//Redux //Redux
import {WithFirebaseProps} from 'react-redux-firebase'; import {WithFirebaseProps} from 'react-redux-firebase';
import {enhance} from '../store/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 NavBar: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
const publicLinks = ( const publicLinks = (
<ul data-testid="publicLinks"> <ul data-testid="publicLinks">
<li> <li>
<Link to={ROUTES.DEVELOPERS} data-testid="devsLink"> <Link to={Routes.DEVELOPERS} data-testid="devsLink">
Developers Developers
</Link> </Link>
</li> </li>
<li> <li>
<Link to={ROUTES.SIGN_UP} data-testid="signupLink"> <Link to={Routes.SIGN_UP} data-testid="signupLink">
Register Register
</Link> </Link>
</li> </li>
<li> <li>
<Link to={ROUTES.SIGN_IN} data-testid="loginLink"> <Link to={Routes.SIGN_IN} data-testid="loginLink">
Login Login
</Link> </Link>
</li> </li>
@ -43,24 +43,24 @@ const NavBar: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
const privateLinks = ( const privateLinks = (
<ul data-testid="privateLinks"> <ul data-testid="privateLinks">
<li> <li>
<Link to={ROUTES.DEVELOPERS} data-testid="devsLink"> <Link to={Routes.DEVELOPERS} data-testid="devsLink">
Developers Developers
</Link> </Link>
</li> </li>
<li> <li>
<Link to={ROUTES.POSTS} data-testid="postsLink"> <Link to={Routes.POSTS} data-testid="postsLink">
Posts Posts
</Link> </Link>
</li> </li>
<li> <li>
<Link to={ROUTES.DASHBOARD} data-testid="dashboardLink"> <Link to={Routes.DASHBOARD} data-testid="dashboardLink">
<FontAwesomeIcon icon={faUser} /> <FontAwesomeIcon icon={faUser} />
<span className="hide-sm"> Dashboard</span> <span className="hide-sm"> Dashboard</span>
</Link> </Link>
</li> </li>
<li> <li>
<Link <Link
to={ROUTES.SIGN_IN} to={Routes.SIGN_IN}
data-testid="logoutLink" data-testid="logoutLink"
onClick={() => firebase.logout()} onClick={() => firebase.logout()}
> >
@ -77,7 +77,7 @@ const NavBar: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
return ( return (
<nav className="navbar bg-dark"> <nav className="navbar bg-dark">
<h1> <h1>
<Link to={ROUTES.LANDING} data-testid="homeLink"> <Link to={Routes.LANDING} data-testid="homeLink">
<FontAwesomeIcon icon={faCode} /> DevBook <FontAwesomeIcon icon={faCode} /> DevBook
</Link> </Link>
</h1> </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 '/' * Paths must start with '/'
*/ */
export const LANDING: string = '/'; enum Routes {
export const SIGN_UP: string = '/signup'; LANDING = '/',
export const SIGN_IN: string = '/signin'; SIGN_UP = '/signup',
export const DEVELOPERS: string = '/developers'; SIGN_IN = '/signin',
export const PROFILE: string = '/profile'; DEVELOPERS = '/developers',
export const EDIT_PROFILE: string = '/edit-profile'; PROFILE = '/profile',
export const DASHBOARD: string = '/dashboard'; EDIT_PROFILE = '/edit-profile',
export const ADD_EXPERIENCE: string = '/add-experience'; DASHBOARD = '/dashboard',
export const ADD_EDUCATION: string = '/add-education'; ADD_EXPERIENCE = '/add-experience',
export const POST: string = '/post'; ADD_EDUCATION = '/add-education',
export const POSTS: string = '/posts'; 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'; import {enhance} from '../store/firebase';
// Routing // Routing
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import * as ROUTES from '../constants/routes'; import Routes from '../constants/routes';
// Style // Style
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import { import {
@ -36,13 +36,13 @@ const Dashboard: FC<IProps> = ({
<section className="container"> <section className="container">
<Header title="Dashboard" lead={`Welcome ${displayName}`} /> <Header title="Dashboard" lead={`Welcome ${displayName}`} />
<div className="dash-buttons"> <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 <FontAwesomeIcon icon={faUserCircle} /> Edit Profile
</Link> </Link>
<Link to={ROUTES.ADD_EXPERIENCE} className="btn btn-light"> <Link to={Routes.ADD_EXPERIENCE} className="btn btn-light">
<FontAwesomeIcon icon={faBlackTie} /> Add Experience <FontAwesomeIcon icon={faBlackTie} /> Add Experience
</Link> </Link>
<Link to={ROUTES.ADD_EDUCATION} className="btn btn-light"> <Link to={Routes.ADD_EDUCATION} className="btn btn-light">
<FontAwesomeIcon icon={faGraduationCap} /> Add Education <FontAwesomeIcon icon={faGraduationCap} /> Add Education
</Link> </Link>
</div> </div>

1
src/pages/EditProfile.tsx
View file

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

6
src/pages/Landing.tsx
View file

@ -1,6 +1,6 @@
import React, {FC} from 'react'; import React, {FC} from 'react';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import * as ROUTES from '../constants/routes'; import Routes from '../constants/routes';
import Header from '../components/Header'; import Header from '../components/Header';
/** /**
@ -16,10 +16,10 @@ const Landing: FC = () => (
icon="code" icon="code"
/> />
<div className="buttons"> <div className="buttons">
<Link to={ROUTES.SIGN_UP} className="btn btn-primary"> <Link to={Routes.SIGN_UP} className="btn btn-primary">
Sign up Sign up
</Link> </Link>
<Link to={ROUTES.SIGN_IN} className="btn btn-light"> <Link to={Routes.SIGN_IN} className="btn btn-light">
Login Login
</Link> </Link>
</div> </div>

6
src/pages/NotFound.tsx
View file

@ -1,7 +1,7 @@
import React, {FC} from 'react'; import React, {FC} from 'react';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import Header from '../components/Header'; import Header from '../components/Header';
import * as ROUTES from '../constants/routes'; import Routes from '../constants/routes';
const NotFound: FC = () => ( const NotFound: FC = () => (
<section className="not-found"> <section className="not-found">
@ -13,10 +13,10 @@ const NotFound: FC = () => (
icon="not-found" icon="not-found"
/> />
<div className="buttons"> <div className="buttons">
<Link to={ROUTES.SIGN_UP} className="btn btn-primary"> <Link to={Routes.SIGN_UP} className="btn btn-primary">
Sign up Sign up
</Link> </Link>
<Link to={ROUTES.SIGN_IN} className="btn btn-light"> <Link to={Routes.SIGN_IN} className="btn btn-light">
Login Login
</Link> </Link>
</div> </div>

6
src/pages/SignIn.tsx
View file

@ -4,7 +4,7 @@ import {WithFirebaseProps} from 'react-redux-firebase';
import {enhance} from '../store/firebase'; import {enhance} from '../store/firebase';
// Routing // Routing
import {Link, Redirect} from 'react-router-dom'; import {Link, Redirect} from 'react-router-dom';
import * as ROUTES from '../constants/routes'; import Routes from '../constants/routes';
// Style // Style
import GoogleButton from 'react-google-button'; import GoogleButton from 'react-google-button';
import Header from '../components/Header'; import Header from '../components/Header';
@ -58,7 +58,7 @@ const SignIn: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
// redirect to dashboard if connected // redirect to dashboard if connected
if (isLoaded && !isEmpty) { if (isLoaded && !isEmpty) {
return <Redirect to={ROUTES.DASHBOARD} />; return <Redirect to={Routes.DASHBOARD} />;
} }
return ( return (
@ -98,7 +98,7 @@ const SignIn: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
/> />
</form> </form>
<p className="my-1"> <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> </p>
</section> </section>
); );

6
src/pages/SignUp.tsx
View file

@ -1,7 +1,7 @@
import React, {FC, useState} from 'react'; import React, {FC, useState} from 'react';
// Routing // Routing
import {Link, Redirect} from 'react-router-dom'; import {Link, Redirect} from 'react-router-dom';
import * as ROUTES from '../constants/routes'; import Routes from '../constants/routes';
// Redux // Redux
import {WithFirebaseProps} from 'react-redux-firebase'; import {WithFirebaseProps} from 'react-redux-firebase';
import {enhance} from '../store/firebase'; import {enhance} from '../store/firebase';
@ -64,7 +64,7 @@ const SignUp: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
// redirect to dashboard if connected // redirect to dashboard if connected
if (isLoaded && !isEmpty) { if (isLoaded && !isEmpty) {
return <Redirect to={ROUTES.DASHBOARD} />; return <Redirect to={Routes.DASHBOARD} />;
} }
return ( return (
@ -131,7 +131,7 @@ const SignUp: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
/> />
</form> </form>
<p className="my-1"> <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> </p>
</section> </section>
); );

4
src/router/PrivateRoute.tsx
View file

@ -1,7 +1,7 @@
import React, {FC} from 'react'; import React, {FC} from 'react';
// Routing // Routing
import {Route, Redirect} from 'react-router-dom'; import {Route, Redirect} from 'react-router-dom';
import * as ROUTES from '../constants/routes'; import Routes from '../constants/routes';
// Redux // Redux
import {isLoaded, isEmpty} from 'react-redux-firebase'; import {isLoaded, isEmpty} from 'react-redux-firebase';
import {useSelector} from 'react-redux'; import {useSelector} from 'react-redux';
@ -34,7 +34,7 @@ const PrivateRoute: FC<IProps> = ({
) : ( ) : (
<Redirect <Redirect
to={{ to={{
pathname: ROUTES.SIGN_IN, pathname: Routes.SIGN_IN,
state: {from: location}, 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 PostPage from '../pages/Post';
import Posts from '../pages/Posts'; import Posts from '../pages/Posts';
import NotFound from '../pages/NotFound'; import NotFound from '../pages/NotFound';
import * as ROUTES from '../constants/routes'; import Routes from '../constants/routes';
import PrivateRoute from './PrivateRoute'; import PrivateRoute from './PrivateRoute';
/** Register navigation paths accessible */ /** Register navigation paths accessible */
const Router: FC = () => ( const Router: FC = () => (
<Switch> <Switch>
<Route exact path={ROUTES.LANDING} component={Landing} /> <Route exact path={Routes.LANDING} component={Landing} />
<Route exact path={ROUTES.SIGN_UP} component={SignUp} /> <Route exact path={Routes.SIGN_UP} component={SignUp} />
<Route exact path={ROUTES.SIGN_IN} component={SignIn} /> <Route exact path={Routes.SIGN_IN} component={SignIn} />
<Route exact path={ROUTES.DEVELOPERS} component={Developers} /> <Route exact path={Routes.DEVELOPERS} component={Developers} />
<Route exact path={ROUTES.PROFILE} component={Profile} /> <Route exact path={Routes.PROFILE} component={Profile} />
<PrivateRoute exact path={ROUTES.EDIT_PROFILE} component={EditProfile} /> <PrivateRoute exact path={Routes.EDIT_PROFILE} component={EditProfile} />
<PrivateRoute exact path={ROUTES.DASHBOARD} component={Dashboard} /> <PrivateRoute exact path={Routes.DASHBOARD} component={Dashboard} />
<PrivateRoute <PrivateRoute
exact exact
path={ROUTES.ADD_EXPERIENCE} path={Routes.ADD_EXPERIENCE}
component={AddExperience} component={AddExperience}
/> />
<PrivateRoute exact path={ROUTES.ADD_EDUCATION} component={AddEducation} /> <PrivateRoute exact path={Routes.ADD_EDUCATION} component={AddEducation} />
<PrivateRoute exact path={ROUTES.POST} component={PostPage} /> <PrivateRoute exact path={Routes.POST} component={PostPage} />
<PrivateRoute exact path={ROUTES.POSTS} component={Posts} /> <PrivateRoute exact path={Routes.POSTS} component={Posts} />
<Route component={NotFound} /> <Route component={NotFound} />
</Switch> </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" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
typescript@~3.7.2: typescript@^3.9.2:
version "3.7.5" version "3.9.2"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.2.tgz#64e9c8e9be6ea583c54607677dd4680a1cf35db9"
integrity sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw== integrity sha512-q2ktq4n/uLuNNShyayit+DTobV2ApPEo/6so68JaD5ojvc/6GClBipedB9zNWYxRSAlZXAe405Rlijzl6qDiSw==
unicode-canonical-property-names-ecmascript@^1.0.4: unicode-canonical-property-names-ecmascript@^1.0.4:
version "1.0.4" version "1.0.4"