From 189525ca5a255ed4512f852d0e5dd9d8d9aeeaca Mon Sep 17 00:00:00 2001
From: MengYX <admin@mengyx.cn>
Date: Wed, 13 Sep 2023 17:58:17 +0800
Subject: [PATCH] fix: change cover button not showing

fixes https://github.com/makeplane/plane/issues/1273
---
 web/components/core/image-picker-popover.tsx | 7 ++++---
 web/next.config.js                           | 7 +++++++
 web/pages/api/unsplash.ts                    | 5 +++--
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index 5f13d960ee6..c28dc8f525a 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState, useRef, useCallback } from "react";
 // next
 import Image from "next/image";
 import { useRouter } from "next/router";
+import getConfig from "next/config";
 
 // swr
 import useSWR from "swr";
@@ -21,9 +22,9 @@ import { Input, Spinner, PrimaryButton, SecondaryButton } from "components/ui";
 // hooks
 import useWorkspaceDetails from "hooks/use-workspace-details";
 
+const { publicRuntimeConfig } = getConfig();
 const unsplashEnabled =
-  process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "true" ||
-  process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "1";
+  publicRuntimeConfig.unsplashEnabled === "true" || publicRuntimeConfig.unsplashEnabled === "1";
 
 const tabOptions = [
   {
@@ -172,7 +173,7 @@ export const ImagePickerPopover: React.FC<Props> = ({
                   </div>
                   {images ? (
                     <div className="grid grid-cols-4 gap-4">
-                      {images.map((image) => (
+                      {Array.from(images).map((image) => (
                         <div
                           key={image.id}
                           className="relative col-span-2 aspect-video md:col-span-1"
diff --git a/web/next.config.js b/web/next.config.js
index b50066f868f..637c216cb1f 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -25,6 +25,13 @@ const nextConfig = {
     // this includes files from the monorepo base two directories up
     outputFileTracingRoot: path.join(__dirname, "../"),
   },
+  publicRuntimeConfig: {
+    unsplashEnabled: process.env.NEXT_PUBLIC_UNSPLASH_ENABLED,
+  },
+  serverRuntimeConfig: {
+    // TODO: remove NEXT_PUBLIC_ prefix from env variable
+    unsplashAccess: process.env.NEXT_PUBLIC_UNSPLASH_ACCESS,
+  },
 };
 
 if (parseInt(process.env.NEXT_PUBLIC_ENABLE_SENTRY || "0")) {
diff --git a/web/pages/api/unsplash.ts b/web/pages/api/unsplash.ts
index 5eab60b92a8..c1e9c714e33 100644
--- a/web/pages/api/unsplash.ts
+++ b/web/pages/api/unsplash.ts
@@ -1,7 +1,8 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import getConfig from "next/config";
 
-// TODO: remove NEXT_PUBLIC_ prefix from env variable
-const unsplashKey = process.env.NEXT_PUBLIC_UNSPLASH_ACCESS;
+const { serverRuntimeConfig } = getConfig();
+const unsplashKey = serverRuntimeConfig.unsplashAccess;
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { query, page, per_page = 20 } = req.query;