From 920ee01d65d975c6f40555697858066833e13a19 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Thu, 14 May 2020 20:07:31 +0200 Subject: [PATCH] Links type, --- src/models/Dev.ts | 16 ++++- src/pages/EditProfile.tsx | 140 ++++++++++++++++++++++++++------------ src/types/Links.ts | 11 +++ 3 files changed, 120 insertions(+), 47 deletions(-) create mode 100644 src/types/Links.ts diff --git a/src/models/Dev.ts b/src/models/Dev.ts index 5e1312e..556d31f 100644 --- a/src/models/Dev.ts +++ b/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.', diff --git a/src/pages/EditProfile.tsx b/src/pages/EditProfile.tsx index 219e04f..4af0d58 100644 --- a/src/pages/EditProfile.tsx +++ b/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 {} + /** * Form to update dev's personal information. */ -const EditProfile: FC = () => { +const EditProfile: FC = ({ + firebase, + status, + skills, + company, + links, + location, + bio, +}) => { const [showLinks, setShowLinks] = useState(false); + const [variable, setVariable] = useState(useSelector(selectProfile)); const initFormData = { - status: '', - company: '', - website: '', - location: '', - skills: '', - github: '', - bio: '', - facebook: '', - linkedin: '', - instagram: '', - twitter: '', - youtube: '', + status: status ?? 'Developer', + company: company, + location: location ?? '', + bio: bio ?? '', + skills: skills?.toString() ?? '', + website: links?.website ?? '', + github: links?.github ?? '', + facebook: links?.facebook ?? '', + linkedin: links?.linkedin ?? '', + instagram: links?.instagram ?? '', + twitter: links?.twitter ?? '', + youtube: links?.youtube ?? '', }; - const {formData, handleChange, resetForm} = useForm( - initFormData, - ); - const { + const {formData, handleChange, resetForm} = useForm(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): 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 (
- + {Statuses.map((s: string, i: number) => (
@@ -185,7 +232,7 @@ const EditProfile: FC = () => { type="text" placeholder="Facebook URL" name="facebook" - value={facebook} + value={formData.facebook} onChange={handleChange} /> @@ -196,7 +243,7 @@ const EditProfile: FC = () => { type="text" placeholder="Instagram URL" name="instagram" - value={instagram} + value={formData.instagram} onChange={handleChange} /> @@ -207,7 +254,7 @@ const EditProfile: FC = () => { type="text" placeholder="Linkedin URL" name="linkedin" - value={linkedin} + value={formData.linkedin} onChange={handleChange} /> @@ -218,7 +265,7 @@ const EditProfile: FC = () => { type="text" placeholder="Twitter URL" name="twitter" - value={twitter} + value={formData.twitter} onChange={handleChange} /> @@ -229,14 +276,19 @@ const EditProfile: FC = () => { type="text" placeholder="YouTube URL" name="youtube" - value={youtube} + value={formData.youtube} onChange={handleChange} /> )} - + Go Back @@ -245,4 +297,4 @@ const EditProfile: FC = () => { ); }; -export default EditProfile; +export default enhance(EditProfile); diff --git a/src/types/Links.ts b/src/types/Links.ts new file mode 100644 index 0000000..0b8fc07 --- /dev/null +++ b/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;