refactor: editor action (#35)

* chore: remove funnelPageId * chore: remove LOAD_DATA * refactor: editor action * feat: UPDATE_ELEMENT_STYLE * fix: EditorElement type safe * style: sort attribute * refactor: rename InferEditorElement * fix: typo * fix: typo
Nexters · Aug 11, 2024 · 66c4e2c · 66c4e2c
1 parent 7d309e7
commit 66c4e2c
Show file tree

Hide file tree

Showing 8 changed files with 274 additions and 366 deletions.
diff --git a/src/components/editor/action.ts b/src/components/editor/action.ts
diff --git a/src/components/editor/constant.ts b/src/components/editor/constant.ts
@@ -1,4 +1,8 @@
-import type { EditorHistory, EditorState } from "~/components/editor/type";
+import type {
+  EditorElement,
+  EditorHistory,
+  EditorState,
+} from "~/components/editor/type";
 
 export const defaultStyles: React.CSSProperties = {
   backgroundPosition: "center",
@@ -19,8 +23,8 @@ export const emptyElement = {
   content: [],
   name: "",
   styles: {},
-  type: null,
-};
+  type: "empty",
+} satisfies EditorElement;
 
 export const initialEditorState: EditorState = {
   elements: [
@@ -36,7 +40,6 @@ export const initialEditorState: EditorState = {
   currentTabValue: editorTabValue.ELEMENTS,
   device: "Mobile",
   isPreviewMode: false,
-  funnelPageId: "",
 };
 
 export const initialEditorHistory: EditorHistory = {

diff --git a/src/components/editor/elements/container.tsx b/src/components/editor/elements/container.tsx
@@ -42,11 +42,11 @@ export default function Container({ element }: Props) {
           payload: {
             containerId: id,
             elementDetails: {
-              content: [],
+              type: "container",
               id: nanoid(),
               name: "Container",
               styles: { ...defaultStyles },
-              type: "container",
+              content: [],
             },
           },
         });
@@ -57,26 +57,26 @@ export default function Container({ element }: Props) {
           payload: {
             containerId: id,
             elementDetails: {
+              type: "2Col",
+              id: nanoid(),
+              name: "Two Columns",
+              styles: { ...defaultStyles, display: "flex" },
               content: [
                 {
-                  content: [],
+                  type: "container",
                   id: nanoid(),
                   name: "Container",
                   styles: { ...defaultStyles, width: "100%" },
-                  type: "container",
+                  content: [],
                 },
                 {
-                  content: [],
+                  type: "container",
                   id: nanoid(),
                   name: "Container",
                   styles: { ...defaultStyles, width: "100%" },
-                  type: "container",
+                  content: [],
                 },
               ],
-              id: nanoid(),
-              name: "Two Columns",
-              styles: { ...defaultStyles, display: "flex" },
-              type: "2Col",
             },
           },
         });
@@ -87,14 +87,14 @@ export default function Container({ element }: Props) {
           payload: {
             containerId: id,
             elementDetails: {
-              content: { innerText: "Text Element" },
+              type: "text",
               id: nanoid(),
               name: "Text",
               styles: {
                 color: "black",
                 ...defaultStyles,
               },
-              type: "text",
+              content: { innerText: "Text Element" },
             },
           },
         });
@@ -105,16 +105,16 @@ export default function Container({ element }: Props) {
           payload: {
             containerId: id,
             elementDetails: {
-              content: {
-                address: "",
-              },
+              type: "map",
               id: nanoid(),
               name: "map",
               styles: {
                 color: "black",
                 ...defaultStyles,
               },
-              type: "map",
+              content: {
+                address: "",
+              },
             },
           },
         });

diff --git a/src/components/editor/elements/map-share.tsx b/src/components/editor/elements/map-share.tsx
@@ -1,13 +1,13 @@
 import Image from "next/image";
 import { toast } from "sonner";
 import ElementWrapper from "~/components/editor/elements/element-wrapper";
