Using state setters instead of setEditorState (#55)

usewaypoint · Mar 1, 2024 · b860315 · b860315
1 parent cf9b89a
commit b860315
Show file tree

Hide file tree

Showing 14 changed files with 179 additions and 154 deletions.
diff --git a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/index.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Box, Typography } from '@mui/material';
 
 import { TEditorBlock } from '../../../documents/editor/core';
-import { setEditorState, useDocument, useSelectedBlockId } from '../../../documents/editor/EditorContext';
+import { setDocument, useDocument, useSelectedBlockId } from '../../../documents/editor/EditorContext';
 
 import AvatarSidebarPanel from './input-panels/AvatarSidebarPanel';
 import ButtonSidebarPanel from './input-panels/ButtonSidebarPanel';
@@ -37,10 +37,7 @@ export default function ConfigurationPanel() {
     return renderMessage(`Block with id ${selectedBlockId} was not found. Click on a block to reset.`);
   }
 
-  const setBlock = (conf: TEditorBlock) =>
-    setEditorState({
-      document: { ...document, [selectedBlockId]: conf },
-    });
+  const setBlock = (conf: TEditorBlock) => setDocument({ [selectedBlockId]: conf });
   const { data, type } = block;
   switch (type) {
     case 'Avatar':

diff --git a/packages/editor-sample/src/App/InspectorDrawer/StylesPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/StylesPanel.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 
-import { setEditorState, useDocument } from '../../documents/editor/EditorContext';
+import { setDocument, useDocument } from '../../documents/editor/EditorContext';
 
 import EmailLayoutSidebarPanel from './ConfigurationPanel/input-panels/EmailLayoutSidebarPanel';
 
 export default function StylesPanel() {
   const block = useDocument().root;
-  const document = useDocument();
   if (!block) {
     return <p>Block not found</p>;
   }
@@ -15,11 +14,6 @@ export default function StylesPanel() {
   if (type !== 'EmailLayout') {
     throw new Error('Expected "root" element to be of type EmailLayout');
   }
-  return (
-    <EmailLayoutSidebarPanel
-      key="root"
-      data={data}
-      setData={(data) => setEditorState({ document: { ...document, root: { type, data } } })}
-    />
-  );
+
+  return <EmailLayoutSidebarPanel key="root" data={data} setData={(data) => setDocument({ root: { type, data } })} />;
 }
diff --git a/packages/editor-sample/src/App/InspectorDrawer/ToggleInspectorPanelButton.tsx b/packages/editor-sample/src/App/InspectorDrawer/ToggleInspectorPanelButton.tsx
@@ -3,13 +3,13 @@ import React from 'react';
 import { AppRegistrationOutlined, LastPageOutlined } from '@mui/icons-material';
 import { IconButton } from '@mui/material';
 
-import { setEditorState, useInspectorDrawerOpen } from '../../documents/editor/EditorContext';
+import { toggleInspectorDrawerOpen, useInspectorDrawerOpen } from '../../documents/editor/EditorContext';
 
 export default function ToggleInspectorPanelButton() {
   const inspectorDrawerOpen = useInspectorDrawerOpen();
 
   const handleClick = () => {
-    setEditorState({ inspectorDrawerOpen: !inspectorDrawerOpen });
+    toggleInspectorDrawerOpen();
   };
   if (inspectorDrawerOpen) {
     return (

diff --git a/packages/editor-sample/src/App/InspectorDrawer/index.tsx b/packages/editor-sample/src/App/InspectorDrawer/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Box, Drawer, Tab, Tabs } from '@mui/material';
 
-import { setEditorState, useInspectorDrawerOpen, useSelectedSidebarTab } from '../../documents/editor/EditorContext';
+import { setSidebarTab, useInspectorDrawerOpen, useSelectedSidebarTab } from '../../documents/editor/EditorContext';
 
 import ConfigurationPanel from './ConfigurationPanel';
 import StylesPanel from './StylesPanel';
@@ -33,7 +33,7 @@ export default function InspectorDrawer() {
     >
       <Box sx={{ width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: 'divider' }}>
         <Box px={2}>
-          <Tabs value={selectedSidebarTab} onChange={(_, v) => setEditorState({ selectedSidebarTab: v })}>
+          <Tabs value={selectedSidebarTab} onChange={(_, v) => setSidebarTab(v)}>
             <Tab value="styles" label="Styles" />
             <Tab value="block-configuration" label="Inspect" />
           </Tabs>

diff --git a/packages/editor-sample/src/App/SamplesDrawer/SidebarButton.tsx b/packages/editor-sample/src/App/SamplesDrawer/SidebarButton.tsx
@@ -2,13 +2,12 @@ import React from 'react';
 
 import { Button } from '@mui/material';
 
-import { setEditorState } from '../../documents/editor/EditorContext';
+import { resetDocument } from '../../documents/editor/EditorContext';
 import getConfiguration from '../../getConfiguration';
 
 export default function SidebarButton({ href, children }: { href: string; children: JSX.Element | string }) {
   const handleClick = () => {
-    const document = getConfiguration(href);
-    setEditorState({ document });
+    resetDocument(getConfiguration(href));
   };
   return (
     <Button size="small" href={href} onClick={handleClick}>

diff --git a/packages/editor-sample/src/App/SamplesDrawer/ToggleSamplesPanelButton.tsx b/packages/editor-sample/src/App/SamplesDrawer/ToggleSamplesPanelButton.tsx
@@ -3,24 +3,17 @@ import React from 'react';
 import { FirstPageOutlined, MenuOutlined } from '@mui/icons-material';
 import { IconButton } from '@mui/material';
 
-import { setEditorState, useSamplesDrawerOpen } from '../../documents/editor/EditorContext';
+import { toggleSamplesDrawerOpen, useSamplesDrawerOpen } from '../../documents/editor/EditorContext';
 
-export default function ToggleSamplesPanelButton() {
+function useIcon() {
   const samplesDrawerOpen = useSamplesDrawerOpen();
-
-  const handleClick = () => {
-    setEditorState({ samplesDrawerOpen: !samplesDrawerOpen });
-  };
   if (samplesDrawerOpen) {
-    return (
-      <IconButton onClick={handleClick}>
-        <FirstPageOutlined fontSize="small" />
-      </IconButton>
-    );
+    return <FirstPageOutlined fontSize="small" />;
   }
-  return (
-    <IconButton onClick={handleClick}>
-      <MenuOutlined fontSize="small" />
-    </IconButton>
-  );
+  return <MenuOutlined fontSize="small" />;
+}
+
+export default function ToggleSamplesPanelButton() {
+  const icon = useIcon();
+  return <IconButton onClick={toggleSamplesDrawerOpen}>{icon}</IconButton>;
 }
diff --git a/packages/editor-sample/src/App/TemplatePanel/MainTabsGroup.tsx b/packages/editor-sample/src/App/TemplatePanel/MainTabsGroup.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { CodeOutlined, DataObjectOutlined, EditOutlined, PreviewOutlined } from '@mui/icons-material';
+import { Tab, Tabs, Tooltip } from '@mui/material';
+
+import { setSelectedMainTab, useSelectedMainTab } from '../../documents/editor/EditorContext';
+
+export default function MainTabsGroup() {
+  const selectedMainTab = useSelectedMainTab();
+  const handleChange = (_: unknown, v: unknown) => {
+    switch (v) {
+      case 'data':
+      case 'editor':
+      case 'preview':
+      case 'html':
+        setSelectedMainTab(v);
+        return;
+      default:
+        setSelectedMainTab('data');
+    }
+  };
+
+  return (
+    <Tabs value={selectedMainTab} onChange={handleChange}>
+      <Tab
+        value="editor"
+        label={
+          <Tooltip title="Edit">
+            <EditOutlined fontSize="small" />
+          </Tooltip>
+        }
+      />
+      <Tab
+        value="preview"
+        label={
+          <Tooltip title="Preview">
+            <PreviewOutlined fontSize="small" />
+          </Tooltip>
+        }
+      />
+      <Tab
+        value="html"
+        label={
+          <Tooltip title="HTML output">
+            <CodeOutlined fontSize="small" />
+          </Tooltip>
+        }
+      />
+      <Tab
+        value="data"
+        label={
+          <Tooltip title="JSON output">
+            <DataObjectOutlined fontSize="small" />
+          </Tooltip>
+        }
+      />
+    </Tabs>
+  );
+}
diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx
@@ -1,18 +1,11 @@
 import React from 'react';
 
-import {
-  CodeOutlined,
-  DataObjectOutlined,
-  EditOutlined,
-  MonitorOutlined,
-  PhoneIphoneOutlined,
-  PreviewOutlined,
-} from '@mui/icons-material';
-import { Box, Stack, SxProps, Tab, Tabs, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import { MonitorOutlined, PhoneIphoneOutlined } from '@mui/icons-material';
+import { Box, Stack, SxProps, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
 
 import EditorBlock from '../../documents/editor/EditorBlock';
 import {
-  setEditorState,
+  setSelectedScreenSize,
   useDocument,
   useSelectedMainTab,
   useSelectedScreenSize,
@@ -24,6 +17,7 @@ import ToggleSamplesPanelButton from '../SamplesDrawer/ToggleSamplesPanelButton'
 
 import HtmlPanel from './HtmlPanel';
 import JsonPanel from './JsonPanel';
+import MainTabsGroup from './MainTabsGroup';
 import ShareButton from './ShareButton';
 
 export default function TemplatePanel() {
@@ -46,14 +40,13 @@ export default function TemplatePanel() {
   }
 
   const handleScreenSizeChange = (_: unknown, value: unknown) => {
-    console.log(value);
     switch (value) {
       case 'mobile':
-        setEditorState({ selectedScreenSize: 'mobile' });
-        return;
       case 'desktop':
+        setSelectedScreenSize(value);
+        return;
       default:
-        setEditorState({ selectedScreenSize: 'desktop' });
+        setSelectedScreenSize('desktop');
     }
   };
 
@@ -93,40 +86,7 @@ export default function TemplatePanel() {
       >
         <ToggleSamplesPanelButton />
         <Stack px={2} direction="row" gap={2} width="100%" justifyContent="space-between" alignItems="center">
-          <Tabs value={selectedMainTab} onChange={(_, v) => setEditorState({ selectedMainTab: v })}>
-            <Tab
-              value="editor"
-              label={
-                <Tooltip title="Edit">
-                  <EditOutlined fontSize="small" />
-                </Tooltip>
-              }
-            />
-            <Tab
-              value="preview"
-              label={
-                <Tooltip title="Preview">
-                  <PreviewOutlined fontSize="small" />
-                </Tooltip>
-              }
-            />
-            <Tab
-              value="html"
-              label={
-                <Tooltip title="HTML output">
-                  <CodeOutlined fontSize="small" />
-                </Tooltip>
-              }
-            />
-            <Tab
-              value="data"
-              label={
-                <Tooltip title="JSON output">
-                  <DataObjectOutlined fontSize="small" />
-                </Tooltip>
-              }
-            />
-          </Tabs>
+          <MainTabsGroup />
           <Stack direction="row" spacing={2}>
             <ToggleButtonGroup value={selectedScreenSize} exclusive size="small" onChange={handleScreenSizeChange}>
               <ToggleButton value="desktop">
@@ -143,7 +103,6 @@ export default function TemplatePanel() {
             <ShareButton />
           </Stack>
         </Stack>
-
         <ToggleInspectorPanelButton />
       </Stack>
       <Box sx={{ height: 'calc(100vh - 49px)', overflow: 'auto', minWidth: 370 }}>

diff --git a/packages/editor-sample/src/documents/blocks/ColumnsContainer/index.tsx b/packages/editor-sample/src/documents/blocks/ColumnsContainer/index.tsx
@@ -4,7 +4,7 @@ import { ColumnsContainer as BaseColumnsContainer } from '@usewaypoint/block-col
 
 import { TEditorBlock } from '../../editor/core';
 import { useCurrentBlockId } from '../../editor/EditorBlock';
-import { setEditorState, useDocument } from '../../editor/EditorContext';
+import { setDocument, setSelectedBlockId } from '../../editor/EditorContext';
 import ReaderBlock from '../../reader/ReaderBlock';
 import EditorChildrenIds from '../helpers/EditorChildrenIds';
 
@@ -23,7 +23,6 @@ export function ColumnsContainer({ style, props }: ColumnsContainerProps) {
 const EMPTY_COLUMNS = [{ childrenIds: [] }, { childrenIds: [] }, { childrenIds: [] }];
 
 export function EditorColumnsContainer({ style, props }: ColumnsContainerProps) {
-  const document = useDocument();
   const blockId = useCurrentBlockId();
 
   const { columns, ...restProps } = props ?? {};
@@ -59,21 +58,18 @@ export function EditorColumnsContainer({ style, props }: ColumnsContainerProps)
       return columnsCopy;
     };
 
-    setEditorState({
-      selectedBlockId: id,
-      document: {
-        ...document,
-        [id]: blockConfiguration,
-        [blockId]: {
-          type: 'ColumnsContainer',
-          data: ColumnsContainerPropsSchema.parse({
-            style,
-            props: {
-              ...restProps,
-              columns: getColumns(),
-            },
-          }),
-        },
+    setSelectedBlockId(id);
+    setDocument({
+      [id]: blockConfiguration,
+      [blockId]: {
+        type: 'ColumnsContainer',
+        data: ColumnsContainerPropsSchema.parse({
+          style,
+          props: {
+            ...restProps,
+            columns: getColumns(),
+          },
+        }),
       },
     });
   };

diff --git a/packages/editor-sample/src/documents/blocks/Container/index.tsx b/packages/editor-sample/src/documents/blocks/Container/index.tsx
@@ -4,7 +4,7 @@ import { Container as BaseContainer } from '@usewaypoint/block-container';
 
 import { TEditorBlock } from '../../editor/core';
 import { useCurrentBlockId } from '../../editor/EditorBlock';
-import { setEditorState, useDocument } from '../../editor/EditorContext';
+import { setDocument, setSelectedBlockId, useDocument } from '../../editor/EditorContext';
 import ReaderBlock from '../../reader/ReaderBlock';
 import EditorChildrenIds from '../helpers/EditorChildrenIds';
 
@@ -36,17 +36,14 @@ export function EditorContainer({ style, props }: ContainerProps) {
       nChildrenIds = [...childrenIds.slice(0, i), id, ...childrenIds.slice(i)];
     }
 
-    setEditorState({
-      selectedBlockId: id,
-      document: {
-        ...document,
-        [id]: blockConfiguration,
-        [blockId]: {
-          type: 'Container',
-          data: {
-            ...document[blockId].data,
-            props: { childrenIds: nChildrenIds },
-          },
+    setSelectedBlockId(id);
+    setDocument({
+      [id]: blockConfiguration,
+      [blockId]: {
+        type: 'Container',
+        data: {
+          ...document[blockId].data,
+          props: { childrenIds: nChildrenIds },
         },
       },
     });