feat: allow adding tasks to a task list

src/components/tasklist/group.jsx

@@ -2,22 +2,41 @@ import { useState } from "react";
 
 import ErrorBoundary from "components/errorboundry";
 import List from "components/tasklist/list";
+import TaskBox from "components/tasklist/taskbox";
 
 export default function TaskListGroup({groupDetail, groupUpdate}) {
+  const [taskCount, setTaskCount] = useState(0)
   const [group, setGroup] = useState(groupDetail)
+
   const groupName = Object.keys(group)[0]
   const groupTasks = Object.values(group)[0]
 
+  const addTask = (value) => {
+    const newTask = {
+        title: value,
+        complete: false
+    };
+    groupTasks.push(newTask)
+
+    setGroup(group);
+    setTaskCount(groupTasks.length)
+    groupUpdate();
+  }
+
   const listUpdate = () => {
     setGroup(group)
     groupUpdate()
   }
+
   return (
-    <div key={groupName} className="flex-1">
+    <div key={taskCount} className="flex-1">
       <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{groupName}</h2>
       <ErrorBoundary>
         <List listDetail={groupTasks} listUpdate={listUpdate} />
       </ErrorBoundary>
+      <ErrorBoundary>
+        <TaskBox submitAction={addTask} />
+      </ErrorBoundary>
     </div>
   );
 }

src/components/tasklist/item.jsx

@@ -4,7 +4,7 @@ export default function Item({taskDetail, taskUpdate}) {
   const [task, setTask] = useState(taskDetail)
 
   const toggleComplete = () => {
-    task.checked = !task.checked;
+    task.complete = !task.complete;
     setTask(task)
     taskUpdate()
   }
@@ -13,7 +13,7 @@ export default function Item({taskDetail, taskUpdate}) {
     <li key={task.title}>
       <div className="flex block w-full text-left transition-all h-15 mb-3 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10">
         <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md">
-          <input type="checkbox" className="checkbox bg-theme-500/10 text-theme-200 dark:text-theme-700" id={task.title} defaultChecked={task.checked} onChange={toggleComplete}/>
+          <input type="checkbox" className="checkbox bg-theme-500/10 text-theme-200 dark:text-theme-700" id={task.title} defaultChecked={task.complete} onChange={toggleComplete}/>
         </div>
         <div className="flex-1 flex items-center justify-between rounded-r-md ">
           <div className="flex-1 grow pl-3 py-2 text-xs">{task.title}</div>

src/components/tasklist/list.jsx

@@ -11,7 +11,7 @@ export default function List({listDetail, listUpdate}) {
   }
 
   return (
-    <ul className="mt-3 flex flex-col">
+    <ul key={tasks.length} className="mt-3 flex flex-col">
       {tasks.map((task) => (
         <Item key={Object.values(task)[0]} taskDetail={task} taskUpdate={taskUpdate} />
       ))}

src/components/tasklist/taskbox.jsx

@@ -0,0 +1,22 @@
+import {useState} from "react";
+
+export default function TaskBox({submitAction}) {
+    // const [tasks, setTasks] = useState(listDetail)
+    const [formVal, setFormVal] = useState("")
+    // let inputValue = useRef(undefined)
+
+    const handleSubmit = (event) => {
+        // Stop the form from submitting and refreshing the page.
+        event.preventDefault();
+        submitAction(formVal);
+        setFormVal("");
+    }
+
+    return (
+        <div>
+            <form onSubmit={handleSubmit}>
+                <input type="text" id="title" name="title" value={formVal} placeholder="Add new task..." onChange={(e) => setFormVal(e.target.value)} />
+            </form>
+        </div>
+    );
+}