From 43fff681f676552524eb42066232a1818f233772 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Tue, 12 May 2020 15:56:57 +0200 Subject: [PATCH] lay profile top and about out --- cypress/integration/router.spec.js | 5 + src/constants/routes.ts | 1 + src/pages/Developers.tsx | 6 +- src/pages/Profile.tsx | 224 +++++++++++++++++++++++++++++ src/router/Router.tsx | 2 + 5 files changed, 233 insertions(+), 5 deletions(-) create mode 100644 src/pages/Profile.tsx diff --git a/cypress/integration/router.spec.js b/cypress/integration/router.spec.js index 75069b7..b188c7d 100644 --- a/cypress/integration/router.spec.js +++ b/cypress/integration/router.spec.js @@ -20,4 +20,9 @@ describe('App Router', () => { cy.visit(ROUTES.DEVELOPERS); cy.get('section'); }); + + it('contains Profile page', () => { + cy.visit(ROUTES.PROFILE); + cy.get('section'); + }); }); diff --git a/src/constants/routes.ts b/src/constants/routes.ts index aabd78b..72bcce5 100644 --- a/src/constants/routes.ts +++ b/src/constants/routes.ts @@ -6,3 +6,4 @@ 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'; diff --git a/src/pages/Developers.tsx b/src/pages/Developers.tsx index 866e545..079db19 100644 --- a/src/pages/Developers.tsx +++ b/src/pages/Developers.tsx @@ -3,11 +3,7 @@ import Header from '../components/Header'; import DevProfile from '../components/DevProfile'; import DevSummary from '../models/DevSummary'; -// interface IProps { -// developers: DevSummary[] -// } - -// const Developers: FC = ({developers}) => ( +// const Developers: FC = (developers) => { const Developers: FC = () => { const developers: DevSummary[] = [ { diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx new file mode 100644 index 0000000..99e5fa1 --- /dev/null +++ b/src/pages/Profile.tsx @@ -0,0 +1,224 @@ +import React, {FC} from 'react'; +import DevFull from '../models/DevFull'; +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; +import { + faGithub, + faFacebook, + faInstagram, + faLinkedin, + faTwitter, +} from '@fortawesome/free-brands-svg-icons'; +import { + faGlobe, + IconDefinition, + faCheck, +} from '@fortawesome/free-solid-svg-icons'; + +const Profile: FC = () => { + const dev = { + id: '0', + name: 'John Doe', + picture: + 'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200', + description: 'Developer at Microsoft', + location: 'Seattle, WA', + skills: ['HTML', 'CSS', 'JavaScript', 'Python'], + links: { + web: '#', + instagram: 'http://insta.com', + facebook: '#', + linkedin: '#', + twitter: '#', + github: '#', + }, + bio: + 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis unde quae vero enim adipisci voluptas magni sapiente reprehenderit error minima.', + }; + + /** return the icon corresponding to the social name */ + const renderSocialIcon = (name: string): IconDefinition => { + switch (name) { + case 'facebook': + return faFacebook; + case 'github': + return faGithub; + case 'instagram': + return faInstagram; + case 'linkedin': + return faLinkedin; + case 'twitter': + return faTwitter; + default: + return faGlobe; + } + }; + + return ( +
+ + Back to profiles + + +
+
+ Some guy +

{dev.name}

+

{dev.description}

+

{dev.location}

+
+ {Object.entries(dev.links).map(([icon, webAddress], i: number) => ( + + + + ))} +
+
+ +
+

{`${dev.name}'s Bio`}

+

{dev.bio}

+
+

Skill Set

+
+ {dev.skills.map((s: string, i: number) => ( +
+ {s} +
+ ))} +
+
+ +
+

Experiences

+
+

Microsoft

+

Oct. 2011 - Current

+

+ Position: Senior Developer +

+

+ Description: Lorem ipsum dolor sit amet + consectetur adipisicing elit. Repellendus at rem totam sed qui! + Quas. +

+
+
+

Sun Microsystems

+

Oct. 2004 - Nov. 2010

+

+ Position: System Admin +

+

+ Description: Lorem ipsum dolor sit amet + consectetur adipisicing elit. Repellendus at rem totam sed qui! + Quas. +

+
+
+
+

Education

+
+

University of Washington

+

Sep. 1993 - June 1999

+

+ Degree: Master +

+

+ Field: Computer Science +

+

+ Description: Lorem ipsum dolor sit amet + consectetur adipisicing elit. Repellendus at rem totam sed qui! + Quas. +

+
+
+
+

+ + GitHub Repos +

+ +
+
+

+ Repo #1 +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, + deserunt. +

+
+
+
    +
  • + Stars: 42 +
    • +
  • + Watchers: 2 +
    • +
  • + Forks: 4 +
    • +
+
+
+
+
+

+ Repo #2 +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, + deserunt. +

+
+
+
    +
  • + Stars: 42 +
    • +
  • + Watchers: 2 +
    • +
  • + Forks: 4 +
    • +
+
+
+
+
+

+ Repo #3 +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, + deserunt. +

+
+
+
    +
  • + Stars: 42 +
    • +
  • + Watchers: 2 +
    • +
  • + Forks: 4 +
    • +
+
+
+
+
+
+ ); +}; + +export default Profile; diff --git a/src/router/Router.tsx b/src/router/Router.tsx index 0e20ed9..1945756 100644 --- a/src/router/Router.tsx +++ b/src/router/Router.tsx @@ -4,6 +4,7 @@ import Landing from '../pages/Landing'; import SignUp from '../pages/SignUp'; import SignIn from '../pages/SignIn'; import Developers from '../pages/Developers'; +import Profile from '../pages/Profile'; import * as ROUTES from '../constants/routes'; const Router: FC = () => ( @@ -12,6 +13,7 @@ const Router: FC = () => ( + );