From 01bebf0d8319d4551dac9a5b4d52f84f15f142c0 Mon Sep 17 00:00:00 2001
From: Ahmad <103906421+ahmadk953@users.noreply.github.com>
Date: Sat, 17 Feb 2024 19:21:19 -0500
Subject: [PATCH] Updated how Images are Handeled to Comply With Unsplash API
 Guidelines

---
 actions/create-board/index.ts   | 20 +++++++++++++++++---
 app/api/unsplash/route.ts       | 20 ++++++++++++++++++++
 components/form/form-picker.tsx | 15 +++++----------
 3 files changed, 42 insertions(+), 13 deletions(-)
 create mode 100644 app/api/unsplash/route.ts

diff --git a/actions/create-board/index.ts b/actions/create-board/index.ts
index 5869828..54fc6b8 100644
--- a/actions/create-board/index.ts
+++ b/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,
diff --git a/app/api/unsplash/route.ts b/app/api/unsplash/route.ts
new file mode 100644
index 0000000..d9c5b4a
--- /dev/null
+++ b/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 });
+  }
+}
diff --git a/components/form/form-picker.tsx b/components/form/form-picker.tsx
index 5f46b87..ff3e8b3 100644
--- a/components/form/form-picker.tsx
+++ b/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}