fix: rendering issue on delete #58

stagehq · Mar 10, 2023 · 5cf4cc7 · 5cf4cc7
1 parent cdd6f28
commit 5cf4cc7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 24 deletions.
diff --git a/src/client/components/PageHeader.tsx b/src/client/components/PageHeader.tsx
@@ -62,9 +62,9 @@ export const PageHeader: FC<PageHeaderProps> = ({ disabled = false }) => {
     isIsrMode ? isrUserState : currentUserState
   );
 
-  useEffect(() => {
-    console.log(site);
-  }, [site]);
+  // useEffect(() => {
+  //   console.log(site);
+  // }, [site]);
 
   //set initial value
   useEffect(() => {

diff --git a/src/client/components/studio/StudioEditor.tsx b/src/client/components/studio/StudioEditor.tsx
@@ -1,6 +1,7 @@
+import debounce from "lodash.debounce";
 import dynamic from "next/dynamic";
 import Head from "next/head";
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, useCallback, useEffect, useRef, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { Layout, Layouts, Responsive, WidthProvider } from "react-grid-layout";
 import { toast } from "react-hot-toast";
@@ -88,6 +89,7 @@ const StudioEditor = () => {
     }
     setTimeout(async () => {
       if (!site?.layouts || site.layouts == null) return null;
+      console.log("onSiteChange");
       await handleLayoutChange(itemsRef, site.layouts);
 
       setInitialCalculated(true);
@@ -102,9 +104,9 @@ const StudioEditor = () => {
     if (itemsRef.current) itemsRef.current.classList.remove("animated");
   }, []);
 
-  useEffect(() => {
-    console.log(site?.layouts);
-  }, [site]);
+  // useEffect(() => {
+  //   console.log(site?.layouts);
+  // }, [site]);
 
   if (!site || !user || !initialCalculated) return null;
 
@@ -165,8 +167,9 @@ const StudioEditor = () => {
                       setBreakpoint(breakpoint);
                     }}
                     onLayoutChange={(layout: Layout[], layouts: Layouts) => {
-                      console.log("layout changed");
+                      console.log(layouts);
                       handleLayoutChange(itemsRef, layouts);
+
                     }}
                     onDrag={onDrag}
                   >
@@ -221,4 +224,4 @@ const StudioEditor = () => {
   );
 };
 
-export default StudioEditor;
+export default StudioEditor;
diff --git a/src/client/components/studio/hooks/useDeleteExtension.tsx b/src/client/components/studio/hooks/useDeleteExtension.tsx
@@ -24,21 +24,23 @@ export const useDeleteExtension = () => {
   const [, deleteExtension] = useDeleteExtensionMutation();
 
   const deleteExtensionFromSite = async (extensionId: string) => {
+    console.log("ID: " + extensionId);
+
     try {
-      // delete extension from database
+
       if (!siteSlug) return null;
-      // delete extension from recoil site store
       if (!site || !site.extensions) return null;
 
-      const newExtensions = [...site.extensions];
+      const currentExtensions = [...site.extensions];
 
-      const extensionIndex = newExtensions.findIndex(
+      const index = currentExtensions.findIndex(
         (extension) => extension.id === extensionId
       );
-      if (extensionIndex !== -1) {
-        newExtensions.splice(extensionIndex, 1);
-        setSite({ ...site });
-        setSite({ ...site, extensions: newExtensions });
+      console.log(index);
+      if (index !== -1) {
+        currentExtensions.splice(index, 1);
+        console.log(currentExtensions);
+        setSite({ ...site, extensions: currentExtensions });
 
         await deleteExtension({
           id: decodeGlobalID(extensionId).id,

diff --git a/src/client/components/studio/hooks/useHandleLayoutChange.tsx b/src/client/components/studio/hooks/useHandleLayoutChange.tsx
@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import { RefObject, useState } from "react";
 import { Layouts } from "react-grid-layout";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { useUpdateSiteLayoutsMutation } from "../../../graphql/updateSiteLayouts.generated";
@@ -31,11 +31,11 @@ export const useHandleLayoutChange = () => {
     itemsRef: RefObject<HTMLDivElement>,
     newlayouts?: Layouts
   ) => {
-    console.log("compare", site?.layouts, newlayouts);
+    //console.log("compare", site?.layouts, newlayouts);
     let currentLayouts = newlayouts ? newlayouts : site?.layouts;
     if (!currentLayouts || !site) return null;
 
-    console.log("before calculation", currentLayouts);
+    //console.log("before calculation", currentLayouts);
 
     //calculate height
     const calculateLayout = () => {
@@ -44,7 +44,7 @@ export const useHandleLayoutChange = () => {
       let index = 0;
       const newItems = [...currentLayouts[breakpoint]];
 
-      console.log("everything ready for calculation");
+      //console.log("everything ready for calculation");
 
       if (itemsRef.current?.children[0].children) {
         for (const element of itemsRef.current.children[0].children) {
@@ -66,19 +66,19 @@ export const useHandleLayoutChange = () => {
       });
     };
     calculateLayout();
-    console.log("after calculation", currentLayouts);
+    //console.log("after calculation", currentLayouts);
 
     await new Promise((resolve) =>
       setTimeout(() => {
         calculateLayout();
-        console.log("after second calculation", currentLayouts);
+        //console.log("after second calculation", currentLayouts);
         resolve(true);
       }, 100)
     );
 
     setTimeout(() => {
       calculateLayout();
-      console.log("after third calculation", currentLayouts);
+      //console.log("after third calculation", currentLayouts);
     }, 200);
 
     //update layout