split allprojects to a seperate component

src/App.js

@@ -48,6 +48,10 @@ function App() {
                 {!user && <Redirect to="/login" />}
                 {user && <CreateProject />}
               </Route>
+              <Route path="/projects/:id">
+                {!user && <Redirect to="/login" />}
+                {/* {user && <AllProjects />} */}
+              </Route>
             </Switch>
 
           </BrowserRouter>

src/components/Dashboard/AllProjects.js

@@ -1,11 +1,30 @@
-import React from 'react';
-function AllProjects({projects}) {
-  return ( <>
-  {projects.length === 0 && <p>No projects yet!</p>}
-  {projects.map(project => (
-    <div key={project.id}>{project.name}</div>
-  ))}
-  </> );
-}
+import { Link } from 'react-router-dom'
+import Avatar from '../UI/Avatar'
+
+export default function AllProjects({ projects }) {
+  console.log(projects)
 
-export default AllProjects;
+  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/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);

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 (<div>
-  {/* <Sidebar/> */}
-  <h2 className="page-title">Dashboard</h2>
-  {error && <p>{error}</p>}
-  {documents && <AllProjects projects={documents}/>}
-  </div>);
-}
+export default function Dashboard() {
+  const { documents, error } = useCollection('projects')
 
-export default Dashboard;
+  return (
+    <div>
+      <h2 className="page-title">Dashboard</h2>
+      {error && <p className="error">{error}</p>}
+      {documents && <AllProjects projects={documents} />}
+    </div>
+  )
+}