From 2143439fdefe29d493c658ec82617ff726f28ac0 Mon Sep 17 00:00:00 2001
From: Faizaan Madhani <fzmadhani@gmail.com>
Date: Mon, 27 Jan 2020 21:40:59 -0500
Subject: [PATCH 1/4] Boilerplate function for mapping to flowcharts

---
 src/App/App.tsx             |  2 ++
 src/App/Components/View.tsx | 16 ++++++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 src/App/Components/View.tsx

diff --git a/src/App/App.tsx b/src/App/App.tsx
index d4e4d0f..827aee4 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -2,10 +2,12 @@ import React from 'react';
 //import styles from './App.module.scss';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import Flowchart from './Components/Flowchart';
+import View from './Components/View';
 
 const App: React.FC = () => (
   <Router>
     <Switch>
+      <Route path="/view" component={View} />
       <Route path="/flowchart" component={Flowchart} />
 
       <Route path="/flowchartnodes">
diff --git a/src/App/Components/View.tsx b/src/App/Components/View.tsx
new file mode 100644
index 0000000..b7f29ee
--- /dev/null
+++ b/src/App/Components/View.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { useGetFlowchartsApi } from '../../utils/FlowchartApi';
+
+type MyProps = {
+  message: string;
+};
+
+export default function View(props: MyProps) {
+  const flowcharts = useGetFlowchartsApi().response;
+
+  const flowcharts_rendered = flowcharts.map((flowchart: JSON) => (
+    <li>{flowchart}</li>
+  ));
+
+  return flowcharts_rendered;
+}

From 184411ca376cdcfd260819764e73720842866f2b Mon Sep 17 00:00:00 2001
From: Aphexis <stephxca@gmail.com>
Date: Mon, 3 Feb 2020 19:53:59 -0500
Subject: [PATCH 2/4] view component connected to flowchart api

---
 src/App/Components/Flowchart.tsx | 12 ++++++++++--
 src/App/Components/View.tsx      | 16 ++++++++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/App/Components/Flowchart.tsx b/src/App/Components/Flowchart.tsx
index 86b6b61..9afe27e 100644
--- a/src/App/Components/Flowchart.tsx
+++ b/src/App/Components/Flowchart.tsx
@@ -1,11 +1,19 @@
 import React from 'react';
 import { useGetFlowchartsApi } from '../../utils/FlowchartApi';
-
+// import { useEffect } from 'react';
 type MyProps = {
   message: string;
 };
 
 export default function FlowChart(props: MyProps) {
-  const testString = useGetFlowchartsApi();
+  const testString = useFlowchart;
+  // useEffect(() => {
+  //   testString = useFlowchart;
+  // });
   return <div>{JSON.stringify(testString)}</div>;
 }
+
+function useFlowchart() {
+  const testString = useGetFlowchartsApi();
+  // console.log(testString);
+}
diff --git a/src/App/Components/View.tsx b/src/App/Components/View.tsx
index b7f29ee..954724e 100644
--- a/src/App/Components/View.tsx
+++ b/src/App/Components/View.tsx
@@ -1,16 +1,20 @@
 import React from 'react';
 import { useGetFlowchartsApi } from '../../utils/FlowchartApi';
+// import { useEffect } from 'react';
 
 type MyProps = {
-  message: string;
+  // message: string;
 };
 
 export default function View(props: MyProps) {
-  const flowcharts = useGetFlowchartsApi().response;
-
-  const flowcharts_rendered = flowcharts.map((flowchart: JSON) => (
-    <li>{flowchart}</li>
+  const flowcharts = useGetFlowchartsApi();
+  if (flowcharts.isLoading) {
+    return <p>Loading</p>;
+  }
+  // console.log(flowcharts);
+  const flowcharts_rendered = flowcharts.response.map((flowchart: JSON) => (
+    <li>{JSON.stringify(flowcharts)}</li>
   ));
 
-  return flowcharts_rendered;
+  return <div>{flowcharts_rendered}</div>;
 }

From 6c22aa7d40031ae80981e079d991151856f7f23c Mon Sep 17 00:00:00 2001
From: Aphexis <stephxca@gmail.com>
Date: Mon, 3 Feb 2020 20:46:45 -0500
Subject: [PATCH 3/4] view passes props to flowchart component

---
 src/App/Components/Flowchart.tsx | 12 ++++++++++--
 src/App/Components/View.tsx      | 30 +++++++++++++++++++++++++++---
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/App/Components/Flowchart.tsx b/src/App/Components/Flowchart.tsx
index 9afe27e..92bbfb7 100644
--- a/src/App/Components/Flowchart.tsx
+++ b/src/App/Components/Flowchart.tsx
@@ -1,8 +1,12 @@
 import React from 'react';
 import { useGetFlowchartsApi } from '../../utils/FlowchartApi';
+// import
 // import { useEffect } from 'react';
 type MyProps = {
-  message: string;
+  flowchart_id: number;
+  title: string;
+  description: string;
+  root_id: number;
 };
 
 export default function FlowChart(props: MyProps) {
@@ -10,7 +14,11 @@ export default function FlowChart(props: MyProps) {
   // useEffect(() => {
   //   testString = useFlowchart;
   // });
-  return <div>{JSON.stringify(testString)}</div>;
+  return (
+    <div>
+      {props.flowchart_id} {props.title} {props.description} {props.root_id}
+    </div>
+  );
 }
 
 function useFlowchart() {
diff --git a/src/App/Components/View.tsx b/src/App/Components/View.tsx
index 954724e..e68b516 100644
--- a/src/App/Components/View.tsx
+++ b/src/App/Components/View.tsx
@@ -1,20 +1,44 @@
 import React from 'react';
 import { useGetFlowchartsApi } from '../../utils/FlowchartApi';
+import FlowChart from './Flowchart';
 // import { useEffect } from 'react';
 
 type MyProps = {
   // message: string;
 };
 
+type Flowchart = {
+  id: number;
+  title: string;
+  description: string;
+  height: number;
+  created_at: string;
+  updated_at: string;
+  root_id: number;
+  deleted: boolean;
+};
+
 export default function View(props: MyProps) {
   const flowcharts = useGetFlowchartsApi();
   if (flowcharts.isLoading) {
     return <p>Loading</p>;
   }
+
   // console.log(flowcharts);
-  const flowcharts_rendered = flowcharts.response.map((flowchart: JSON) => (
-    <li>{JSON.stringify(flowcharts)}</li>
-  ));
+  const flowcharts_rendered = flowcharts.response.map(
+    (flowchart: Flowchart) => {
+      return (
+        <div>
+          <FlowChart
+            flowchart_id={flowchart.id}
+            title={flowchart.title}
+            description={flowchart.description}
+            root_id={flowchart.root_id}
+          />
+        </div>
+      );
+    }
+  );
 
   return <div>{flowcharts_rendered}</div>;
 }

From e50b9a7e2ed71d0f212b7add064c09c46f9025ef Mon Sep 17 00:00:00 2001
From: Aphexis <stephxca@gmail.com>
Date: Mon, 3 Feb 2020 21:05:25 -0500
Subject: [PATCH 4/4] linting fixes

---
 src/App/Components/Flowchart.tsx | 15 ++++-----------
 src/App/Components/View.tsx      | 22 ++++++++++------------
 2 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/App/Components/Flowchart.tsx b/src/App/Components/Flowchart.tsx
index 92bbfb7..4b2eda8 100644
--- a/src/App/Components/Flowchart.tsx
+++ b/src/App/Components/Flowchart.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import { useGetFlowchartsApi } from '../../utils/FlowchartApi';
-// import
-// import { useEffect } from 'react';
+
 type MyProps = {
   flowchart_id: number;
   title: string;
@@ -10,10 +8,6 @@ type MyProps = {
 };
 
 export default function FlowChart(props: MyProps) {
-  const testString = useFlowchart;
-  // useEffect(() => {
-  //   testString = useFlowchart;
-  // });
   return (
     <div>
       {props.flowchart_id} {props.title} {props.description} {props.root_id}
@@ -21,7 +15,6 @@ export default function FlowChart(props: MyProps) {
   );
 }
 
-function useFlowchart() {
-  const testString = useGetFlowchartsApi();
-  // console.log(testString);
-}
+// function useFlowchart() {
+//   const testString = useGetFlowchartsApi();
+// }
diff --git a/src/App/Components/View.tsx b/src/App/Components/View.tsx
index e68b516..4ed6caf 100644
--- a/src/App/Components/View.tsx
+++ b/src/App/Components/View.tsx
@@ -26,18 +26,16 @@ export default function View(props: MyProps) {
 
   // console.log(flowcharts);
   const flowcharts_rendered = flowcharts.response.map(
-    (flowchart: Flowchart) => {
-      return (
-        <div>
-          <FlowChart
-            flowchart_id={flowchart.id}
-            title={flowchart.title}
-            description={flowchart.description}
-            root_id={flowchart.root_id}
-          />
-        </div>
-      );
-    }
+    (flowchart: Flowchart) => (
+      <div>
+        <FlowChart
+          flowchart_id={flowchart.id}
+          title={flowchart.title}
+          description={flowchart.description}
+          root_id={flowchart.root_id}
+        />
+      </div>
+    )
   );
 
   return <div>{flowcharts_rendered}</div>;