refactor: refine organize code

reearth · Aug 10, 2023 · 5f4fc08 · 5f4fc08
1 parent b315744
commit 5f4fc08
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 107 deletions.
diff --git a/web/src/beta/features/Editor/tabs/widgets/SidePanel/ContainerSettings/hooks.ts b/web/src/beta/features/Editor/tabs/widgets/SidePanel/ContainerSettings/hooks.ts
diff --git a/web/src/beta/features/Editor/tabs/widgets/SidePanel/ContainerSettings/index.tsx b/web/src/beta/features/Editor/tabs/widgets/SidePanel/ContainerSettings/index.tsx
@@ -1,97 +1,84 @@
 import TextInput from "@reearth/beta/components/properties/TextInput";
 import SidePanelSectionField from "@reearth/beta/components/SidePanelSectionField";
 import { WidgetAreaPadding, WidgetAreaState } from "@reearth/services/state";
-import { styled } from "@reearth/services/theme";
-
-import useHooks from "./hooks";
 
 type Props = {
-  sceneId: string;
   widgetArea: WidgetAreaState;
+  onWidgetAreaStateChange: (widgetArea: WidgetAreaState) => void;
 };
 
-const ContainerSettings: React.FC<Props> = ({ sceneId, widgetArea }) => {
-  const { handleAreaStateChange } = useHooks({ sceneId });
-
+const ContainerSettings: React.FC<Props> = ({ widgetArea, onWidgetAreaStateChange }) => {
   // TODO: This is dummy UI
   return (
-    <Wrapper>
-      <SidePanelSectionField>
-        <TextInput
-          name="Padding Top"
-          value={widgetArea?.padding?.top.toString()}
-          onChange={newVal => {
-            handleAreaStateChange?.({
-              ...widgetArea,
-              padding: {
-                ...(widgetArea.padding as WidgetAreaPadding),
-                top: Number(newVal) ?? 0,
-              },
-            });
-          }}
-        />
-        <TextInput
-          name="Padding Right"
-          value={widgetArea?.padding?.right.toString()}
-          onChange={newVal => {
-            handleAreaStateChange?.({
-              ...widgetArea,
-              padding: {
-                ...(widgetArea.padding as WidgetAreaPadding),
-                right: Number(newVal) ?? 0,
-              },
-            });
-          }}
-        />
-        <TextInput
-          name="Padding Bottom"
-          value={widgetArea?.padding?.bottom.toString()}
-          onChange={newVal => {
-            handleAreaStateChange?.({
-              ...widgetArea,
-              padding: {
-                ...(widgetArea.padding as WidgetAreaPadding),
-                bottom: Number(newVal) ?? 0,
-              },
-            });
-          }}
-        />
-        <TextInput
-          name="Padding Left"
-          value={widgetArea?.padding?.left.toString()}
-          onChange={newVal => {
-            handleAreaStateChange?.({
-              ...widgetArea,
-              padding: {
-                ...(widgetArea.padding as WidgetAreaPadding),
-                left: Number(newVal) ?? 0,
-              },
-            });
-          }}
-        />
+    <SidePanelSectionField>
+      <TextInput
+        name="Padding Top"
+        value={widgetArea?.padding?.top.toString()}
+        onChange={newVal => {
+          onWidgetAreaStateChange({
+            ...widgetArea,
+            padding: {
+              ...(widgetArea.padding as WidgetAreaPadding),
+              top: Number(newVal) ?? 0,
+            },
+          });
+        }}
+      />
+      <TextInput
+        name="Padding Right"
+        value={widgetArea?.padding?.right.toString()}
+        onChange={newVal => {
+          onWidgetAreaStateChange({
+            ...widgetArea,
+            padding: {
+              ...(widgetArea.padding as WidgetAreaPadding),
+              right: Number(newVal) ?? 0,
+            },
+          });
+        }}
+      />
+      <TextInput
+        name="Padding Bottom"
+        value={widgetArea?.padding?.bottom.toString()}
+        onChange={newVal => {
+          onWidgetAreaStateChange({
+            ...widgetArea,
+            padding: {
+              ...(widgetArea.padding as WidgetAreaPadding),
+              bottom: Number(newVal) ?? 0,
+            },
+          });
+        }}
+      />
+      <TextInput
+        name="Padding Left"
+        value={widgetArea?.padding?.left.toString()}
+        onChange={newVal => {
+          onWidgetAreaStateChange({
+            ...widgetArea,
+            padding: {
+              ...(widgetArea.padding as WidgetAreaPadding),
+              left: Number(newVal) ?? 0,
+            },
+          });
+        }}
+      />
 
-        <TextInput
-          name="Gap Spacing"
-          value={(widgetArea?.gap ?? 0).toString()}
-          onChange={newVal => {
-            handleAreaStateChange?.({
-              ...widgetArea,
-              gap: Number(newVal) ?? 0,
-            });
-          }}
-        />
+      <TextInput
+        name="Gap Spacing"
+        value={(widgetArea?.gap ?? 0).toString()}
+        onChange={newVal => {
+          onWidgetAreaStateChange({
+            ...widgetArea,
+            gap: Number(newVal) ?? 0,
+          });
+        }}
+      />
 
-        <div>[Switch field] Align Center {!!widgetArea?.centered}</div>
-        <div>[Color field] Background Color {widgetArea?.background}</div>
-      </SidePanelSectionField>
-    </Wrapper>
+      <div>[Switch field] Align Center {!!widgetArea?.centered}</div>
+      <div>[Color field] Background Color {widgetArea?.background}</div>
+    </SidePanelSectionField>
   );
 };
 
 export default ContainerSettings;
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
diff --git a/web/src/beta/features/Editor/tabs/widgets/SidePanel/hooks.ts b/web/src/beta/features/Editor/tabs/widgets/SidePanel/hooks.ts
@@ -2,11 +2,20 @@ import { useReactiveVar } from "@apollo/client";
 import { useCallback, useMemo } from "react";
 
 import { useWidgetsFetcher } from "@reearth/services/api";
-import { selectedWidgetVar, selectedWidgetAreaVar } from "@reearth/services/state";
+import {
+  selectedWidgetVar,
+  selectedWidgetAreaVar,
+  type WidgetAreaState,
+} from "@reearth/services/state";
 
 export default ({ sceneId }: { sceneId?: string }) => {
-  const { useInstallableWidgetsQuery, useInstalledWidgetsQuery, useAddWidget, useRemoveWidget } =
-    useWidgetsFetcher();
+  const {
+    useInstallableWidgetsQuery,
+    useInstalledWidgetsQuery,
+    useAddWidget,
+    useRemoveWidget,
+    useUpdateWidgetAlignSystem,
+  } = useWidgetsFetcher();
   const { installableWidgets } = useInstallableWidgetsQuery({ sceneId });
   const { installedWidgets } = useInstalledWidgetsQuery({ sceneId });
 
@@ -48,6 +57,17 @@ export default ({ sceneId }: { sceneId?: string }) => {
     [sceneId, useRemoveWidget],
   );
 
+  const handleWidgetAreaStateChange = useCallback(
+    async (widgetAreaState?: WidgetAreaState) => {
+      if (!sceneId || !widgetAreaState) return;
+      const results = await useUpdateWidgetAlignSystem(widgetAreaState, sceneId);
+      if (results.status === "success") {
+        selectedWidgetAreaVar(widgetAreaState);
+      }
+    },
+    [sceneId, useUpdateWidgetAlignSystem],
+  );
+
   return {
     selectedWidget,
     selectedWidgetArea,
@@ -57,5 +77,6 @@ export default ({ sceneId }: { sceneId?: string }) => {
     handleWidgetAdd,
     handleWidgetRemove,
     handleWidgetSelection,
+    handleWidgetAreaStateChange,
   };
 };
diff --git a/web/src/beta/features/Editor/tabs/widgets/SidePanel/index.tsx b/web/src/beta/features/Editor/tabs/widgets/SidePanel/index.tsx
@@ -23,6 +23,7 @@ const SidePanel: React.FC<Props> = ({ sceneId }) => {
     handleWidgetAdd,
     handleWidgetRemove,
     handleWidgetSelection,
+    handleWidgetAreaStateChange,
   } = useHooks({ sceneId });
 
   return (
@@ -58,7 +59,10 @@ const SidePanel: React.FC<Props> = ({ sceneId }) => {
           title: t("Container Settings"),
           hide: !selectedWidgetArea,
           children: selectedWidgetArea && sceneId && (
-            <ContainerSettings sceneId={sceneId} widgetArea={selectedWidgetArea} />
+            <ContainerSettings
+              widgetArea={selectedWidgetArea}
+              onWidgetAreaStateChange={handleWidgetAreaStateChange}
+            />
           ),
         },
       ]}