Listing owned firms and working at firms

gui/rpk-gui/src/pages/hub/index.tsx

@@ -1,37 +1,36 @@
 import { Button } from "@mui/material";
 import { Link } from "react-router";
-import { useGetIdentity } from "@refinedev/core";
+import { useGetIdentity, useList } from "@refinedev/core";
+import { IAuthUser, IFirm } from "../../interfaces";
 
-type Firm = {
-  name: string,
-  instance: string,
-}
-type User = {
-  firms: [Firm],
-}
 
 export const Hub = () => {
-  const user = useGetIdentity<User>();
+  const { data: user } = useGetIdentity<IAuthUser>();
+  const { data: list } = useList<IFirm>({resource: "firms/", pagination: { mode: "off" }}, )
+  if (user === undefined || list === undefined) {
+    return <p>Loading</p>
+  }
+  console.log("list data: ", list);
+  const ownedFirms = list.data;
+  if (user === undefined || ownedFirms === undefined) {
+    return <p>Loading</p>
+  }
+  console.log("owned firms: ", ownedFirms);
 
-  console.log(user);
-  let ownFirms = [];
-  let workFirms = [];
-  //firms.forEach((f, index) => {
-  //  workFirms.push(<li>{f.instance}/{f.name}</li>)
-  //})
-  //{firms.map((f: Firm, index) => (
-  //           <li key={index}>{f.instance} / {f.name}</li>
-  //         ))}
   return (
     <div>
       <h1>HUB</h1>
       <p>List of managed firms</p>
       <ul>
-        <li></li>
+        {ownedFirms.map((f: IFirm, index) => (
+             <li key={index}>{f.instance} / {f.name}</li>
+         ))}
       </ul>
       <p>List of firm you're working at</p>
       <ul>
-
+        {user.firms.map((f: IFirm, index) => (
+             <li key={index}>{f.instance} / {f.name}</li>
+         ))}
       </ul>
       <Link to="/hub/create-firm" ><Button >Create a new firm</Button></Link>
     </div>