Autosave tweaks and updates

fgatti675 · fgatti675 · commit 7ad0c7858c65 · 2023-06-12T17:23:49.000+02:00
diff --git a/lib/src/core/internal/EntityView.tsx b/lib/src/core/internal/EntityView.tsx
@@ -2,22 +2,14 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import equal from "react-fast-compare";
 import { Box, CircularProgress, Divider, IconButton, Tab, Tabs, Typography, useTheme } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import {
-    Entity,
-    EntityCollection,
-    EntityStatus,
-    EntityValues,
-    FireCMSPlugin,
-    FormContext,
-    ResolvedEntityCollection,
-    User
-} from "../../types";
+import { Entity, EntityCollection, EntityStatus, EntityValues, FireCMSPlugin, FormContext, User } from "../../types";
 import { CircularProgressCenter, EntityCollectionView, EntityPreview, ErrorBoundary } from "../components";
 import {
     canEditEntity,
     fullPathToCollectionSegments,
     removeInitialAndTrailingSlashes,
-    resolveDefaultSelectedView
+    resolveDefaultSelectedView,
+    useDebounce
 } from "../util";
 
 import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
@@ -33,6 +25,8 @@ import {
 import { EntityForm } from "../../form";
 import { useSideDialogContext } from "../SideDialogs";
 import { useLargeSideLayout } from "./useLargeSideLayout";
+import { EntityFormSaveParams } from "../../form/EntityForm";
+import { setIn } from "formik";
 
 export interface EntityViewProps<M extends Record<string, any>> {
     path: string;
@@ -69,6 +63,17 @@ export const EntityView = React.memo<EntityViewProps<any>>(
             console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
         }
 
+        const [saving, setSaving] = useState(false);
+        /**
+         * These are the values that are being saved. They are debounced.
+         * We use this only when autoSave is enabled.
+         */
+        const [valuesToBeSaved, setValuesToBeSaved] = useState<EntityValues<M> | undefined>(undefined);
+        useDebounce(valuesToBeSaved, () => {
+            if (valuesToBeSaved)
+                saveEntity({ values: valuesToBeSaved, closeAfterSave: false });
+        }, false, 2000);
+
         const theme = useTheme();
         const largeLayout = useLargeSideLayout();
         const largeLayoutTabSelected = useRef(!largeLayout);
@@ -85,7 +90,6 @@ export const EntityView = React.memo<EntityViewProps<any>>(
         const [formContext, setFormContext] = useState<FormContext<M> | undefined>(undefined);
 
         const [status, setStatus] = useState<EntityStatus>(copy ? "copy" : (entityId ? "existing" : "new"));
-        // const [currentEntityId, setCurrentEntityId] = useState<string | undefined>(entityId);
 
         const modifiedValuesRef = useRef<EntityValues<M> | undefined>(undefined);
         const modifiedValues = modifiedValuesRef.current;
@@ -176,6 +180,7 @@ export const EntityView = React.memo<EntityViewProps<any>>(
         }, [defaultSelectedView, largeLayout, selectedSubPath]);
 
         const onPreSaveHookError = useCallback((e: Error) => {
+            setSaving(false);
             snackbarController.open({
                 type: "error",
                 message: "Error before saving: " + e?.message
@@ -184,6 +189,7 @@ export const EntityView = React.memo<EntityViewProps<any>>(
         }, [snackbarController]);
 
         const onSaveSuccessHookError = useCallback((e: Error) => {
+            setSaving(false);
             snackbarController.open({
                 type: "error",
                 message: "Error after saving (entity is saved): " + e?.message
@@ -193,10 +199,12 @@ export const EntityView = React.memo<EntityViewProps<any>>(
 
         const onSaveSuccess = (updatedEntity: Entity<M>, closeAfterSave: boolean) => {
 
-            snackbarController.open({
-                type: "success",
-                message: `${collection.singularName ?? collection.name}: Saved correctly`
-            });
+            setSaving(false);
+            if (!autoSave)
+                snackbarController.open({
+                    type: "success",
+                    message: `${collection.singularName ?? collection.name}: Saved correctly`
+                });
 
             setUsedEntity(updatedEntity);
             setStatus("existing");
@@ -224,6 +232,7 @@ export const EntityView = React.memo<EntityViewProps<any>>(
 
         const onSaveFailure = useCallback((e: Error) => {
 
+            setSaving(false);
             snackbarController.open({
                 type: "error",
                 message: "Error saving: " + e?.message
@@ -233,26 +242,13 @@ export const EntityView = React.memo<EntityViewProps<any>>(
             console.error(e);
         }, [entityId, path, snackbarController]);
 
-        const onEntitySave = useCallback(async ({
-                                                    collection,
-                                                    path,
-                                                    entityId,
-                                                    values,
-                                                    previousValues,
-                                                    closeAfterSave
-                                                }: {
-            collection: ResolvedEntityCollection<M>,
-            path: string,
-            entityId: string | undefined,
-            values: EntityValues<M>,
-            previousValues?: EntityValues<M>,
-            closeAfterSave: boolean
-        }): Promise<void> => {
-
-            if (!status)
-                return;
-
-            return saveEntityWithCallbacks({
+        function saveEntity({ values, previousValues, closeAfterSave }: {
+            values: M,
+            previousValues?: M,
+            closeAfterSave: boolean,
+        }) {
+            setSaving(true);
+            saveEntityWithCallbacks({
                 path,
                 entityId,
                 values,
@@ -265,8 +261,29 @@ export const EntityView = React.memo<EntityViewProps<any>>(
                 onSaveFailure,
                 onPreSaveHookError,
                 onSaveSuccessHookError
-            });
-        }, [status, collection, dataSource, context, onSaveSuccess, onSaveFailure, onPreSaveHookError, onSaveSuccessHookError]);
+            }).then();
+        }
+
+        const onSaveEntityRequest = async ({
+                                               values,
+                                               previousValues,
+                                               closeAfterSave,
+                                               autoSave
+                                           }: EntityFormSaveParams<M>): Promise<void> => {
+
+            if (!status)
+                return;
+
+            if (autoSave) {
+                setValuesToBeSaved(values);
+            } else {
+                saveEntity({
+                    values,
+                    previousValues,
+                    closeAfterSave
+                });
+            }
+        };
 
         const customViewsView: React.ReactNode[] | undefined = customViews && customViews.map(
             (customView, colIndex) => {
@@ -306,7 +323,9 @@ export const EntityView = React.memo<EntityViewProps<any>>(
             }
         ).filter(Boolean);
 
-        const loading = (dataLoading && !usedEntity) || ((!usedEntity || readOnly === undefined) && (status === "existing" || status === "copy"));
+        const globalLoading = (dataLoading && !usedEntity) ||
+            ((!usedEntity || readOnly === undefined) && (status === "existing" || status === "copy"));
+        const loading = globalLoading || saving;
 
         const subCollectionsViews = subcollections && subcollections.map(
             (subcollection, colIndex) => {
@@ -331,7 +350,7 @@ export const EntityView = React.memo<EntityViewProps<any>>(
 
                         {loading && <CircularProgressCenter/>}
 
-                        {!loading &&
+                        {!globalLoading &&
                             (usedEntity && fullPath
                                 ? <EntityCollectionView
                                     fullPath={fullPath}
@@ -401,16 +420,21 @@ export const EntityView = React.memo<EntityViewProps<any>>(
             setCurrentEntityId(id);
         }, []);
 
+        const onModified = (dirty: boolean) => {
+            if (!autoSave)
+                onValuesAreModified(dirty);
+        }
+
         function buildForm() {
             const plugins = context.plugins;
             let form = <EntityForm
                 status={status}
                 path={path}
                 collection={collection}
-                onEntitySave={onEntitySave}
+                onEntitySaveRequested={onSaveEntityRequest}
                 onDiscard={onDiscard}
                 onValuesChanged={onValuesChanged}
-                onModified={onValuesAreModified}
+                onModified={onModified}
                 entity={usedEntity}
                 onIdChange={onIdChange}
                 onFormContextChange={setFormContext}
@@ -425,10 +449,9 @@ export const EntityView = React.memo<EntityViewProps<any>>(
                                 status={status}
                                 path={path}
                                 collection={collection}
-                                onEntitySave={onEntitySave}
                                 onDiscard={onDiscard}
                                 onValuesChanged={onValuesChanged}
-                                onModified={onValuesAreModified}
+                                onModified={onModified}
                                 entity={usedEntity}
                                 context={context}
                                 currentEntityId={currentEntityId}
@@ -504,7 +527,7 @@ export const EntityView = React.memo<EntityViewProps<any>>(
 
                 <Box flexGrow={1}/>
 
-                {loading && <Box
+                {globalLoading && <Box
                     sx={{
                         alignSelf: "center"
                     }}>
@@ -595,7 +618,7 @@ export const EntityView = React.memo<EntityViewProps<any>>(
                                         }
                                     }}>
 
-                                    {loading
+                                    {globalLoading
                                         ? <CircularProgressCenter/>
                                         : form}
 
diff --git a/lib/src/core/util/useDebounce.ts b/lib/src/core/util/useDebounce.ts
@@ -3,10 +3,10 @@ import React from "react";
 export function useDebounce<T>(value: T, callback: () => void, immediate: boolean, timeoutMs = 300) {
 
     const pendingUpdate = React.useRef(false);
-    const performUpdate = React.useCallback(() => {
+    const performUpdate = () => {
         callback();
         pendingUpdate.current = false;
-    }, [callback]);
+    };
 
     const handlerRef = React.useRef<number | undefined>(undefined);
 
diff --git a/lib/src/form/EntityForm.tsx b/lib/src/form/EntityForm.tsx
@@ -22,6 +22,7 @@ import { useDataSource, useFireCMSContext } from "../hooks";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomIdField } from "./components/CustomIdField";
 
+
 /**
  * @category Components
  */
@@ -51,16 +52,8 @@ export interface EntityFormProps<M extends Record<string, any>> {
     /**
      * The callback function called when Save is clicked and validation is correct
      */
-    onEntitySave: (
-        props:
-            {
-                collection: ResolvedEntityCollection<M>,
-                path: string,
-                entityId: string | undefined,
-                values: EntityValues<M>,
-                previousValues?: EntityValues<M>,
-                closeAfterSave: boolean
-            }
+    onEntitySaveRequested: (
+        props: EntityFormSaveParams<M>
     ) => Promise<void>;
 
     /**
@@ -95,6 +88,17 @@ export interface EntityFormProps<M extends Record<string, any>> {
 
 }
 
+
+export type EntityFormSaveParams<M extends Record<string, any>> = {
+    collection: ResolvedEntityCollection<M>,
+    path: string,
+    entityId: string | undefined,
+    values: EntityValues<M>,
+    previousValues?: EntityValues<M>,
+    closeAfterSave: boolean,
+    autoSave: boolean
+};
+
 /**
  * This is the form used internally by the CMS
  * @param status
@@ -120,7 +124,7 @@ function EntityFormInternal<M extends Record<string, any>>({
                                                                path,
                                                                collection: inputCollection,
                                                                entity,
-                                                               onEntitySave,
+                                                               onEntitySaveRequested,
                                                                onDiscard,
                                                                onModified,
                                                                onValuesChanged,
@@ -242,13 +246,14 @@ function EntityFormInternal<M extends Record<string, any>>({
     }, [baseDataSourceValues, collection.properties, initialValues, status]);
 
     const save = (values: EntityValues<M>) =>
-        onEntitySave({
+        onEntitySaveRequested({
             collection,
             path,
             entityId,
             values,
             previousValues: entity?.values,
-            closeAfterSave: closeAfterSaveRef.current
+            closeAfterSave: closeAfterSaveRef.current,
+            autoSave: autoSave ?? false,
         }).then(_ => {
             const eventName: CMSAnalyticsEvent = status === "new"
                 ? "new_entity_saved"
diff --git a/lib/src/form/field_bindings/BlockFieldBinding.tsx b/lib/src/form/field_bindings/BlockFieldBinding.tsx
@@ -203,12 +203,13 @@ function BlockEntry({
         }
         : undefined;
 
-    const updateType = useCallback((newType: any) => {
+    const updateType = (newType: any) => {
+        const newSelectedProperty = newType ? properties[newType] : undefined;
         setTypeInternal(newType);
         formikContext.setFieldTouched(typeFieldName);
         formikContext.setFieldValue(typeFieldName, newType);
-        formikContext.setFieldValue(valueFieldName, property ? getDefaultValueFor(property) : null);
-    }, [typeFieldName, valueFieldName]);
+        formikContext.setFieldValue(valueFieldName, newSelectedProperty ? getDefaultValueFor(newSelectedProperty) : null);
+    };
 
     return (
         <Paper sx={(theme) => ({
