setup hooks for table and setting config docs

src/hooks/useDoc.ts

@@ -0,0 +1,50 @@
+import { db } from "../firebase";
+import { useEffect, useReducer } from "react";
+
+const documentReducer = (prevState: any, newProps: any) => {
+  return { ...prevState, ...newProps };
+};
+const documentIntialState = {
+  path: null,
+  prevPath: null,
+  doc: null,
+  loading: true
+};
+
+const useDoc = (intialOverrides: any) => {
+  const [documentState, documentDispatch] = useReducer(documentReducer, {
+    ...documentIntialState,
+    ...intialOverrides
+  });
+  const setDocumentListner = () => {
+    documentDispatch({ prevPath: documentState.path });
+    const unsubscribe = db.doc(documentState.path).onSnapshot(snapshot => {
+      if (snapshot.exists) {
+        const data = snapshot.data();
+        const id = snapshot.id;
+        const doc = { ...data, id };
+        documentDispatch({
+          doc,
+          loading: false
+        });
+      }
+    });
+    documentDispatch({ unsubscribe });
+  };
+  useEffect(() => {
+    const { path, prevPath, unsubscribe } = documentState;
+    if (path && path !== prevPath) {
+      if (unsubscribe) unsubscribe();
+      setDocumentListner();
+    }
+  }, [documentState]);
+  useEffect(
+    () => () => {
+      if (documentState.unsubscribe) documentState.unsubscribe();
+    },
+    []
+  );
+  return [documentState, documentDispatch];
+};
+
+export default useDoc;

src/hooks/useSettings.ts

@@ -1,49 +1,18 @@
-import { db } from "../firebase";
-import { useEffect, useReducer } from "react";
-
-const documentReducer = (prevState: any, newProps: any) => {
-  return { ...prevState, ...newProps };
-};
-const documentIntialState = {
-  doc: null,
-  loading: false
-};
+import { useEffect } from "react";
+import useDoc from "./useDoc";
 
 const useSettings = () => {
-  const [settingsState, settingsDispatch] = useReducer(documentReducer, {
-    ...documentIntialState
+  const [settingsState, documentDispatch] = useDoc({
+    path: "_FIRETABLE_/settings"
   });
-  const setSettingsListner = () => {
-    settingsDispatch({ loading: true });
-    const unsubscribe = db.doc("_FIRETABLE_/settings").onSnapshot(snapshot => {
-      if (snapshot.exists) {
-        const data = snapshot.data();
-        const doc = { tables: [], ...data };
-        const tables = doc.tables;
-        settingsDispatch({
-          doc,
-          tables,
-          loading: false
-        });
-      }
-    });
-    settingsDispatch({ unsubscribe });
-  };
-
   useEffect(() => {
-    const { doc, loading } = settingsState;
-    if (!doc && !loading) {
-      //initialise listener
-      setSettingsListner();
+    const { doc, tables } = settingsState;
+    if (doc && tables !== doc.tables) {
+      documentDispatch({ tables: doc.tables });
     }
   }, [settingsState]);
-  useEffect(
-    () => () => {
-      if (settingsState.unsubscribe) settingsState.unsubscribe();
-    },
-    []
-  );
-  return [settingsState, settingsDispatch];
+
+  return settingsState;
 };
 
 export default useSettings;

src/hooks/useTableConfig.ts

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import useDoc from "./useDoc";
+const useTableConfig = (tablePath: string) => {
+  const [tableConfigState, documentDispatch] = useDoc({
+    path: `${tablePath}/_FIRETABLE_`
+  });
+  useEffect(() => {
+    const { doc, columns } = tableConfigState;
+    if (doc && columns !== doc.columns) {
+      documentDispatch({ columns: doc.columns });
+    }
+  }, [tableConfigState]);
+  return tableConfigState;
+};
+
+export default useTableConfig;