205 add backend functionality for tasks page

amplify/data/resource.ts

@@ -15,7 +15,6 @@ const schema = a.schema({
       courses: a.hasMany("Course", "organizationId"),
       pathways: a.hasMany("Pathway", "organizationId"),
       admins: a.hasMany("User", "organizationId"),
-      tasks: a.hasMany("Tasks", "organizationId"),
     })
     .authorization((allow) => [allow.guest()]),
   User: a
@@ -70,18 +69,16 @@ const schema = a.schema({
     .authorization((allow) => [allow.guest()]),
   Tasks: a
     .model({
-      TaskId: a.id(),
       userId: a.id(),
       user: a.belongsTo("User", "userId"),
-      organizationId: a.id(),
-      organization: a.belongsTo("Organization", "organizationId"),
+      TaskId: a.id(),
       title: a.string(),
       details: a.string(),
       date: a.date(),
       important: a.boolean(),
       done: a.boolean(),
     })
-    .authorization((allow) => [allow.guest()]),
+    .authorization((allow) => [allow.authenticated()]),
 });
 
 export type Schema = ClientSchema<typeof schema>;

package.json

@@ -31,7 +31,8 @@
     "mui-nested-menu": "^3.3.0",
     "next": "latest",
     "react": "latest",
-    "react-dom": "latest"
+    "react-dom": "latest",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@aws-amplify/backend": "^1.0.3",

src/app/(home)/pathways/page.js

@@ -105,7 +105,7 @@ export default function PathwaysPage() {
             {/*Popup Dialog*/}
             <PathwayDialog
                 open={createDialogOpen}
-                handleClose={handleCreateDialogClose} b
+                handleClose={handleCreateDialogClose}
                 handleCreate={handleCreate}
             />
             <EditPathwayDialog

src/app/(home)/tasks/page.js

@@ -1,7 +1,7 @@
 "use client";
 
 // React imports
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 
 // Material UI imports
 import { useTheme } from '@mui/material/styles';
@@ -11,40 +11,55 @@ import Column from '../../../components/Layouts/TasksColumn';
 
 // Data Imports
 import { initialTasks } from '@/components/Data/initialData';
+import { generateClient } from "aws-amplify/data";
+
 
 // Assuming DragDropContext will be used later
 import { DragDropContext } from '@hello-pangea/dnd';
-import TaskHeaderCard from "../../../components/Cards/TaskHeaderCard";
-import TaskCard from "../../../components/Cards/TaskCard";
+import TaskHeaderCard from "@/components/Cards/TaskHeaderCard";
+import TaskCard from "@/components/Cards/TaskCard";
 
 import { Box } from "@mui/material";
-import DatePickerDialog from "@/components/Dialogs/DatePickerDialog";
-
 export default function Lists ()
 {
+    const client = generateClient({ authMode: 'userPool' });
+
     // State management    
-    const [tasks, setTasks] = useState(initialTasks);
+    const [tasks, setTasks] = useState([]);
 
     // Use theme from Material UI
     const theme = useTheme();
 
-    const handleTaskDelete = (id) =>
+    const fetchTasks = () =>
+    {
+        client.models.Tasks.list().then(({ data, errors }) =>
+        {
+            errors ? console.error(errors) :
+                setTasks(data);
+        });
+    }
+
+    useEffect(() => fetchTasks(), []);
+
+    const handleTaskDelete = async (id) =>
     {
-        setTasks(tasks.filter((t) => t.id !== id));
+        const { data, errors } = await client.models.Tasks.delete({ id: id });
+        errors ? console.error(errors) :
+            fetchTasks();
         console.log('deleted');
     }
 
-    const handleTaskAddClick = () =>
+    const handleTaskAddClick = async () =>
     {
-        const newTask = {
-            id: tasks.length,
+        const { errors, data } = await client.models.Tasks.create({
             title: "",
             details: "",
-            date: "",
+            date: null,
             important: false,
             done: false
-        };
-        setTasks([...tasks, newTask]);
+        })
+        errors ? console.error(errors) :
+            fetchTasks();
         console.log('added a task');
     }