refactor: editor data schema (#70)

* refactor: switch * refactor: editor data * refactor: sidebar directory * fix: import
Nexters · Aug 19, 2024 · 81a8ab8 · 81a8ab8
1 parent 00669c8
commit 81a8ab8
Show file tree

Hide file tree

Showing 19 changed files with 117 additions and 108 deletions.
diff --git a/src/app/(main)/i/[subdomain]/page.tsx b/src/app/(main)/i/[subdomain]/page.tsx
@@ -46,10 +46,9 @@ export default async function Page({ params }: Props) {
       editorState={{ isPreviewMode: true }}
     >
       <main className="mx-auto max-w-md">
-        {Array.isArray(invitation.customFields) &&
-          invitation.customFields.map((childElement) => (
-            <Recursive key={childElement.id} element={childElement} />
-          ))}
+        {invitation.customFields.elements.map((childElement) => (
+          <Recursive key={childElement.id} element={childElement} />
+        ))}
       </main>
     </EditorProvider>
   );

diff --git a/src/app/(playground)/pg/editor/page.tsx b/src/app/(playground)/pg/editor/page.tsx
@@ -5,62 +5,64 @@ export default async function Page() {
   return (
     <Editor
       editorConfig={{ backLink: "/pg" }}
-      editorData={[
-        {
-          ...bodyElement,
-          content: [
-            {
-              id: "logoBanner",
-              name: "Logo Banner",
-              type: "logoBanner",
-              styles: {
-                height: 69,
-                color: "#22222250",
-              },
-              content: {},
-            },
-            {
-              id: "blank",
-              name: "Blank",
-              type: "blank",
-              styles: {
-                height: 32,
+      editorData={{
+        elements: [
+          {
+            ...bodyElement,
+            content: [
+              {
+                id: "logoBanner",
+                name: "Logo Banner",
+                type: "logoBanner",
+                styles: {
+                  height: 69,
+                  color: "#22222250",
+                },
+                content: {},
               },
-              content: {},
-            },
-            {
-              id: "container",
-              name: "Container",
-              type: "container",
-              styles: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: 10,
-                paddingTop: 10,
-                paddingRight: 10,
-                paddingBottom: 10,
-                paddingLeft: 10,
-                width: "100%",
-                height: "auto",
+              {
+                id: "blank",
+                name: "Blank",
+                type: "blank",
+                styles: {
+                  height: 32,
+                },
+                content: {},
               },
-              content: [
-                {
-                  id: "text",
-                  name: "Text",
-                  type: "text",
-                  styles: {
-                    textAlign: "left",
-                  },
-                  content: {
-                    innerText: "Hello World",
-                  },
+              {
+                id: "container",
+                name: "Container",
+                type: "container",
+                styles: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 10,
+                  paddingTop: 10,
+                  paddingRight: 10,
+                  paddingBottom: 10,
+                  paddingLeft: 10,
+                  width: "100%",
+                  height: "auto",
                 },
-              ],
-            },
-          ],
-        },
-      ]}
+                content: [
+                  {
+                    id: "text",
+                    name: "Text",
+                    type: "text",
+                    styles: {
+                      textAlign: "left",
+                    },
+                    content: {
+                      innerText: "Hello World",
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      }}
     />
   );
 }
diff --git a/src/components/editor/action.ts b/src/components/editor/action.ts
@@ -64,24 +64,28 @@ export type EditorAction = {
 
 const updateEditorHistory = (
   editor: Editor,
-  newData: Editor["data"],
+  data: Partial<Editor["data"]>,
   newSelectedElement: EditorElement = emptyElement,
-): Editor => ({
-  ...editor,
-  state: {
-    ...editor.state,
-    selectedElement: newSelectedElement,
-  },
-  data: newData,
-  history: {
-    ...editor.history,
-    list: [
-      ...editor.history.list.slice(0, editor.history.currentIndex + 1),
-      [...newData],
-    ],
-    currentIndex: editor.history.currentIndex + 1,
-  },
-});
+): Editor => {
+  const newData = { ...editor.data, ...data };
+
+  return {
+    ...editor,
+    state: {
+      ...editor.state,
+      selectedElement: newSelectedElement,
+    },
+    data: newData,
+    history: {
+      ...editor.history,
+      list: [
+        ...editor.history.list.slice(0, editor.history.currentIndex + 1),
+        { ...newData },
+      ],
+      currentIndex: editor.history.currentIndex + 1,
+    },
+  };
+};
 
 const traverseElements = (
   elements: EditorElement[],
@@ -175,7 +179,7 @@ const actionHandlers: {
   ) => Editor;
 } = {
   ADD_ELEMENT: (editor, payload) => {
-    const newData = traverseElements(editor.data, (element) => {
+    const elements = traverseElements(editor.data.elements, (element) => {
       if (
         element.id === payload.containerId &&
         Array.isArray(element.content)
@@ -188,14 +192,14 @@ const actionHandlers: {
       return element;
     });
 
-    return updateEditorHistory(editor, newData);
+    return updateEditorHistory(editor, { elements });
   },
 
   MOVE_ELEMENT: (editor, payload) => {
     const { elementId, newParentId, newIndex } = payload;
 
     const [elements, removedElement] = removeElementFromParent(
-      editor.data,
+      editor.data.elements,
       elementId,
     );
     if (!removedElement) return editor;
@@ -214,15 +218,19 @@ const actionHandlers: {
       }) as EditorElement[];
     };
 
-    const newData = insertElement(elements);
+    const newElements = insertElement(elements);
 
-    return updateEditorHistory(editor, newData, removedElement);
+    return updateEditorHistory(
+      editor,
+      { elements: newElements },
+      removedElement,
+    );
   },
 
   MOVE_ELEMENT_UP: (editor, payload) => {
     const { elementId } = payload;
     const [element, parent, currentIndex] = findElementAndParent(
-      editor.data,
+      editor.data.elements,
       elementId,
     );
     if (
@@ -243,7 +251,7 @@ const actionHandlers: {
   MOVE_ELEMENT_DOWN: (editor, payload) => {
     const { elementId } = payload;
     const [element, parent, currentIndex] = findElementAndParent(
-      editor.data,
+      editor.data.elements,
       elementId,
     );
     if (
@@ -262,7 +270,7 @@ const actionHandlers: {
   },
 
   UPDATE_ELEMENT: (editor, payload) => {
-    const newData = traverseElements(editor.data, (element) => {
+    const elements = traverseElements(editor.data.elements, (element) => {
       if (element.id === payload.elementDetails.id) {
         return { ...element, ...payload.elementDetails };
       }
@@ -275,7 +283,7 @@ const actionHandlers: {
       ? payload.elementDetails
       : editor.state.selectedElement;
 
-    return updateEditorHistory(editor, newData, newSelectedElement);
+    return updateEditorHistory(editor, { elements }, newSelectedElement);
   },
 
   UPDATE_ELEMENT_STYLE: (editor, payload) => {
@@ -291,14 +299,14 @@ const actionHandlers: {
   },
 
   DELETE_ELEMENT: (editor, payload) => {
-    const newData = traverseElements(editor.data, (element) => {
+    const elements = traverseElements(editor.data.elements, (element) => {
       if (element.id === payload.elementDetails.id) {
         return null;
       }
       return element;
     });
 
-    return updateEditorHistory(editor, newData);
+    return updateEditorHistory(editor, { elements });
   },
 
   CHANGE_CLICKED_ELEMENT: (editor, payload) => {
@@ -365,7 +373,7 @@ const actionHandlers: {
       const nextIndex = editor.history.currentIndex + 1;
       return {
         ...editor,
-        data: [...editor.history.list[nextIndex]],
+        data: { ...editor.history.list[nextIndex] },
         history: {
           ...editor.history,
           currentIndex: nextIndex,
@@ -380,7 +388,7 @@ const actionHandlers: {
       const prevIndex = editor.history.currentIndex - 1;
       return {
         ...editor,
-        data: [...editor.history.list[prevIndex]],
+        data: { ...editor.history.list[prevIndex] },
         history: {
           ...editor.history,
           currentIndex: prevIndex,

diff --git a/src/components/editor/constant.ts b/src/components/editor/constant.ts
@@ -59,7 +59,9 @@ export const bodyElement = {
   type: "__body",
 } satisfies EditorElement;
 
-export const initialEditorData: EditorData = [bodyElement];
+export const initialEditorData: EditorData = {
+  elements: [bodyElement],
+};
 
 export const initialEditorState: EditorState = {
   selectedElement: emptyElement,

diff --git a/src/components/editor/elements/recursive.tsx b/src/components/editor/elements/recursive.tsx
@@ -10,9 +10,7 @@ import type { EditorElement } from "~/components/editor/type";
 export default function Recursive({ element }: { element: EditorElement }) {
   switch (element.type) {
     case "__body":
-      return <Container element={element} />;
     case "container":
-      return <Container element={element} />;
     case "2Col":
       return <Container element={element} />;
     case "blank":

diff --git a/src/components/editor/main.tsx b/src/components/editor/main.tsx
@@ -47,10 +47,9 @@ export default function EditorMain() {
             <EyeOff />
           </Button>
         )}
-        {Array.isArray(editor.data) &&
-          editor.data.map((childElement) => (
-            <Recursive key={childElement.id} element={childElement} />
-          ))}
+        {editor.data.elements.map((childElement) => (
+          <Recursive key={childElement.id} element={childElement} />
+        ))}
       </ScrollArea>
       <ElementHelper />
     </div>

diff --git a/src/components/editor/sidebar.tsx → src/components/editor/sidebar/index.tsx b/src/components/editor/sidebar.tsx → src/components/editor/sidebar/index.tsx
@@ -1,17 +1,16 @@
 "use client";
 
-import { Sheet, SheetContent } from "~/components/ui/sheet";
-
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@radix-ui/react-tabs";
 import { PlusIcon, SettingsIcon, WrenchIcon } from "lucide-react";
 import { editorTabValue } from "~/components/editor/constant";
 import { useEditor } from "~/components/editor/provider";
-import SidebarElementSettingsTab from "~/components/editor/sidebar-element-settings-tab";
-import SidebarElementsTab from "~/components/editor/sidebar-elements-tab";
-import SidebarSettingsTab from "~/components/editor/sidebar-settings-tab";
+import SidebarElementSettingsTab from "~/components/editor/sidebar/sidebar-element-settings-tab";
+import SidebarElementsTab from "~/components/editor/sidebar/sidebar-elements-tab";
+import SidebarSettingsTab from "~/components/editor/sidebar/sidebar-settings-tab";
 import type { EditorTabTypeValue } from "~/components/editor/type";
 import { isValidSelectEditorElement } from "~/components/editor/util";
 import { Button } from "~/components/ui/button";
+import { Sheet, SheetContent } from "~/components/ui/sheet";
 import { cn } from "~/lib/utils";
 
 type Props = {};

diff --git a/...ement-settings-tab/background-setting.tsx → ...ement-settings-tab/background-setting.tsx b/...ement-settings-tab/background-setting.tsx → ...ement-settings-tab/background-setting.tsx
diff --git a/...r-element-settings-tab/border-setting.tsx → ...r-element-settings-tab/border-setting.tsx b/...r-element-settings-tab/border-setting.tsx → ...r-element-settings-tab/border-setting.tsx
diff --git a/...ar-element-settings-tab/image-setting.tsx → ...ar-element-settings-tab/image-setting.tsx b/...ar-element-settings-tab/image-setting.tsx → ...ar-element-settings-tab/image-setting.tsx
diff --git a/...or/sidebar-element-settings-tab/index.tsx → ...ar/sidebar-element-settings-tab/index.tsx b/...or/sidebar-element-settings-tab/index.tsx → ...ar/sidebar-element-settings-tab/index.tsx
@@ -1,14 +1,14 @@
 "use client";
 
 import { useEditor } from "~/components/editor/provider";
-import BackgroundSetting from "~/components/editor/sidebar-element-settings-tab/background-setting";
-import BorderSetting from "~/components/editor/sidebar-element-settings-tab/border-setting";
-import ImageSetting from "~/components/editor/sidebar-element-settings-tab/image-setting";
-import KakaoMapSetting from "~/components/editor/sidebar-element-settings-tab/kakao-map-setting";
-import LayoutSetting from "~/components/editor/sidebar-element-settings-tab/layout-setting";
-import LogoBannerSetting from "~/components/editor/sidebar-element-settings-tab/logo-banner-setting";
-import MapSetting from "~/components/editor/sidebar-element-settings-tab/map-setting";
-import TextSetting from "~/components/editor/sidebar-element-settings-tab/text-setting";
+import BackgroundSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/background-setting";
+import BorderSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/border-setting";
+import ImageSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/image-setting";
+import KakaoMapSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/kakao-map-setting";
+import LayoutSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/layout-setting";
+import LogoBannerSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/logo-banner-setting";
+import MapSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/map-setting";
+import TextSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/text-setting";
 import { SheetHeader, SheetTitle } from "~/components/ui/sheet";
 
 type Props = {};

diff --git a/...lement-settings-tab/kakao-map-setting.tsx → ...lement-settings-tab/kakao-map-setting.tsx b/...lement-settings-tab/kakao-map-setting.tsx → ...lement-settings-tab/kakao-map-setting.tsx
diff --git a/...r-element-settings-tab/layout-setting.tsx → ...r-element-settings-tab/layout-setting.tsx b/...r-element-settings-tab/layout-setting.tsx → ...r-element-settings-tab/layout-setting.tsx
diff --git a/...ment-settings-tab/logo-banner-setting.tsx → ...ment-settings-tab/logo-banner-setting.tsx b/...ment-settings-tab/logo-banner-setting.tsx → ...ment-settings-tab/logo-banner-setting.tsx
diff --git a/...ebar-element-settings-tab/map-setting.tsx → ...ebar-element-settings-tab/map-setting.tsx b/...ebar-element-settings-tab/map-setting.tsx → ...ebar-element-settings-tab/map-setting.tsx
diff --git a/...bar-element-settings-tab/text-setting.tsx → ...bar-element-settings-tab/text-setting.tsx b/...bar-element-settings-tab/text-setting.tsx → ...bar-element-settings-tab/text-setting.tsx
diff --git a/...omponents/editor/sidebar-elements-tab.tsx → ...s/editor/sidebar/sidebar-elements-tab.tsx b/...omponents/editor/sidebar-elements-tab.tsx → ...s/editor/sidebar/sidebar-elements-tab.tsx
diff --git a/...omponents/editor/sidebar-settings-tab.tsx → ...s/editor/sidebar/sidebar-settings-tab.tsx b/...omponents/editor/sidebar-settings-tab.tsx → ...s/editor/sidebar/sidebar-settings-tab.tsx
diff --git a/src/components/editor/type.ts b/src/components/editor/type.ts
@@ -50,7 +50,9 @@ export type EditorState = {
   isPreviewMode: boolean;
 };
 
-export type EditorData = EditorElement[];
+export type EditorData = {
+  elements: EditorElement[];
+};
 
 export type EditorHistory = {
   list: EditorData[];