5 files changed, 117 insertions, 16 deletions
diff --git a/src/pages/NewSurvey/index.js b/src/pages/NewSurvey/index.js
index f1d4b89..335eb93 100644
--- a/src/pages/NewSurvey/index.js
+++ b/src/pages/NewSurvey/index.js
@@ -1,4 +1,5 @@
-import FormBuilder from "../../components/FormBuilder";
+import { Navigate } from "react-router-dom";
 export default function NewSurvey() {
-  return <FormBuilder />;
+  const id = crypto.randomUUID();
+  return <Navigate to={{ pathname: `/surveys/${id}` }} />;
 }
diff --git a/src/pages/Survey/index.js b/src/pages/Survey/index.js
new file mode 100644
index 0000000..41bac5e
--- /dev/null
+++ b/src/pages/Survey/index.js
@@ -0,0 +1,7 @@
+import FormBuilder from "../../components/FormBuilder";
+import { useParams } from "react-router-dom";
+
+export default function Survey() {
+  const { formId } = useParams();
+  return <FormBuilder formId={formId} />;
+}
diff --git a/src/pages/SurveyAnswer/index.js b/src/pages/SurveyAnswer/index.js
new file mode 100644
index 0000000..d1676c1
--- /dev/null
+++ b/src/pages/SurveyAnswer/index.js
@@ -0,0 +1,27 @@
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import Form from "../../components/FormBuilder/FinalForm";
+import useLocalStorage from "../../hooks/useLocalStorage";
+
+export default function SurveyAnswers() {
+  const { runId, surveyId } = useParams();
+  const [resultsSet, setResultsSet] = useLocalStorage(
+    `results-${surveyId}-${runId}`,
+    {},
+  );
+  const [answerSetId] = useState(crypto.randomUUID());
+  const results = (resultsSet && resultsSet[answerSetId]) || {
+    datetime: new Date().toISOString(),
+  };
+
+  function setResults(newResults) {
+    setResultsSet({ ...resultsSet, [answerSetId]: newResults });
+  }
+
+  return (
+    <div>
+      {runId}
+      <Form formId={surveyId} results={results} setResults={setResults} />
+    </div>
+  );
+}
diff --git a/src/pages/SurveyResults/index.js b/src/pages/SurveyResults/index.js
index 82d41c6..dec182e 100644
--- a/src/pages/SurveyResults/index.js
+++ b/src/pages/SurveyResults/index.js
@@ -1,3 +1,59 @@
+import { Button } from "@mui/material";
+import { DataGrid } from "@mui/x-data-grid";
+import { Link, useParams } from "react-router-dom";
+import useLocalStorage from "../../hooks/useLocalStorage";
+import useForm from "../../hooks/useForm";
+
 export default function SurveyResults() {
-  return <>SurveyResults</>;
+  const { surveyId } = useParams();
+  const [runs, setRuns] = useLocalStorage(`runs-${surveyId}`, []);
+  const [form] = useForm(surveyId);
+
+  const columns = form?.fields?.map(({ id, name }) => ({
+    field: id,
+    headerName: name,
+  }));
+
+  return (
+    <>
+      <h3>SurveyRuns</h3>
+      {surveyId}
+      <Button onClick={() => setRuns([{ id: crypto.randomUUID() }, ...runs])}>
+        New Run
+      </Button>
+
+      {runs &&
+        runs.map((r) => {
+          const runRs = runResults(surveyId, r.id);
+
+          console.log(runRs);
+
+          return (
+            <div key={r.id}>
+              <Link to={`${r.id}/answer`}>Add Answer</Link> {JSON.stringify(r)}
+              Total Results: {Object.keys(runRs).length}
+              <DataGrid
+                rows={[]}
+                columns={columns}
+                initialState={{
+                  pagination: {
+                    paginationModel: {
+                      pageSize: 25,
+                    },
+                  },
+                }}
+                pageSizeOptions={[25, 50, 100]}
+                checkboxSelection
+                disableRowSelectionOnClick
+              />
+            </div>
+          );
+        })}
+    </>
+  );
+}
+
+function runResults(surveyId, runId) {
+  const str = localStorage[`results-${surveyId}-${runId}`];
+  return !str ? {} : JSON.parse(str);
 }
diff --git a/src/pages/Surveys/SurveysList.js b/src/pages/Surveys/SurveysList.js
index c9c5b90..a320716 100644
--- a/src/pages/Surveys/SurveysList.js
+++ b/src/pages/Surveys/SurveysList.js
@@ -1,9 +1,10 @@
 import React from "react";
 import Box from "@mui/material/Box";
 import { DataGrid } from "@mui/x-data-grid";
+import useLocalStorage from "../../hooks/useLocalStorage";
+import { Link } from "react-router-dom";
 
 const columns = [
-  { field: "id", headerName: "ID", width: 90 },
   {
     field: "name",
     headerName: "Name",
@@ -14,21 +15,30 @@ const columns = [
     headerName: "Next Run",
     width: 150,
   },
-];
-
-const rows = [
-  { id: 1, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
-  { id: 2, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
-  { id: 3, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
-  { id: 4, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
-  { id: 5, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
-  { id: 6, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
-  { id: 7, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
-  { id: 8, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
-  { id: 9, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
+  {
+    field: "edit_survey_link",
+    headerName: "",
+    renderCell: ({ row }) => <Link to={`${row?.path}`}>Edit</Link>,
+    width: 150,
+  },
+  {
+    field: "results_survey_link",
+    headerName: "",
+    renderCell: ({ row }) => <Link to={`${row?.path}/results`}>Results</Link>,
+    width: 150,
+  },
 ];
 
 export default function SurveysList() {
+  const [forms] = useLocalStorage(`forms`, {});
+
+  const rows = Object.keys(forms).map((id, i) => ({
+    id,
+    name: `Survey ${i}`,
+    next_run_at: "Mon 28 Aug 16:35:36 EDT 2023",
+    path: `/surveys/${id}`,
+  }));
+
   return (
     <Box sx={{ minHeight: "100%", width: "100%" }}>
       <DataGrid