Reformating route and renaming firm and correcting login redirections

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

@@ -0,0 +1,28 @@
+import {Route, Routes} from "react-router";
+import React, { useContext } from "react";
+import { FirmContext, FirmContextProvider } from "../../contexts/FirmContext";
+import { Header } from "../../components";
+
+export const FirmRoutes = () => {
+  return (
+    <>
+      <Header />
+      <Routes>
+        <Route path="/:instance/:firm/*" element={
+          <FirmContextProvider>
+            <Routes>
+              <Route index element={ <FirmHome /> } />
+            </Routes>
+          </FirmContextProvider>
+        } />
+      </Routes>
+    </>
+  );
+}
+
+const FirmHome = () => {
+  const { currentFirm } = useContext(FirmContext);
+  return (
+    <h1>This is la firme {currentFirm.instance} / {currentFirm.firm}</h1>
+  );
+}

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

@@ -1,14 +1,30 @@
 import { Button } from "@mui/material";
-import { Link } from "react-router";
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+import React from 'react';
+import {Link, Route, Routes} from "react-router";
 import { useGetIdentity, useList } from "@refinedev/core";
 import { IAuthUser, IFirm } from "../../interfaces";
+import {CreateFirm} from "./CreateFirm";
+import {Header} from "../../components";
 
 
-export const Hub = () => {
-  const { data: user } = useGetIdentity<IAuthUser>();
+export const HubRoutes = () => {
+  return (
+    <>
+      <Header />
+      <Routes>
+        <Route index element={ <HubHome /> } />
+        <Route path="create-firm" element={ <CreateFirm /> } />
+      </Routes>
+    </>
+  );
+};
+
+const HubHome = () => {
+  const { data: user, refetch } = useGetIdentity<IAuthUser>();
   const { data: list } = useList<IFirm>({resource: "hub/users/firms/", pagination: { mode: "off" }}, )
   if (user === undefined || list === undefined) {
-    return <p>Loading</p>
+    return <p>Loading</p>;
   }
   console.log("list data: ", list);
   const ownedFirms = list.data;
@@ -16,23 +32,25 @@ export const Hub = () => {
     return <p>Loading</p>
   }
   console.log("owned firms: ", ownedFirms);
-
   return (
     <div>
       <h1>HUB</h1>
       <p>List of managed firms</p>
       <ul>
         {ownedFirms.map((f: IFirm, index) => (
-             <li key={index}>{f.instance} / {f.name}</li>
+             <li key={index}>{f.instance} / {f.firm}</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>
+             <li key={index}>
+               {f.instance} / {f.firm}&nbsp;<Link to={`/firm/${f.instance}/${f.firm}`}><ExitToAppIcon /></Link>
+             </li>
          ))}
       </ul>
-      <Link to="/hub/create-firm" ><Button >Create a new firm</Button></Link>
+      <Link to="/hub/create-firm" ><Button>Create a new firm</Button></Link>
+      <Button onClick={() => refetch()}>Refresh</Button>
     </div>
-  );
-};
+  )
+}