From 14ae6efa46f8eac20e2d5f6fcff3fa1ed6d5f678 Mon Sep 17 00:00:00 2001
From: "Andy Chan (12beesinatrenchcoat)" <andy@12beesinatrenchco.at>
Date: Sat, 23 Mar 2024 15:16:25 -0400
Subject: [PATCH] rendering table from data

i am going insane i love lists i love lists i love react i love lists i am oisdjghiuergihbenrjhloguehwirub
---
 .DS_Store => backend/.DS_Store | Bin 6148 -> 6148 bytes
 compass/app/admin/page.tsx     |  28 ++++++++++--
 compass/components/Table.tsx   |  76 ++++++++++++++++-----------------
 3 files changed, 61 insertions(+), 43 deletions(-)
 rename .DS_Store => backend/.DS_Store (73%)

diff --git a/.DS_Store b/backend/.DS_Store
similarity index 73%
rename from .DS_Store
rename to backend/.DS_Store
index 2a70607eb952be7bf408f0ef6db8429721f9cb2a..059e395073932ab8c149300ed4aeb43c4ad87fed 100644
GIT binary patch
literal 6148
zcmeHKy-ve05I)mTMKI8TfeB?}r4N7<s_+Dzkx+jGNDZlIVI><6z|6qNz+*7*1iT0<
zKi}DIY?BlrAt8kBB>PKzcfK#5YP%*P)w>vVi8@3SqcKKn=o*au+-kOBM>c^<&oQS{
z8q;iY-0jz*Wk3`V1^$`>ymn)(*)!s`>#g5mkxvcT)=g7PUS!!|QViI)_w>5cd4Ak)
zjvIX|ZhF$~yPCUPx=lG1Gy=Pc*;AaK-J##-bNy2B3FgQP$7NYe$ivo|(U8ue&y?o8
zw>ciGx0;9N_jznwy)ATUQxM~LEQ<+wXgy-gF$RxIFc~iPS;s|lt;P6!w(lxF4RMas
zS8*XPT{FV(2D|=eZQ^@)E1%Ef@Zo)-i|2RsoBUzjL>HFsM+)G~W{cMiN-qkC0-`{r
z0Phb88e?j)G^n=@bovSaj4-SX&wQ8QoWx>ku`~z|Oqo=mNmcfWp-ei)6C0OWEDf4;
zQugwpY-MF{C`wny{D}@Hl^T>@6c7bM1zP5{!{`6O^80_7ByXaCDDbZoP*K*;diW%J
zw$?t5&)Nj-2#t;7N`pEDojs2A10Tg(XxiXQ_yL$&EDd4=CVvF94AO}LzpB6ohyAR<

delta 355
zcmZoMXfc=|#>B)qu~2NHo}wr-0|Nsi1A_nqLn1>lLvd1haY0hf#=_-{^&lB`hGd3(
zhFpdMWZC>Apv;b>f}G6a5(9&4j7-cdtZeKY>>S)2vB4Sn<-sM1C8fnqiAB*MUPyj^
zP7;irm=u<oS{^ST;+&sXl9-v7S_IaRnUV@r5)+=8my%!ZlwX>cQXE~6B*VeU!5J?g
zQC)3rsiR<MYFewKP;F>zY^I}NZe&nf%gG_CtZy9@pPiGNm)`|+91t)9Jp~55P#Q*c
z0~u)EN-0jxNdh_(qy#P{1o3iNa8X`PeqK6IigB|bhZxJmhHIPIIruq%K?vl3XP(S2
R;>ZEg3AB)9bA-qmW&nPrSPuXI

diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx
index f0d9d07..8ed0bd3 100644
--- a/compass/app/admin/page.tsx
+++ b/compass/app/admin/page.tsx
@@ -1,8 +1,28 @@
+"use client";
 import Table from "@/components/Table";
+import { useState } from "react";
+
+// TODO: Example data. Remove later.
+const headersExample = ["username", "email", "role", "password"];
+const dataExample = [
+  {id: 1, username: "example", email: "example@gmail.com", role: "role"},
+  {id: 3, username: "erhgoejnrgexample", email: "example@gmail.com", role: "role"},
+  {id: 2, username: "another one", email: "example@gmail.com", role: "role"},
+  {id: 4, username: "examgoiadnfgople", email: "example@gmail.com", role: "role"},
+  {id: 5, username: "edfhgiebroxample", email: "example@gmail.com", role: "role"},
+  {id: 6, username: "examlsdfkjg", email: "example@gmail.com", role: "role"},
+  {id: 7, username: "exkkkample", email: "example@gmail.com", role: "role"},
+]
 
 export default function Page() {
-    return (<>
-    <Table/>
+  const [data, setData] = useState({
+    headers: [...headersExample],
+    data: [...dataExample],
+  });
+
+  return (
+    <>
+      <Table headersData={data.headers} data={data.data} />
     </>)
-    
-}
\ No newline at end of file
+
+}
diff --git a/compass/components/Table.tsx b/compass/components/Table.tsx
index 2b8cb28..ac55a42 100644
--- a/compass/components/Table.tsx
+++ b/compass/components/Table.tsx
@@ -1,47 +1,45 @@
 import { Component } from "react"
 
+// interface TableHeader {
+//   title: string,
+//   type: string
+// }
+
+// interface TableRow {
+//   [key: string]: any,
+// }
 interface TableProps {
-    headers: object;
-    rows: object;
-  }
+  headersData: string[];
+  data: { [key: string]: any }[];
+}
 
-const Table: React.FC<TableProps> = ({headers, rows}) => {
+const Table: React.FC<TableProps> = ({ headersData, data }) => {
+  const headers = headersData.map((header, i) => {
+    return <th key={"header-" + i} >{header}</th>
+  })
 
-<table>
-<caption>
-    Front-end web developer course 2021
-  </caption>
-  <thead>
-    <tr>
-      <th scope="col">Person</th>
-      <th scope="col">Most interest in</th>
-      <th scope="col">Age</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Chris</th>
-      <td>HTML tables</td>
-      <td>22</td>
-    </tr>
-    <tr>
-      <th scope="row">Dennis</th>
-      <td>Web accessibility</td>
-      <td>45</td>
-    </tr>
-    <tr>
-      <th scope="row">Sarah</th>
-      <td>JavaScript frameworks</td>
-      <td>29</td>
-    </tr>
-    <tr>
-      <th scope="row">Karen</th>
-      <td>Web performance</td>
-      <td>36</td>
-    </tr>
-  </tbody>
-</table>
+  console.log(data);
+
+  const rows = data.map((item) => {
+    const row = headersData.map(key => {
+      return <td key={"item-" + item.id + key}>{item[key]}</td>
+    });
+    return <tr key={"item-" + item.id}>{row}</tr>
+  })
+
+  return (<>
+    <table>
+      <thead>
+        <tr>
+          {headers}
+        </tr>
+      </thead>
+      <tbody>
+        {rows}
+      </tbody>
+    </table>
+  </>);
 
 }
 
-export default Table
\ No newline at end of file
+export default Table