Updated how Images are Handeled to Comply With Unsplash API Guidelines

actions/create-board/index.ts

@@ -34,15 +34,22 @@ const handler = async (data: InputType): Promise<ReturnType> => {
 
   const { title, image } = data;
 
-  const [imageId, imageThumbUrl, imageFullUrl, imageLinkHTML, imageUserName] =
-    image.split('|');
+  const [
+    imageId,
+    imageThumbUrl,
+    imageFullUrl,
+    imageLinkHTML,
+    imageUserName,
+    imageDownloadUrl,
+  ] = image.split('|');
 
   if (
     !imageId ||
     !imageThumbUrl ||
     !imageFullUrl ||
     !imageUserName ||
-    !imageLinkHTML
+    !imageLinkHTML ||
+    !imageDownloadUrl
   ) {
     return {
       error: 'Missing fields. Failed to create board.',
@@ -52,6 +59,13 @@ const handler = async (data: InputType): Promise<ReturnType> => {
   let board;
 
   try {
+    await fetch(imageDownloadUrl, {
+      method: 'GET',
+      headers: {
+        Authorization: `Client-ID ${process.env.UNSPLASH_ACCESS_KEY}`,
+      },
+    });
+
     board = await db.board.create({
       data: {
         title,

app/api/unsplash/route.ts

@@ -0,0 +1,20 @@
+import { unsplash } from '@/lib/unsplash';
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  try {
+    const result = await unsplash.photos.getRandom({
+      collectionIds: ['317099'],
+      count: 9,
+    });
+
+    if (result?.response) {
+      const newImages = result.response as Array<Record<string, any>>;
+      return new NextResponse(JSON.stringify(newImages), { status: 200 });
+    } else {
+      return new NextResponse('Failed to get images', { status: 500 });
+    }
+  } catch (error) {
+    return new NextResponse(JSON.stringify(error), { status: 500 });
+  }
+}

components/form/form-picker.tsx

@@ -7,7 +7,6 @@ import { useEffect, useState } from 'react';
 import { useFormStatus } from 'react-dom';
 import { Check, Loader2 } from 'lucide-react';
 
-import { unsplash } from '@/lib/unsplash';
 import { cn } from '@/lib/utils';
 import { defaultImages } from '@/constants/images';
 import { FormErrors } from './form-errors';
@@ -28,16 +27,12 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
   useEffect(() => {
     const fetchImages = async () => {
       try {
-        const result = await unsplash.photos.getRandom({
-          collectionIds: ['317099'],
-          count: 9,
-        });
-
-        if (result?.response) {
-          const newImages = result.response as Array<Record<string, any>>;
+        const response = await fetch('/api/unsplash');
+        if (response.ok) {
+          const newImages = await response.json();
           setImages(newImages);
         } else {
-          console.error('Failed to get images.');
+          console.error('Failed to fetch images');
         }
       } catch (error) {
         console.log(error);
@@ -80,7 +75,7 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
               className='hidden'
               checked={selectedImageId === image.id}
               disabled={pending}
-              value={`${image.id}|${image.urls.thumb}|${image.urls.full}|${image.links.html}|${image.user.name}`}
+              value={`${image.id}|${image.urls.thumb}|${image.urls.full}|${image.links.html}|${image.user.name}|${image.links.download_location}`}
             />
             <Image
               src={image.urls.thumb}