edit profile

cypress/integration/router.spec.js

@@ -26,6 +26,11 @@ describe('App Router', () => {
     cy.get('section');
   });
 
+  it('contains Edit Profile page', () => {
+    cy.visit(ROUTES.EDIT_PROFILE);
+    cy.get('section');
+  });
+
   it('contains Dashboard page', () => {
     cy.visit(ROUTES.DASHBOARD);
     cy.get('section');

src/constants/routes.ts

@@ -7,4 +7,5 @@ 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';

src/pages/Dashboard.tsx

@@ -4,8 +4,6 @@ import {
   faUserCircle,
   faGraduationCap,
   faUserSlash,
-  faCross,
-  faTimes,
 } from '@fortawesome/free-solid-svg-icons';
 import {faBlackTie} from '@fortawesome/free-brands-svg-icons';
 import Header from '../components/Header';
@@ -42,7 +40,7 @@ const Dashboard: FC<DevFull> = () => {
         </thead>
         <tbody>
           {dev.experiences.map((exp: Experience, i: number) => (
-            <tr>
+            <tr key={i}>
               <td>{exp.company}</td>
               <td className="hide-sm">{exp.position}</td>
               <td className="hide-sm">{getTimePeriod(exp.from, exp.to)}</td>
@@ -66,7 +64,7 @@ const Dashboard: FC<DevFull> = () => {
         </thead>
         <tbody>
           {dev.educations.map((edu: Education, i: number) => (
-            <tr>
+            <tr key={i}>
               <td>{edu.school}</td>
               <td className="hide-sm">{edu.field}</td>
               <td className="hide-sm">{getTimePeriod(edu.from, edu.to)}</td>

src/pages/EditProfile.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import Header from '../components/Header';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {
+  faTwitter,
+  faFacebook,
+  faYoutube,
+  faLinkedin,
+  faInstagram,
+} from '@fortawesome/free-brands-svg-icons';
+
+const EditProfile = () => {
+  return (
+    <section className="container">
+      <Header
+        title="Create your profile"
+        lead="Let's get some information to make your profile stand out"
+      />
+      <small>* marks required fields</small>
+
+      <form className="form">
+        <div className="form-group">
+          <select name="status" required>
+            <option value="0">* Select Professional Status</option>
+            <option value="Developer">Developer</option>
+            <option value="Junior Developer">Junior Developer</option>
+            <option value="Senior Developer">Senior Developer</option>
+            <option value="Manager">Manager</option>
+            <option value="Student or Learning">Student or Learning</option>
+            <option value="Instructor">Instructor or Teacher</option>
+            <option value="Intern">Intern</option>
+            <option value="Other">Other</option>
+          </select>
+          <small className="form-text">
+            Give us an idea of where you are at in your career
+          </small>
+        </div>
+        <div className="form-group">
+          <input type="text" placeholder="Company" name="company" />
+          <small className="form-text">
+            Could be your own company or one you work for
+          </small>
+        </div>
+        <div className="form-group">
+          <input type="text" placeholder="Website" name="website" />
+          <small className="form-text">
+            Could be your own or a company website
+          </small>
+        </div>
+        <div className="form-group">
+          <input type="text" placeholder="Location" name="location" />
+          <small className="form-text">
+            City & state suggested (eg. Boston, MA)
+          </small>
+        </div>
+        <div className="form-group">
+          <input type="text" placeholder="* Skills" name="skills" required />
+          <small className="form-text">
+            Please use comma separated values (eg. HTML,CSS,JavaScript,PHP)
+          </small>
+        </div>
+        <div className="form-group">
+          <input
+            type="text"
+            placeholder="Github Username"
+            name="githubusername"
+          />
+          <small className="form-text">
+            If you want your latest repos and a Github link, include your
+            username
+          </small>
+        </div>
+        <div className="form-group">
+          <textarea placeholder="A short bio of yourself" name="bio"></textarea>
+          <small className="form-text">Tell us a little about yourself</small>
+        </div>
+
+        <div className="my-2">
+          <button type="button" className="btn btn-light">
+            Add Social Network Links
+          </button>
+          <span>Optional</span>
+        </div>
+
+        <div className="form-group social-input">
+          <FontAwesomeIcon icon={faFacebook} size="2x" />
+          <input type="text" placeholder="Facebook URL" name="facebook" />
+        </div>
+
+        <div className="form-group social-input">
+          <FontAwesomeIcon icon={faInstagram} size="2x" />
+          <input type="text" placeholder="Instagram URL" name="instagram" />
+        </div>
+
+        <div className="form-group social-input">
+          <FontAwesomeIcon icon={faLinkedin} size="2x" />
+          <input type="text" placeholder="Linkedin URL" name="linkedin" />
+        </div>
+
+        <div className="form-group social-input">
+          <FontAwesomeIcon icon={faTwitter} size="2x" />
+          <input type="text" placeholder="Twitter URL" name="twitter" />
+        </div>
+
+        <div className="form-group social-input">
+          <FontAwesomeIcon icon={faYoutube} size="2x" />
+          <input type="text" placeholder="YouTube URL" name="youtube" />
+        </div>
+
+        <input type="submit" className="btn btn-primary my-1" value="Submit" />
+        <a className="btn btn-light my-1" href="dashboard.html">
+          Go Back
+        </a>
+      </form>
+    </section>
+  );
+};
+
+export default EditProfile;

src/router/Router.tsx

@@ -5,6 +5,7 @@ import SignUp from '../pages/SignUp';
 import SignIn from '../pages/SignIn';
 import Developers from '../pages/Developers';
 import Profile from '../pages/Profile';
+import EditProfile from '../pages/EditProfile';
 import Dashboard from '../pages/Dashboard';
 import * as ROUTES from '../constants/routes';
 
@@ -15,6 +16,7 @@ const Router: FC = () => (
     <Route exact path={ROUTES.SIGN_IN} component={SignIn} />
     <Route exact path={ROUTES.DEVELOPERS} component={Developers} />
     <Route exact path={ROUTES.PROFILE} component={Profile} />
+    <Route exact path={ROUTES.EDIT_PROFILE} component={EditProfile} />
     <Route exact path={ROUTES.DASHBOARD} component={Dashboard} />
   </Switch>
 );

src/static/css/style.min.css

@@ -316,23 +316,23 @@
 .form .social-input {
   display: flex;
 }
-.form .social-input i {
+.form .social-input svg {
   padding: 0.5rem;
-  width: 4rem;
+  width: 3rem;
 }
-.form .social-input i.fa-twitter {
+.form .social-input svg.fa-twitter {
   color: #38a1f3;
 }
-.form .social-input i.fa-facebook {
+.form .social-input svg.fa-facebook {
   color: #3b5998;
 }
-.form .social-input i.fa-instagram {
+.form .social-input svg.fa-instagram {
   color: #3f729b;
 }
-.form .social-input i.fa-youtube {
+.form .social-input svg.fa-youtube {
   color: #c4302b;
 }
-.form .social-input i.fa-linkedin {
+.form .social-input svg.fa-linkedin {
   color: #0077b5;
 }
 @media (max-width: 700px) {

src/static/scss/_form.scss

@@ -7,10 +7,10 @@
     margin-top: 0.3rem;
     color: #888;
   }
-  input[type="text"],
+  input[type='text'],
-  input[type="email"],
+  input[type='email'],
-  input[type="password"],
+  input[type='password'],
-  input[type="date"],
+  input[type='date'],
   select,
   textarea {
     display: block;
@@ -21,16 +21,16 @@
     border-radius: 0.3rem;
   }
 
-  input[type="submit"] {
+  input[type='submit'] {
     font: inherit;
   }
 
   .social-input {
     display: flex;
 
-    i {
+    svg {
       padding: 0.5rem;
-      width: 4rem;
+      width: 3rem;
 
       &.fa-twitter {
         color: #38a1f3;