Merge pull request #21 from Eevee-Elites-Capstone/project-dashboard

Project dashboard

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.tokenColorCustomizations": {
+    "comments": "",
+    "textMateRules": []
+  }
+}

package.json

@@ -12,6 +12,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "5.1",
     "react-scripts": "5.0.0",
+    "react-select": "^5.2.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -9,44 +9,55 @@ import Footer from './components/UI/Footer';
 import { useAuthContext } from './hooks/useAuthContext';
 import EditProfile from './components/EditProfile';
 import Dashboard from './components/Dashboard/Dashboard';
+import OnlineUsers from './components/Users/OnlineUsers';
+import CreateProject from './components/Dashboard/CreateProject';
 
 function App() {
   const { authIsReady, user } = useAuthContext()
 
   return (
-    <div className="min-h-min">
+    <div className="min-h-max">
       {/* <div>
       <Navbar />
       </div> */}
       <div>
-      {authIsReady && (
-        <BrowserRouter>
-          <Switch>
-            <Route exact path="/">
-            <LandingPage />
-            </Route>
-            <Route exact path="/landing">
-              <LandingPage />
-            </Route>
-            <Route exact path="/editprofile">
-              <EditProfile />
-            </Route>
-            <Route exact path="/home">
-              {user ? <Home /> : <Redirect to="/signin" />}
-            </Route>
-            <Route path="/home" component={Home} />
-            <Route path="/signin">
-              <SignIn />
-            </Route>
-            <Route path="/signup">
-              {user ? <Redirect to="/"/> : <SignUp />}
-            </Route>
-            <Route path="/dashboard">
-              <Dashboard/>
-            </Route>
-          </Switch>
-        </BrowserRouter>
-      )}
+        {authIsReady && (
+          <BrowserRouter>
+            <Switch>
+              <Route exact path="/">
+                <LandingPage />
+              </Route>
+              <Route exact path="/landing">
+                <LandingPage />
+              </Route>
+              <Route exact path="/editprofile">
+                <EditProfile />
+              </Route>
+              <Route exact path="/home">
+                {user ? <Home /> : <Redirect to="/signin" />}
+              </Route>
+              <Route path="/home" component={Home} />
+              <Route path="/signin">
+                <SignIn />
+              </Route>
+              <Route path="/signup">
+                {user ? <Redirect to="/" /> : <SignUp />}
+              </Route>
+              <Route path="/dashboard">
+                <Dashboard />
+                {user && <OnlineUsers />}
+              </Route>
+              <Route path="/createproject">
+                {!user && <Redirect to="/login" />}
+                {user && <CreateProject />}
+              </Route>
+              <Route path="/projects/:id">
+                {!user && <Redirect to="/login" />}
+                {/* {user && <AllProjects />} */}
+              </Route>
+            </Switch>
+          </BrowserRouter>
+        )}
       </div>
     </div>
   );

src/components/Auth/SignUp.js

@@ -8,8 +8,11 @@ function SignUp() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   //displayName is a default value from firebase
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [picture, setPicture] = useState(null)
+  const [pictureError, setPictureError] = useState(null)
   const [displayName, setDisplayName] = useState("");
-  const [lastName, setLastName] = useState("");
   /* Need to upgrade to punch in FirstName and LastName fields */
   const [formType, setFormType] = useState("");
   const onFormTypeSelect = (type) => {

src/components/Dashboard/AllProjects.js

@@ -0,0 +1,30 @@
+import { Link } from 'react-router-dom'
+import Avatar from '../UI/Avatar'
+
+export default function AllProjects({ projects }) {
+  console.log(projects)
+
+  return (
+    <div className="project-list">
+      {projects.length === 0 && <p>No projects yet!</p>}
+      {projects.map(project => (
+        <Link to={`/projects/${project.id}`} key={project.id}>
+          <h4>{project.name}</h4>
+          <p>Due by
+          {/* {project.dueDate.toDate().toDateString()} */}
+          </p>
+          <div className="assigned-to">
+            <p><strong>Assigned to:</strong></p>
+            <ul>
+              {/* {project.assignedUsersList.map(user => (
+                <li key={user.photoURL}>
+                  <Avatar src={user.photoURL} />
+                </li>
+              ))} */}
+            </ul>
+          </div>
+        </Link>
+      ))}
+    </div>
+  )
+}

src/components/Dashboard/Calendar.js

@@ -0,0 +1,8 @@
+import React from 'react';
+function Calendar() {
+  return ( <>
+
+  </> );
+}
+
+export default Calendar;

src/components/Dashboard/Create.css

@@ -0,0 +1,3 @@
+.create-form {
+  max-width: 600px;
+}

src/components/Dashboard/CreateProject.js

@@ -0,0 +1,145 @@
+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'
+
+const categories = [
+  { value: 'development', label: 'Development' },
+  { value: 'design', label: 'Design' },
+  { value: 'sales', label: 'Sales' },
+  { value: 'marketing', label: 'Marketing' },
+]
+
+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, id: user.id}, label: user.displayName }
+      })
+      setUsers(userOptions)
+    }
+  }, [documents])
+    // console.log(users)
+
+  // form field values
+  const [name, setName] = useState('')
+  const [details, setDetails] = useState('')
+  const [dueDate, setDueDate] = useState('')
+  const [category, setCategory] = useState('')
+  const [assignedUsers, setAssignedUsers] = useState([])
+  const [formError, setFormError] = useState(null)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    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,
+      dueDate
+    }
+    // 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 (
+    <div className="create-form">
+      <h2 className="page-title">Create a new Project</h2>
+      <form onSubmit={handleSubmit}>
+        <label>
+          <span>Project name:</span>
+          <input
+            required
+            type="text"
+            onChange={(e) => setName(e.target.value)}
+            value={name}
+          />
+        </label>
+        <label>
+          <span>Project Details:</span>
+          <textarea
+            required
+            onChange={(e) => setDetails(e.target.value)}
+            value={details}
+          ></textarea>
+        </label>
+        <label>
+          <span>Set due date:</span>
+          <input
+            required
+            type="date"
+            onChange={(e) => setDueDate(e.target.value)}
+            value={dueDate}
+          />
+        </label>
+        <label>
+          <span>Project category:</span>
+          <Select
+            onChange={(option) => setCategory(option)}
+            options={categories}
+          />
+        </label>
+        <label>
+          <span>Assign to:</span>
+          <Select
+            onChange={(userOption) => setAssignedUsers(userOption)}
+            options={users}
+            isMulti
+          />
+        </label>
+
+        <button className="btn">Add Project</button>
+
+        {formError && <p className="error">{formError}</p>}
+      </form>
+    </div>
+  )
+}

src/components/Dashboard/Dashboard.js

@@ -1,14 +1,16 @@
-import React from 'react';
-import Card from './Card';
-import Sidebar from './Sidebar';
+import { useCollection } from '../../hooks/useCollection'
 
-function Dashboard() {
-  return (<div>
-    <Sidebar />
+// components
+import AllProjects from './AllProjects'
+
+export default function Dashboard() {
+  const { documents, error } = useCollection('projects')
+
+  return (
     <div>
-    <Card/>
+      <h2 className="page-title">Dashboard</h2>
+      {error && <p className="error">{error}</p>}
+      {documents && <AllProjects projects={documents} />}
     </div>
-  </div>);
+  )
 }
-
-export default Dashboard;