@axinom/mosaic-ui 0.39.0-rc.4 → 0.39.1-feat-gs.0

package/src/components/FormStation/FormStationContext/FormStationContextProvider.tsx

@@ -0,0 +1,86 @@
+import React, { PropsWithChildren, useEffect, useRef } from 'react';
+import { Data } from '../../../types';
+import { getFormDiff } from '../../Utils';
+import { useChangeSets } from '../helpers/useChangeSets';
+import { useDebouncedFormikValues } from '../helpers/useDebouncedFormikValues';
+import { FormStationContext } from './FormStationContext';
+
+interface FormStationContextProviderProps<TValues extends Data> {
+  autosave?: boolean;
+  autosaveDelay?: number;
+  currentValuesRef?: React.MutableRefObject<Partial<TValues>>;
+}
+
+export const FormStationContextProvider = <TValues extends Data>({
+  children,
+  autosave = false,
+  autosaveDelay,
+  currentValuesRef,
+}: PropsWithChildren<
+  FormStationContextProviderProps<TValues>
+>): JSX.Element => {
+  const {
+    debouncedValues,
+    initialValues,
+    dirty,
+    isSubmitting,
+    submitForm,
+    isValid,
+    values,
+  } = useDebouncedFormikValues<TValues>(autosaveDelay);
+
+  if (currentValuesRef) {
+    currentValuesRef.current = values;
+  }
+
+  // We use this to track the last value that was undone so we can avoid pushing it to the changeSets
+  const lastUndoneValue = useRef<Partial<TValues>>({});
+
+  const {
+    changeSets,
+    push: pushChangeSet,
+    pop: popChangeSet,
+    clear: clearChangeSets,
+    getAggregatedChanges,
+  } = useChangeSets(initialValues);
+
+  useEffect(() => {
+    if (dirty && !isSubmitting && debouncedValues !== lastUndoneValue.current) {
+      let previousValues = initialValues;
+
+      if (!autosave) {
+        previousValues = getAggregatedChanges();
+      }
+
+      const next = getFormDiff(debouncedValues, previousValues);
+      const prev: Partial<TValues> = {};
+
+      Object.keys(next).forEach((key) => {
+        prev[key as keyof TValues] = previousValues[key];
+      });
+
+      pushChangeSet({ next, prev });
+
+      if (autosave && isValid) {
+        submitForm();
+      }
+    }
+    // This effect should only be run when we have new debounced values. This is done to simplify the logic.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedValues]);
+
+  return (
+    <FormStationContext.Provider
+      value={{
+        changeSets,
+        pushChangeSet,
+        popChangeSet,
+        clearChangeSets,
+        lastUndoneValue,
+        autosave,
+      }}
+    >
+      {children}
+    </FormStationContext.Provider>
+  );
+};

package/src/components/FormStation/FormStationHeader/FormStationHeader.tsx

@@ -0,0 +1,85 @@
+import { FormikValues, useFormikContext } from 'formik';
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { IconName } from '../../Icons';
+import {
+  PageHeader,
+  PageHeaderActionType,
+  PageHeaderProps,
+} from '../../PageHeader';
+import { useUndo } from '../helpers/useUndo';
+
+/**
+ * Handles showRefresh and cancel buttons based on form states
+ */
+export const FormStationHeader: React.FC<
+  Omit<PageHeaderProps, 'title'> & {
+    titleProperty?: string;
+    defaultTitle?: string;
+    cancelNavigationUrl?: string;
+    isFormSubmitting?: boolean;
+  }
+> = ({
+  titleProperty,
+  defaultTitle,
+  subtitle,
+  cancelNavigationUrl,
+  isFormSubmitting,
+}) => {
+  const { values, resetForm } = useFormikContext<FormikValues>();
+
+  const history = useHistory();
+
+  const { undoOnce, undoAll, showUndo } = useUndo();
+
+  const title =
+    titleProperty && values[titleProperty] !== ''
+      ? values[titleProperty]
+      : defaultTitle ?? '';
+
+  return (
+    <PageHeader
+      title={title}
+      subtitle={subtitle}
+      actions={[
+        ...(showUndo
+          ? [
+              {
+                label: 'Undo Once',
+                icon: IconName.Undo,
+                actionType: PageHeaderActionType.Context,
+                onClick: () => {
+                  undoOnce();
+                },
+                disabled: isFormSubmitting,
+              },
+              {
+                label: 'Undo All',
+                icon: IconName.Undo,
+                actionType: PageHeaderActionType.Context,
+                onClick: () => {
+                  undoAll();
+                },
+                disabled: isFormSubmitting,
+              },
+            ]
+          : []),
+        ...(cancelNavigationUrl // add cancel action if applicable
+          ? [
+              {
+                label: 'Cancel',
+                icon: IconName.X,
+                onClick: () => {
+                  resetForm();
+                  // If the form has errors, Navigation needs to be wrapped in a promise or timeout.
+                  Promise.resolve().then(() =>
+                    history.push(cancelNavigationUrl),
+                  );
+                },
+              },
+            ]
+          : []),
+      ]}
+    />
+  );
+};

package/src/components/FormStation/helpers/mergeData.ts

@@ -0,0 +1,26 @@
+import { Data } from '../../../types';
+import { getFormDiff } from '../../Utils';
+
+export const mergeData = <TValues extends Data>(
+  initialValues: TValues,
+  currentValues: TValues,
+  updatedValues?: Partial<TValues>,
+): {
+  newInitialValues: TValues;
+  newCurrentValues: TValues;
+  shouldUpdateCurrentValues: boolean;
+} => {
+  const diff = getFormDiff(initialValues, currentValues);
+
+  return {
+    newInitialValues: {
+      ...initialValues,
+      ...updatedValues,
+    },
+    newCurrentValues: {
+      ...currentValues,
+      ...updatedValues,
+    },
+    shouldUpdateCurrentValues: Object.keys(diff).length > 0,
+  };
+};

package/src/components/FormStation/helpers/useChangeSets.ts

@@ -0,0 +1,70 @@
+import { useCallback, useState } from 'react';
+
+export interface ChangeSet<T> {
+  prev: Partial<T>;
+  next: Partial<T>;
+}
+
+export const useChangeSets = <T>(
+  initialValues: T,
+): {
+  changeSets: ChangeSet<T>[];
+  push: (value: ChangeSet<T>) => number;
+  pop: () => ChangeSet<T> | undefined;
+  clear: () => Partial<T>;
+  getAggregatedChanges: () => T;
+} => {
+  const [changeSets, setChangeSets] = useState<ChangeSet<T>[]>([]);
+
+  const push = useCallback(
+    (value: ChangeSet<T>): number => {
+      setChangeSets((prev) => [...prev, value]);
+      return changeSets.length;
+    },
+    [changeSets],
+  );
+
+  const pop = useCallback((): ChangeSet<T> | undefined => {
+    if (changeSets.length > 0) {
+      const lastChangeSet = changeSets[changeSets.length - 1];
+      setChangeSets((prev) => prev.slice(0, -1));
+      return lastChangeSet;
+    }
+  }, [changeSets]);
+
+  const clear = useCallback((): T => {
+    const allChanges = changeSets
+      .slice()
+      .reverse()
+      .reduce((acc, changeSet) => {
+        return {
+          ...acc,
+          ...changeSet.prev,
+        };
+      }, {} as T);
+
+    setChangeSets([]);
+    return { ...initialValues, ...allChanges };
+  }, [changeSets, initialValues]);
+
+  const getAggregatedChanges = useCallback(
+    (): T => ({
+      ...initialValues,
+      ...changeSets.reduce((acc, changeSet) => {
+        return {
+          ...acc,
+          ...changeSet.next,
+        };
+      }, {} as T),
+    }),
+    [changeSets, initialValues],
+  );
+
+  return {
+    changeSets,
+    push,
+    pop,
+    clear,
+    getAggregatedChanges,
+  };
+};

package/src/components/FormStation/helpers/useDataProvider.ts

@@ -0,0 +1,169 @@
+import { FormikHelpers } from 'formik';
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { SaveIndicatorType, setSaveIndicator } from '../../../initialize';
+import { Data } from '../../../types';
+import { ErrorTypeToStationError } from '../../../utils/ErrorTypeToStationError';
+import { getFormDiff } from '../../Utils';
+import type { ErrorType } from '../../models';
+import type {
+  InitialFormData,
+  SaveDataFunction,
+  StationErrorStateType,
+} from '../FormStation.models';
+import { mergeData } from './mergeData';
+
+export type FormStationDataProvider = <TValues extends Data, TSubmitResponse>(
+  initialData: InitialFormData<TValues>,
+  saveData: SaveDataFunction<TValues, TSubmitResponse>,
+  currentDataRef: React.MutableRefObject<TValues>,
+) => {
+  onSubmit: (
+    values: TValues,
+    formikHelpers: FormikHelpers<TValues>,
+    initialFormData?: InitialFormData<TValues>,
+  ) => Promise<TSubmitResponse> | void;
+  stationError?: StationErrorStateType;
+  setStationError: Dispatch<SetStateAction<StationErrorStateType | undefined>>;
+  isFormSubmitting: boolean;
+  lastSubmittedResponse: React.MutableRefObject<TSubmitResponse | undefined>;
+  initialValues: TValues | null | undefined;
+};
+
+export const useDataProvider: FormStationDataProvider = <
+  TValues extends Data,
+  TSubmitResponse,
+>(
+  initialData: InitialFormData<TValues>,
+  saveData: SaveDataFunction<TValues, TSubmitResponse>,
+  currentDataRef: React.MutableRefObject<TValues>,
+) => {
+  const [stationError, setStationError] = useState<StationErrorStateType>();
+  const [isFormSubmitting, setIsFormSubmitting] = useState<boolean>(false);
+  const lastSubmittedResponse = useRef<TSubmitResponse>();
+  const [initialValues, setInitialValues] = useState(
+    initialData.data ?? ({} as TValues),
+  );
+
+  useEffect(() => {
+    if (
+      !initialData.loading &&
+      initialData.data !== null &&
+      initialData.data !== undefined
+    ) {
+      // Form Station tends to re-render when the initialData prop changes even though there are no changes to the data.
+      // This check is there to prevent these unnecessary re-renders.
+      const diff = getFormDiff(initialData.data as TValues, initialValues);
+      if (diff && Object.keys(diff).length > 0) {
+        setInitialValues(initialData.data as TValues);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialData.data]);
+
+  useEffect(() => {
+    if (
+      initialData.error ||
+      (initialData.data === null && !initialData.loading) ||
+      initialData.entityNotFound
+    ) {
+      setStationError({
+        ...ErrorTypeToStationError(
+          initialData.error,
+          'An error occurred when trying to load data.',
+          'Entity not found',
+        ),
+        type: 'loading',
+      });
+    } else {
+      if (stationError?.type === 'loading') {
+        // Only clear the error if it is a loading error, which now seems to be cleared.
+        setStationError(undefined);
+      }
+    }
+  }, [
+    initialData.loading,
+    initialData.error,
+    initialData.entityNotFound,
+    initialData.data,
+    stationError?.type,
+  ]);
+
+  const onSubmit = useCallback(
+    async (
+      values: TValues,
+      formikHelpers: FormikHelpers<TValues>,
+      initialFormData: InitialFormData<TValues> = initialData,
+    ) => {
+      if (isFormSubmitting) {
+        // TODO: Handle this case. Throw an error maybe?
+        return undefined as TSubmitResponse;
+      }
+
+      try {
+        setIsFormSubmitting(true);
+        setSaveIndicator(SaveIndicatorType.Saving);
+        setStationError(undefined);
+        if (!initialFormData.loading && saveData) {
+          const result = await saveData(
+            values,
+            { ...initialFormData, data: initialValues },
+            formikHelpers,
+          );
+
+          if (result) {
+            lastSubmittedResponse.current = result;
+          }
+
+          const {
+            newCurrentValues,
+            newInitialValues,
+            shouldUpdateCurrentValues,
+          } = mergeData<TValues>(values, currentDataRef.current, result ?? {});
+
+          formikHelpers.resetForm({ values: newInitialValues });
+          setInitialValues(newInitialValues);
+
+          if (shouldUpdateCurrentValues) {
+            formikHelpers.setValues(newCurrentValues);
+          }
+
+          return lastSubmittedResponse.current as TSubmitResponse;
+        }
+      } catch (error) {
+        setStationError(
+          ErrorTypeToStationError(
+            error as ErrorType,
+            'An error occurred when trying to save data.',
+          ),
+        );
+
+        // We still throw the error, to make sure that navigation or action execution
+        // will not continue after a failed save.
+        throw error;
+      } finally {
+        formikHelpers.setSubmitting(false);
+        setIsFormSubmitting(false);
+        setSaveIndicator(SaveIndicatorType.Inactive);
+      }
+
+      return undefined as TSubmitResponse;
+    },
+    [currentDataRef, initialData, initialValues, isFormSubmitting, saveData],
+  );
+
+  return {
+    onSubmit,
+    stationError,
+    setStationError,
+    isFormSubmitting,
+    lastSubmittedResponse,
+    initialValues,
+  };
+};

package/src/components/FormStation/helpers/useDebouncedFormikValues.ts

@@ -0,0 +1,22 @@
+import { FormikContextType, useFormikContext } from 'formik';
+import { useEffect } from 'react';
+import { useDebounce } from '../../../hooks';
+
+export const useDebouncedFormikValues = <TValues>(
+  autosaveDelay?: number,
+): {
+  debouncedValues: TValues;
+} & FormikContextType<TValues> => {
+  const formikContext = useFormikContext<TValues>();
+
+  const [debouncedValues, setValues] = useDebounce(
+    formikContext.initialValues,
+    autosaveDelay ?? 500,
+  );
+
+  useEffect(() => {
+    setValues(formikContext.values);
+  }, [setValues, formikContext.values]);
+
+  return { debouncedValues, ...formikContext };
+};

package/src/components/FormStation/helpers/useUndo.ts

@@ -0,0 +1,43 @@
+import { FormikValues, useFormikContext } from 'formik';
+import React, { useCallback } from 'react';
+import { FormStationContext } from '../FormStationContext/FormStationContext';
+
+export const useUndo = (): {
+  undoOnce: () => void;
+  undoAll: () => void;
+  showUndo: boolean;
+} => {
+  const {
+    changeSets,
+    popChangeSet,
+    clearChangeSets,
+    lastUndoneValue,
+    autosave,
+  } = React.useContext(FormStationContext);
+  const { values, setValues, submitForm } = useFormikContext<FormikValues>();
+
+  const undoAll = useCallback((): void => {
+    lastUndoneValue.current = clearChangeSets();
+    setValues(lastUndoneValue.current);
+    if (autosave) {
+      submitForm();
+    }
+  }, [autosave, clearChangeSets, lastUndoneValue, setValues, submitForm]);
+
+  const undoOnce = useCallback((): void => {
+    const lastChangeSet = popChangeSet();
+
+    lastUndoneValue.current = {
+      ...values,
+      ...lastChangeSet?.prev,
+    };
+
+    setValues(lastUndoneValue.current);
+
+    if (autosave) {
+      submitForm();
+    }
+  }, [autosave, lastUndoneValue, popChangeSet, setValues, submitForm, values]);
+
+  return { undoOnce, undoAll, showUndo: changeSets.length > 0 };
+};

package/src/components/FormStation/{useValidationError.tsx → helpers/useValidationError.tsx}

@@ -1,6 +1,6 @@
 import { useFormikContext } from 'formik';
 import React, { useCallback, useEffect, useState } from 'react';
-import { StationErrorStateType } from './StationErrorStateType';
+import type { StationErrorStateType } from '../FormStation.models';
 
 /**
  * Component that watches for changes in the form validation state

package/src/components/FormStation/index.ts

@@ -1,8 +1,4 @@
 export { Create, CreateProps } from './Create/Create';
 export { Details, DetailsProps } from './Details/Details';
-export {
-  FormStation,
-  FormStationProps,
-  ObjectSchemaDefinition,
-} from './FormStation';
+export { FormStation, FormStationProps } from './FormStation';
 export * from './FormStation.models';

package/src/components/Utils/Postgraphile/getArrayDiff.ts

@@ -1,3 +1,4 @@
+import { isEqual } from 'lodash';
 /**
  * Compares two arrays and returns an object holding an array for the added and another one for the removed items.
  *
@@ -53,9 +54,9 @@ export function getArrayDiff<T>(
     (x: T) =>
       !originalArray.find((e) => {
         if (key) {
-          return e[key] === x[key];
+          return isEqual(e[key], x[key]);
         }
-        return e === x;
+        return isEqual(e, x);
       }),
   );
 
@@ -63,9 +64,9 @@ export function getArrayDiff<T>(
     (x: T) =>
       !currentArray.find((e) => {
         if (key && typeof key === 'string') {
-          return e[key] === x[key];
+          return isEqual(e[key], x[key]);
         }
-        return e === x;
+        return isEqual(e, x);
       }),
   );
 
@@ -74,7 +75,7 @@ export function getArrayDiff<T>(
   if (key && typeof key === 'string') {
     updated.push(
       ...currentArray.filter((x: T) =>
-        originalArray.find((e) => e[key] === x[key] && isUpdated(e, x)),
+        originalArray.find((e) => isEqual(e[key], x[key]) && isUpdated(e, x)),
       ),
     );
   }
@@ -87,7 +88,7 @@ function isUpdated<U>(x: U, y: U): boolean {
 
   if (isObject(x) && isObject(y)) {
     Object.keys(x).forEach((key) => {
-      if (x[key] !== y[key]) {
+      if (!isEqual(x[key], y[key])) {
         value = true;
       }
     });

package/src/components/Utils/Postgraphile/getFormDiff.ts

@@ -1,4 +1,5 @@
 import { FormikValues } from 'formik';
+import { isEqual } from 'lodash';
 
 /**
  * Returns an object only containing the differences between the two FormikValues.
@@ -19,7 +20,7 @@ export function getFormDiff<T extends FormikValues>(
 ): Partial<T> {
   const updateData = initial
     ? Object.keys(current).reduce<T>((result, value) => {
-        if (current[value] !== initial[value]) {
+        if (!isEqual(current[value], initial[value])) {
           result[value as keyof T] = current[value];
         }
         return result;

package/dist/components/FormStation/StationErrorStateType.d.ts

@@ -1,5 +0,0 @@
-import { StationError } from '../models';
-export interface StationErrorStateType extends StationError {
-    type?: string;
-}
-//# sourceMappingURL=StationErrorStateType.d.ts.map

package/dist/components/FormStation/StationErrorStateType.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StationErrorStateType.d.ts","sourceRoot":"","sources":["../../../src/components/FormStation/StationErrorStateType.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/components/FormStation/useValidationError.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useValidationError.d.ts","sourceRoot":"","sources":["../../../src/components/FormStation/useValidationError.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAehE;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,qBAAqB,GAAG,SAAS,EAC/C,eAAe,EAAE,KAAK,CAAC,QAAQ,CAC7B,KAAK,CAAC,cAAc,CAAC,qBAAqB,GAAG,SAAS,CAAC,CACxD,GACA;IACD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,GAAG,CAAC,OAAO,CAAC;CAChC,CAyBA"}

package/src/components/FormStation/StationErrorStateType.tsx

@@ -1,5 +0,0 @@
-import { StationError } from '../models';
-
-export interface StationErrorStateType extends StationError {
-  type?: string;
-}