Webatrice: KnownHosts component (#4456)

* refactor dexie services for future schema updates

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/hooks/index.ts

@@ -1 +1,3 @@
+export * from './useDebounce';
+export * from './useAutoConnect';
 export * from './useReduxEffect';

webclient/src/hooks/useAutoConnect.ts

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { debounce, DebouncedFunc } from 'lodash';
+
+import { SettingDTO } from 'services';
+import { APP_USER } from 'types';
+
+type OnChange = () => void;
+
+export function useAutoConnect(onChange: OnChange) {
+  const [setting, setSetting] = useState(undefined);
+  const [autoConnect, setAutoConnect] = useState(undefined);
+
+  useEffect(() => {
+    SettingDTO.get(APP_USER).then((setting: SettingDTO) => {
+      if (!setting) {
+        setting = new SettingDTO(APP_USER);
+        setting.save();
+      }
+
+      setSetting(setting);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (setting) {
+      setAutoConnect(setting.autoConnect);
+    }
+  }, [setting]);
+
+  useEffect(() => {
+    if (setting) {
+      setting.autoConnect = autoConnect;
+      setting.save();
+
+      onChange();
+    }
+  }, [setting, autoConnect]);
+
+  return [autoConnect, setAutoConnect];
+}

webclient/src/hooks/useDebounce.ts

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+import { debounce, DebouncedFunc } from 'lodash';
+
+type UseDebounceType = (...args: any) => any;
+const DEBOUNCE_DELAY = 250;
+
+export function useDebounce<T extends UseDebounceType>(
+  fn: T,
+  deps: any[] = [],
+  timeout: number = DEBOUNCE_DELAY
+): DebouncedFunc<T> {
+  return useCallback(debounce(fn, timeout), deps);
+}

webclient/src/hooks/useReduxEffect.tsx

@@ -6,8 +6,8 @@ File is adapted from https://github.com/Qeepsake/use-redux-effect under MIT Lice
 
 import { useRef, useEffect, DependencyList } from 'react'
 import { useStore } from 'react-redux'
-import { castArray } from 'lodash'
 import { AnyAction } from 'redux'
+import { castArray } from 'lodash'
 
 export type ReduxEffect = (action: AnyAction) => void
 
@@ -23,25 +23,25 @@ export function useReduxEffect(
   type: string | string[],
   deps: DependencyList = [],
 ): void {
-  const currentValue = useRef(null)
-  const store = useStore()
+  const currentValue = useRef(null);
+  const store = useStore();
 
   const handleChange = (): void => {
-    const state = store.getState()
-    const action = state.action
-    const previousValue = currentValue.current
-    currentValue.current = action.count
+    const state = store.getState();
+    const action = state.action;
+    const previousValue = currentValue.current;
+    currentValue.current = action.count;
 
     if (
       previousValue !== action.count &&
       castArray(type).includes(action.type)
     ) {
-      effect(action)
+      effect(action);
     }
   }
 
   useEffect(() => {
-    const unsubscribe = store.subscribe(handleChange)
-    return (): void => unsubscribe()
+    const unsubscribe = store.subscribe(handleChange);
+    return (): void => unsubscribe();
   }, deps)
 }