#8607 Rename useAddElement -> useAddNewModComponent hook (#8640)

* refactor rename useAddElement -> useAddMocComponent * refactor rename AddElement -> AddModComponent * refactor rename editorSlice addElement -> addModComponentFormState * refactor rename checkActiveElementAvailability -> checkActiveModComponentAvailability * refactor rename type ElementConfig -> ModComponentFormStateAdapter * refactor rename useAddModComponent -> useAddNewModComponent * rename straggling vars and types in useAddNewModComponent.ts * refactor rename comments in ModComponentFormStateAdapter type * fix lint error introduced by prettier
pixiebrix · Jun 18, 2024 · eb2ee7e · eb2ee7e
1 parent 68b0ef0
commit eb2ee7e
Show file tree

Hide file tree

Showing 45 changed files with 194 additions and 156 deletions.
diff --git a/src/background/deploymentUpdater.test.ts b/src/background/deploymentUpdater.test.ts
@@ -333,7 +333,7 @@ describe("syncDeployments", () => {
     ).fromExtension(modComponent)) as ActionFormState;
     editorState = editorSlice.reducer(
       editorState,
-      editorSlice.actions.addElement(element),
+      editorSlice.actions.addModComponentFormState(element),
     );
     await saveEditorState(editorState);
 
@@ -443,7 +443,7 @@ describe("syncDeployments", () => {
     )) as ActionFormState;
     editorState = editorSlice.reducer(
       editorState,
-      editorSlice.actions.addElement(element),
+      editorSlice.actions.addModComponentFormState(element),
     );
     await saveEditorState(editorState);
 
