From 5ebbd42fe773d4616abbd8e8291b0bc51af87b97 Mon Sep 17 00:00:00 2001 From: Trang Nguyen Date: Tue, 1 Feb 2022 23:54:24 -0500 Subject: [PATCH 1/6] add upload profile picture functionality --- src/App.js | 2 +- src/components/Auth/SignUp.js | 53 +++++- src/components/Dashboard/AllProjects.js | 8 + src/components/Dashboard/Calendar.js | 8 + src/components/Dashboard/Dashboard.js | 5 +- src/components/Dashboard/Sidebar.js | 216 +++++++++++----------- src/components/Dashboard/SingleProject.js | 8 + src/components/UI/Avatar.js | 9 + src/hooks/useSignup.js | 28 +-- 9 files changed, 207 insertions(+), 130 deletions(-) create mode 100644 src/components/UI/Avatar.js diff --git a/src/App.js b/src/App.js index c7fcf2c..e701b52 100644 --- a/src/App.js +++ b/src/App.js @@ -14,7 +14,7 @@ function App() { const { authIsReady, user } = useAuthContext() return ( -
+
{/*
*/} diff --git a/src/components/Auth/SignUp.js b/src/components/Auth/SignUp.js index 0b6fcf9..b720bcb 100644 --- a/src/components/Auth/SignUp.js +++ b/src/components/Auth/SignUp.js @@ -9,8 +9,10 @@ function SignUp() { const [email, setEmail] = useState('') const [password, setPassword] = useState('') //displayName is a default value from firebase - const [displayName, setDisplayName] = useState('') + const [firstName, setFirstName] = useState('') const [lastName, setLastName] = useState('') + const [picture, setPicture] = useState(null) + const [pictureError, setPictureError] = useState(null) /* Need to upgrade to punch in FirstName and LastName fields */ const [formType, setFormType] = useState('') @@ -20,10 +22,33 @@ function SignUp() { const handleSubmit = (e) => { e.preventDefault() - signup(email, password, displayName, lastName); + signup(email, password, firstName, lastName, picture); + } + + const handleFileChange = (e) => { + setPicture(null) + let selected = e.target.files[0] + console.log(selected) + + if (!selected) { + setPictureError('Please select a file') + return + } + if (!selected.type.includes('image')) { + setPictureError('Selected file must be an image') + return + } + if (selected.size > 3000000) { + setPictureError('Image file size must be less than 3MB') + return + } + + setPictureError(null) + setPicture(selected) + console.log('picture updated') } return (<> - +
@@ -48,8 +73,8 @@ function SignUp() { required autoFocus placeholder="First Name" - onChange={(e) => setDisplayName(e.target.value)} - value={displayName} + onChange={(e) => setFirstName(e.target.value)} + value={firstName} />
@@ -110,6 +135,22 @@ function SignUp() { />
+
+ + +
+ + {formError &&

{formError}

} + +
+ ) +} From 6224b0f0b01a677170aa3405b7fae96123e2c693 Mon Sep 17 00:00:00 2001 From: Trang Nguyen Date: Wed, 2 Feb 2022 00:56:56 -0500 Subject: [PATCH 4/6] add projects collection to firestore --- .vscode/settings.json | 6 +++ src/components/Dashboard/CreateProject.js | 54 +++++++++++++++++++++-- 2 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..a002ed1 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "editor.tokenColorCustomizations": { + "comments": "", + "textMateRules": [] + } +} diff --git a/src/components/Dashboard/CreateProject.js b/src/components/Dashboard/CreateProject.js index 3781e1b..2ef0713 100644 --- a/src/components/Dashboard/CreateProject.js +++ b/src/components/Dashboard/CreateProject.js @@ -1,6 +1,11 @@ import { useEffect, useState } from 'react' +import { useHistory } from 'react-router-dom' import Select from 'react-select' +import { timestamp } from '../../firebase/fbConfig' +import { useAuthContext } from '../../hooks/useAuthContext' import { useCollection } from '../../hooks/useCollection' +import { useFirestore } from '../../hooks/useFirestore' + // styles import './Create.css' @@ -13,20 +18,26 @@ const categories = [ ] export default function CreateProject() { + /**history hooks from react-router-dom */ + const history = useHistory() + /**Add project collection to firestore */ + const { addDocument, response } = useFirestore('projects') /*Assign function*/ const { documents } = useCollection('users') // console.log('All users', documents); const [users, setUsers] = useState([]) + const { user } = useAuthContext() /*map through the array of all users*/ useEffect(() => { if(documents) { const userOptions = documents.map(user => { - return { value: user, label: user.displayName} + return { value: {...user, id: user.id}, label: user.displayName } }) setUsers(userOptions) } }, [documents]) + // console.log(users) // form field values const [name, setName] = useState('') @@ -38,10 +49,47 @@ export default function CreateProject() { const handleSubmit = async (e) => { e.preventDefault() - - console.log(name, details, dueDate, category.value, assignedUsers) + setFormError(null) + /**Catching form error */ + if(!category) { + setFormError('Please select a project category') + return + } + // if(assignedUsers.length < 1) { + // setFormError('Please assign the project to at least 1 user') + // return + // } + const assignedUsersList = assignedUsers.map(u => { + return { + displayName: u.value.displayName, + photoURL: u.value.photoURL, + id: u.value.id + } + }) + const createdBy = { + displayName: user.displayName, + photoURL: user.photoURL, + id: user.uid + } + const project = { + name, + details, + category: category.value, + dueDate: timestamp.fromDate(new Date(dueDate)), + comments: [], + createdBy, + assignedUsersList + } + // console.log(name, details, dueDate, category.value, assignedUsers) + // console.log('project object', project); + /**Add document to firestore */ + await addDocument(project) + if(!response.error) { + history.push('/dashboard') + } } + return (

Create a new Project

From cc9f0a10edfbb6b26de1cc57a5401443c0b1343e Mon Sep 17 00:00:00 2001 From: Trang Nguyen Date: Wed, 2 Feb 2022 01:06:51 -0500 Subject: [PATCH 5/6] fetch allProjects on dashboard --- src/components/Dashboard/AllProjects.js | 7 +++++-- src/components/Dashboard/Dashboard.js | 7 +++++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/Dashboard/AllProjects.js b/src/components/Dashboard/AllProjects.js index 7716795..d9d7df1 100644 --- a/src/components/Dashboard/AllProjects.js +++ b/src/components/Dashboard/AllProjects.js @@ -1,7 +1,10 @@ import React from 'react'; -function AllProjects() { +function AllProjects({projects}) { return ( <> - + {projects.length === 0 &&

No projects yet!

} + {projects.map(project => ( +
{project.name}
+ ))} ); } diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js index 86fc809..cdf32fc 100644 --- a/src/components/Dashboard/Dashboard.js +++ b/src/components/Dashboard/Dashboard.js @@ -1,10 +1,17 @@ import React from 'react'; +import { useCollection } from '../../hooks/useCollection'; +import AllProjects from './AllProjects'; import Card from './Card'; import Sidebar from './Sidebar'; function Dashboard() { + const {documents, error} = useCollection('projects') + return (
{/* */} +

Dashboard

+ {error &&

{error}

} + {documents && }
); } From c672cfe11cb420fde7ba4c521a7a761779dfcd01 Mon Sep 17 00:00:00 2001 From: Trang Nguyen Date: Wed, 2 Feb 2022 01:21:57 -0500 Subject: [PATCH 6/6] split allprojects to a seperate component --- src/App.js | 4 +++ src/components/Dashboard/AllProjects.js | 39 +++++++++++++++++------ src/components/Dashboard/CreateProject.js | 2 +- src/components/Dashboard/Dashboard.js | 28 ++++++++-------- 4 files changed, 47 insertions(+), 26 deletions(-) diff --git a/src/App.js b/src/App.js index 5062a22..7483df8 100644 --- a/src/App.js +++ b/src/App.js @@ -48,6 +48,10 @@ function App() { {!user && } {user && } + + {!user && } + {/* {user && } */} + diff --git a/src/components/Dashboard/AllProjects.js b/src/components/Dashboard/AllProjects.js index d9d7df1..0c2e08a 100644 --- a/src/components/Dashboard/AllProjects.js +++ b/src/components/Dashboard/AllProjects.js @@ -1,11 +1,30 @@ -import React from 'react'; -function AllProjects({projects}) { - return ( <> - {projects.length === 0 &&

No projects yet!

} - {projects.map(project => ( -
{project.name}
- ))} - ); -} +import { Link } from 'react-router-dom' +import Avatar from '../UI/Avatar' + +export default function AllProjects({ projects }) { + console.log(projects) -export default AllProjects; + return ( +
+ {projects.length === 0 &&

No projects yet!

} + {projects.map(project => ( + +

{project.name}

+

Due by + {/* {project.dueDate.toDate().toDateString()} */} +

+
+

Assigned to:

+
    + {/* {project.assignedUsersList.map(user => ( +
  • + +
    • + ))} */} +
+
+ + ))} +
+ ) +} diff --git a/src/components/Dashboard/CreateProject.js b/src/components/Dashboard/CreateProject.js index 2ef0713..c428500 100644 --- a/src/components/Dashboard/CreateProject.js +++ b/src/components/Dashboard/CreateProject.js @@ -78,7 +78,7 @@ export default function CreateProject() { dueDate: timestamp.fromDate(new Date(dueDate)), comments: [], createdBy, - assignedUsersList + dueDate } // console.log(name, details, dueDate, category.value, assignedUsers) // console.log('project object', project); diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js index cdf32fc..88fc0e3 100644 --- a/src/components/Dashboard/Dashboard.js +++ b/src/components/Dashboard/Dashboard.js @@ -1,18 +1,16 @@ -import React from 'react'; -import { useCollection } from '../../hooks/useCollection'; -import AllProjects from './AllProjects'; -import Card from './Card'; -import Sidebar from './Sidebar'; +import { useCollection } from '../../hooks/useCollection' -function Dashboard() { - const {documents, error} = useCollection('projects') +// components +import AllProjects from './AllProjects' - return (
- {/* */} -

Dashboard

- {error &&

{error}

} - {documents && } -
); -} +export default function Dashboard() { + const { documents, error } = useCollection('projects') -export default Dashboard; + return ( +
+

Dashboard

+ {error &&

{error}

} + {documents && } +
+ ) +}