feat(sdl): persist sdl builder form to localstorage

refs #88

deploy-web/src/components/sdl/SimpleSdlBuilderForm.tsx

@@ -27,9 +27,14 @@ import { PreviewSdl } from "./PreviewSdl";
 import { SaveTemplateModal } from "./SaveTemplateModal";
 import { useSnackbar } from "notistack";
 import { Snackbar } from "../shared/Snackbar";
+import useFormPersist from "@src/hooks/useFormPersist";
 
 type Props = {};
 
+const DEFAULT_SERVICES = {
+  services: [{ ...defaultService }]
+};
+
 export const SimpleSDLBuilderForm: React.FunctionComponent<Props> = ({}) => {
   const [error, setError] = useState(null);
   const [templateMetadata, setTemplateMetadata] = useState<ITemplate | null>(null);
@@ -44,10 +49,12 @@ export const SimpleSDLBuilderForm: React.FunctionComponent<Props> = ({}) => {
   const [sdlBuilderSdl, setSdlBuilderSdl] = useAtom(sdlStore.sdlBuilderSdl);
   const { data: gpuModels } = useGpuModels();
   const { enqueueSnackbar } = useSnackbar();
-  const { handleSubmit, reset, control, trigger, watch, setValue } = useForm<SdlBuilderFormValues>({
-    defaultValues: {
-      services: [{ ...defaultService }]
-    }
+  const { handleSubmit, reset, control, trigger, watch, setValue } = useForm<SdlBuilderFormValues>();
+  useFormPersist("sdl-builder-form", {
+    watch,
+    setValue,
+    defaultValues: DEFAULT_SERVICES,
+    storage: typeof window === "undefined" ? undefined : window.localStorage
   });
   const {
     fields: services,
@@ -288,7 +295,7 @@ export const SimpleSDLBuilderForm: React.FunctionComponent<Props> = ({}) => {
           </div>
         </div>
 
-        {services.map((service, serviceIndex) => (
+        {_services?.map((service, serviceIndex) => (
           <SimpleServiceFormControl
             key={service.id}
             serviceIndex={serviceIndex}

deploy-web/src/hooks/useFormPersist.tsx

@@ -0,0 +1,93 @@
+import { useEffect } from "react";
+import { SetFieldValue } from "react-hook-form";
+
+export interface FormPersistConfig {
+  storage?: Storage;
+  watch: (names?: string | string[]) => any;
+  setValue: SetFieldValue<any>;
+  exclude?: string[];
+  onDataRestored?: (data: any) => void;
+  validate?: boolean;
+  dirty?: boolean;
+  touch?: boolean;
+  onTimeout?: () => void;
+  timeout?: number;
+  defaultValues?: any;
+}
+
+const useFormPersist = (
+  name: string,
+  {
+    storage,
+    watch,
+    setValue,
+    exclude = [],
+    onDataRestored,
+    validate = false,
+    dirty = false,
+    touch = false,
+    onTimeout,
+    timeout,
+    defaultValues
+  }: FormPersistConfig
+) => {
+  const watchedValues = watch();
+
+  const getStorage = () => storage || window.sessionStorage;
+
+  const clearStorage = () => getStorage().removeItem(name);
+
+  useEffect(() => {
+    const str = getStorage().getItem(name);
+    const parsed = str ? JSON.parse(str) : defaultValues;
+
+    if (parsed) {
+      const { _timestamp = null, ...values } = parsed;
+      const dataRestored: { [key: string]: any } = {};
+      const currTimestamp = Date.now();
+
+      if (timeout && currTimestamp - _timestamp > timeout) {
+        onTimeout && onTimeout();
+        clearStorage();
+        return;
+      }
+
+      Object.keys(values).forEach(key => {
+        const shouldSet = !exclude.includes(key);
+        if (shouldSet) {
+          dataRestored[key] = values[key];
+          setValue(key, values[key], {
+            shouldValidate: validate,
+            shouldDirty: dirty,
+            shouldTouch: touch
+          });
+        }
+      });
+
+      if (onDataRestored) {
+        onDataRestored(dataRestored);
+      }
+    }
+  }, [storage, name, onDataRestored, setValue, defaultValues]);
+
+  useEffect(() => {
+    const values = exclude.length
+      ? Object.entries(watchedValues)
+          .filter(([key]) => !exclude.includes(key))
+          .reduce((obj, [key, val]) => Object.assign(obj, { [key]: val }), {})
+      : Object.assign({}, watchedValues);
+
+    if (Object.entries(values).length) {
+      if (timeout !== undefined) {
+        values._timestamp = Date.now();
+      }
+      getStorage().setItem(name, JSON.stringify(values));
+    }
+  }, [watchedValues, timeout]);
+
+  return {
+    clear: () => getStorage().removeItem(name)
+  };
+};
+
+export default useFormPersist;