patch/upgrade react

.github/workflows/verify_formatting.yaml

@@ -16,19 +16,19 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v4
 
-    - name: Set up Node.js
-      uses: actions/setup-node@v4
+    - name: Setup Bun
+      uses: oven-sh/setup-bun@v2
       with:
-        node-version: 20
+          bun-version: 1.2.21
 
-    # This installs all dependencies, but if we use "npm install -g prettier", 
+    # This installs all dependencies, but if we use "bun install -g prettier", 
     # then prettier won't pick up the project's .prettierrc file.
     - name: Install dependencies
-      run: npm ci
+      run: bun install --frozen-lockfile 
 
     - name: Check formatting
       run: |
-        npm run prettier:check
+        bun run prettier:check
 
     - name: Fail if formatting check failed
       if: failure()

Dockerfile

@@ -1,10 +1,10 @@
-FROM node:22-bullseye AS installer
+FROM oven/bun:1.2.21 AS installer
 WORKDIR /app
 COPY prisma ./
-COPY package.json package-lock.json ./
-RUN npm install
+COPY package.json bun.lock ./
+RUN bun install --frozen-lockfile 
 
-FROM node:22-bullseye AS builder
+FROM oven/bun:1.2.21 AS builder
 WORKDIR /app
 COPY --from=installer /app/node_modules/ /app/node_modules
 COPY . .
@@ -17,13 +17,13 @@ ENV NEXT_PUBLIC_SITE_ROOT=$NEXT_PUBLIC_SITE_ROOT
 
 RUN --mount=type=secret,id=sec_database_url \
     export DATABASE_URL=$(cat /run/secrets/sec_database_url) && \
-    npm run build
+    bun run build
 
 # Force node.js to use ipv4 first, over ipv6, by appending the following to server.js
 RUN echo "const dns = require('node:dns');" >> ./.next/standalone/server.js \
     && echo "dns.setDefaultResultOrder('ipv4first');" >> ./.next/standalone/server.js
 
-FROM node:22-bullseye AS runner
+FROM oven/bun:1.2.21 AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production
@@ -39,4 +39,4 @@ EXPOSE 3000
 ENV PORT=3000
 ENV HOSTNAME="0.0.0.0"
 
-CMD ["node", "server.js"]
+CMD ["bun", "run", "server.js"]

app/(admin)/admin/courses/[courseId]/lessons/[lessonId]/page.tsx

