Merge branch 'main' into nodes-display-off

smartuni · Jun 24, 2024 · 152e562 · 152e562
2 parents 5fca0e4 + e7cdb46
commit 152e562
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
@@ -58,10 +58,7 @@ const Navbar = () => {
             <ul className="navbar-nav">
               {auth.isAuthenticated ? (
                 <>
-
-                  <li
-
-                  >
+                  <li>
                     <Link
                       className="nav-link"
                       to="/PetPage"
@@ -140,7 +137,14 @@ const Navbar = () => {
         </nav>
         <Routes>
           <Route path="/inventory" element={<Inventory />} />
-          <Route path="/Settings" element={<Settings />} />
+          <Route
+            path="/Settings"
+            element={
+              <Settings
+                username={auth.user?.profile?.preferred_username || "User"}
+              />
+            }
+          />
           <Route path="/Friends" element={<Friends />} />
           <Route path="/PetPage" element={<PetPage />} />
         </Routes>

diff --git a/frontend/src/Components/PetPage.tsx b/frontend/src/Components/PetPage.tsx
@@ -1,15 +1,36 @@
-import React from "react";
+import { useEffect, useState } from "react";
 import petImage from "../assets/pet_frog.png";
 import { ProgressBar } from "react-progressbar-fancy";
-
+import type { paths } from "../../src/web-backend-api";
+import { useAuth } from "react-oidc-context";
+import CreatePetModal from "./CreatePetModal";
 
 // https://github.com/RavinRau/react-progressbar-fancy?tab=readme-ov-file
 
-const Pet = () => {
+const PetPage = (client) => {
+  const [petData, setPetData] = useState([]);
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    const { response, error } = await client.GET("/api/v1/devices/self", {});
+    if (error != null) {
+      setPetData(await client.GET(`/api/v1/pets/self/${response.petId}`));
+    }
+  };
+
   return (
     <div className="container-fluid row p-5">
       <div className="col-6">
-        <img className="img-fluid" src={petImage} alt="pet name" />
+        {petData != null ? (
+          <img className="img-fluid" src={petImage} alt="pet name" />
+        ) : (
+          <div>
+            <CreatePetModal />
+          </div>
+        )}
       </div>
       <div className="col-6">
         <div className="h2 px-3 py-4">( Pet name )</div>
@@ -45,4 +66,4 @@ const Pet = () => {
   );
 };
 
-export default Pet;
+export default PetPage;