From b95d687904dfb212f6ad7a3580272950664b9921 Mon Sep 17 00:00:00 2001
From: johannes-hernehult <jhernehult@gmail.com>
Date: Mon, 15 Jun 2026 11:18:34 +0200
Subject: [PATCH] feat: connect title and description inputs to state

- Add updateTitle prop to Frame component
- Add handleUpdateFrameTitle to useNewGuide hook
- Wire onChange handlers for guide title, description, and frame title inputs
---
 src/features/guides/components/Frame.tsx | 14 +++++++++-----
 src/features/guides/hooks/useNewGuide.ts |  7 +++++++
 src/features/guides/routes/NewGuide.tsx  | 15 ++++++++++++---
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/features/guides/components/Frame.tsx b/src/features/guides/components/Frame.tsx
index c93c1e4..1c6a7c6 100644
--- a/src/features/guides/components/Frame.tsx
+++ b/src/features/guides/components/Frame.tsx
@@ -7,23 +7,27 @@ export default function Frame({
   addStep,
   removeStep,
   updateStep,
+  updateTitle,
 }: {
   frame: FrameType;
   onRemove: (frameId: string) => void;
   addStep: (frameId: string) => void;
   removeStep: (stepId: string) => void;
   updateStep: (stepId: string, text: string) => void;
+  updateTitle: (frameId: string, title: string) => void;
 }) {
   return (
     <div>
       <button type="button" onClick={() => onRemove(frame.id)}>
         Remove Frame
       </button>
-      <label>Title</label>
-      <input
-        type="text"
-        onChange={(e) => updateStep(frame.id, e.target.value)}
-      />
+      <label>
+        Title
+        <input
+          type="text"
+          onChange={(e) => updateTitle(frame.id, e.target.value)}
+        />
+      </label>
       <img src={URL.createObjectURL(frame.file)} alt={frame.title} />
       <button type="button" onClick={() => addStep(frame.id)}>
         Add Step
diff --git a/src/features/guides/hooks/useNewGuide.ts b/src/features/guides/hooks/useNewGuide.ts
index b3db19c..c7a5acf 100644
--- a/src/features/guides/hooks/useNewGuide.ts
+++ b/src/features/guides/hooks/useNewGuide.ts
@@ -44,6 +44,12 @@ export default function useNewGuide() {
     setFrames((prev) => [...prev, ...newFrameObjects]);
   };
 
+  const handleUpdateFrameTitle = (frameId: string, title: string) => {
+    setFrames((prev) =>
+      prev.map((frame) => (frame.id === frameId ? { ...frame, title } : frame)),
+    );
+  };
+
   const handleRemoveFrame = (frameId: string) => {
     setFrames((prev) => prev.filter((frame) => frame.id !== frameId));
   };
@@ -116,6 +122,7 @@ export default function useNewGuide() {
     handleUpdateTitle,
     handleUpdateDescription,
     handleAddFrames,
+    handleUpdateFrameTitle,
     handleAddSteps,
     handleRemoveFrame,
     handleUpdateStep,
diff --git a/src/features/guides/routes/NewGuide.tsx b/src/features/guides/routes/NewGuide.tsx
index ff86d88..d5eac16 100644
--- a/src/features/guides/routes/NewGuide.tsx
+++ b/src/features/guides/routes/NewGuide.tsx
@@ -9,6 +9,7 @@ export default function NewGuide() {
     handleUpdateTitle,
     handleUpdateDescription,
     handleAddFrames,
+    handleUpdateFrameTitle,
     handleAddSteps,
     handleRemoveFrame,
     handleRemoveStep,
@@ -21,11 +22,18 @@ export default function NewGuide() {
       <form className="new-guide__form" onSubmit={(e) => handleSaveGuide(e)}>
         <label>
           <span>Title</span>
-          <input type="text" name="title" />
+          <input
+            type="text"
+            name="title"
+            onChange={(e) => handleUpdateTitle(e.target.value)}
+          />
         </label>
         <label>
           <span>Description</span>
-          <textarea name="description" />
+          <textarea
+            name="description"
+            onChange={(e) => handleUpdateDescription(e.target.value)}
+          />
         </label>
 
         <FileUpload onChange={handleAddFrames} />
@@ -37,8 +45,9 @@ export default function NewGuide() {
               frame={frame}
               onRemove={handleRemoveFrame}
               addStep={handleAddSteps}
-              removeStep={handleRemoveStep}
               updateStep={handleUpdateStep}
+              removeStep={handleRemoveStep}
+              updateTitle={handleUpdateFrameTitle}
             />
           ))}