@@ -51,7 +51,10 @@ export default async function AdminLessonEdit({
                             <Link
                                 href={`/admin/courses/${courseId}/lessons/${lessonId}/lesson-content/new`}
                             >
-                                <button className="d-btn d-btn-primary">
+                                <button
+                                    type="button"
+                                    className="d-btn d-btn-primary"
+                                >
                                     Add content
                                 </button>
                             </Link>
@@ -79,7 +82,10 @@ export default async function AdminLessonEdit({
                             <Link
                                 href={`/admin/courses/${courseId}/lessons/${lessonId}/lesson-transcript/new`}
                             >
-                                <button className="d-btn d-btn-primary">
+                                <button
+                                    type="button"
+                                    className="d-btn d-btn-primary"
+                                >
                                     Add content
                                 </button>
                             </Link>

app/(admin)/admin/courses/[courseId]/page.tsx

@@ -66,7 +66,10 @@ export default async function AdminCourseEdit({
                                         <Link
                                             href={`/admin/courses/${courseId}/course-details/new`}
                                         >
-                                            <button className="d-btn d-btn-primary">
+                                            <button
+                                                type="button"
+                                                className="d-btn d-btn-primary"
+                                            >
                                                 Add details
                                             </button>
                                         </Link>
@@ -91,7 +94,10 @@ export default async function AdminCourseEdit({
                                 <Link
                                     href={`/admin/courses/${course.id}/lessons/new`}
                                 >
-                                    <button className="d-btn d-btn-primary">
+                                    <button
+                                        type="button"
+                                        className="d-btn d-btn-primary"
+                                    >
                                         Add a lesson
                                     </button>
                                 </Link>
@@ -102,9 +108,9 @@ export default async function AdminCourseEdit({
                         <div>
                             <Heading as="h4">Seminar Cohorts</Heading>
                             {course.seminarCohorts.length > 0 ? (
-                                course.seminarCohorts.map((cohort, index) => (
+                                course.seminarCohorts.map((cohort) => (
                                     <CourseMaterialCard
-                                        key={`${courseId}-seminarCohort-${index}`}
+                                        key={`${courseId}-seminarCohort`}
                                         href={`/admin/courses/${courseId}/seminar-cohort/${cohort.id}`}
                                         heading={`${cohort.year} Cohort`}
                                         id={cohort.id}

app/(admin)/admin/courses/[courseId]/seminar-cohort/[seminarCohortId]/page.tsx

@@ -96,7 +96,10 @@ export default async function AdminSeminarCohortEdit({
                                     <Link
                                         href={`/admin/courses/${courseId}/seminar-cohort/${seminarCohortAndSeminars.id}/seminar-cohort-details/new`}
                                     >
-                                        <button className="d-btn d-btn-primary">
+                                        <button
+                                            type="button"
+                                            className="d-btn d-btn-primary"
+                                        >
                                             Add details
                                         </button>
                                     </Link>

app/(admin)/admin/courses/[courseId]/seminar-cohort/[seminarCohortId]/seminar-cohort-details/new/page.tsx

@@ -1,6 +1,5 @@
 import {
     dbGetSeminarCohortAndSeminarsById,
-    dbUpsertCourseDetailsById,
     dbUpsertSeminarCohortDetailsById,
 } from "lib/database/dbFuncs";
 import { redirect } from "next/navigation";

app/(admin)/admin/courses/[courseId]/seminar-cohort/[seminarCohortId]/seminars/[seminarId]/page.tsx

@@ -63,7 +63,10 @@ export default async function AdminSeminarEdit({
                             <Link
                                 href={`/admin/courses/${courseId}/seminar-cohort/${seminarCohortId}/seminars/${seminarId}/seminar-content/new`}
                             >
-                                <button className="d-btn d-btn-primary">
+                                <button
+                                    type="button"
+                                    className="d-btn d-btn-primary"
+                                >
                                     Add content
                                 </button>
                             </Link>
@@ -86,7 +89,10 @@ export default async function AdminSeminarEdit({
                             <Link
                                 href={`/admin/courses/${courseId}/seminar-cohort/${seminarCohortId}/seminars/${seminarId}/seminar-transcript/new`}
                             >
-                                <button className="d-btn d-btn-primary">
+                                <button
+                                    type="button"
+                                    className="d-btn d-btn-primary"
+                                >
                                     Add transcript
                                 </button>
                             </Link>

app/articles/[[...mdxPath]]/page.tsx

@@ -11,7 +11,9 @@ export const generateStaticParams = generateStaticParamsFor("mdxPath");
 type CustomMarkdownContentMetadata = $NextraMetadata & {
     seoTitle?: string | null;
 };
-export async function generateMetadata(props: any) {
+export async function generateMetadata(props: {
+    params: Promise<{ mdxPath: string[] }>;
+}) {
     const params = await props.params;
     const metadata = (await importPage(params.mdxPath))
         .metadata as CustomMarkdownContentMetadata;
@@ -56,7 +58,9 @@ export async function generateMetadata(props: any) {
     return enhancedMetadata;
 }
 
-export default async function Page(props: any) {
+export default async function Page(props: {
+    params: Promise<{ mdxPath: string[] }>;
+}) {
     const params = await props.params;
     const result = await importPage(params.mdxPath);
     const { default: MDXContent, toc, metadata } = result;

app/layout.tsx

@@ -26,10 +26,10 @@ const EDIT_LINK_DESCRIPTION = "Edit this page on GitHub";
 const PROJECT_LINK = "https://github.com/systemphil/sphil";
 const DOCS_REPOSITORY_BASE = "https://github.com/systemphil/sphil/tree/main";
 const SITE_ROOT = process.env.NEXT_PUBLIC_SITE_ROOT as string;
-const BACKGROUND_COLOR = {
-    light: "#fca5a5",
-    dark: "#1e40af",
-};
+// const BACKGROUND_COLOR = {
+//     light: "#fca5a5",
+//     dark: "#1e40af",
+// };
 const COLOR = {
     hue: {
         dark: 155,
@@ -208,6 +208,7 @@ export default async function RootLayout({
     );
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Banner = () => {
     return (
         <NextraBanner storageKey="release_key" dismissible>