todo-next

commit e7508f5388b2c02b13a9ada35b190ae6c0ab0b57
parent f25d5adaa6842e936fdaeed232463cad1e3234aa
Author: massi <git@massi.world>
Date:   Sun, 13 Apr 2025 14:00:33 -0700

cleanup

Diffstat:
M
src/app/todo-list/[title]/page.tsx
 | 
47
++++++++++++++++++++++++++---------------------

1 file changed, 26 insertions(+), 21 deletions(-)
diff --git a/src/app/todo-list/[title]/page.tsx b/src/app/todo-list/[title]/page.tsx
@@ -19,28 +19,20 @@ import { accumulateMetadata } from "next/dist/lib/metadata/resolve-metadata";
 
 const MAX_TASK_LENGTH = 128;
 
-function usePrevious<T>(val: T, initial: T) {
-  const valRef = useRef(initial);
-  useEffect(() => {
-    valRef.current = val;
-  }, [val]);
-  return valRef.current;
-}
-
-type TodoItem = {
-  description: string;
-  isDone: boolean;
-  id: string;
-};
-
 const genId = () => {
   try {
     return crypto.randomUUID();
   } catch (e) {
-    return String(Math.random());
+    return String(Math.random()); // good enough for being unique on a single local list
   }
 };
 
+type TodoItem = {
+  description: string;
+  isDone: boolean;
+  id: string;
+};
+
 function mkTodo(description: string): TodoItem {
   return {
     description,
@@ -49,11 +41,15 @@ function mkTodo(description: string): TodoItem {
   };
 }
 
-type CheckboxProps = {
-  isChecked: boolean;
-  onToggle: () => void;
-  idx: number;
-};
+// helper hooks
+
+function usePrevious<T>(val: T, initial: T) {
+  const valRef = useRef(initial);
+  useEffect(() => {
+    valRef.current = val;
+  }, [val]);
+  return valRef.current;
+}
 
 function useListFocusNav<T extends HTMLElement>(
   dataAttrName: string,
@@ -88,6 +84,14 @@ function useListFocusNav<T extends HTMLElement>(
   return [ref, onKeyDown];
 }
 
+// components
+
+type CheckboxProps = {
+  isChecked: boolean;
+  onToggle: () => void;
+  idx: number;
+};
+
 function Checkbox(props: CheckboxProps) {
   const { isChecked, onToggle, idx } = props;
   const [btnRef, onKeyDown] = useListFocusNav<HTMLButtonElement>(
@@ -171,13 +175,14 @@ function TodoItem(props: TodoItemProps) {
       }
       case "ArrowRight": {
         if (inputPosition() === todo.description.length) {
+          evt.preventDefault();
           goto(1, "start");
         }
         break;
       }
       case "ArrowLeft": {
-        console.debug("RIGHT");
         if (inputPosition() === 0) {
+          evt.preventDefault();
           goto(-1, "end");
         }
         break;