@@ -736,15 +736,15 @@ describe("syncDeployments", () => {
     ).fromExtension(standaloneModComponent)) as ActionFormState;
     editorState = editorSlice.reducer(
       editorState,
-      editorSlice.actions.addElement(personalElement),
+      editorSlice.actions.addModComponentFormState(personalElement),
     );
 
     const deploymentElement = (await ADAPTERS.get(
       deploymentStarterBrick.definition.type,
     ).fromExtension(deploymentModComponent)) as ActionFormState;
     editorState = editorSlice.reducer(
       editorState,
-      editorSlice.actions.addElement(deploymentElement),
+      editorSlice.actions.addModComponentFormState(deploymentElement),
     );
 
     await saveModComponentState({

diff --git a/src/components/fields/schemaFields/widgets/varPopup/VarMenu.test.tsx b/src/components/fields/schemaFields/widgets/varPopup/VarMenu.test.tsx
@@ -71,7 +71,7 @@ describe("VarMenu", () => {
       />,
       {
         setupRedux(dispatch) {
-          dispatch(editorActions.addElement(formState));
+          dispatch(editorActions.addModComponentFormState(formState));
           dispatch(editorActions.selectElement(formState.uuid));
         },
       },
@@ -101,7 +101,7 @@ describe("VarMenu", () => {
       />,
       {
         async setupRedux(dispatch) {
-          dispatch(editorActions.addElement(formState));
+          dispatch(editorActions.addModComponentFormState(formState));
           dispatch(editorActions.selectElement(formState.uuid));
           dispatch(
             editorActions.setElementActiveNodeId(
@@ -146,7 +146,7 @@ describe("VarMenu", () => {
       />,
       {
         async setupRedux(dispatch) {
-          dispatch(editorActions.addElement(formState));
+          dispatch(editorActions.addModComponentFormState(formState));
           dispatch(editorActions.selectElement(formState.uuid));
           dispatch(
             editorActions.setElementActiveNodeId(

diff --git a/src/pageEditor/EditorContent.test.tsx b/src/pageEditor/EditorContent.test.tsx
@@ -53,7 +53,7 @@ describe("error alerting in the UI", () => {
     const formState = formStateFactory();
     render(<EditorContent />, {
       async setupRedux(dispatch) {
-        dispatch(editorActions.addElement(formState));
+        dispatch(editorActions.addModComponentFormState(formState));
         dispatch(editorActions.selectElement(formState.uuid));
         await dispatch(editorActions.checkAvailableDynamicElements());
       },
@@ -73,7 +73,7 @@ describe("error alerting in the UI", () => {
     const formState = formStateFactory();
     render(<EditorContent />, {
       async setupRedux(dispatch) {
-        dispatch(editorActions.addElement(formState));
+        dispatch(editorActions.addModComponentFormState(formState));
         dispatch(editorActions.selectElement(formState.uuid));
         await dispatch(editorActions.checkAvailableInstalledExtensions());
       },

diff --git a/src/pageEditor/PanelContent.test.tsx b/src/pageEditor/PanelContent.test.tsx
@@ -58,7 +58,7 @@ describe("Listen to navigationEvent", () => {
     const formState = formStateFactory();
     render(<PanelContent />, {
       setupRedux(dispatch) {
-        dispatch(editorActions.addElement(formState));
+        dispatch(editorActions.addModComponentFormState(formState));
         dispatch(editorActions.selectElement(formState.uuid));
       },
     });

diff --git a/src/pageEditor/documentBuilder/edit/DocumentOptions.test.tsx b/src/pageEditor/documentBuilder/edit/DocumentOptions.test.tsx
@@ -70,7 +70,7 @@ describe("DocumentOptions", () => {
       {
         initialValues: formState,
         setupRedux(dispatch) {
-          dispatch(actions.addElement(formState));
+          dispatch(actions.addModComponentFormState(formState));
           dispatch(actions.selectElement(formState.uuid));
           dispatch(
             actions.setElementActiveNodeId(

diff --git a/src/pageEditor/documentBuilder/preview/DocumentPreview.test.tsx b/src/pageEditor/documentBuilder/preview/DocumentPreview.test.tsx
@@ -62,7 +62,7 @@ function renderDocumentPreview(documentElement: DocumentElement) {
   return render(<PreviewContainer />, {
     initialValues: formState,
     setupRedux(dispatch) {
-      dispatch(actions.addElement(formState));
+      dispatch(actions.addModComponentFormState(formState));
       dispatch(actions.selectElement(formState.uuid));
       dispatch(
         actions.setElementActiveNodeId(
@@ -186,7 +186,7 @@ describe("Show live preview", () => {
     return render(<PreviewContainer />, {
       initialValues: formState,
       setupRedux(dispatch) {
-        dispatch(actions.addElement(formState));
+        dispatch(actions.addModComponentFormState(formState));
         dispatch(actions.selectElement(formState.uuid));
         dispatch(
           actions.setElementActiveNodeId(pipelineField.__value__[0].instanceId),

diff --git a/src/pageEditor/documentBuilder/preview/ElementPreview.test.tsx b/src/pageEditor/documentBuilder/preview/ElementPreview.test.tsx
@@ -71,7 +71,7 @@ const renderElementPreview = (
   return render(<ElementPreview {...props} />, {
     initialValues: formState,
     setupRedux(dispatch) {
-      dispatch(actions.addElement(formState));
+      dispatch(actions.addModComponentFormState(formState));
       dispatch(actions.selectElement(formState.uuid));
       dispatch(
         actions.setElementActiveNodeId(

diff --git a/src/pageEditor/fields/FormModalOptions.test.tsx b/src/pageEditor/fields/FormModalOptions.test.tsx
@@ -47,7 +47,7 @@ describe("FormModalOptions", () => {
       {
         initialValues,
         setupRedux(dispatch) {
-          dispatch(editorActions.addElement(initialValues));
+          dispatch(editorActions.addModComponentFormState(initialValues));
           dispatch(editorActions.selectElement(initialValues.uuid));
           dispatch(editorActions.setElementActiveNodeId(brick.instanceId));
         },

diff --git a/src/pageEditor/fields/FormRendererOptions.test.tsx b/src/pageEditor/fields/FormRendererOptions.test.tsx
@@ -46,7 +46,7 @@ describe("FormRendererOptions", () => {
       {
         initialValues,
         setupRedux(dispatch) {
-          dispatch(editorActions.addElement(initialValues));
+          dispatch(editorActions.addModComponentFormState(initialValues));
           dispatch(editorActions.selectElement(initialValues.uuid));
           dispatch(editorActions.setElementActiveNodeId(brick.instanceId));
         },
@@ -71,7 +71,7 @@ describe("FormRendererOptions", () => {
       {
         initialValues,
         setupRedux(dispatch) {
-          dispatch(editorActions.addElement(initialValues));
+          dispatch(editorActions.addModComponentFormState(initialValues));
           dispatch(editorActions.selectElement(initialValues.uuid));
           dispatch(editorActions.setElementActiveNodeId(brick.instanceId));
         },
@@ -104,7 +104,7 @@ describe("FormRendererOptions", () => {
       {
         initialValues,
         setupRedux(dispatch) {
-          dispatch(editorActions.addElement(initialValues));
+          dispatch(editorActions.addModComponentFormState(initialValues));
           dispatch(editorActions.selectElement(initialValues.uuid));
           dispatch(editorActions.setElementActiveNodeId(brick.instanceId));
         },

diff --git a/src/pageEditor/hooks/useAddElement.ts → ...pageEditor/hooks/useAddNewModComponent.ts b/src/pageEditor/hooks/useAddElement.ts → ...pageEditor/hooks/useAddNewModComponent.ts
@@ -21,7 +21,7 @@ import notify from "@/utils/notify";
 import { actions } from "@/pageEditor/slices/editorSlice";
 import { internalStarterBrickMetaFactory } from "@/pageEditor/starterBricks/base";
 import { isSpecificError } from "@/errors/errorHelpers";
-import { type ElementConfig } from "@/pageEditor/starterBricks/elementConfig";
+import { type ModComponentFormStateAdapter } from "@/pageEditor/starterBricks/modComponentFormStateAdapter";
 import { updateDynamicElement } from "@/contentScript/messenger/api";
 import { type SettingsState } from "@/store/settings/settingsTypes";
 import useFlags from "@/hooks/useFlags";
@@ -35,58 +35,69 @@ import {
   inspectedTab,
 } from "@/pageEditor/context/connection";
 
-type AddElement = (config: ElementConfig) => void;
+type AddNewModComponent = (config: ModComponentFormStateAdapter) => void;
 
-function useAddElement(): AddElement {
+function useAddNewModComponent(): AddNewModComponent {
   const dispatch = useDispatch();
   const { flagOff } = useFlags();
   const suggestElements = useSelector<{ settings: SettingsState }, boolean>(
     (x) => x.settings.suggestElements ?? false,
   );
 
   return useCallback(
-    async (config: ElementConfig) => {
-      if (config.flag && flagOff(config.flag)) {
+    async (modComponentFormStateAdapter: ModComponentFormStateAdapter) => {
+      if (
+        modComponentFormStateAdapter.flag &&
+        flagOff(modComponentFormStateAdapter.flag)
+      ) {
         dispatch(actions.betaError());
         return;
       }
 
-      dispatch(actions.toggleInsert(config.elementType));
+      dispatch(actions.toggleInsert(modComponentFormStateAdapter.elementType));
 
-      if (!config.selectNativeElement) {
+      if (!modComponentFormStateAdapter.selectNativeElement) {
         // If the foundation is not for a native element, stop after toggling insertion mode
         return;
       }
 
       try {
-        const element = await config.selectNativeElement(
+        const element = await modComponentFormStateAdapter.selectNativeElement(
           inspectedTab,
           suggestElements,
         );
         const url = await getCurrentInspectedURL();
 
         const metadata = internalStarterBrickMetaFactory();
 
-        const initialState = config.fromNativeElement(url, metadata, element);
+        const initialState = modComponentFormStateAdapter.fromNativeElement(
+          url,
+          metadata,
+          element,
+        );
 
         updateDynamicElement(
           allFramesInInspectedTab,
-          config.asDynamicElement(initialState),
+          modComponentFormStateAdapter.asDynamicElement(initialState),
         );
 
-        dispatch(actions.addElement(initialState as ModComponentFormState));
-        dispatch(actions.checkActiveElementAvailability());
+        dispatch(
+          actions.addModComponentFormState(
+            initialState as ModComponentFormState,
+          ),
+        );
+        dispatch(actions.checkActiveModComponentAvailability());
 
         reportEvent(Events.MOD_COMPONENT_ADD_NEW, {
-          type: config.elementType,
+          type: modComponentFormStateAdapter.elementType,
         });
       } catch (error) {
         if (isSpecificError(error, CancelError)) {
           return;
         }
 
         notify.error({
-          message: `Error adding ${config.label.toLowerCase()}`,
+          message: `Error adding ${modComponentFormStateAdapter.label.toLowerCase()}`,
           error,
         });
       } finally {
@@ -97,4 +108,4 @@ function useAddElement(): AddElement {
   );
 }
 
-export default useAddElement;
+export default useAddNewModComponent;
diff --git a/src/pageEditor/hooks/useBuildAndValidateMod.test.ts b/src/pageEditor/hooks/useBuildAndValidateMod.test.ts
@@ -193,7 +193,7 @@ describe("useBuildAndValidateMod", () => {
               isReactivate: false,
             }),
           );
-          dispatch(editorActions.addElement(dirtyFormState1));
+          dispatch(editorActions.addModComponentFormState(dirtyFormState1));
         },
       },
     );

diff --git a/src/pageEditor/hooks/useCheckModStarterBrickInvariants.test.ts b/src/pageEditor/hooks/useCheckModStarterBrickInvariants.test.ts
@@ -221,7 +221,7 @@ describe("useCheckModStarterBrickInvariants", () => {
           }
 
           for (const formState of newFormStates) {
-            dispatch(editorActions.addElement(formState));
+            dispatch(editorActions.addModComponentFormState(formState));
           }
         },
       });
@@ -265,7 +265,7 @@ describe("useCheckModStarterBrickInvariants", () => {
 
     const { result } = renderHook(() => useCheckModStarterBrickInvariants(), {
       setupRedux(dispatch) {
-        dispatch(editorActions.addElement(formState));
+        dispatch(editorActions.addModComponentFormState(formState));
       },
     });
 
@@ -304,7 +304,7 @@ describe("useCheckModStarterBrickInvariants", () => {
 
     const { result } = renderHook(() => useCheckModStarterBrickInvariants(), {
       setupRedux(dispatch) {
-        dispatch(editorActions.addElement(formState));
+        dispatch(editorActions.addModComponentFormState(formState));
       },
     });
     const checkModStarterBrickInvariants = result.current;