Update

Merge pull request #3 from HelinaBerhane/update

npm test passed locally

api/demo_tasks.py

@@ -63,7 +63,7 @@ def populate_demo_tasks(task_list, info):
     ),
     (
         'Update Tasks - front end - full implementation',
-        None,
+        datetime(2023, 9, 20, 13, 5, tzinfo=timezone.utc),
     ),
     (
         'Delete Tasks - back end - endpoints',

client/app.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { GlobalStyles } from "./GlobalStyles";
 import styled from "styled-components";
+import { throttle } from "lodash";
 
 import { AppHeader } from "./components/AppHeader";
 import { TaskList } from "./components/TaskList";
@@ -38,6 +39,16 @@ export const App = () => {
     };
   }, []);
 
+  const editTaskTitle = (task: TaskModel, newTitle: string) => {
+    TasksService.updateTask({
+      task_id: task.id,
+      name: newTitle,
+    });
+  };
+
+  // calls editTaskTitle every 2s with the latest changes
+  const editTaskTitleThrottled = useCallback(throttle(editTaskTitle, 2000), []);
+
   return (
     <Container>
       <GlobalStyles />
@@ -63,6 +74,20 @@ export const App = () => {
               .then((response) => response.tasks)
               .then(setTasks);
           }}
+          onEditTaskTitle={(task, newTitle) => {
+            setTasks(
+              tasks.map((t) => {
+                if (task.id !== t.id) {
+                  return t;
+                }
+                return {
+                  ...t,
+                  name: newTitle,
+                };
+              }),
+            );
+            editTaskTitleThrottled(task, newTitle);
+          }}
           tasks={tasks}
         />
       )}

package.json

@@ -30,6 +30,7 @@
     "@types/react-dom": "^18.2.7",
     "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
+    "lodash": "^4.17.21",
     "openapi-typescript-codegen": "^0.25.0",
     "parcel": "^2.9.3",
     "prettier": "3.0.3",