From 9e30322ffc57cdb2d816041a2ec0254abb4422fe Mon Sep 17 00:00:00 2001 From: Ruidy Date: Sat, 16 May 2020 14:17:37 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=8ADashboard=20(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * connect Dashboard to store * delete account button logs out... * buttons routing functional * refactor enhance to store * use an enum for routes and statuses * add statuses enum and enable EditProfile Form * conditional display of social links * Links type, * display alert on EditProfile form submit * refactor extract alert interface * update useForm hook to handle checkboxes * enable add education form * enable add experience form * add blank dev Profile on signup * enable delete credential button * delete account set profile to inactive * add isActive field to dev, checks for user existance on sign up to not overwrite inactive profiles --- cypress/integration/router.spec.js | 24 +-- package.json | 2 +- src/components/Alert.tsx | 5 +- src/components/DevProfile.tsx | 6 +- src/components/NavBar.tsx | 36 ++-- src/constants/routes.ts | 28 +-- src/constants/statuses.ts | 12 ++ src/hooks/index.ts | 12 +- src/models/Dev.ts | 53 +++++- src/pages/AddEducation.tsx | 233 +++++++++++++++++------ src/pages/AddExperience.tsx | 160 ++++++++++++++-- src/pages/Dashboard.tsx | 94 ++++++++-- src/pages/Developers.tsx | 4 +- src/pages/EditProfile.tsx | 286 ++++++++++++++++++++++++----- src/pages/Landing.tsx | 6 +- src/pages/NotFound.tsx | 6 +- src/pages/Profile.tsx | 4 +- src/pages/SignIn.tsx | 21 +-- src/pages/SignUp.tsx | 49 +++-- src/router/PrivateRoute.tsx | 8 +- src/router/Router.tsx | 24 +-- src/store/firebase/config.ts | 2 +- src/store/firebase/index.ts | 7 + src/store/index.ts | 6 +- src/types/Alert.ts | 13 ++ src/types/Education.ts | 3 +- src/types/Experience.ts | 4 +- src/types/Links.ts | 11 ++ src/types/TimePeriod.ts | 4 +- yarn.lock | 8 +- 30 files changed, 875 insertions(+), 256 deletions(-) create mode 100644 src/constants/statuses.ts create mode 100644 src/types/Alert.ts create mode 100644 src/types/Links.ts 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/Alert.tsx b/src/components/Alert.tsx index 0aa6566..e00238c 100644 --- a/src/components/Alert.tsx +++ b/src/components/Alert.tsx @@ -4,10 +4,11 @@ import {faExclamationTriangle} from '@fortawesome/free-solid-svg-icons'; interface IProps { text: string; + color?: string; } -const Alert: FC = ({text}) => ( -
+const Alert: FC = ({text, color = 'danger'}) => ( +
{text}
); diff --git a/src/components/DevProfile.tsx b/src/components/DevProfile.tsx index 9c19076..44c65d6 100644 --- a/src/components/DevProfile.tsx +++ b/src/components/DevProfile.tsx @@ -9,16 +9,16 @@ import {DevSummary} from '../models/Dev'; */ const DevProfile: FC = ({ id, - name, + displayName, picture, description, location, skills, }) => (
- {name} + {displayName}
-

{name}

+

{displayName}

{description}

{location}

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index d2622be..e2eddc5 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -1,41 +1,40 @@ 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 {compose} from '@reduxjs/toolkit'; -import {connect} from 'react-redux'; -import {withFirebase, WithFirebaseProps} from 'react-redux-firebase'; -import {selectProfile} from '../store/firebase'; +import {WithFirebaseProps} from 'react-redux-firebase'; +import {enhance} from '../store/firebase'; // Style import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {faCode, faSignOutAlt, faUser} from '@fortawesome/free-solid-svg-icons'; // Typing import User from '../models/User'; +import Dev from '../models/Dev'; -interface IProps extends WithFirebaseProps { +interface IProps extends Dev, WithFirebaseProps { isEmpty: boolean; isLoaded: boolean; } /** - * Main Navbar serves navigation routes. + * Main Navbar serves navigation Routes. */ -const NavBar: FC = ({firebase, isEmpty, isLoaded}) => { +const NavBar: FC = ({firebase, isEmpty, isLoaded, isActive}) => { const publicLinks = (