Merge pull request #160 from MAGICGrants/general-refactor

Fixes & update Next to version 15

Dockerfile

@@ -50,6 +50,8 @@ RUN \
 FROM base AS runner
 WORKDIR /app
 
+RUN apk add --no-cache libc6-compat
+
 ARG BUILD_MODE=1
 
 ENV NODE_ENV production

docker-compose.yml

@@ -113,7 +113,7 @@ services:
     container_name: magic-app
     restart: unless-stopped
     working_dir: /app
-    command: npm run dev
+    command: sh -c 'apk add --no-cache libc6-compat && npm run dev'
     ports:
       - 3000:3000
     volumes:

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

package.json

@@ -62,7 +62,7 @@
     "lucide-react": "^0.390.0",
     "micro": "^10.0.1",
     "micro-cors": "^0.1.1",
-    "next": "^14.2.3",
+    "next": "^15.2.4",
     "next-auth": "^4.24.7",
     "next-themes": "^0.3.0",
     "nodemailer": "^6.9.13",
@@ -104,8 +104,8 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-modal": "^3.16.3",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "^14.2.3",
+    "eslint": "^9.23.0",
+    "eslint-config-next": "^15.2.4",
     "npm-watch": "^0.13.0",
     "postcss": "^8.4.38",
     "prettier": "^3.3.3",

pages/[fund]/donate/[slug].tsx

@@ -38,8 +38,8 @@ import FiroLogo from '../../../components/FiroLogo'
 import PrivacyGuidesLogo from '../../../components/PrivacyGuidesLogo'
 import MagicLogo from '../../../components/MagicLogo'
 
-type QueryParams = { fund: FundSlug; slug: string }
-type Props = { project: ProjectItem } & QueryParams
+type QueryParams = { fund?: FundSlug; slug?: string }
+type Props = { project?: ProjectItem } & QueryParams
 
 const placeholderImages: Record<FundSlug, (props: SVGProps<SVGSVGElement>) => JSX.Element> = {
   monero: MoneroLogo,
@@ -48,10 +48,11 @@ const placeholderImages: Record<FundSlug, (props: SVGProps<SVGSVGElement>) => JS
   general: MagicLogo,
 }
 
-function DonationPage({ fund: fundSlug, slug, project }: Props) {
+function DonationPage({ fund: fundSlug, slug, project, ...props }: Props) {
   const session = useSession()
   const isAuthed = session.status === 'authenticated'
-  const PlaceholderImage = placeholderImages[project.fund]
+
+  let PlaceholderImage = project ? placeholderImages[project.fund] : placeholderImages.general
 
   const schema = z
     .object({
@@ -64,10 +65,7 @@ function DonationPage({ fund: fundSlug, slug, project }: Props) {
     })
     .refine(
       (data) => (!isAuthed && data.showDonorNameOnLeaderboard === 'yes' ? !!data.name : true),
-      {
-        message: 'Name is required when you want it to be on the leaderboard.',
-        path: ['name'],
-      }
+      { message: 'Name is required when you want it to be on the leaderboard.', path: ['name'] }
     )
     .refine((data) => (!isAuthed && data.taxDeductible === 'yes' ? !!data.name : true), {
       message: 'Name is required when the donation is tax deductible.',
@@ -247,11 +245,7 @@ function DonationPage({ fund: fundSlug, slug, project }: Props) {
                           variant="light"
                           size="sm"
                           type="button"
-                          onClick={() =>
-                            form.setValue('amount', value, {
-                              shouldValidate: true,
-                            })
-                          }
+                          onClick={() => form.setValue('amount', value, { shouldValidate: true })}
                         >
                           ${value}
                         </Button>
@@ -427,7 +421,7 @@ function DonationPage({ fund: fundSlug, slug, project }: Props) {
           <div className="flex flex-col items-center">
             <p className="text-sm">Want to support more projects and receive optional perks?</p>
 
-            <Link href={`/${encodeURIComponent(fundSlug)}/register`}>
+            <Link href={`/${encodeURIComponent(fundSlug!)}/register`}>
               <Button type="button" size="lg" variant="link">
                 Create an account
               </Button>

utils/md.ts

@@ -103,7 +103,6 @@ export async function getProjects(fundSlug?: FundSlug) {
       if (a.isFunded && !b.isFunded) return 1
       return 0
     })
-    .slice(0, 6)
 
   // Get donation stats for active projects
   await Promise.all(