From 65dce5b84564da0915ea55fd8ddb1368cdfe2c92 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Mon, 31 Aug 2020 16:23:24 +1000
Subject: [PATCH] add basic Step3

---
 .../Wizards/ImportWizard/Column.tsx           |   8 +-
 .../Wizards/ImportWizard/Step2Rename.tsx      |   4 +-
 .../Wizards/ImportWizard/Step3Types.tsx       | 101 ++++++++++++++++++
 .../components/Wizards/ImportWizard/index.tsx |  15 ++-
 4 files changed, 124 insertions(+), 4 deletions(-)
 create mode 100644 www/src/components/Wizards/ImportWizard/Step3Types.tsx

diff --git a/www/src/components/Wizards/ImportWizard/Column.tsx b/www/src/components/Wizards/ImportWizard/Column.tsx
index 81f02c7f..eea4b6e2 100644
--- a/www/src/components/Wizards/ImportWizard/Column.tsx
+++ b/www/src/components/Wizards/ImportWizard/Column.tsx
@@ -45,6 +45,10 @@ const useStyles = makeStyles((theme) =>
       "&:hover": { color: theme.palette.primary.dark },
     },
 
+    columnNameContainer: {
+      flexShrink: 1,
+      overflow: "hidden",
+    },
     columnName: {
       lineHeight: "44px",
       display: "block",
@@ -52,7 +56,6 @@ const useStyles = makeStyles((theme) =>
       userSelect: "none",
 
       marginLeft: theme.spacing(0.5),
-      marginTop: -1,
     },
   })
 );
@@ -79,12 +82,13 @@ export default function Column({
     <Grid
       container
       alignItems="center"
+      wrap="nowrap"
       className={clsx(classes.root, active && classes.active)}
       {...props}
     >
       {type && <Grid item>{getFieldIcon(type)}</Grid>}
 
-      <Grid item xs>
+      <Grid item xs className={classes.columnNameContainer}>
         <Typography
           component={Grid}
           item
diff --git a/www/src/components/Wizards/ImportWizard/Step2Rename.tsx b/www/src/components/Wizards/ImportWizard/Step2Rename.tsx
index 1973c03a..0d66dc05 100644
--- a/www/src/components/Wizards/ImportWizard/Step2Rename.tsx
+++ b/www/src/components/Wizards/ImportWizard/Step2Rename.tsx
@@ -20,6 +20,8 @@ import Column from "./Column";
 
 const useStyles = makeStyles((theme) =>
   createStyles({
+    divider: { marginBottom: theme.spacing(0.5) },
+
     buttonBase: {
       width: "100%",
       textAlign: "left",
@@ -70,7 +72,7 @@ export default function Step2Rename({ config, updateConfig }: IStepProps) {
         </Grid>
       </Grid>
 
-      <Divider />
+      <Divider className={classes.divider} />
 
       <FadeList>
         {Object.entries(config).map(([field, { name }]) => (
diff --git a/www/src/components/Wizards/ImportWizard/Step3Types.tsx b/www/src/components/Wizards/ImportWizard/Step3Types.tsx
new file mode 100644
index 00000000..7447a22a
--- /dev/null
+++ b/www/src/components/Wizards/ImportWizard/Step3Types.tsx
@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+
+import {
+  makeStyles,
+  createStyles,
+  Grid,
+  Typography,
+  Divider,
+  ButtonBase,
+  IconButton,
+  TextField,
+  InputAdornment,
+} from "@material-ui/core";
+import ChevronRightIcon from "@material-ui/icons/ChevronRight";
+
+import { IStepProps } from ".";
+import FadeList from "./FadeList";
+import Column from "./Column";
+import FieldsDropdown from "components/Table/ColumnMenu/FieldsDropdown";
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    buttonBase: {
+      width: "100%",
+      textAlign: "left",
+    },
+  })
+);
+
+export default function Step3Types({ config, updateConfig }: IStepProps) {
+  const classes = useStyles();
+
+  const [fieldToEdit, setFieldToEdit] = useState(Object.keys(config)[0]);
+
+  const handleChange = (e) =>
+    updateConfig({ [fieldToEdit]: { type: e.target.value } });
+
+  return (
+    <>
+      <Grid container spacing={2}>
+        <Grid item xs={12} sm={6}>
+          <Typography variant="overline" gutterBottom component="h2">
+            Firetable Columns
+          </Typography>
+          <Divider />
+
+          <FadeList>
+            {Object.entries(config).map(([field, { name, type }]) => (
+              <li key={field}>
+                <ButtonBase
+                  className={classes.buttonBase}
+                  onClick={() => setFieldToEdit(field)}
+                  aria-label={`Edit column ${field}`}
+                  focusRipple
+                >
+                  <Column
+                    label={name}
+                    type={type}
+                    active={field === fieldToEdit}
+                    secondaryItem={
+                      field === fieldToEdit && <ChevronRightIcon />
+                    }
+                  />
+                </ButtonBase>
+              </li>
+            ))}
+          </FadeList>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <Typography variant="overline" gutterBottom component="h2">
+            Column Type: {config[fieldToEdit].name}
+          </Typography>
+
+          <FieldsDropdown
+            value={config[fieldToEdit].type}
+            onChange={handleChange}
+          />
+        </Grid>
+      </Grid>
+
+      {/* <Grid container spacing={2}>
+        <Grid item xs={12} sm={6}>
+          <Typography variant="overline" gutterBottom component="h2">
+            Field Names
+          </Typography>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <Typography variant="overline" gutterBottom component="h2">
+            Set Column Names
+          </Typography>
+        </Grid>
+      </Grid>
+
+      <Divider />
+
+      <FadeList>
+        
+      </FadeList> */}
+    </>
+  );
+}
diff --git a/www/src/components/Wizards/ImportWizard/index.tsx b/www/src/components/Wizards/ImportWizard/index.tsx
index 025fcbee..3761f890 100644
--- a/www/src/components/Wizards/ImportWizard/index.tsx
+++ b/www/src/components/Wizards/ImportWizard/index.tsx
@@ -6,6 +6,7 @@ import { Typography } from "@material-ui/core";
 import WizardDialog from "../WizardDialog";
 import Step1Columns from "./Step1Columns";
 import Step2Rename from "./Step2Rename";
+import Step3Types from "./Step3Types";
 
 import { ColumnConfig } from "hooks/useFiretable/useTableConfig";
 import { useFiretableContext } from "contexts/firetableContext";
@@ -86,7 +87,7 @@ export default function ImportWizard() {
     },
   });
   const updateConfig: IStepProps["updateConfig"] = (value) => {
-    setConfig((prev) => _merge(prev, value));
+    setConfig((prev) => ({ ..._merge(prev, value) }));
   };
 
   const { tableState } = useFiretableContext();
@@ -131,6 +132,18 @@ export default function ImportWizard() {
             />
           ),
         },
+        {
+          title: "set column types",
+          description:
+            "Set the type of each column to display your data correctly. Some column types have been suggested based off your data.",
+          content: (
+            <Step3Types
+              config={config}
+              setConfig={setConfig}
+              updateConfig={updateConfig}
+            />
+          ),
+        },
       ]}
       onFinish={() => alert("FINISHED")}
     />