Created personal project task previews on dashboard, hardcoded data shows that it works [RS]

frontend/src/Home.js

-import ProjectList from './ProjectList'
-import PersonalToDo from './PersonalToDo'
-import useFetch from './useFetch'
+import ProjectList from './ProjectList';
+import MyProjectTasks from './MyProjectTasks';
+import PersonalToDo from './PersonalToDo';
+import useFetch from './useFetch';
 import useToken from './useToken';
 import { useState } from "react";
 
 const Home = () => {
 
-    const {data: todos, errorTodos, isPendingTodos} = useFetch("/todos");
-    const {setToken, token} = useToken();
+    const { data: todos, errorTodos, isPendingTodos } = useFetch("/todos");
+    const { setToken, token } = useToken();
 
-    const {data: projects, errorRProjects, isPendingRProjects} = useFetch("/user_project/username/" + token);
+    const { data: projects, errorRProjects, isPendingRProjects } = useFetch("/user_project/username/" + token);
+    const project_tasks = [
+        {
+            "description": "This is example 1",
+            "due_date": "17/06/2021",
+            "priority": 1,
+            "completed": "Completed",
+            "project_id": 2,
+            "id": 1
+        },
+        {
+            "description": "This is example 2",
+            "due_date": "18/06/2021",
+            "priority": 1,
+            "completed": "Available",
+            "project_id": 3,
+            "id": 2
+        },
+        {
+            "description": "This is example 3",
+            "due_date": "21/06/2021",
+            "priority": 2,
+            "completed": "Available",
+            "project_id": 4,
+            "id": 3
+        }
+    ]
+
+    // const {data: project_tasks, errorProjectTasks, isPendingProjectTasks} = useFetch("/assigned_task/username/" + token)
 
     return (
         <div className="home">
             <h1>Dashboard</h1>
-            <div className="home-projects" style={{float: "left", width: "600px"}}>
-                { isPendingRProjects && <h2>Loading...</h2> }
-                { projects && <ProjectList projects={projects} title="My Projects"/> }
+            <div className="home-projects" style={{ float: "left", width: "600px" }}>
+                {isPendingRProjects && <h2>Loading...</h2>}
+                {projects && <ProjectList projects={projects} title="My Projects" />}
             </div>
             <div className="homeTodos">
-                { isPendingTodos && <h2>Loading...</h2> }
-                { todos && <PersonalToDo todos={todos.filter(todo => todo.username === token)} title="Personal ToDo items"/> }
+                {isPendingTodos && <h2>Loading...</h2>}
+                {todos && <PersonalToDo todos={todos.filter(todo => todo.username === token)} title="Personal ToDo items" />}
+            </div>
+            <div className="home-project-tasks" style={{ float: "left", width: "600px" }}>
+                {isPendingRProjects && <h2>Loading...</h2>}
+                {projects && <MyProjectTasks tasks={project_tasks} title="My tasks from all projects" />}
             </div>
         </div>
-        
+
     );
 }
- 
+
 export default Home;
\ No newline at end of file

frontend/src/MyProjectTasks.js

+import useFetch from './useFetch'
+import { useState } from "react";
+
+const MyProjectTasks = ({ tasks, title }) => {
+    return (
+        <div>
+            <h2>{title}</h2>
+
+            <div className="my-project-tasks">
+                {tasks.map((task) => (
+                    <div className="task-preview" key={task.id}>
+                        <h2>{task.description}</h2>
+                        <h3><strong>Priority level:</strong> {task.priority}</h3>
+                        <h3><strong>To be done by:</strong> {task.due_date}</h3>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default MyProjectTasks;
\ No newline at end of file

frontend/src/index.css

@@ -552,3 +552,31 @@ Note: Beware of modifying this element as it can break the animations - you shou
 .dropdown {
   max-width: 400px;
 }
+
+/* Project task previews on personal dashboard */
+.task-preview {
+  padding: 6px;
+  margin: 2px;
+  border-bottom: 1px;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  box-shadow: 1px 3px 5px rgb(194, 194, 194);
+}
+
+.task-preview:hover {
+  box-shadow: 1px 3px 5px gray;
+}
+
+.task-preview h2 {
+  padding-top: 10px;
+  font-size: 20;
+  color: blue;
+  padding-bottom: 7px;
+}
+
+.todo-preview h3 {
+  font-size: 10;
+  color: rgb(0, 0, 0);
+  padding-bottom: 7px;
+  padding-left: 4px;
+}
\ No newline at end of file