Merge pull request #20 from badgeteam/feature/jwt

Send JWT token to server

Author: edwinm

orval.config.ts

@@ -1,10 +1,19 @@
 import { defineConfig } from "orval";
 import dotenv from "dotenv";
 
+/**
+ * See https://orval.dev/
+ */
+
 dotenv.config();
 
 const baseUrl =
   process.env.BADGEHUB_API_BASEURL || "https://api-staging.badgehub.nl";
+
+const swaggerUrl = `${baseUrl}/swagger.json`;
+
+console.log("Reading swagger from", swaggerUrl);
+
 export default defineConfig({
   badgehub: {
     output: {
@@ -22,7 +31,7 @@ export default defineConfig({
     },
 
     input: {
-      target: `${baseUrl}/swagger.json`,
+      target: swaggerUrl,
     },
   },
 });

package-lock.json

@@ -27,6 +27,7 @@
     "eslint": "^8.57.1",
     "eslint-config-next": "^14.2.15",
     "jsonpath-plus": "^10.1.0",
+    "jose": "^5.9.4",
     "orval": "^7.0.1",
     "prettier": "3.3.3",
     "typescript": "^5"

package.json

@@ -1,10 +1,22 @@
+"use server";
+
 import { GetAppsParams } from "@/badgehub-api-client/generated/models";
 import {
-  getDevices,
-  getCategories,
   getApps,
+  getCategories,
+  getDevices,
 } from "@/badgehub-api-client/generated/swagger/public/public";
 
-export async function getAppData(searchParams: GetAppsParams) {
-  return Promise.all([getApps(searchParams), getCategories(), getDevices()]);
+export async function getAppData(searchParams: GetAppsParams, token: string) {
+  const headers = new Headers({
+    Authorization: `Bearer ${token}`,
+  });
+  const options: RequestInit = {
+    headers,
+  };
+  return Promise.all([
+    getApps(searchParams, options),
+    getCategories(options),
+    getDevices(options),
+  ]);
 }

src/app/actions.ts

@@ -1,11 +1,20 @@
-import { ReactNode } from "react";
+"use client";
+
+import { SessionProvider } from "next-auth/react";
 import styles from "./layout.module.css";
+import { ReactNode } from "react";
+
+type AppsListingLayoutProps = {
+  children: ReactNode;
+};
 
-export default function AppsListingLayout(props: { children: ReactNode }) {
+export default function AppsListingLayout({
+  children,
+}: AppsListingLayoutProps) {
   return (
     <main>
       <h1 className={styles.title}>Apps</h1>
-      {props.children}
+      <SessionProvider>{children}</SessionProvider>
     </main>
   );
 }

src/app/apps/layout.tsx

@@ -1,39 +1,45 @@
+"use client";
+
 import { AppList } from "@/components/AppList";
+import { SessionProvider, useSession } from "next-auth/react";
 import { LoginButton } from "@/components/LoginButton";
+import { useEffect, useState } from "react";
+import {
+  getAppsResponse,
+  getCategoriesResponse,
+  getDevicesResponse,
+} from "@/badgehub-api-client/generated/swagger/public/public";
 import { getAppData } from "../actions";
 
 export interface SearchParams {
   category: string;
   device: string;
 }
 
-export default async function Listing({
+export default function Listing({
   searchParams,
 }: {
   searchParams: Partial<SearchParams>;
 }) {
-  let data;
-  try {
-    // TODO add caching
-    data = await getAppData(searchParams);
-  } catch (e) {
-    if (!(e instanceof Error)) {
-      return <p>Caught object that wasn&amp;t an error.</p>;
+  const { data: session } = useSession();
+  const [data, setData] = useState<
+    [getAppsResponse, getCategoriesResponse, getDevicesResponse] | null
+  >(null);
+
+  useEffect(() => {
+    async function getData() {
+      const token = (session as any)?.accessToken;
+      const data = await getAppData(searchParams, token);
+      setData(data);
     }
-    return (
-      <>
-        <p>Error while rendering</p>
-        <code>
-          <pre>{JSON.stringify(e.message)}</pre>
-        </code>
-      </>
-    );
-  }
+
+    getData();
+  }, [searchParams, session]);
 
   return (
     <>
       <LoginButton />
-      <AppList data={data} />
+      {data ? <AppList data={data} /> : <p>Loading new data...</p>}
     </>
   );
 }

src/app/apps/page.tsx

@@ -0,0 +1,14 @@
+/**
+ * Generated by orval v7.1.1 🍺
+ * Do not edit manually.
+ * badgehub-api
+ * Node project for the BadgeHub API
+ * OpenAPI spec version: 3
+ */
+
+export interface App {
+  category_slug: string;
+  name: string;
+  slug: string;
+  user_name: string;
+}

src/badgehub-api-client/generated/models/app.ts

@@ -0,0 +1,16 @@
+/**
+ * Generated by orval v7.1.1 🍺
+ * Do not edit manually.
+ * badgehub-api
+ * Node project for the BadgeHub API
+ * OpenAPI spec version: 3
+ */
+
+export interface AppDetails {
+  category_slug: string;
+  description: string;
+  devices: string[];
+  name: string;
+  slug: string;
+  user_name: string;
+}

src/badgehub-api-client/generated/models/appDetails.ts

@@ -0,0 +1,12 @@
+/**
+ * Generated by orval v7.1.1 🍺
+ * Do not edit manually.
+ * badgehub-api
+ * Node project for the BadgeHub API
+ * OpenAPI spec version: 3
+ */
+
+export interface Device {
+  name: string;
+  slug: string;
+}

src/badgehub-api-client/generated/models/device.ts

@@ -0,0 +1,11 @@
+/**
+ * Generated by orval v7.1.1 🍺
+ * Do not edit manually.
+ * badgehub-api
+ * Node project for the BadgeHub API
+ * OpenAPI spec version: 3
+ */
+
+export type GetAppDetails404 = {
+  reason: string;
+};

src/badgehub-api-client/generated/models/getAppDetails404.ts

@@ -6,16 +6,20 @@
  * OpenAPI spec version: 3
  */
 
+export * from './app';
 export * from './appCategoryName';
+export * from './appDetails';
 export * from './appMetadataJSON';
 export * from './appMetadataJSONFileMappingsItem';
 export * from './badge';
 export * from './category';
 export * from './dbInsertAppMetadataJSONPartial';
 export * from './dbInsertAppMetadataJSONPartialFileMappingsItem';
 export * from './dependency';
+export * from './device';
 export * from './fileMetadata';
 export * from './getApp404';
+export * from './getAppDetails404';
 export * from './getAppsParams';
 export * from './pickDBInsertProjectExcludeKeyofDBInsertProjectSlug';
 export * from './pickDBInsertUserExcludeKeyofDBInsertUserId';

src/badgehub-api-client/generated/models/index.ts

@@ -12,7 +12,6 @@ import type {
   ProjectSlug,
   Uint8Array,
   UserProps,
-  Version,
   WriteFileBody
 } from '../../models'
 import { fetchWithBaseUrl } from '../../../../fetch-from-api';
@@ -243,7 +242,7 @@ export const changeAppMetadata = async (slug: string,
  * Upload a file to the latest draft version of the project.
  */
 export type writeZipResponse = {
-  data: Version;
+  data: void;
   status: number;
 }
 

src/badgehub-api-client/generated/swagger/private/private.ts

@@ -20,6 +20,7 @@ export function Account() {
   return (
     <>
       <h1>Account</h1>
+      <p>JWT: {(session as any)?.accessToken}</p>
       {html}
     </>
   );

src/components/Account/index.tsx

@@ -3,11 +3,11 @@
 import styles from "./Filter.module.css";
 import { useRef } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
-import { Category, Badge } from "@/badgehub-api-client/generated/models";
+import { Category, Device } from "@/badgehub-api-client/generated/models";
 
 type FilterProps = {
   categories: Category[];
-  devices: Badge[];
+  devices: Device[];
 };
 
 export function Filter({ categories, devices }: FilterProps) {

src/components/Filter/index.tsx

@@ -7,8 +7,6 @@ import clsx from "clsx";
 export function MainNav() {
   const pathname = usePathname();
 
-  console.log("pathname", pathname);
-
   return (
     <nav className={styles.mainNav}>
       <Link

src/components/MainNav/index.tsx

@@ -1,3 +1,5 @@
+"use server";
+
 const getBody = <T>(c: Response | Request): Promise<T> => {
   const contentType = c.headers.get("content-type");
 
@@ -19,8 +21,9 @@ export const fetchWithBaseUrl = async <T>(
   options: RequestInit,
 ): Promise<T> => {
   const requestUrl = getUrl(url);
-  const res = await fetch(requestUrl, options);
-  const data = await getBody(res);
+  const request = new Request(requestUrl, options);
+  const response = await fetch(request);
+  const data = await getBody(response);
 
-  return { status: res.status, data } as T;
+  return { status: response.status, data } as T;
 };