refactor: pair review with Lucie

prismicio · Oct 11, 2023 · 6744fb3 · 6744fb3
1 parent 6ae0c24
commit 6744fb3
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 128 deletions.
diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/List.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/List.tsx
@@ -12,7 +12,7 @@ import { CustomTypeFormat } from "@slicemachine/manager";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
 import { NonSharedSliceViewCard } from "@src/features/slices/sliceCards/NonSharedSliceViewCard";
 import { SharedSliceViewCard } from "@src/features/slices/sliceCards/SharedSliceViewCard";
-import { useLab } from "@src/features/labs/labsTable/useLabs";
+import { useLab } from "@src/features/labs/labsList/useLab";
 
 interface SlicesListProps {
   format: CustomTypeFormat;
@@ -52,7 +52,7 @@ export const SlicesList: React.FC<SlicesListProps> = ({
             `This ${customTypesMessages.name({
               start: false,
               plural: false,
-            })} contains Slices that are incompatible.`,
+            })} contains slices that are incompatible.`,
             ToasterType.WARNING
           );
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/packages/slice-machine/pages/labs.tsx b/packages/slice-machine/pages/labs.tsx
@@ -1,9 +1 @@
-import { type FC } from "react";
-
-import { LabsPage as LabsPageTemplate } from "@src/features/labs/labsTable/LabsPage";
-
-const LabsPage: FC = () => {
-  return <LabsPageTemplate />;
-};
-
-export default LabsPage;
+export { LabsPage as default } from "@src/features/labs/labsList/LabsPage";
diff --git a/...src/features/labs/labsTable/LabsTable.tsx → ...e/src/features/labs/labsList/LabsList.tsx b/...src/features/labs/labsTable/LabsTable.tsx → ...e/src/features/labs/labsList/LabsList.tsx
@@ -10,52 +10,46 @@ import {
   writeSliceMachineConfig,
 } from "@src/hooks/useSliceMachineConfig";
 
-import { LabsTableItem } from "./LabsTableItem";
+import { LabsListItem } from "./LabsListItem";
 
-export const LabsTable: FC = () => {
+export const LabsList: FC = () => {
   const config = useSliceMachineConfig();
   const { openToaster } = useSliceMachineActions();
 
-  const setLab = (
+  const setLab = async (
     key: keyof Required<SliceMachineConfig>["labs"],
-    name: string
+    name: string,
+    enabled: boolean
   ) => {
-    return async (enabled: boolean) => {
-      try {
-        const updatedConfig = {
-          ...config,
-          labs: { ...config.labs },
-        };
+    const updatedConfig = { ...config, labs: { ...config.labs } };
 
-        if (enabled) {
-          updatedConfig.labs[key] = enabled;
-        } else if (key in updatedConfig.labs) {
-          delete updatedConfig.labs[key];
-        }
+    if (enabled) {
+      updatedConfig.labs[key] = enabled;
+    } else if (key in updatedConfig.labs) {
+      delete updatedConfig.labs[key];
+    }
 
-        if (Object.keys(updatedConfig.labs).length === 0) {
-          delete (updatedConfig as SliceMachineConfig).labs;
-        }
+    if (Object.keys(updatedConfig.labs).length === 0) {
+      delete (updatedConfig as SliceMachineConfig).labs;
+    }
 
-        await writeSliceMachineConfig({ config: updatedConfig });
-      } catch (error) {
-        console.error(error);
-
-        openToaster(
-          enabled
-            ? `Labs: failed to enable ${name}`
-            : `Labs: failed to disable ${name}`,
-          ToasterType.ERROR
-        );
-
-        return;
-      }
+    try {
+      await writeSliceMachineConfig(updatedConfig);
 
       openToaster(
         enabled ? `Labs: enabled ${name}` : `Labs: disabled ${name}`,
         ToasterType.SUCCESS
       );
-    };
+    } catch (error) {
+      console.error(error);
+
+      openToaster(
+        enabled
+          ? `Labs: failed to enable ${name}`
+          : `Labs: failed to disable ${name}`,
+        ToasterType.ERROR
+      );
+    }
   };
 
   return (
@@ -71,17 +65,19 @@ export const LabsTable: FC = () => {
         </Text>
       </header>
       <Box flexDirection="column" gap={16}>
-        <LabsTableItem
+        <LabsListItem
           title="Legacy Slice Upgrader"
           enabled={config.labs?.legacySliceUpgrader ?? false}
-          onToggle={setLab("legacySliceUpgrader", "Legacy Slice Upgrader")}
+          onToggle={(enabled) =>
+            void setLab("legacySliceUpgrader", "Legacy Slice Upgrader", enabled)
+          }
         >
           The Legacy Slice Upgrader allows you to convert old slices (legacy and
           composite slices) to slices managed by Slice Machine (shared slices).
           This feature is experimental, we strongly encourage you testing it
-          through a Prismic environments first or you'll be at risk of losing
+          through a Prismic environment first or you'll be at risk of losing
           past content.
-        </LabsTableItem>
+        </LabsListItem>
       </Box>
     </Box>
   );

diff --git a/...features/labs/labsTable/LabsTableItem.tsx → ...c/features/labs/labsList/LabsListItem.tsx b/...features/labs/labsTable/LabsTableItem.tsx → ...c/features/labs/labsList/LabsListItem.tsx
@@ -1,13 +1,13 @@
 import { type FC, type PropsWithChildren } from "react";
 import { Switch, Box, Card, Icon, Text } from "@prismicio/editor-ui";
 
-type LabsTableItemProps = PropsWithChildren<{
+type LabsListItemProps = PropsWithChildren<{
   title: string;
   enabled: boolean;
-  onToggle: (enabled: boolean) => Promise<void> | void;
+  onToggle: (enabled: boolean) => void;
 }>;
 
-export const LabsTableItem: FC<LabsTableItemProps> = ({
+export const LabsListItem: FC<LabsListItemProps> = ({
   title,
   enabled,
   onToggle,
@@ -27,7 +27,7 @@ export const LabsTableItem: FC<LabsTableItemProps> = ({
           <Switch
             size="medium"
             checked={enabled}
-            onCheckedChange={(checked) => void onToggle(checked)}
+            onCheckedChange={(checked) => onToggle(checked)}
           />
         </Box>
       </Box>

diff --git a/packages/slice-machine/src/features/labs/labsList/LabsPage.tsx b/packages/slice-machine/src/features/labs/labsList/LabsPage.tsx
@@ -0,0 +1,70 @@
+import { type FC, ReactNode, Suspense } from "react";
+import {
+  ErrorBoundary,
+  Box,
+  ProgressCircle,
+  DefaultErrorMessage,
+} from "@prismicio/editor-ui";
+import Head from "next/head";
+
+import {
+  AppLayout,
+  AppLayoutBreadcrumb,
+  AppLayoutContent,
+  AppLayoutHeader,
+} from "@components/AppLayout";
+
+import { LabsList } from "./LabsList";
+
+export const LabsPage: FC = () => {
+  return (
+    <>
+      <Head>
+        <title>Labs - Slice Machine</title>
+      </Head>
+      <ErrorBoundary
+        renderError={() => (
+          <LabsPageLayout>
+            <Box alignItems="center" justifyContent="center">
+              <DefaultErrorMessage
+                title="Request failed"
+                description="An error occurred while fetching your labs configuration."
+              />
+            </Box>
+          </LabsPageLayout>
+        )}
+      >
+        <Suspense
+          fallback={
+            <LabsPageLayout withHeader>
+              <ProgressCircle />
+            </LabsPageLayout>
+          }
+        >
+          <LabsPageLayout withHeader>
+            <LabsList />
+          </LabsPageLayout>
+        </Suspense>
+      </ErrorBoundary>
+    </>
+  );
+};
+
+type LabsPageLayoutProps = {
+  children: ReactNode;
+  withHeader?: boolean;
+};
+
+const LabsPageLayout: FC<LabsPageLayoutProps> = ({
+  children,
+  withHeader = false,
+}) => (
+  <AppLayout>
+    {withHeader ? (
+      <AppLayoutHeader>
+        <AppLayoutBreadcrumb folder="Labs" />
+      </AppLayoutHeader>
+    ) : null}
+    <AppLayoutContent>{children}</AppLayoutContent>
+  </AppLayout>
+);
diff --git a/...e/src/features/labs/labsTable/useLabs.tsx → ...ine/src/features/labs/labsList/useLab.tsx b/...e/src/features/labs/labsTable/useLabs.tsx → ...ine/src/features/labs/labsList/useLab.tsx
@@ -1,13 +1,13 @@
-import { SliceMachineConfig } from "@slicemachine/manager";
+import type { SliceMachineConfig } from "@slicemachine/manager";
 
 import { useSliceMachineConfig } from "@src/hooks/useSliceMachineConfig";
 
-export function useLabs(): Required<SliceMachineConfig>["labs"] {
-  return useSliceMachineConfig().labs ?? {};
-}
-
 export function useLab(key: keyof Required<SliceMachineConfig>["labs"]): {
   enabled: boolean;
 } {
   return { enabled: useLabs()[key] ?? false };
 }
+
+function useLabs(): Required<SliceMachineConfig>["labs"] {
+  return useSliceMachineConfig().labs ?? {};
+}
diff --git a/packages/slice-machine/src/features/labs/labsTable/LabsPage.tsx b/packages/slice-machine/src/features/labs/labsTable/LabsPage.tsx
diff --git a/packages/slice-machine/src/features/slices/sliceCards/NonSharedSliceViewCard.tsx b/packages/slice-machine/src/features/slices/sliceCards/NonSharedSliceViewCard.tsx
@@ -4,7 +4,7 @@ import type { FC } from "react";
 import { type NonSharedSliceInSliceZone } from "@models/common/CustomType/sliceZone";
 import { Card, CardActions, CardFooter, CardMedia } from "@src/components/Card";
 import { getNonSharedSliceLabel } from "@src/domain/slice";
-import { useLab } from "@src/features/labs/labsTable/useLabs";
+import { useLab } from "@src/features/labs/labsList/useLab";
 
 import { ConvertLegacySliceButton } from "../convertLegacySlice/ConvertLegacySliceButton";
 

diff --git a/packages/slice-machine/src/hooks/useSliceMachineConfig.ts b/packages/slice-machine/src/hooks/useSliceMachineConfig.ts
@@ -1,4 +1,4 @@
-import { useRequest, revalidateData } from "@prismicio/editor-support/Suspense";
+import { useRequest, updateData } from "@prismicio/editor-support/Suspense";
 import type { SliceMachineConfig } from "@slicemachine/manager";
 
 import { managerClient } from "@src/managerClient";
@@ -7,14 +7,10 @@ export function useSliceMachineConfig(): SliceMachineConfig {
   return useRequest(readSliceMachineConfig, []);
 }
 
-export async function writeSliceMachineConfig(args: {
-  config: SliceMachineConfig;
-  skipRevalidation?: boolean;
-}) {
-  await managerClient.project.writeSliceMachineConfig({ config: args.config });
+export async function writeSliceMachineConfig(config: SliceMachineConfig) {
+  await managerClient.project.writeSliceMachineConfig({ config });
 
-  (args.skipRevalidation ?? false) ||
-    revalidateData(readSliceMachineConfig, []);
+  updateData(readSliceMachineConfig, [], config);
 }
 
 async function readSliceMachineConfig(): Promise<SliceMachineConfig> {