diff --git a/src/features/guides/components/FileUpload.tsx b/src/features/guides/components/FileUpload.tsx new file mode 100644 index 0000000..e4cb250 --- /dev/null +++ b/src/features/guides/components/FileUpload.tsx @@ -0,0 +1,8 @@ +export default function FileUpload() { + return ( + + ); +} diff --git a/src/features/guides/hooks/useNewGuide.ts b/src/features/guides/hooks/useNewGuide.ts new file mode 100644 index 0000000..f396279 --- /dev/null +++ b/src/features/guides/hooks/useNewGuide.ts @@ -0,0 +1,74 @@ +import { useState } from "react"; +import { Frame, type Guide, type Steps } from "../../../lib/schemas"; + +export default function useNewGuide() { + const [guide, setGuide] = useState({ + id: crypto.randomUUID(), + title: "", + description: "", + createdAt: new Date(), + updatedAt: new Date(), + deletedAt: undefined, + }); + const [frames, setFrames] = useState([]); + const [steps, setSteps] = useState([]); + + const handleUpdateTitle = (title: string) => { + setGuide((prev) => ({ ...prev, title })); + }; + + const handleUpdateDescription = (description: string) => { + setGuide((prev) => ({ ...prev, description })); + }; + + const handleAddFrames = (newFiles: File[]) => { + const newFrameObjects = newFiles.map((file) => ({ + id: crypto.randomUUID(), + file: file, + guideId: guide.id, + })); + + setFrames((prev) => [...prev, ...newFrameObjects]); + }; + + const handleRemoveFrame = (frameId: string) => { + setFrames((prev) => prev.filter((frame) => frame.id !== frameId)); + }; + + const handleAddSteps = (frameId: string) => { + setSteps((prev) => [ + ...prev, + { + id: crypto.randomUUID(), + text: "", + frameId: frameId, + }, + ]); + }; + + const handleUpdateStepText = (stepId: string, text: string) => { + setSteps((prev) => + prev.map((step) => (step.id === stepId ? { ...step, text } : step)), + ); + }; + + const handleRemoveStep = (stepId: string) => { + setSteps((prev) => prev.filter((step) => step.id !== stepId)); + }; + + return { + guide, + setGuide, + frames, + setFrames, + steps, + setSteps, + handleUpdateTitle, + handleUpdateDescription, + handleAddFrames, + handleAddSteps, + handleRemoveFrame, + handleUpdateStepText, + handleRemoveStep, + }; +} diff --git a/src/features/guides/routes/NewGuide.tsx b/src/features/guides/routes/NewGuide.tsx index 700770d..af7377c 100644 --- a/src/features/guides/routes/NewGuide.tsx +++ b/src/features/guides/routes/NewGuide.tsx @@ -1,7 +1,20 @@ +import FileUpload from "../components/FileUpload"; + export default function NewGuide() { return (
-

New Guide

+
+ +