fix state management for selected frame:

EZFrames · Jun 29, 2024 · cdf217d · cdf217d
1 parent e444ac6
commit cdf217d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/packages/nextjs/components/ButtonsList.tsx b/packages/nextjs/components/ButtonsList.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import ButtonEditor from "./ButtonEditor";
 import { FrameButtonMetadata, FrameMetadataType } from "@coinbase/onchainkit";
 import { IconButton } from "@mui/material";
@@ -7,7 +7,7 @@ import { useProductJourney } from "~~/providers/ProductProvider";
 import { notification } from "~~/utils/scaffold-eth";
 
 const ButtonList = () => {
-  const { currentFrame, setCurrentFrame, frame, saveFrame } = useProductJourney();
+  const { currentFrame, setCurrentFrame, frame, saveFrame, deleteFrame } = useProductJourney();
   const [activeButtonIndex, setActiveButtonIndex] = useState<number>(0);
 
   if (!currentFrame) return null;
@@ -93,7 +93,12 @@ const ButtonList = () => {
         <ButtonEditor button={currentFrame.buttons[activeButtonIndex]} onSave={handleSave} onDelete={handleDelete} />
       )}
       <div className="flex items-center">
-        <button onClick={handleSaveFrame} className="btn btn-error mt-2 flex items-center justify-center">
+        <button
+          onClick={() => {
+            deleteFrame.mutateAsync(frame?._id as string);
+          }}
+          className="btn btn-error mt-2 flex items-center justify-center"
+        >
           Delete Frame
         </button>
         <button onClick={handleSaveFrame} className="btn btn-success  mt-2 flex items-center justify-center">

diff --git a/packages/nextjs/components/FramesSidebar.tsx b/packages/nextjs/components/FramesSidebar.tsx
@@ -5,16 +5,19 @@ import { getFrameById } from "~~/services/frames";
 import { Frame } from "~~/types/commontypes";
 
 function FrameSidebar() {
-  const [currentFrameId, setCurrentFrameId] = useState<string>("");
-  const { frames: dbFrames, setFrame, setCurrentFrame, createFrame } = useProductJourney();
+  const { frames: dbFrames, frame, setFrame, setCurrentFrame, createFrame } = useProductJourney();
   const [frames, setFrames] = useState<Frame[] | undefined>(undefined);
+  const [currentFrameId, setCurrentFrameId] = useState<string>(frame?._id as string);
   useEffect(() => {
     if (dbFrames) {
       Promise.all(dbFrames.map(frame => getFrameById(frame)))
         .then(data => setFrames(data))
         .catch(error => console.error("Error fetching frames:", error));
     }
   }, [dbFrames]);
+  useEffect(() => {
+    setCurrentFrameId(frame?._id as string);
+  }, [frame]);
   const onCreate = async () => {
     await createFrame.mutateAsync({
       name: "Frame",
@@ -28,7 +31,9 @@ function FrameSidebar() {
         {frames.map((frame, index) => (
           <div
             key={index}
-            className={`border-2 p-2 w-full h-40 flex flex-col items-center justify-center ${currentFrameId === frame._id ? 'border-blue-500' : 'border-black'}`}
+            className={`border-2 p-2 w-full h-40 flex flex-col items-center justify-center ${
+              currentFrameId === frame._id ? "border-blue-500" : "border-black"
+            }`}
             onClick={() => {
               setCurrentFrameId(frame._id as string);
               setFrame(frame);

diff --git a/packages/nextjs/providers/ProductProvider.tsx b/packages/nextjs/providers/ProductProvider.tsx
@@ -17,7 +17,7 @@ interface IProductJourney {
   currentFrame: FrameMetadataType | null;
   createFrame: UseMutationResult<Frame, Error, Omit<Frame, "_id">>;
   saveFrame: UseMutationResult<Frame, Error, Frame>;
-  deleteFrame: UseMutationResult<Frame, Error, Frame>;
+  deleteFrame: UseMutationResult<Frame, Error, string>;
 }
 
 const ProductJourney = createContext<IProductJourney | null>(null);
@@ -123,8 +123,8 @@ const useProduct = () => {
   });
 
   const deleteFrame = useMutation({
-    mutationFn: async (frame: Frame) => {
-      const response = await fetch(`/api/frame/${frame._id}`, {
+    mutationFn: async (frameId: string) => {
+      const response = await fetch(`/api/frame/${frameId}`, {
         method: "DELETE",
         headers: {
           "Content-Type": "application/json",
@@ -133,15 +133,16 @@ const useProduct = () => {
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
-      const newFrames = journey?.frames.filter(f => f !== frame._id);
+      const newFrames = journey?.frames.filter(f => f !== frameId);
       if (!newFrames || !journey) return;
       journey.frames = newFrames;
       await updateProduct.mutateAsync(journey);
       const data = await response.json();
       return data;
     },
     onSettled: () => {
-      console.log("Frame deleted");
+      setFrame(null);
+      setCurrentFrame(null);
     },
   });
   const frames = useMemo(() => {