From bf09673d09a67cf131667f8cf8386b6c76aa5ab7 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Tue, 21 Mar 2023 16:31:01 +0530
Subject: [PATCH] refactor: making unsplash api request from api folder (#482)

* refractor: added params to fetch key

* feat: create views directly from views list page

fix: selected filter not showing up in multi-level dropdown, refactor: arranged imports

* refactor: making unsplash api request from api folder

to hide acces key from client side
---
 apps/app/pages/api/unsplash.ts    | 23 +++++++++++++++++++++++
 apps/app/services/file.service.ts | 10 ++++++----
 2 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 apps/app/pages/api/unsplash.ts

diff --git a/apps/app/pages/api/unsplash.ts b/apps/app/pages/api/unsplash.ts
new file mode 100644
index 000000000..5eab60b92
--- /dev/null
+++ b/apps/app/pages/api/unsplash.ts
@@ -0,0 +1,23 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+// TODO: remove NEXT_PUBLIC_ prefix from env variable
+const unsplashKey = process.env.NEXT_PUBLIC_UNSPLASH_ACCESS;
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { query, page, per_page = 20 } = req.query;
+
+  const url = query
+    ? `https://api.unsplash.com/search/photos/?client_id=${unsplashKey}&query=${query}&page=${page}&per_page=${per_page}`
+    : `https://api.unsplash.com/photos/?client_id=${unsplashKey}&page=${page}&per_page=${per_page}`;
+
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  const data = await response.json();
+
+  res.status(200).json(data);
+}
diff --git a/apps/app/services/file.service.ts b/apps/app/services/file.service.ts
index 044e625ac..d3a5118b8 100644
--- a/apps/app/services/file.service.ts
+++ b/apps/app/services/file.service.ts
@@ -65,14 +65,16 @@ class FileServices extends APIService {
   }
 
   async getUnsplashImages(page: number = 1, query?: string): Promise<UnSplashImage[]> {
-    const clientId = process.env.NEXT_PUBLIC_UNSPLASH_ACCESS;
-    const url = query
-      ? `https://api.unsplash.com/search/photos/?client_id=${clientId}&query=${query}&page=${page}&per_page=20`
-      : `https://api.unsplash.com/photos/?client_id=${clientId}&page=${page}&per_page=20`;
+    const url = "/api/unsplash";
 
     return this.request({
       method: "get",
       url,
+      params: {
+        page,
+        per_page: 20,
+        query,
+      },
     })
       .then((response) => response?.data?.results ?? response?.data)
       .catch((error) => {