feat: use Next.js app router

pwa/pages/bookmarks/index.tsx → pwa/app/bookmarks/page.tsx

@@ -1,33 +1,20 @@
-import { type GetServerSideProps } from "next";
+import { type Session } from "next-auth";
 import { getServerSession } from "next-auth/next";
+import { redirect } from "next/navigation";
 
-import { List } from "@/components/bookmark/List";
+import { List, type Props as ListProps } from "@/components/bookmark/List";
 import { type Bookmark } from "@/types/Bookmark";
 import { type PagedCollection } from "@/types/collection";
 import { type FetchResponse, fetch } from "@/utils/dataAccess";
 import { authOptions } from "@/pages/api/auth/[...nextauth]";
 
-// @ts-ignore
-export const getServerSideProps: GetServerSideProps<{
-  data: PagedCollection<Bookmark> | null,
-  hubURL: string | null,
-  page: number,
-}> = async ({ query: { page }, req, res }) => {
-  const session = await getServerSession(req, res, authOptions);
-  // @ts-ignore
-  if (!session || session?.error === "RefreshAccessTokenError") {
-    // todo find a way to redirect directly to keycloak from here
-    // Can't use next-auth/middleware because of https://github.com/nextauthjs/next-auth/discussions/7488
-    return {
-      redirect: {
-        destination: "/api/auth/signin?callbackUrl=/bookmarks",
-        permanent: false
-      }
-    };
-  }
+interface Query extends URLSearchParams {
+  page?: number|string|null;
+}
 
+async function getServerSideProps({ page = 1 }: Query, session: Session): Promise<ListProps> {
   try {
-    const response: FetchResponse<PagedCollection<Bookmark>> | undefined = await fetch(`/bookmarks?page=${Number(page ?? 1)}`, {
+    const response: FetchResponse<PagedCollection<Bookmark>> | undefined = await fetch(`/bookmarks?page=${Number(page)}`, {
       headers: {
         // @ts-ignore
         Authorization: `Bearer ${session?.accessToken}`,
@@ -37,12 +24,23 @@ export const getServerSideProps: GetServerSideProps<{
       throw new Error('Unable to retrieve data from /bookmarks.');
     }
 
-    return { props: { data: response.data, hubURL: response.hubURL, page: Number(page ?? 1) } };
+    return { data: response.data, hubURL: response.hubURL, page: Number(page) };
   } catch (error) {
     console.error(error);
   }
 
-  return { props: { data: null, hubURL: null, page: Number(page ?? 1) } };
-};
+  return { data: null, hubURL: null, page: Number(page) };
+}
+
+export default async function Page({ searchParams }: { searchParams: Query }) {
+  const session = await getServerSession(authOptions);
+  if (!session || session?.error === "RefreshAccessTokenError") {
+    // todo find a way to redirect directly to keycloak from here
+    // Can't use next-auth/middleware because of https://github.com/nextauthjs/next-auth/discussions/7488
+    redirect("/api/auth/signin?callbackUrl=/bookmarks");
+  }
+
+  const props = await getServerSideProps(searchParams, session);
 
-export default List;
+  return <List {...props}/>;
+}

pwa/app/books/[id]/[slug]/page.tsx

@@ -0,0 +1,38 @@
+import { notFound } from "next/navigation";
+
+import { Show, type Props as ShowProps } from "@/components/book/Show";
+import { Book } from "@/types/Book";
+import { type FetchResponse, fetch } from "@/utils/dataAccess";
+
+interface Query {
+  id: number;
+  page?: number|undefined;
+}
+
+async function getServerSideProps({ id, page = 1 }: Query): Promise<ShowProps|undefined> {
+  try {
+    const response: FetchResponse<Book> | undefined = await fetch(`/books/${id}`, {
+      headers: {
+        Preload: "/books/*/reviews",
+      }
+    });
+    if (!response?.data) {
+      throw new Error(`Unable to retrieve data from /books/${id}.`);
+    }
+
+    return { data: response.data, hubURL: response.hubURL, page: Number(page ?? 1) };
+  } catch (error) {
+    console.error(error);
+  }
+
+  return undefined;
+}
+
+export default async function Page({ searchParams }: { searchParams: Query }) {
+  const props = await getServerSideProps(searchParams);
+  if (!props) {
+    notFound();
+  }
+
+  return <Show {...props}/>;
+}

pwa/pages/books/index.tsx → pwa/app/books/page.tsx

@@ -1,40 +1,38 @@
-import { type GetServerSideProps } from "next";
-
-import { List } from "@/components/book/List";
+import { List, type Props as ListProps } from "@/components/book/List";
 import { type Book } from "@/types/Book";
 import { type PagedCollection } from "@/types/collection";
 import { type FetchResponse, fetch } from "@/utils/dataAccess";
 import { type FiltersProps, buildUriFromFilters } from "@/utils/book";
 
-export const getServerSideProps: GetServerSideProps<{
-  data: PagedCollection<Book> | null,
-  hubURL: string | null,
-  filters: FiltersProps,
-}> = async ({ query }) => {
+interface Query extends URLSearchParams {
+  page?: number|string|undefined;
+  author?: string|undefined;
+  title?: string|undefined;
+  condition?: string|undefined;
+  "condition[]"?: string|string[]|undefined;
+  "order[title]"?: string|undefined;
+}
+
+async function getServerSideProps(query: Query): Promise<ListProps> {
   const page = Number(query.page ?? 1);
   const filters: FiltersProps = {};
   if (query.page) {
-    // @ts-ignore
-    filters.page = query.page;
+    filters.page = page;
   }
   if (query.author) {
-    // @ts-ignore
     filters.author = query.author;
   }
   if (query.title) {
-    // @ts-ignore
     filters.title = query.title;
   }
   if (query.condition) {
-    // @ts-ignore
     filters.condition = [query.condition];
   } else if (typeof query["condition[]"] === "string") {
     filters.condition = [query["condition[]"]];
   } else if (typeof query["condition[]"] === "object") {
     filters.condition = query["condition[]"];
   }
   if (query["order[title]"]) {
-    // @ts-ignore
     filters.order = { title: query["order[title]"] };
   }
 
@@ -44,12 +42,16 @@ export const getServerSideProps: GetServerSideProps<{
       throw new Error('Unable to retrieve data from /books.');
     }
 
-    return { props: { data: response.data, hubURL: response.hubURL, filters, page } };
+    return { data: response.data, hubURL: response.hubURL, filters, page };
   } catch (error) {
     console.error(error);
   }
 
-  return { props: { data: null, hubURL: null, filters, page } };
-};
+  return { data: null, hubURL: null, filters, page };
+}
+
+export default async function Page({ searchParams }: { searchParams: Query }) {
+  const props = await getServerSideProps(searchParams);
 
-export default List;
+  return <List {...props}/>;
+}

pwa/pages/index.tsx → pwa/app/page.tsx

@@ -1,4 +1,4 @@
-import Head from "next/head";
+import { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
 import React from "react";
@@ -11,9 +11,6 @@ import apiPicture from "public/api-platform/api.svg";
 
 const Welcome = () => (
   <div className="w-full overflow-x-hidden">
-    <Head>
-      <title>Welcome to API Platform!</title>
-    </Head>
     <section className="w-full bg-spider-cover relative">
       <a
         href="https://les-tilleuls.coop/"
@@ -182,6 +179,9 @@ const Welcome = () => (
   </div>
 );
 export default Welcome;
+export const metadata: Metadata = {
+  title: 'Welcome to API Platform!',
+}
 
 const Card = ({
   image,

pwa/components/book/List.tsx

@@ -14,7 +14,7 @@ import { type FiltersProps, buildUriFromFilters } from "@/utils/book";
 import { type FetchError, type FetchResponse } from "@/utils/dataAccess";
 import { useMercure } from "@/utils/mercure";
 
-interface Props {
+export interface Props {
   data: PagedCollection<Book> | null;
   hubURL: string | null;
   filters: FiltersProps;

pwa/components/book/Show.tsx

@@ -20,7 +20,7 @@ import { type Bookmark } from "@/types/Bookmark";
 import { type PagedCollection } from "@/types/collection";
 import { Loading } from "@/components/common/Loading";
 
-interface Props {
+export interface Props {
   data: Book;
   hubURL: string | null;
   page: number;

pwa/components/bookmark/List.tsx

@@ -7,7 +7,7 @@ import { type Bookmark } from "@/types/Bookmark";
 import { type PagedCollection } from "@/types/collection";
 import { useMercure } from "@/utils/mercure";
 
-interface Props {
+export interface Props {
   data: PagedCollection<Bookmark> | null;
   hubURL: string | null;
   page: number;