clean up/ added field type icons to column header

src/Fields/index.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import MailIcon from "@material-ui/icons/Mail";
+import CheckBoxIcon from "@material-ui/icons/CheckBox";
+import SimpleTextIcon from "@material-ui/icons/TextFields";
+import LongTextIcon from "@material-ui/icons/Notes";
+import PhoneIcon from "@material-ui/icons/Phone";
+import propEq from "ramda/es/propEq";
+import find from "ramda/es/find";
+export enum FieldType {
+  simpleText = "SIMPLE_TEXT",
+  longText = "LONG_TEXT",
+  email = "EMAIL",
+  PhoneNumber = "PHONE_NUMBER",
+  checkBox = "CHECK_BOX"
+}
+
+export const FIELDS = [
+  { icon: <SimpleTextIcon />, name: "Simple Text", type: FieldType.simpleText },
+  { icon: <LongTextIcon />, name: "Long Text", type: FieldType.longText },
+  { icon: <MailIcon />, name: "Email", type: FieldType.email },
+  { icon: <PhoneIcon />, name: "Phone", type: FieldType.PhoneNumber },
+  { icon: <CheckBoxIcon />, name: "Check Box", type: FieldType.checkBox }
+];
+
+export const getFieldIcon = (type: FieldType) => {
+  return find(propEq("type", type))(FIELDS).icon;
+};

src/components/ColumnDrawer.tsx

@@ -6,24 +6,13 @@ import Divider from "@material-ui/core/Divider";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
-import MailIcon from "@material-ui/icons/Mail";
-import CheckBoxIcon from "@material-ui/icons/CheckBox";
-import SimpleTextIcon from "@material-ui/icons/TextFields";
-import LongTextIcon from "@material-ui/icons/Notes";
+
 import AddIcon from "@material-ui/icons/Add";
-import PhoneIcon from "@material-ui/icons/Phone";
 
 import IconButton from "@material-ui/core/IconButton";
 import TextField from "@material-ui/core/TextField";
 import _camelCase from "lodash/camelCase";
-
-const FIELDS = [
-  { icon: <SimpleTextIcon />, name: "Simple Text", type: "SIMPLE_TEXT" },
-  { icon: <LongTextIcon />, name: "Long Text", type: "LONG_TEXT" },
-  { icon: <MailIcon />, name: "Email", type: "EMAIL" },
-  { icon: <PhoneIcon />, name: "Phone", type: "PHONE_NUMBER" },
-  { icon: <CheckBoxIcon />, name: "Check Box", type: "CHECK_BOX" }
-];
+import { FIELDS } from "../Fields";
 const useStyles = makeStyles({
   list: {
     width: 250

src/components/Table.tsx

@@ -17,8 +17,8 @@ import {
 } from "react-virtualized";
 import Button from "@material-ui/core/Button";
 
-import { TextField } from "@material-ui/core";
-
+//  import { TextField } from "@material-ui/core";
+import { FieldType, getFieldIcon } from "../Fields";
 import ColumnDrawer from "./ColumnDrawer";
 
 const styles = (theme: Theme) =>
@@ -96,12 +96,7 @@ class MuiVirtualizedTable extends React.PureComponent<
             : "left"
         }
       >
-        <TextField
-          value={cellData}
-          onChange={() => {
-            console.log(columnIndex);
-          }}
-        />
+        {cellData}
       </TableCell>
     );
   };
@@ -130,6 +125,7 @@ class MuiVirtualizedTable extends React.PureComponent<
           <ColumnDrawer addColumn={columnData.actions.addColumn} />
         ) : (
           <Button size="small">
+            {getFieldIcon(columnData.fieldType)}
             {label}
             {/* <EditIcon fontSize="small" /> */}
           </Button>
@@ -198,11 +194,14 @@ export default function fTable(props: any) {
               (column: {
                 fieldName: string;
                 columnName: string;
-                type: string;
+                type: FieldType;
               }) => ({
                 width: 200,
                 label: column.columnName,
-                dataKey: column.fieldName
+                dataKey: column.fieldName,
+                columnData: {
+                  fieldType: column.type
+                }
               })
             ),
             {

src/hooks/useAuth.ts

@@ -1,18 +0,0 @@
-import { useEffect, useState } from "react";
-import { auth } from "../firebase";
-
-const useAuth = () => {
-  const [authUser, setAuthUser] = useState<firebase.User | null | undefined>(
-    undefined
-  );
-
-  useEffect(() => {
-    auth.onAuthStateChanged(user => {
-      setAuthUser(user);
-    });
-  }, []);
-
-  return authUser;
-};
-
-export default useAuth;

src/hooks/useDoc.ts

@@ -3,7 +3,7 @@ import { useEffect, useReducer } from "react";
 
 export enum DocActions {
   update,
-  delete // TODO
+  delete // TODO when needed
 }
 const documentReducer = (prevState: any, newProps: any) => {
   switch (newProps.action) {

src/hooks/useRouter.ts

@@ -1,5 +1,7 @@
 import { useContext } from "react";
 import { __RouterContext } from "react-router";
+// used to transform routerContext into a hook
+// TODO : find alternate solution as this uses an internal variable
 export default function useRouter() {
   return useContext(__RouterContext);
 }

src/hooks/useSettings.ts

@@ -1,11 +1,13 @@
 import { useEffect } from "react";
 import useDoc, { DocActions } from "./useDoc";
+import { db } from "../firebase";
 
 const useSettings = () => {
   const [settingsState, documentDispatch] = useDoc({
     path: "_FIRETABLE_/settings"
   });
   useEffect(() => {
+    //updates tables data on document change
     const { doc, tables } = settingsState;
     if (doc && tables !== doc.tables) {
       documentDispatch({ tables: doc.tables });
@@ -14,10 +16,15 @@ const useSettings = () => {
 
   const createTable = (name: string, collection: string) => {
     const { tables } = settingsState;
+    // updates the setting doc
     documentDispatch({
       action: DocActions.update,
       data: { tables: [...tables, { name, collection }] }
     });
+    //create the firetable collection doc with empty columns
+    db.collection(collection)
+      .doc("_FIRETABLE_")
+      .set({ columns: [] });
   };
   return [settingsState, createTable];
 };

src/hooks/useTableConfig.ts

@@ -1,12 +1,6 @@
 import { useEffect } from "react";
 import useDoc, { DocActions } from "./useDoc";
-export enum FieldType {
-  simpleText = "SIMPLE_TEXT",
-  longText = "LONG_TEXT",
-  email = "EMAIL",
-  PhoneNumber = "PHONE_NUMBER",
-  checkBox = "CHECK_BOX"
-}
+import { FieldType } from "../Fields";
 const useTableConfig = (tablePath: string) => {
   const [tableConfigState, documentDispatch] = useDoc({
     path: `${tablePath}/_FIRETABLE_`

src/views/TableView.tsx

@@ -16,6 +16,7 @@ export default function AuthView() {
   const classes = useStyles();
   useEffect(() => {
     configActions.setTable(tableCollection);
+    tableDispatch({ path: tableCollection });
   }, [tableCollection]);
   const addColumn = configActions.addColumn;
   return (