get record data from "api"

4 files changed, 35 insertions, 34 deletions

diff --git a/src/components/Record.js b/src/components/Record.js
index 424c57a..dfb2bc7 100644
--- a/src/components/Record.js
+++ b/src/components/Record.js
@@ -3,7 +3,7 @@ import IconButton from "./IconButton.js";
 
 export default class Record extends React.Component {
   render() {
-    console.log(this)
+    // console.log(this)
     return (
       <div class="records-tr" role="row">
         <div class="records-td records-col-type">{this.props.type}</div>
diff --git a/src/components/RecordTable.js b/src/components/RecordTable.js
index f526c85..e817939 100644
--- a/src/components/RecordTable.js
+++ b/src/components/RecordTable.js
@@ -1,34 +1,28 @@
 import React from "react";
 import Record from "./Record";
 
-export default class RecordTable extends React.Component {
-  render() {
-    const records = [
-      {type: "AAAA", name: "oracle-arm-toronto-1.vm.origin", value: "2603:c021:1:e9fe::ff", ttl: "1 day"},
-      {type: "AAAA", name: "oracle-arm-toronto-1.vm.origin", value: "2603:c021:1:e9fe::ff", ttl: "1 day"},
-      {type: "AAAA", name: "oracle-arm-toronto-1.vm.origin", value: "2603:c021:1:e9fe::ff", ttl: "1 day"},
-    ];
-    return (
-      <div role="table" class="table">
-        <div class="records-thead" role="rowgroup">
-          <div class="records-tr" role="row">
-            <div class="records-th records-col-type">Type</div>
-            <div class="records-th records-col-name">Name</div>
-            <div class="records-th records-col-value">Value</div>
-            <div class="records-th records-col-ttl">TTL</div>
-            <div class="records-th records-col-actions"></div>
-          </div>
-        </div>
-        <div class="records-tbody" role="rowgroup">
-          {
-            records.map((val, key) => {
-              return (
-                <Record id={key} type={val.type} name={val.name} value={val.value} ttl={val.ttl}></Record>
-              )
-            })
-          }
+export default function RecordsTable({ records }) {
+  console.log(records)
+  return (
+    <div role="table" class="table">
+      <div class="records-thead" role="rowgroup">
+        <div class="records-tr" role="row">
+          <div class="records-th records-col-type">Type</div>
+          <div class="records-th records-col-name">Name</div>
+          <div class="records-th records-col-value">Value</div>
+          <div class="records-th records-col-ttl">TTL</div>
+          <div class="records-th records-col-actions"></div>
         </div>
       </div>
-    );
-  }
+      <div class="records-tbody" role="rowgroup">
+        {records != null && 
+          records.map((val) => {
+            return (
+              <Record id={val.id} type={val.type} name={val.name} value={val.content} ttl={val.ttl}></Record>
+            )
+          })
+        }
+      </div>
+    </div>
+  );
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index ef7ea85..51eb859 100644
--- a/src/index.js
+++ b/src/index.js
@@ -20,7 +20,7 @@ root.render(
             { /* <Route path="/" element={<Home />} /> */}
             <Route path="login" element={<Login />} />
             <Route path="signup" element={<SignUp />} />
-            <Route path="records" element={<Records />} />
+            <Route path="records/:zoneName" element={<Records />} />
           </Routes>
         </BrowserRouter>
       </FeaturesProvider>
diff --git a/src/routes/Records.js b/src/routes/Records.js
index e5fd271..2c4fa76 100644
--- a/src/routes/Records.js
+++ b/src/routes/Records.js
@@ -1,14 +1,21 @@
 // Meow meow meow meow
-import {styled} from "@stitches/react";
-import React from "react";
+import { styled } from "@stitches/react";
+import React, { useEffect } from "react";
 import "./Records.css";
 import RecordTable from "../components/RecordTable";
+import useFetch from "../hooks/useFetch";
+import { useParams } from "react-router-dom";
 
 export function Records() {
+  let { zoneName } = useParams();
+
+  const zone = useFetch("/fdns.dev.json");
+  console.log(zone)
+
   return (
     <main class="records-table-container">
-      <h1>DNS Records for example.com</h1>
-      <RecordTable></RecordTable>
+      <h1>DNS Records for {zoneName}</h1>
+      <RecordTable records={zone.data}></RecordTable>
     </main>
   );
 }