more cleannup

Author: marcoacierno

backend/custom_admin/src/components/invitation-letter-document-builder/builder.tsx

@@ -2,6 +2,7 @@ import { Button } from "@radix-ui/themes";
 import { Box } from "@radix-ui/themes";
 import { useEffect } from "react";
 
+import { Spacer } from "../shared/spacer";
 import { DocumentSettings } from "./document-settings";
 import { useLocalData } from "./local-state";
 import { Pages } from "./pages";
@@ -28,15 +29,16 @@ export const InvitationLetterBuilder = () => {
 
   return (
     <>
-      <Box height="var(--space-3)" />
+      <Spacer />
 
       <DocumentSettings />
 
-      <Box height="var(--space-5)" />
+      <Spacer size={5} />
 
       <Pages />
 
-      <Box height="var(--space-3)" />
+      <Spacer />
+
       <Box position="sticky" bottom="0" p="3" className="bg-white">
         <Button onClick={saveChanges} loading={isSaving}>
           Save changes

backend/custom_admin/src/components/invitation-letter-document-builder/document-settings.tsx

@@ -1,17 +1,19 @@
-import { Box, Button, Card, Heading, Text } from "@radix-ui/themes";
+import { Card, Heading, Text } from "@radix-ui/themes";
+import { Spacer } from "../shared/spacer";
 import { EditorSection } from "./editor-section";
 
 export const DocumentSettings = () => {
   return (
     <Card>
       <Heading as="h1">Document</Heading>
-      <Box height="var(--space-2)" />
+      <Spacer />
+
       <Text>Header and footer are shared across all pages.</Text>
 
-      <Box height="var(--space-5)" />
+      <Spacer size={5} />
 
       <EditorSection title="Header" pageId="header" />
-      <Box height="var(--space-5)" />
+      <Spacer size={5} />
 
       <EditorSection title="Footer" pageId="footer" />
     </Card>

backend/custom_admin/src/components/invitation-letter-document-builder/editor-section.tsx

@@ -11,6 +11,7 @@ import { Box } from "@radix-ui/themes";
 import { MoveDown, MoveUp, Pencil, Trash } from "lucide-react";
 import { RichEditor } from "../shared/rich-editor";
 import { HideNode } from "../shared/rich-editor/menu-bar";
+import { Spacer } from "../shared/spacer";
 import { useLocalData } from "./local-state";
 import { RunningElementsOptions } from "./running-elements-options";
 
@@ -57,7 +58,9 @@ export const EditorSection = ({
         {isPage && <RemovePage onRemove={onRemove} />}
       </Flex>
       {!isPage && <RunningElementsOptions pageId={pageId} />}
-      <Box height="var(--space-3)" />
+
+      <Spacer size={3} />
+
       <RichEditor
         hide={[HideNode.buttonNode, HideNode.link]}
         content={content}

backend/custom_admin/src/components/invitation-letter-document-builder/local-state.tsx

@@ -291,6 +291,8 @@ export const LocalStateProvider = ({ children }) => {
   const isDirty = !equal(remoteData, localData);
   const data = localData || remoteData;
 
+  const findPage = (pageId) => data.pages.find((page) => page.id === pageId);
+
   return (
     <LocalStateContext
       value={{
@@ -301,65 +303,55 @@ export const LocalStateProvider = ({ children }) => {
             return data[pageId].content;
           }
 
-          return data.pages.find((page) => page.id === pageId).content;
+          return findPage(pageId).content;
         },
         getProperties: (pageId) => {
           if (pageId === "header" || pageId === "footer") {
             return data[pageId];
           }
 
-          const page = data.pages.find((page) => page.id === pageId);
-          return page;
-        },
-        getPageLayout: () => {
-          return data.pageLayout;
+          return findPage(pageId);
         },
-        setPageLayoutProperty: (property, value) => {
+        getPageLayout: () => data.pageLayout,
+        setPageLayoutProperty: (property, value) =>
           dispatch({
             type: ActionType.SetPageLayoutProperty,
             payload: { property, value },
-          });
-        },
+          }),
         saveChanges: () => saveChanges(localData),
-        setProperty: (pageId, property, value) => {
+        setProperty: (pageId, property, value) =>
           dispatch({
             type: ActionType.SetProperty,
             payload: { pageId, property, value },
-          });
-        },
+          }),
         isSaving,
         saveFailed,
         addPage: () => dispatch({ type: ActionType.AddPage }),
-        renamePage: (pageId, title) => {
+        renamePage: (pageId, title) =>
           dispatch({
             type: ActionType.RenamePage,
             payload: { pageId, title },
-          });
-        },
-        setContent: (pageId, content) => {
+          }),
+        setContent: (pageId, content) =>
           dispatch({
             type: ActionType.SetContent,
             payload: { pageId, content },
-          });
-        },
-        removePage: (pageId) => {
+          }),
+        removePage: (pageId) =>
           dispatch({
             type: ActionType.RemovePage,
             payload: { pageId },
-          });
-        },
-        movePageUp: (pageId) => {
+          }),
+        movePageUp: (pageId) =>
           dispatch({
             type: ActionType.MovePageUp,
             payload: { pageId },
-          });
-        },
-        movePageDown: (pageId) => {
+          }),
+        movePageDown: (pageId) =>
           dispatch({
             type: ActionType.MovePageDown,
             payload: { pageId },
-          });
-        },
+          }),
       }}
     >
       {children}

backend/custom_admin/src/components/invitation-letter-document-builder/pages.tsx

@@ -1,8 +1,8 @@
 import { Button, Card, Heading } from "@radix-ui/themes";
-import { Box } from "@radix-ui/themes";
 import { Plus } from "lucide-react";
 
 import { Fragment } from "react";
+import { Spacer } from "../shared/spacer";
 import { EditorSection } from "./editor-section";
 import { useLocalData } from "./local-state";
 import { PageLayoutOptions } from "./page-layout-option";
@@ -14,20 +14,22 @@ export const Pages = () => {
   return (
     <Card>
       <Heading>Pages</Heading>
-      <Box height="var(--space-1)" />
+
+      <Spacer size={1} />
 
       <PageLayoutOptions />
 
-      <Box height="var(--space-5)" />
+      <Spacer size={5} />
 
       {pages.map((page) => (
         <Fragment key={page.id}>
           <EditorSection title={page.title} pageId={page.id} />
-          <Box height="var(--space-3)" />
+          <Spacer />
         </Fragment>
       ))}
 
-      <Box height="var(--space-2)" />
+      <Spacer size={2} />
+
       <Button variant="soft" onClick={addPage}>
         <Plus size={16} />
         Add Page

backend/custom_admin/src/components/shared/spacer.tsx

@@ -0,0 +1,7 @@
+import { Box } from "@radix-ui/themes";
+
+export const Spacer = ({
+  size = 3,
+}: {
+  size?: number;
+}) => <Box height={`var(--space-${size})`} />;