✨ feat: Now you can add tasks pressing 'Enter' on any part of the page

Author: bytevictor

app/Components/ConfigMenu/ThemeMenu.tsx

@@ -94,7 +94,7 @@ const ThemePod = ({
 };
 
 export default function ThemeMenu() {
-  const [theme, setTheme] = useLocalStorage("theme", "dark");
+  const [theme, setTheme] = useLocalStorage("theme", "dim");
 
   // useState(
   //   () => {

app/Components/TasksApp/TaskApp.tsx

@@ -1,43 +1,52 @@
 "use client";
 
-import { useReducer } from 'react';
-import AddTask from './AddTask';
-import TaskList from './TaskList';
+import { useEffect, useReducer } from "react";
+import AddTask from "./AddTask";
+import TaskList from "./TaskList";
 
 export default function TaskApp() {
-  const [tasks, dispatch] = useReducer(
-    tasksReducer,
-    initialTasks
-  );
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Enter") {
+        handleAddTask("");
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
 
   function handleAddTask(text: any) {
     dispatch({
-      type: 'added',
+      type: "added",
       id: nextId++,
       text: text,
-      isNew: true
+      isNew: true,
     });
   }
 
   function handleChangeTask(task: any) {
     dispatch({
-      type: 'changed',
-      task: task
+      type: "changed",
+      task: task,
     });
   }
 
-  function handleDeleteTask(taskId: any ) {
+  function handleDeleteTask(taskId: any) {
     dispatch({
-      type: 'deleted',
-      id: taskId
+      type: "deleted",
+      id: taskId,
     });
   }
 
   return (
     <>
-      <AddTask
-        onAddTask={handleAddTask}
-      />
+      <AddTask onAddTask={handleAddTask} />
       <TaskList
         tasks={tasks}
         onChangeTask={handleChangeTask}
@@ -49,35 +58,38 @@ export default function TaskApp() {
 
 function tasksReducer(tasks: any, action: any) {
   switch (action.type) {
-    case 'added': {
-      return [...tasks, {
-        id: action.id,
-        text: action.text,
-        done: false,
-        isNew: action.isNew
-      }];
+    case "added": {
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+          isNew: action.isNew,
+        },
+      ];
     }
-    case 'changed': {
-      return tasks.map( (t: any) => {
+    case "changed": {
+      return tasks.map((t: any) => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
           return t;
         }
       });
     }
-    case 'deleted': {
-      return tasks.filter( (t: any) => t.id !== action.id);
+    case "deleted": {
+      return tasks.filter((t: any) => t.id !== action.id);
     }
     default: {
-      throw Error('Unknown action: ' + action.type);
+      throw Error("Unknown action: " + action.type);
     }
   }
 }
 
 let nextId = 3;
 const initialTasks = [
-  { id: 0, text: 'Philosopher’s Path', done: true, isNew: false },
-  { id: 1, text: 'Visit the temple', done: false, isNew: false},
-  { id: 2, text: 'Drink matcha', done: false, isNew: false }
+  { id: 0, text: "Philosopher’s Path", done: true, isNew: false },
+  { id: 1, text: "Visit the temple", done: false, isNew: false },
+  { id: 2, text: "Drink matcha", done: false, isNew: false },
 ];

app/Components/TasksApp/TaskList.tsx

@@ -11,7 +11,9 @@ export default function TaskList({
   onDeleteTask: any;
 }) {
   return (
-    <ul className="w-1/2 mt-24 flex justify-center flex-col">
+    <ul
+      className="w-1/2 mt-24 flex justify-center flex-col"
+    >
       {[...tasks].reverse().map((task: any) => (
         <li className="flex flex-row w-full my-2" key={task.id}>
           <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
@@ -49,7 +51,7 @@ function Task({
 
     const audio = new Audio("/sounds/delete.mp3");
     audio.play();
-  }
+  };
 
   console.log("Task", task);