From 91d0862f43ffbb21d6e5e0fc3602cc4cb2cd1f72 Mon Sep 17 00:00:00 2001 From: Rahul Rajesh Date: Wed, 21 Aug 2024 15:11:40 -0400 Subject: [PATCH 1/6] title change event reaction kind of works, taking a lunch break --- src/components/Cards/TaskCard.js | 34 ++++++++++++++++++++++++++------ 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js index c5a2ba7..c688ef8 100644 --- a/src/components/Cards/TaskCard.js +++ b/src/components/Cards/TaskCard.js @@ -27,6 +27,8 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) const { title, details, date, important, done } = task; + const [titleValue, setTitleValue] = useState(""); + const [enterPressed, setEnterPressed] = useState(false); const [isHovering, setIsHovering] = useState(false); const [anchorEl, setAnchorEl] = useState(null); const [isImportant, setIsImportant] = useState(important); @@ -41,9 +43,29 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) const handleImportantIconClick = () => setIsImportant(!isImportant); const handleDateIconClick = () => setOpenCalendarDialog(true); const handleCloseDialog = () => setOpenCalendarDialog(false); - - console.log(dateValue); - + const handleTitleChange = (event) => setTitleValue(event.target.value); + const handleDescriptionChange = (event) => setTitleValue; + + const handleKeyDown = (event) => { + if (event.key === 'Enter') { + setEnterPressed(true); + saveValue(); + } + }; + + const handleBlur = () => { + if (!enterPressed) { + saveValue(); + } + setEnterPressed(false); + }; + + // write logic here + // think about where to move the logic, here or to file above + // distinguish between what value to save + const saveValue = () => { + console.log(`title: ${titleValue}`); + }; const TaskOptionsMenu = ( - + { (isHovering) ? <> @@ -99,7 +121,7 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) - + @@ -115,4 +137,4 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) ); -} \ No newline at end of file +} From ed12deceabea044c931ef43dfe3e21429cc1d5d5 Mon Sep 17 00:00:00 2001 From: Rahul Rajesh Date: Wed, 21 Aug 2024 18:00:12 -0400 Subject: [PATCH 2/6] client functionality to react to un-focus and enter press events on title and detail fields --- src/app/(home)/tasks/page.js | 12 +++++++++- src/components/Cards/TaskCard.js | 39 ++++++++++++++++++++++++-------- 2 files changed, 40 insertions(+), 11 deletions(-) diff --git a/src/app/(home)/tasks/page.js b/src/app/(home)/tasks/page.js index dbe7cd7..95fcf91 100755 --- a/src/app/(home)/tasks/page.js +++ b/src/app/(home)/tasks/page.js @@ -20,6 +20,7 @@ import TaskHeaderCard from "@/components/Cards/TaskHeaderCard"; import TaskCard from "@/components/Cards/TaskCard"; import { Box } from "@mui/material"; +import { Description } from '@mui/icons-material'; export default function Lists () { const client = generateClient({ authMode: 'userPool' }); @@ -63,6 +64,15 @@ export default function Lists () console.log('added a task'); } + const handleTitleChange = async (title) => { + // wait until we figure out how this works. + } + + const handleDescriptionChange = async (Description) => { + // do something + console.log(`Description changed: ${Description}`) + } + return ( <> @@ -72,7 +82,7 @@ export default function Lists () { return ( (index === tasks.length - 1) ? - handleTaskDelete(t.id)} /> + handleTaskDelete(t.id)} onTitleChange={handleTitleChange} onDescriptionChange={handleDescriptionChange}/> : handleTaskDelete(t.id)} /> ) }) diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js index c688ef8..6530bac 100644 --- a/src/components/Cards/TaskCard.js +++ b/src/components/Cards/TaskCard.js @@ -22,12 +22,13 @@ import React, { useState } from 'react'; import DatePickerDialog from "../Dialogs/DatePickerDialog"; -export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) +export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onTitleChange, onDescriptionChange }) { const { title, details, date, important, done } = task; const [titleValue, setTitleValue] = useState(""); + const [descrptionValue, setDescriptionValue] = useState(""); const [enterPressed, setEnterPressed] = useState(false); const [isHovering, setIsHovering] = useState(false); const [anchorEl, setAnchorEl] = useState(null); @@ -44,18 +45,32 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) const handleDateIconClick = () => setOpenCalendarDialog(true); const handleCloseDialog = () => setOpenCalendarDialog(false); const handleTitleChange = (event) => setTitleValue(event.target.value); - const handleDescriptionChange = (event) => setTitleValue; + const handleDescriptionChange = (event) => setDescriptionValue(event.target.value); - const handleKeyDown = (event) => { + const handleTitleKeyDown = (event) => { if (event.key === 'Enter') { setEnterPressed(true); - saveValue(); + saveTitleValue(); } }; - const handleBlur = () => { + const handleDescriptionKeyDown = (event) => { + if (event.key === 'Enter') { + setEnterPressed(true); + saveDescriptionValue(); + } + }; + + const handleTitleBlur = () => { + if (!enterPressed) { + saveTitleValue(); + } + setEnterPressed(false); + }; + + const handleDescriptionBlur = () => { if (!enterPressed) { - saveValue(); + saveDescriptionValue(); } setEnterPressed(false); }; @@ -63,8 +78,12 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) // write logic here // think about where to move the logic, here or to file above // distinguish between what value to save - const saveValue = () => { - console.log(`title: ${titleValue}`); + const saveDescriptionValue = () => { + onDescriptionChange(descrptionValue); + }; + + const saveTitleValue = () => { + onTitleChange(titleValue); }; const TaskOptionsMenu = ( @@ -97,7 +116,7 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) - + { (isHovering) ? <> @@ -121,7 +140,7 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) - + From 3a4765cd11c9d965b9cab6476057034a6a9e45c1 Mon Sep 17 00:00:00 2001 From: Rahul Rajesh Date: Wed, 21 Aug 2024 19:43:39 -0400 Subject: [PATCH 3/6] update functionality partially working --- src/app/(home)/tasks/page.js | 69 +++++++++++++++++++++++++------- src/components/Cards/TaskCard.js | 4 +- 2 files changed, 57 insertions(+), 16 deletions(-) diff --git a/src/app/(home)/tasks/page.js b/src/app/(home)/tasks/page.js index 95fcf91..66048f4 100755 --- a/src/app/(home)/tasks/page.js +++ b/src/app/(home)/tasks/page.js @@ -26,17 +26,25 @@ export default function Lists () const client = generateClient({ authMode: 'userPool' }); // State management - const [tasks, setTasks] = useState([]); + const [tasks, setTasks] = useState(new Map()); // Use theme from Material UI const theme = useTheme(); const fetchTasks = () => { + let newMap = new Map(); client.models.Tasks.list().then(({ data, errors }) => { - errors ? console.error(errors) : - setTasks(data); + if(errors) { + console.error(errors); + } else { + for(const task of data) { + newMap[task.id] = task; + } + + setTasks(newMap); + } }); } @@ -44,9 +52,14 @@ export default function Lists () const handleTaskDelete = async (id) => { + let newMap = new Map(tasks); const { data, errors } = await client.models.Tasks.delete({ id: id }); - errors ? console.error(errors) : - fetchTasks(); + if (errors) { + console.log(errors); + } else { + newMap.delete(id); + setTasks(newMap); + } console.log('deleted'); } @@ -59,34 +72,62 @@ export default function Lists () important: false, done: false }) - errors ? console.error(errors) : - fetchTasks(); + + if (errors) { + console.log(errors); + } else { + let newMap = (new Map(tasks)).set(data.id, data); + setTasks(newMap); + } console.log('added a task'); } - const handleTitleChange = async (title) => { - // wait until we figure out how this works. + const handleTitleChange = async (id, title) => { + const { errors, data } = await client.models.Tasks.update({ + "id": id, + "title": title, + }) + + if (errors) { + console.log(errors); + } else { + let newMap = (new Map(tasks)).set(data.id, data); + setTasks(newMap); + } + console.log(`updated task ${title}'s title`); } - const handleDescriptionChange = async (Description) => { - // do something - console.log(`Description changed: ${Description}`) + const handleDescriptionChange = async (id, description) => { + const { errors, data } = await client.models.Tasks.update({ + "id": id, + "details": description, + }) + + if (errors) { + console.log(errors); + } else { + let newMap = (new Map(tasks)).set(data.id, data); + setTasks(newMap); + } + console.log(`updated task ${description}'s desc`); } return ( <> + <> { - tasks.map((t, index) => + Array.from(tasks.values()).map((t, index) => { return ( (index === tasks.length - 1) ? handleTaskDelete(t.id)} onTitleChange={handleTitleChange} onDescriptionChange={handleDescriptionChange}/> - : handleTaskDelete(t.id)} /> + : handleTaskDelete(t.id)} onTitleChange={handleTitleChange} onDescriptionChange={handleDescriptionChange}/> ) }) } + ); diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js index 6530bac..42c2380 100644 --- a/src/components/Cards/TaskCard.js +++ b/src/components/Cards/TaskCard.js @@ -79,11 +79,11 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onT // think about where to move the logic, here or to file above // distinguish between what value to save const saveDescriptionValue = () => { - onDescriptionChange(descrptionValue); + onDescriptionChange(task.id, descrptionValue); }; const saveTitleValue = () => { - onTitleChange(titleValue); + onTitleChange(task.id, titleValue); }; const TaskOptionsMenu = ( From 926197d1aa280fd09a0879f6fe915bb014b92bc2 Mon Sep 17 00:00:00 2001 From: Rahul Rajesh Date: Fri, 23 Aug 2024 15:23:01 -0400 Subject: [PATCH 4/6] importance is updating --- src/app/(home)/tasks/page.js | 32 ++++++++++++++++++++++++-------- src/components/Cards/TaskCard.js | 18 ++++++++++++------ 2 files changed, 36 insertions(+), 14 deletions(-) diff --git a/src/app/(home)/tasks/page.js b/src/app/(home)/tasks/page.js index 66048f4..57e7ed5 100755 --- a/src/app/(home)/tasks/page.js +++ b/src/app/(home)/tasks/page.js @@ -1,7 +1,7 @@ "use client"; // React imports -import React, { useState, useMemo, useEffect } from 'react'; +import React, { useState, useMemo, useEffect, useReducer } from 'react'; // Material UI imports import { useTheme } from '@mui/material/styles'; @@ -19,7 +19,7 @@ import { DragDropContext } from '@hello-pangea/dnd'; import TaskHeaderCard from "@/components/Cards/TaskHeaderCard"; import TaskCard from "@/components/Cards/TaskCard"; -import { Box } from "@mui/material"; +import { Box, Skeleton } from "@mui/material"; import { Description } from '@mui/icons-material'; export default function Lists () { @@ -27,15 +27,16 @@ export default function Lists () // State management const [tasks, setTasks] = useState(new Map()); + const [isLoading, setIsLoading] = useState(true); // Use theme from Material UI const theme = useTheme(); const fetchTasks = () => { - let newMap = new Map(); client.models.Tasks.list().then(({ data, errors }) => { + let newMap = new Map(); if(errors) { console.error(errors); } else { @@ -43,12 +44,14 @@ export default function Lists () newMap[task.id] = task; } + setIsLoading(false); setTasks(newMap); + console.log("Loaded"); } }); } - useEffect(() => fetchTasks(), []); + useEffect(() => {fetchTasks()}, []); const handleTaskDelete = async (id) => { @@ -112,22 +115,35 @@ export default function Lists () console.log(`updated task ${description}'s desc`); } + const handleImportantChange = async (id, important) => { + const { errors, data } = await client.models.Tasks.update({ + "id": id, + "important": important + }) + + if (errors) { + console.log(errors); + } else { + let newMap = (new Map(tasks)).set(data.id, data); + setTasks(newMap); + } + console.log(`updated task ${data.title}'s importance`); + } + return ( <> - <> { Array.from(tasks.values()).map((t, index) => { return ( (index === tasks.length - 1) ? - handleTaskDelete(t.id)} onTitleChange={handleTitleChange} onDescriptionChange={handleDescriptionChange}/> - : handleTaskDelete(t.id)} onTitleChange={handleTitleChange} onDescriptionChange={handleDescriptionChange}/> + handleTaskDelete(t.id)} onTitleChange={handleTitleChange} onDescriptionChange={handleDescriptionChange} onImportantChange={handleImportantChange}/> + : handleTaskDelete(t.id)} onTitleChange={handleTitleChange} onDescriptionChange={handleDescriptionChange} onImportantChange={handleImportantChange}/> ) }) } - ); diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js index 42c2380..1a886be 100644 --- a/src/components/Cards/TaskCard.js +++ b/src/components/Cards/TaskCard.js @@ -22,7 +22,7 @@ import React, { useState } from 'react'; import DatePickerDialog from "../Dialogs/DatePickerDialog"; -export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onTitleChange, onDescriptionChange }) +export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onTitleChange, onDescriptionChange, onImportantChange }) { const { title, details, date, important, done } = task; @@ -41,7 +41,7 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onT const handleMouseLeave = () => setIsHovering(false); const handleTaskOptionsClose = () => setAnchorEl(null); const handleTaskOptionsOpen = (event) => setAnchorEl(event.currentTarget); - const handleImportantIconClick = () => setIsImportant(!isImportant); + const handleImportantIconClick = () => toggleImportant(); const handleDateIconClick = () => setOpenCalendarDialog(true); const handleCloseDialog = () => setOpenCalendarDialog(false); const handleTitleChange = (event) => setTitleValue(event.target.value); @@ -63,7 +63,7 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onT const handleTitleBlur = () => { if (!enterPressed) { - saveTitleValue(); + saveTitleVlue(); } setEnterPressed(false); }; @@ -75,9 +75,11 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onT setEnterPressed(false); }; - // write logic here - // think about where to move the logic, here or to file above - // distinguish between what value to save + const toggleImportant = () => { + saveImportantValue(); + setIsImportant(!isImportant); + } + const saveDescriptionValue = () => { onDescriptionChange(task.id, descrptionValue); }; @@ -86,6 +88,10 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onT onTitleChange(task.id, titleValue); }; + const saveImportantValue = () => { + onImportantChange(task.id, !isImportant) + } + const TaskOptionsMenu = ( Date: Fri, 23 Aug 2024 17:02:27 -0400 Subject: [PATCH 5/6] fetch functionality works --- src/app/(home)/tasks/page.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/(home)/tasks/page.js b/src/app/(home)/tasks/page.js index 57e7ed5..d1a405c 100755 --- a/src/app/(home)/tasks/page.js +++ b/src/app/(home)/tasks/page.js @@ -41,12 +41,11 @@ export default function Lists () console.error(errors); } else { for(const task of data) { - newMap[task.id] = task; + newMap.set(task.id, task); } setIsLoading(false); setTasks(newMap); - console.log("Loaded"); } }); } From b30d9bd8af7eaa83b7da86ed05f1c25ce289d80a Mon Sep 17 00:00:00 2001 From: Rahul Rajesh Date: Fri, 23 Aug 2024 17:48:31 -0400 Subject: [PATCH 6/6] date update integration partially working. We have terrible react code I wish I had someone knowledgable to review our code :/ --- src/app/(home)/tasks/page.js | 19 +++++++++++++++++-- src/components/Cards/TaskCard.js | 15 ++++++++++++--- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/src/app/(home)/tasks/page.js b/src/app/(home)/tasks/page.js index d1a405c..78b6d26 100755 --- a/src/app/(home)/tasks/page.js +++ b/src/app/(home)/tasks/page.js @@ -129,6 +129,21 @@ export default function Lists () console.log(`updated task ${data.title}'s importance`); } + const handleDateChange = async (id, date) => { + const { errors, data } = await client.models.Tasks.update({ + "id": id, + "date": date + }) + + if (errors) { + console.log(errors); + } else { + let newMap = (new Map(tasks)).set(data.id, data); + setTasks(newMap); + } + console.log(`updated task ${data.title}'s date`); + } + return ( <> @@ -138,8 +153,8 @@ export default function Lists () { return ( (index === tasks.length - 1) ? - handleTaskDelete(t.id)} onTitleChange={handleTitleChange} onDescriptionChange={handleDescriptionChange} onImportantChange={handleImportantChange}/> - : handleTaskDelete(t.id)} onTitleChange={handleTitleChange} onDescriptionChange={handleDescriptionChange} onImportantChange={handleImportantChange}/> + handleTaskDelete(t.id)} onTitleChange={handleTitleChange} onDescriptionChange={handleDescriptionChange} onImportantChange={handleImportantChange} onDateChange={handleDateChange}/> + : handleTaskDelete(t.id)} onTitleChange={handleTitleChange} onDescriptionChange={handleDescriptionChange} onImportantChange={handleImportantChange} onDateChange={handleDateChange}/> ) }) } diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js index 1a886be..278e30c 100644 --- a/src/components/Cards/TaskCard.js +++ b/src/components/Cards/TaskCard.js @@ -22,7 +22,7 @@ import React, { useState } from 'react'; import DatePickerDialog from "../Dialogs/DatePickerDialog"; -export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onTitleChange, onDescriptionChange, onImportantChange }) +export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onTitleChange, onDescriptionChange, onImportantChange, onDateChange }) { const { title, details, date, important, done } = task; @@ -43,7 +43,7 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onT const handleTaskOptionsOpen = (event) => setAnchorEl(event.currentTarget); const handleImportantIconClick = () => toggleImportant(); const handleDateIconClick = () => setOpenCalendarDialog(true); - const handleCloseDialog = () => setOpenCalendarDialog(false); + const handleCloseDialog = () => handleDateChange(); const handleTitleChange = (event) => setTitleValue(event.target.value); const handleDescriptionChange = (event) => setDescriptionValue(event.target.value); @@ -63,7 +63,7 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onT const handleTitleBlur = () => { if (!enterPressed) { - saveTitleVlue(); + saveTitleValue(); } setEnterPressed(false); }; @@ -80,6 +80,11 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onT setIsImportant(!isImportant); } + const handleDateChange = () => { + saveDateValue(); + setOpenCalendarDialog(false) + } + const saveDescriptionValue = () => { onDescriptionChange(task.id, descrptionValue); }; @@ -92,6 +97,10 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onT onImportantChange(task.id, !isImportant) } + const saveDateValue = () => { + onDateChange(task.id, dateValue) + } + const TaskOptionsMenu = (