Views

src/App/App.tsx

@@ -1,15 +1,16 @@
 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';
 import FlowChartNodeComponent from './components/FlowChartNodeComponent';
 
+
 const App: React.FC = () => (
   <Router>
     <Switch>
-      <Route path="/home">
-        <p>He</p>
-      </Route>
+      <Route path="/view" component={View} />
+      <Route path="/flowchart" component={Flowchart} />
       <Route path="/flowchartnodes">
         <p>Hi</p>
       </Route>

src/App/Components/Flowchart.tsx

@@ -1,11 +1,20 @@
 import React from 'react';
-import { useGetFlowchartsApi } from '../../utils/FlowchartApi';
 
 type MyProps = {
-  message: string;
+  flowchart_id: number;
+  title: string;
+  description: string;
+  root_id: number;
 };
 
 export default function FlowChart(props: MyProps) {
-  const testString = useGetFlowchartsApi();
-  return <div>{JSON.stringify(testString)}</div>;
+  return (
+    <div>
+      {props.flowchart_id} {props.title} {props.description} {props.root_id}
+    </div>
+  );
 }
+
+// function useFlowchart() {
+//   const testString = useGetFlowchartsApi();
+// }

src/App/Components/View.tsx

@@ -0,0 +1,42 @@
+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: Flowchart) => (
+      <div>
+        <FlowChart
+          flowchart_id={flowchart.id}
+          title={flowchart.title}
+          description={flowchart.description}
+          root_id={flowchart.root_id}
+        />
+      </div>
+    )
+  );
+
+  return <div>{flowcharts_rendered}</div>;
+}