Upgrade Next.js to v15 and Component Improvements

app/admin/add-barometer/barometer-form.tsx

@@ -5,7 +5,7 @@ import { Check, ChevronsUpDown } from 'lucide-react'
 import { useEffect, useTransition } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { MultiSelect, RequiredFieldMark } from '@/components/elements'
+import { FormImageUpload, MultiSelect, RequiredFieldMark } from '@/components/elements'
 import { Button } from '@/components/ui/button'
 import {
   Command,
@@ -46,7 +46,6 @@ import {
   BarometerFormValidationSchema,
 } from './barometer-form.schema'
 import { Dimensions } from './dimensions'
-import { FileUpload } from './file-upload'
 
 interface Props {
   conditions: ConditionsDTO
@@ -414,7 +413,7 @@ export default function BarometerForm({
             )}
           />
 
-          <FileUpload name="images" />
+          <FormImageUpload name="images" />
 
           <Dimensions />
 

app/admin/add-brand/brand-add-form.tsx

@@ -5,7 +5,7 @@ import { useCallback, useTransition } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
-import { IconUpload, ImageUpload, MultiSelect, RequiredFieldMark } from '@/components/elements'
+import { FormImageUpload, IconUpload, MultiSelect, RequiredFieldMark } from '@/components/elements'
 import * as UI from '@/components/ui'
 import { imageStorage } from '@/constants'
 import { createBrand } from '@/server/brands/actions'
@@ -272,19 +272,7 @@ function BrandAddForm({ countries, brands }: Props) {
           )}
         />
 
-        <UI.FormField
-          control={form.control}
-          name="images"
-          render={({ field }) => (
-            <UI.FormItem>
-              <UI.FormLabel>Images</UI.FormLabel>
-              <UI.FormControl>
-                <ImageUpload images={field.value} onImagesChange={field.onChange} maxImages={10} />
-              </UI.FormControl>
-              <UI.FormMessage />
-            </UI.FormItem>
-          )}
-        />
+        <FormImageUpload name="images" />
 
         <div>
           <UI.FormLabel>Icon</UI.FormLabel>

app/admin/add-document/document-form.tsx

@@ -7,14 +7,13 @@ import { useTransition } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
-import { MultiSelect, RequiredFieldMark } from '@/components/elements'
+import { FormImageUpload, MultiSelect, RequiredFieldMark } from '@/components/elements'
 import * as UI from '@/components/ui'
 import { imageStorage } from '@/constants/globals'
 import type { AllBarometersDTO } from '@/server/barometers/queries'
 import type { ConditionsDTO } from '@/server/conditions/queries'
 import { createDocument } from '@/server/documents/actions'
 import { getThumbnailBase64 } from '@/utils'
-import { FileUpload } from '../add-barometer/file-upload'
 
 dayjs.extend(utc)
 
@@ -415,7 +414,7 @@ export function DocumentForm({ conditions, allBarometers }: Props) {
           )}
         />
 
-        <FileUpload name="images" />
+        <FormImageUpload name="images" />
 
         <UI.FormField
           control={methods.control}

app/brands/[slug]/page.tsx

@@ -12,9 +12,9 @@ import { type BrandDTO, getBrand } from '@/server/brands/queries'
 import type { DynamicOptions } from '@/types'
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string
-  }
+  }>
 }
 
 export const dynamic: DynamicOptions = 'force-static'
@@ -38,7 +38,8 @@ const getBarometersByManufacturer = withPrisma(async (prisma, slug: string) =>
   }),
 )
 
-export async function generateMetadata({ params: { slug } }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const { slug } = await props.params
   const manufacturer = await getBrand(slug)
   return {
     title: `${title} - Manufacturer: ${manufacturer.name}`,
@@ -51,7 +52,8 @@ export const generateStaticParams = withPrisma(async prisma =>
   }),
 )
 
-export default async function Manufacturer({ params: { slug } }: Props) {
+export default async function Manufacturer(props: Props) {
+  const { slug } = await props.params
   const manufacturer = await getBrand(slug)
   const barometers = await getBarometersByManufacturer(slug)
   const fullName = `${manufacturer.firstName ?? ''} ${manufacturer.name}`

app/brands/brand-edit.tsx

@@ -150,7 +150,7 @@ export function BrandEdit({ brand, countries, brands }: Props) {
       images: brandImages,
       successors: brand.successors.map(({ id }) => id),
       countries: brand.countries.map(({ id }) => id),
-      icon: brand.icon ? Buffer.from(brand.icon).toString('base64') : null,
+      icon: brand.icon,
     })
   }, [openBrandDialog, brand, brandImages, form.reset, cleanUpOnClose])
 

