Links type,

src/models/Dev.ts

@@ -1,5 +1,6 @@
-import Experience from '../types/Experience';
 import Education from '../types/Education';
+import Experience from '../types/Experience';
+import Links from '../types/Links';
 import Repo from '../types/Repo';
 
 /** Shorter dev interface */
@@ -17,30 +18,39 @@ export interface DevSummary {
  */
 interface Dev extends DevSummary {
   bio: string;
-  links: Object;
+  status: string;
+  company: string;
+  links: Links;
   experiences: Experience[];
   educations: Education[];
   repos: Repo[];
 }
 
+/** create profile tagline */
+export const getDescription = (status: string, company: string) =>
+  `${status} at ${company}`;
+
 /**
  * sample Dev for development and tests
  */
 export const dummyDev: Dev = {
   id: '0',
   displayName: 'John Doe',
+  status: 'Developer',
+  company: 'Microsoft',
   picture:
     'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
   description: 'Developer at Microsoft',
   location: 'Seattle, WA',
   skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
   links: {
-    web: '#',
+    website: '#',
     instagram: 'http://insta.com',
     facebook: '#',
     linkedin: '#',
     twitter: '#',
     github: '#',
+    youtube: '#',
   },
   bio:
     'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis unde quae vero enim adipisci voluptas magni sapiente reprehenderit error minima.',

src/pages/EditProfile.tsx

@@ -1,6 +1,9 @@
-import React, {FC, useState} from 'react';
+import React, {FC, useState, useEffect} from 'react';
 import {Link} from 'react-router-dom';
 import Routes from '../constants/routes';
+// Redux
+import {enhance, selectProfile} from '../store/firebase';
+import {WithFirebaseProps, isLoaded, isEmpty} from 'react-redux-firebase';
 // Style
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {
@@ -15,7 +18,12 @@ import Statuses from '../constants/statuses';
 // Form
 import useForm from '../hooks';
 
-interface InitFormData {
+import User from '../models/User';
+import Dev from '../models/Dev';
+import Links from '../types/Links';
+import {useSelector} from 'react-redux';
+
+interface FormData {
   status: string;
   company: string;
   website: string;
@@ -29,61 +37,99 @@ interface InitFormData {
   twitter: string;
   youtube: string;
 }
+
+interface IProps extends Dev, WithFirebaseProps<User> {}
+
 /**
  * Form to update dev's personal information.
  */
-const EditProfile: FC = () => {
+const EditProfile: FC<IProps> = ({
+  firebase,
+  status,
+  skills,
+  company,
+  links,
+  location,
+  bio,
+}) => {
   const [showLinks, setShowLinks] = useState(false);
+  const [variable, setVariable] = useState(useSelector(selectProfile));
   const initFormData = {
-    status: '',
+    status: status ?? 'Developer',
-    company: '',
+    company: company,
-    website: '',
+    location: location ?? '',
-    location: '',
+    bio: bio ?? '',
-    skills: '',
+    skills: skills?.toString() ?? '',
-    github: '',
+    website: links?.website ?? '',
-    bio: '',
+    github: links?.github ?? '',
-    facebook: '',
+    facebook: links?.facebook ?? '',
-    linkedin: '',
+    linkedin: links?.linkedin ?? '',
-    instagram: '',
+    instagram: links?.instagram ?? '',
-    twitter: '',
+    twitter: links?.twitter ?? '',
-    youtube: '',
+    youtube: links?.youtube ?? '',
   };
-  const {formData, handleChange, resetForm} = useForm<InitFormData>(
-    initFormData,
-  );
 
-  const {
+  const {formData, handleChange, resetForm} = useForm<FormData>(initFormData);
+
+  console.log(company, formData.company, variable, isEmpty(firebase.auth));
+  /** construct profile object from formData */
+  const makeProfile = ({
     status,
     company,
-    website,
     location,
-    skills,
-    github,
     bio,
+    website,
+    instagram,
     facebook,
     linkedin,
-    instagram,
     twitter,
+    github,
     youtube,
-  } = formData;
+    skills,
+  }: FormData) => {
+    const newLinks: Links = {
+      website,
+      instagram,
+      facebook,
+      linkedin,
+      twitter,
+      github,
+      youtube,
+    };
+    const newSkills: string[] = skills?.split(',');
+    return {
+      status,
+      company,
+      location,
+      bio,
+      links: newLinks,
+      skills: newSkills,
+    };
+  };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
     e.preventDefault();
-    console.log('Submitted');
+    const updatedDev = makeProfile(formData);
+
+    firebase.updateProfile(updatedDev, {useSet: true, merge: true});
+    console.log(`Submitted ${JSON.stringify(formData, null, 2)}`);
+    resetForm();
   };
 
-  const revealSocialLinks = () => setShowLinks(true);
+  const isDisabled: boolean = formData.status === '' || formData.skills === '';
+
+  const toggleSocialLinks = () => setShowLinks(!showLinks);
   return (
     <section className="container">
       <FormHeader
-        title="Create your profile"
+        title="Edit your profile"
         lead="Let's get some information to make your profile stand out"
       />
 
       <form className="form" onSubmit={handleSubmit}>
         <div className="form-group">
-          <select name="status" required autoFocus onChange={handleChange}>
+          <select name="status" required onChange={handleChange}>
-            <option value="0">* Select Professional Status</option>
+            <option disabled>* Select Professional Status</option>
             {Statuses.map((s: string, i: number) => (
               <option value={s} key={i}>
                 {s}
@@ -99,7 +145,8 @@ const EditProfile: FC = () => {
             type="text"
             placeholder="Company"
             name="company"
-            value={company}
+            value={formData.company}
+            // value={variable}
             onChange={handleChange}
           />
           <small className="form-text">
@@ -111,7 +158,7 @@ const EditProfile: FC = () => {
             type="text"
             placeholder="Website"
             name="website"
-            value={website}
+            value={formData.website}
             onChange={handleChange}
           />
           <small className="form-text">
@@ -123,7 +170,7 @@ const EditProfile: FC = () => {
             type="text"
             placeholder="Location"
             name="location"
-            value={location}
+            value={formData.location}
             onChange={handleChange}
           />
           <small className="form-text">
@@ -136,7 +183,7 @@ const EditProfile: FC = () => {
             placeholder="* Skills"
             name="skills"
             required
-            value={skills}
+            value={formData.skills}
             onChange={handleChange}
           />
           <small className="form-text">
@@ -148,7 +195,7 @@ const EditProfile: FC = () => {
             type="text"
             placeholder="Github Username"
             name="github"
-            value={github}
+            value={formData.github}
             onChange={handleChange}
           />
           <small className="form-text">
@@ -160,7 +207,7 @@ const EditProfile: FC = () => {
           <textarea
             placeholder="A short bio of yourself"
             name="bio"
-            value={bio}
+            value={formData.bio}
             onChange={handleChange}
           ></textarea>
           <small className="form-text">Tell us a little about yourself</small>
@@ -170,9 +217,9 @@ const EditProfile: FC = () => {
           <button
             type="button"
             className="btn btn-light"
-            onClick={revealSocialLinks}
+            onClick={toggleSocialLinks}
           >
-            Add Social Network Links
+            {showLinks ? 'Hide' : 'Add'} Social Network Links
           </button>
           <span>Optional</span>
         </div>
@@ -185,7 +232,7 @@ const EditProfile: FC = () => {
                 type="text"
                 placeholder="Facebook URL"
                 name="facebook"
-                value={facebook}
+                value={formData.facebook}
                 onChange={handleChange}
               />
             </div>
@@ -196,7 +243,7 @@ const EditProfile: FC = () => {
                 type="text"
                 placeholder="Instagram URL"
                 name="instagram"
-                value={instagram}
+                value={formData.instagram}
                 onChange={handleChange}
               />
             </div>
@@ -207,7 +254,7 @@ const EditProfile: FC = () => {
                 type="text"
                 placeholder="Linkedin URL"
                 name="linkedin"
-                value={linkedin}
+                value={formData.linkedin}
                 onChange={handleChange}
               />
             </div>
@@ -218,7 +265,7 @@ const EditProfile: FC = () => {
                 type="text"
                 placeholder="Twitter URL"
                 name="twitter"
-                value={twitter}
+                value={formData.twitter}
                 onChange={handleChange}
               />
             </div>
@@ -229,14 +276,19 @@ const EditProfile: FC = () => {
                 type="text"
                 placeholder="YouTube URL"
                 name="youtube"
-                value={youtube}
+                value={formData.youtube}
                 onChange={handleChange}
               />
             </div>
           </>
         )}
 
-        <input type="submit" className="btn btn-primary my-1" value="Submit" />
+        <input
+          type="submit"
+          className="btn btn-primary my-1"
+          value="Submit"
+          disabled={isDisabled}
+        />
         <Link to={Routes.DASHBOARD} className="btn btn-light my-1">
           Go Back
         </Link>
@@ -245,4 +297,4 @@ const EditProfile: FC = () => {
   );
 };
 
-export default EditProfile;
+export default enhance(EditProfile);

src/types/Links.ts

@@ -0,0 +1,11 @@
+interface Links {
+  website: string;
+  instagram: string;
+  facebook: string;
+  linkedin: string;
+  twitter: string;
+  github: string;
+  youtube: string;
+}
+
+export default Links;