-import type { EditorElement } from "~/components/editor/type";
+import type { InferEditorElement } from "~/components/editor/type";
 
 type MapType = "naver" | "kakao";
 type MapUrls = Record<MapType, string>;
 
 type Props = {
-  element: EditorElement;
+  element: InferEditorElement<"map">;
 };
 
 const MapShareComponents = ({ element }: Props) => {

diff --git a/src/components/editor/elements/text.tsx b/src/components/editor/elements/text.tsx
@@ -2,10 +2,10 @@
 
 import ElementWrapper from "~/components/editor/elements/element-wrapper";
 import { useEditor } from "~/components/editor/provider";
-import type { EditorElement } from "~/components/editor/type";
+import type { InferEditorElement } from "~/components/editor/type";
 
 type Props = {
-  element: EditorElement;
+  element: InferEditorElement<"text">;
 };
 
 export default function Text({ element }: Props) {

diff --git a/src/components/editor/sidebar-element-settings-tab/advance-setting.tsx b/src/components/editor/sidebar-element-settings-tab/advance-setting.tsx
@@ -41,21 +41,12 @@ export default function AdvanceSetting() {
 
   const handleOnChanges = (e: any) => {
     const styleSettings = e.target.id;
-    let value = e.target.value;
-    const styleObject = {
-      [styleSettings]: value,
-    };
+    const styleValue = e.target.value;
 
     dispatch({
-      type: "UPDATE_ELEMENT",
+      type: "UPDATE_ELEMENT_STYLE",
       payload: {
-        elementDetails: {
-          ...editor.state.selectedElement,
-          styles: {
-            ...editor.state.selectedElement.styles,
-            ...styleObject,
-          },
-        },
+        [styleSettings]: styleValue,
       },
     });
   };

diff --git a/src/components/editor/sidebar-element-settings-tab/map-setting.tsx b/src/components/editor/sidebar-element-settings-tab/map-setting.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { useEditor } from "~/components/editor/provider";
+import type { InferEditorElement } from "~/components/editor/type";
 import { Input } from "~/components/ui/input";
 
-// TODO: Fix type safety
-type Props = { element: any };
+type Props = { element: InferEditorElement<"map"> };
 
 export default function MapSetting({ element }: Props) {
   const { dispatch } = useEditor();

diff --git a/src/components/editor/type.ts b/src/components/editor/type.ts
@@ -2,36 +2,42 @@ import { editorTabValue } from "~/components/editor/constant";
 
 export type DeviceType = "Desktop" | "Mobile" | "Tablet";
 
-export type EditorElementType =
-  | "__body"
-  | "container"
-  | "2Col"
-  | "text"
-  | "section"
-  | "image"
-  | "map"
-  | null;
-
 export type EditorTabTypeValue =
   (typeof editorTabValue)[keyof typeof editorTabValue];
 
-export type EditorElement = {
-  id: string;
-  styles: React.CSSProperties;
-  name: string;
-  type: EditorElementType;
-  content:
-    | EditorElement[]
-    | { href?: string; innerText?: string; src?: string; address?: string };
+type EditorElementContentMap = {
+  __body: EditorElement[];
+  container: EditorElement[];
+  "2Col": EditorElement[];
+  text: { innerText: string };
+  image: { src: string; alt?: string };
+  map: { address: string };
+  empty: [];
 };
 
+export type EditorElementType = keyof EditorElementContentMap;
+
+export type EditorElement = {
+  [K in EditorElementType]: {
+    type: K;
+    id: string;
+    name: string;
+    styles: React.CSSProperties;
+    content: EditorElementContentMap[K];
+  };
+}[EditorElementType];
+
+export type InferEditorElement<K extends EditorElementType> = Extract<
+  EditorElement,
+  { type: K }
+>;
+
 export type EditorState = {
   elements: EditorElement[];
   selectedElement: EditorElement;
   currentTabValue: EditorTabTypeValue;
   device: DeviceType;
   isPreviewMode: boolean;
-  funnelPageId: string;
 };
 
 export type EditorHistory = {