added code for API (#143)

frontend/package.json

@@ -13,6 +13,7 @@
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "oidc-client-ts": "^3.0.1",
+    "openapi-fetch": "^0.10.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-oidc-context": "^3.1.0",

frontend/src/App.tsx

@@ -8,18 +8,20 @@ import Navbar from "./Components/Navbar/Navbar";
 import Settings from "./Components/Settings";
 import CreatePetModal from "./Components/CreatePetModal";
 import PetPage from "./Components/PetPage";
+import type { paths } from "./web-backend-api";
+import createClient, { type Middleware } from "openapi-fetch";
 
 function App() {
   const auth = useAuth();
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   switch (auth.activeNavigator) {
-    case 'signinSilent':
+    case "signinSilent":
       return <div>Signing you in...</div>;
-    case 'signoutRedirect':
+    case "signoutRedirect":
       return <div>Signing you out...</div>;
   }
-  
+
   if (auth.isLoading) {
     return <div>Loading...</div>;
   }
@@ -30,18 +32,43 @@ function App() {
   }
 
   if (auth.isAuthenticated) {
+    // Client initialisation
+    const authMiddleware: Middleware = {
+      async onRequest({ request }) {
+        // add Authorization header to every request
+        request.headers.set(
+          "Authorization",
+          `Bearer ${auth.user?.access_token}`
+        );
+        return request;
+      },
+    };
+
+    const client = createClient<paths>({
+      baseUrl: "http://localhost:4000/backend",
+    });
+    client.use(authMiddleware);
+
+    // https://github.com/openapi-ts/openapi-typescript/tree/main/packages/openapi-fetch
+    (async () => {
+      console.log("hi there!");
+      const { data, error } = await client.GET("/api/v1/devices/self", {});
+
+      console.log("data", data);
+      console.log("error", error);
+    })();
+
     return (
       <div style={{ backgroundColor: "#FFFFFF" }}>
         <div>
           <div>
-            <Navbar />{" "}
-            <LinkDevice />
+            <Navbar />
           </div>
         </div>
         {/* <div>
           Hello USERNAME: {auth.user?.profile?.preferred_username || "User"}
         </div> */}
-        <Footer />,
+        <Footer />
       </div>
     );
   }