app/brands/page.tsx

@@ -26,7 +26,7 @@ export const metadata: Metadata = {
 }
 
 const width = 32
-const BrandsOfCountry = ({
+const BrandByCountry = ({
   country,
   countries,
   allBrands,
@@ -43,23 +43,21 @@ const BrandsOfCountry = ({
       <div className="flex flex-col gap-4">
         {country.manufacturers.map(brand => {
           const { id, firstName, name, slug, icon } = brand
-          const base64 = icon ? Buffer.from(icon).toString('base64') : null
-          const image = base64 ? `data:image/png;base64,${base64}` : null
           return (
             <div key={id} className="flex gap-1 items-center">
               <IsAdmin>
                 <BrandEdit brand={brand} countries={countries} brands={allBrands} />
               </IsAdmin>
               <Link className="w-fit no-underline hover:underline" href={FrontRoutes.Brands + slug}>
                 <div className="flex flex-nowrap items-center gap-3">
-                  {image ? (
+                  {icon ? (
                     <Image
                       unoptimized
                       width={width}
                       height={width}
                       alt={name}
                       loading="lazy"
-                      src={image}
+                      src={icon}
                       className="h-8 w-8 object-contain"
                     />
                   ) : (
@@ -100,7 +98,7 @@ export default async function Brands() {
         <div className="grid grid-cols-1 sm:grid-cols-[1fr_auto_1fr] sm:gap-x-6">
           <div>
             {firstColumn.map(country => (
-              <BrandsOfCountry
+              <BrandByCountry
                 allBrands={allBrands}
                 key={country.id}
                 country={country}
@@ -111,7 +109,7 @@ export default async function Brands() {
           <Separator orientation="vertical" className="hidden sm:block" />
           <div>
             {secondColumn.map(country => (
-              <BrandsOfCountry
+              <BrandByCountry
                 allBrands={allBrands}
                 key={country.id}
                 country={country}

app/collection/categories/[...category]/page.tsx

@@ -18,15 +18,14 @@ export const dynamicParams = true
 export const dynamic: DynamicOptions = 'force-static'
 
 interface CollectionProps {
-  params: {
+  params: Promise<{
     // category should include [categoryName, sortCriteria, pageNo]
     category: [string, string, string]
-  }
+  }>
 }
 
-export async function generateMetadata({
-  params: { category },
-}: CollectionProps): Promise<Metadata> {
+export async function generateMetadata(props: CollectionProps): Promise<Metadata> {
+  const { category } = await props.params
   const [categoryName] = category
   const { description } = await getCategory(categoryName)
   const { barometers } = await getBarometersByParams(categoryName, 1, 5, 'date')
@@ -57,7 +56,11 @@ export async function generateMetadata({
   }
 }
 
-export default async function Collection({ params: { category } }: CollectionProps) {
+export default async function Collection(props: CollectionProps) {
+  const params = await props.params
+
+  const { category } = params
+
   const [categoryName, sort, page] = category
   const pageNo = Math.max(parseInt(page, 10) || 1, 1)
   const { barometers, totalPages } = await getBarometersByParams(

app/collection/items/[slug]/components/edit-fields/edit-category.tsx → app/collection/items/[slug]/components/edit-fields/category-edit.tsx

@@ -39,7 +39,7 @@ const Schema = z.object({
 
 type Form = z.infer<typeof Schema>
 
-export function EditCategory({ barometer, categories }: Props) {
+export function CategoryEdit({ barometer, categories }: Props) {
   const [open, setOpen] = useState(false)
   const [isPending, startTransition] = useTransition()
 
@@ -74,8 +74,8 @@ export function EditCategory({ barometer, categories }: Props) {
   // reset form on open
   useEffect(() => {
     if (!open) return
-    form.reset()
-  }, [open, form.reset])
+    form.reset({ categoryId: barometer.categoryId })
+  }, [open, form.reset, barometer.categoryId])
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>

app/collection/items/[slug]/layout.tsx

@@ -6,11 +6,10 @@ import { keywords, openGraph, title, twitter } from '@/constants/metadata'
 import { FrontRoutes } from '@/constants/routes-front'
 import { getBarometer } from '@/server/barometers/queries'
 
-export async function generateMetadata({
-  params: { slug },
-}: {
-  params: { slug: string }
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string }>
 }): Promise<Metadata> {
+  const { slug } = await props.params
   try {
     const barometer = await getBarometer(slug)
     if (!barometer) throw new Error()