Migrate Routes To App Router

.env.example

@@ -1,8 +1,2 @@
-# Required
-BRING_API_ID=
-BRING_API_KEY=
-
-
-# Optional
-# API_URL=
-# BL_WEB_URL=
+NEXT_PUBLIC_API_URL=
+NEXT_PUBLIC_BL_WEB_URL=

.eslintrc.js

@@ -61,13 +61,13 @@ module.exports = {
           prop: false,
           props: false,
           ref: false,
+          params: false,
         },
       },
     ],
     "unicorn/no-null": "off",
     // .textContent is very different from .innerText, not interchangeable
     "unicorn/prefer-dom-node-text-content": "off",
-
     /** @see https://medium.com/weekly-webtips/how-to-sort-imports-like-a-pro-in-typescript-4ee8afd7258a */
     "import/order": [
       "error",

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn prettier:check && yarn lint

next.config.js

@@ -4,8 +4,4 @@ module.exports = {
   eslint: {
     dirs: ["src", "cypress"],
   },
-  publicRuntimeConfig: {
-    API_URL: process.env.API_URL ?? "http://localhost:1337/",
-    BL_WEB_URL: process.env.BL_WEB_URL ?? "http://localhost:4200/",
-  },
 };

package.json

@@ -17,68 +17,67 @@
     "prettier": "prettier --write '**/*.{js,ts,tsx,md,json,yml,css}' --ignore-path=.gitignore",
     "prettier:check": "prettier --check '**/*.{js,ts,tsx,md,json,yml,css}' --ignore-path=.gitignore",
     "lint": "next lint --ignore-path=.gitignore",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "dependencies": {
     "@date-io/moment": "^3.0.0",
+    "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
-    "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.5",
     "@fontsource/roboto": "^5.0.13",
-    "@mui/icons-material": "^5.15.15",
+    "@mui/icons-material": "^5.15.21",
     "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.15.15",
-    "@mui/x-date-pickers": "^7.3.1",
-    "@reduxjs/toolkit": "^2.2.3",
-    "@yudiel/react-qr-scanner": "^2.0.1",
-    "axios": "^1.6.8",
+    "@mui/material": "^5.15.21",
+    "@mui/material-nextjs": "^5.15.11",
+    "@mui/x-date-pickers": "^7.8.0",
+    "@yudiel/react-qr-scanner": "^2.0.4",
+    "axios": "^1.7.2",
     "draft-js": "^0.11.7",
     "moment": "^2.30.1",
-    "next": "^14.2.3",
+    "next": "^14.2.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-draft-wysiwyg": "^1.15.0",
-    "react-hook-form": "^7.51.3",
+    "react-hook-form": "^7.52.1",
     "react-jwt": "^1.2.1",
     "react-quill": "^2.0.0",
-    "react-redux": "^9.1.1",
     "sanitize-html": "^2.13.0",
-    "sharp": "^0.33.3",
+    "sharp": "^0.33.4",
     "string-similarity": "^4.0.4",
     "swr": "^2.2.5",
-    "validator": "^13.11.0"
+    "validator": "^13.12.0",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
-    "@boklisten/bl-model": "^0.25.41",
+    "@boklisten/bl-model": "^0.26.2",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
-    "@testing-library/react": "^15.0.5",
+    "@testing-library/react": "^16.0.0",
     "@types/draft-js": "^0.11.18",
-    "@types/node": "20.12.7",
-    "@types/react": "18.3.1",
+    "@types/node": "20.14.9",
+    "@types/react": "18.3.3",
     "@types/react-draft-wysiwyg": "^1.13.8",
-    "@types/react-redux": "^7.1.33",
     "@types/sanitize-html": "^2.11.0",
     "@types/string-similarity": "^4.0.2",
-    "@types/validator": "^13.11.9",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "cypress": "^13.8.1",
+    "@types/validator": "^13.12.0",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "cypress": "^13.13.0",
     "eslint": "8.56.0",
-    "eslint-config-next": "14.2.3",
+    "eslint-config-next": "14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-cypress": "^3.0.2",
+    "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-no-relative-import-paths": "^1.5.4",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-unicorn": "^52.0.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-no-relative-import-paths": "^1.5.5",
+    "eslint-plugin-promise": "^6.4.0",
+    "eslint-plugin-unicorn": "^54.0.0",
     "husky": ">=9.0.11",
-    "lint-staged": ">=15.2.2",
-    "prettier": "^3.2.5",
+    "lint-staged": ">=15.2.7",
+    "prettier": "^3.3.2",
     "pretty-quick": "^4.0.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.5.3"
   },
   "browserslist": [
     "defaults",

src/pages/info/about.tsx → src/app/info/about/page.tsx

@@ -1,22 +1,20 @@
 import { Card } from "@mui/material";
-import type { NextPage } from "next";
-import Head from "next/head";
+import { Metadata } from "next";
 
 import DynamicNav from "@/components/info/DynamicNav";
 import Editor from "@/components/info/Editor";
 import { infoPageTabs } from "@/utils/constants";
 import { editorData } from "@/utils/mockData";
 
-const About: NextPage = () => {
+export const metadata: Metadata = {
+  title: "Om oss | Boklisten.no",
+  description:
+    "Boklisten har mange års erfaring med kjøp og salg av pensumbøker. Les om vår historie, hvem vi er, og hva vi tilbyr.",
+};
+
+const AboutPage = () => {
   return (
     <>
-      <Head>
-        <title>Om oss | Boklisten.no</title>
-        <meta
-          name="description"
-          content="Boklisten har mange års erfaring med kjøp og salg av pensumbøker. Les om vår historie, hvem vi er, og hva vi tilbyr."
-        />
-      </Head>
       <Card sx={{ paddingBottom: "2rem" }}>
         <DynamicNav tabs={infoPageTabs} twoRows />
         <Editor rawEditorState={editorData.about} />
@@ -25,4 +23,4 @@ const About: NextPage = () => {
   );
 };
 
-export default About;
+export default AboutPage;

src/app/info/branch/[branchId]/page.tsx

@@ -0,0 +1,45 @@
+import { Branch } from "@boklisten/bl-model";
+import moment from "moment";
+import { Metadata } from "next";
+
+import { fetcher } from "@/api/requests";
+import LinkableBranchInfo from "@/components/LinkableBranchInfo";
+import BL_CONFIG from "@/utils/bl-config";
+
+export const generateStaticParams = async () => {
+  const branchesUrl = `${BL_CONFIG.api.basePath}branches?og=id&active=true`;
+  const branches = (await fetcher(branchesUrl)) as Branch[];
+  return branches.map((branch) => ({ branchId: branch.id }));
+};
+
+export const metadata: Metadata = {
+  title: "Skoler og åpningstider | Boklisten.no",
+  description:
+    "Skal du hente eller levere bøker? Finn ut når vi står på stand på din skole.",
+};
+
+async function getBranchData(branchId: string) {
+  if (branchId === "select") {
+    return { branch: null, openingHours: [] };
+  }
+  const branchUrl = `${BL_CONFIG.api.basePath}branches/${branchId}?og=name&og=location.address&og=openingHours`;
+  const now = moment().startOf("day").format("DDMMYYYYHHmm");
+  const openingHoursUrl = `${BL_CONFIG.api.basePath}openingHours?branch=${branchId}&from=>${now}&og=to&og=from`;
+  const [branchData, openingHoursData] = await Promise.all([
+    fetcher(branchUrl),
+    fetcher(openingHoursUrl),
+  ]);
+
+  return {
+    branch: branchData?.[0] ?? {},
+    openingHours: openingHoursData,
+  };
+}
+
+const BranchPage = async ({ params }: { params: { branchId: string } }) => {
+  const { branch, openingHours } = await getBranchData(params.branchId);
+
+  return <LinkableBranchInfo branch={branch} openingHours={openingHours} />;
+};
+
+export default BranchPage;

src/app/info/buyback/page.tsx

@@ -0,0 +1,31 @@
+import { Card } from "@mui/material";
+import { Metadata } from "next";
+
+import { fetcher } from "@/api/requests";
+import BuybackList from "@/components/info/BuybackList";
+import DynamicNav from "@/components/info/DynamicNav";
+import BL_CONFIG from "@/utils/bl-config";
+import { infoPageTabs } from "@/utils/constants";
+
+export const metadata: Metadata = {
+  title: "Innkjøpsliste | Boklisten.no",
+  description:
+    "Har du pensumbøker du ikke lenger har bruk for? Vi kjøper inn de aller fleste pensumbøker. Se oversikten over hvilke bøker vi tar imot her.",
+};
+
+const BuybackPage = async () => {
+  const buybackItems = await fetcher(
+    `${BL_CONFIG.api.basePath}items?buyback=true&og=title&og=info.isbn&sort=title`,
+  );
+
+  return (
+    <>
+      <Card>
+        <DynamicNav tabs={infoPageTabs} twoRows />
+        <BuybackList defaultBuybackItems={buybackItems} />
+      </Card>
+    </>
+  );
+};
+
+export default BuybackPage;

src/app/info/companies/page.tsx

@@ -0,0 +1,26 @@
+import { Card } from "@mui/material";
+import { Metadata } from "next";
+
+import DynamicNav from "@/components/info/DynamicNav";
+import Editor from "@/components/info/Editor";
+import { infoPageTabs } from "@/utils/constants";
+import { editorData } from "@/utils/mockData";
+
+export const metadata: Metadata = {
+  title: "For skolekunder | Boklisten.no",
+  description:
+    "Er du ansvarlig for en videregående eller privatist-skole? Vi tilbyr en rekke nyttige tjenester til dere! Les om våre tilbud til skoler, hvordan utlånsordningen fungrer og hvordan dere kan kjøpe bøker fra skyvearkivet.",
+};
+
+const Page = () => {
+  return (
+    <>
+      <Card sx={{ paddingBottom: "2rem" }}>
+        <DynamicNav tabs={infoPageTabs} twoRows />
+        <Editor rawEditorState={editorData.companies} />
+      </Card>
+    </>
+  );
+};
+
+export default Page;

src/pages/info/contact.tsx → src/app/info/contact/page.tsx

@@ -1,21 +1,19 @@
 import { Card, Typography } from "@mui/material";
-import type { NextPage } from "next";
-import Head from "next/head";
+import { Metadata } from "next";
 
 import ContactInfo from "@/components/info/ContactInfo";
 import DynamicNav from "@/components/info/DynamicNav";
 import { infoPageTabs } from "@/utils/constants";
 
-const Contact: NextPage = () => {
+export const metadata: Metadata = {
+  title: "Kontakt oss | Boklisten.no",
+  description:
+    "Vi er tilgjengelig for spørsmål og henvendelser både på epost og telefon. Se vår kontaktinformasjon, med epost-adresse, telefonnummer og gateadresse.",
+};
+
+const ContactPage = () => {
   return (
     <>
-      <Head>
-        <title>Kontakt oss | Boklisten.no</title>
-        <meta
-          name="description"
-          content="Vi er tilgjengelig for spørsmål og henvendelser både på epost og telefon. Se vår kontaktinformasjon, med epost-adresse, telefonnummer og gateadresse."
-        />
-      </Head>
       <Card sx={{ paddingBottom: "2rem" }}>
         <DynamicNav tabs={infoPageTabs} twoRows />
         <Typography
@@ -30,4 +28,4 @@ const Contact: NextPage = () => {
   );
 };
 
-export default Contact;
+export default ContactPage;

src/pages/info/faq.tsx → src/app/info/faq/page.tsx

@@ -1,22 +1,20 @@
 import { Card } from "@mui/material";
-import type { NextPage } from "next";
-import Head from "next/head";
+import { Metadata } from "next";
 
 import DynamicNav from "@/components/info/DynamicNav";
 import EditableQNA from "@/components/info/EditableQna";
 import { infoPageTabs } from "@/utils/constants";
 import { QNAs } from "@/utils/mockData";
 
-const FAQ: NextPage = () => {
+export const metadata: Metadata = {
+  title: "Spørsmål og svar | Boklisten.no",
+  description:
+    "Hva betyr det at Boklisten alltid leverer riktig bok? Hvordan bestiller jeg bøker som privatist?",
+};
+
+const FaqPage = () => {
   return (
     <>
-      <Head>
-        <title>Spørsmål og svar | Boklisten.no</title>
-        <meta
-          name="description"
-          content="Hva betyr det at Boklisten alltid leverer riktig bok? Hvordan bestiller jeg bøker som privatist?"
-        />
-      </Head>
       <Card sx={{ paddingBottom: "2rem" }}>
         <DynamicNav tabs={infoPageTabs} twoRows />
         <EditableQNA QNAs={QNAs} />
@@ -25,4 +23,4 @@ const FAQ: NextPage = () => {
   );
 };
 
-export default FAQ;
+export default FaqPage;