feat: add title to the editor state

src/app/actions/blocks.ts

@@ -0,0 +1,23 @@
+"use server";
+
+import { eq } from "drizzle-orm";
+import { blocksTable } from "@/lib/db/schema";
+import { db } from "@/lib/db";
+
+export async function updateBlock({
+  id,
+  tag,
+  lines,
+}: {
+  id: string;
+  tag?: string;
+  lines?: string[];
+}) {
+  await db
+    .update(blocksTable)
+    .set({
+      ...(tag !== undefined ? { tag } : {}),
+      ...(lines !== undefined ? { lines } : {}),
+    })
+    .where(eq(blocksTable.id, id));
+}

src/components/Header.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { CircleQuestionMark, List, Plus, UserRound, UserRoundMinus } from "lucide-react";
-import { logOut } from "@/app/actions";
+import { logOut } from "@/app/actions/auth";
 import { getAuth } from "@/lib/auth";
 import HeaderButton from "./ui/HeaderButton";
 

src/components/editor/Editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useReducer } from "react";
+import { ChangeEvent, useReducer } from "react";
 import { Copy, Plus } from "lucide-react";
 import { v4 as uuidv4 } from "uuid";
 import { editorReducer, IBlock } from "@/lib/editorReducer";
@@ -25,7 +25,14 @@ const defaultBlocks = [
 ];
 
 export default function Editor(props: EditorProps) {
-  const [state, dispatch] = useReducer(editorReducer, props.defaultBlocks || defaultBlocks);
+  const [state, dispatch] = useReducer(editorReducer, {
+    title: props.defaultTitle || "Untitled",
+    blocks: props.defaultBlocks || defaultBlocks,
+  });
+
+  const handleUpdateTitle = (e: ChangeEvent<HTMLInputElement>) => {
+    dispatch({ type: "update_title", title: e.target.value });
+  }
 
   const handleAddBlock = () => {
     dispatch({ type: "add_block" });
@@ -37,8 +44,8 @@ export default function Editor(props: EditorProps) {
 
   return (
     <div className="flex flex-col items-center px-4 max-w-2xl w-full gap-4">
-      <input className="font-bold text-xl w-full text-center focus:outline-none" defaultValue={props.defaultTitle || "Untitled"} />
+      <input className="font-bold text-xl w-full text-center focus:outline-none" defaultValue={state.title} onChange={handleUpdateTitle} />
-      {state.map((block) => <Block key={block.id} block={block} dispatch={dispatch} /> )}
+      {state.blocks.map((block) => <Block key={block.id} block={block} dispatch={dispatch} /> )}
       <div className="flex gap-2">
         <IconOnlyButton onClick={handleAddBlock} icon={<Plus size={24} />} />
         <IconOnlyButton onClick={handleCopy} icon={<Copy size={24} />} title="Copy note to clipboard" />

src/components/forms/AuthForm.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useActionState } from "react";
-import { login, register } from "@/app/actions";
+import { login, register } from "@/app/actions/auth";
 
 export default function AuthForm({ isRegister = false }: { isRegister?: boolean }) {
   const [state, formAction] = useActionState(isRegister ? register : login, null);

src/lib/editorReducer.ts

@@ -12,7 +12,10 @@ export type IBlock = {
   lines: ILine[];
 };
 
-type EditorState = IBlock[];
+type EditorState = {
+  title: string;
+  blocks: IBlock[];
+};
 
 export type Action =
   | { type: "add_block" }
@@ -20,6 +23,7 @@ export type Action =
   | { type: "delete_block", blockId: string }
   | { type: "add_line", blockId: string }
   | { type: "delete_line", blockId: string }
+  | { type: "update_title", title: string }
   | { type: "update_line_text"; blockId: string; lineId: string; text: string }
   | { type: "update_tag"; blockId: string; tag: string }
   | { type: "move_block_up", blockId: string }
@@ -28,9 +32,17 @@ export type Action =
 
 export function editorReducer(state: EditorState, action: Action): EditorState {
   switch (action.type) {
-    case "add_block":
+    case "update_title":
-      return [
+      return {
         ...state,
+        title: action.title,
+      };
+
+    case "add_block":
+      return {
+        ...state,
+        blocks: [
+          ...state.blocks,
           {
             id: uuidv4(),
             tag: "",
@@ -40,12 +52,13 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
               text: "",
             })),
           }
-      ];
+        ]
+      };
     
     case "copy":
       let copyText = "";
 
-      state.forEach((block) => {
+      state.blocks.forEach((block) => {
         if (block.tag !== "") {
           copyText += `[${block.tag}]\n`;
         }
@@ -62,10 +75,15 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
       return state;
 
     case "delete_block":
-      return state.filter((block) => block.id !== action.blockId);
+      return {
+        ...state,
+        blocks: state.blocks.filter((block) => block.id !== action.blockId),
+      };
     
     case "add_line":
-      return state.map((block) => {
+      return {
+        ...state,
+        blocks: state.blocks.map((block) => {
           if (block.id === action.blockId) {
             return {
               ...block,
@@ -74,10 +92,13 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
           } else {
             return block;
           }
-      });
+        }),
+      };
     
     case "delete_line":
-      return state.map((block) => {
+      return {
+        ...state,
+        blocks: state.blocks.map((block) => {
           if (block.id === action.blockId && block.lines.length > 0) {
             return {
               ...block,
@@ -86,10 +107,13 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
           } else {
             return block;
           }
-      });
+        }),
+      };
 
     case "update_line_text":
-      return state.map((block) => {
+      return {
+        ...state,
+        blocks: state.blocks.map((block) => {
           if (block.id === action.blockId) {
             return {
               ...block,
@@ -107,10 +131,13 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
           } else {
             return block;
           }
-      });
+        }),
+      };
 
     case "update_tag":
-      return state.map((block) => {
+      return {
+        ...state,
+        blocks: state.blocks.map((block) => {
           if (block.id === action.blockId) {
             return {
               ...block,
@@ -119,26 +146,35 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
           } else {
             return block;
           }
-      });
+        }),
+      };
 
     case "move_block_up": {
-      const index = state.findIndex((b) => b.id === action.blockId);
+      const index = state.blocks.findIndex((b) => b.id === action.blockId);
       if (index <= 0) return state;
-      const newState = [...state];
+      const newBlocks = [...state.blocks];
-      [newState[index - 1], newState[index]] = [newState[index], newState[index - 1]];
+      [newBlocks[index - 1], newBlocks[index]] = [newBlocks[index], newBlocks[index - 1]];
-      return newState;
+      return {
+        ...state,
+        blocks: newBlocks,
+      };
     }
 
     case "move_block_down": {
-      const index = state.findIndex((b) => b.id === action.blockId);
+      const index = state.blocks.findIndex((b) => b.id === action.blockId);
-      if (index === state.length - 1) return state;
+      if (index === state.blocks.length - 1) return state;
-      const newState = [...state];
+      const newBlocks = [...state.blocks];
-      [newState[index], newState[index + 1]] = [newState[index + 1], newState[index]];
+      [newBlocks[index], newBlocks[index + 1]] = [newBlocks[index + 1], newBlocks[index]];
-      return newState;
+      return {
+        ...state,
+        blocks: newBlocks,
+      };
     }
 
     case "toggle_lock":
-      return state.map((block) => {
+      return {
+        ...state,
+        blocks: state.blocks.map((block) => {
           if (block.id === action.blockId) {
             return {
               ...block,
@@ -147,7 +183,8 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
           } else {
             return block;
           }
-      });
+        }),
+      };
 
     default:
       return state;