From 77c1b90e6bdc53268ea7305edc106dea2e8b1bd5 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Wed, 4 Oct 2023 20:04:35 +0530 Subject: [PATCH] feat: default project cover images tab on the change cover popover (#2375) * feat: default project cover images tab * chore: remove unnecessary env vars from turbo.json --- space/services/file.service.ts | 18 -- turbo.json | 2 - web/components/core/image-picker-popover.tsx | 202 ++++++++++++------ .../project/create-project-modal.tsx | 2 +- web/next.config.js | 1 + web/services/file.service.ts | 24 ++- 6 files changed, 148 insertions(+), 101 deletions(-) diff --git a/space/services/file.service.ts b/space/services/file.service.ts index d9783d29c..6df6423f4 100644 --- a/space/services/file.service.ts +++ b/space/services/file.service.ts @@ -74,24 +74,6 @@ class FileServices extends APIService { throw error?.response?.data; }); } - - async getUnsplashImages(page: number = 1, query?: string): Promise { - 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) => { - throw error?.response?.data; - }); - } } const fileServices = new FileServices(); diff --git a/turbo.json b/turbo.json index 59bbe741f..b3c5e4d9f 100644 --- a/turbo.json +++ b/turbo.json @@ -12,8 +12,6 @@ "NEXT_PUBLIC_GITHUB_APP_NAME", "NEXT_PUBLIC_ENABLE_SENTRY", "NEXT_PUBLIC_ENABLE_OAUTH", - "NEXT_PUBLIC_UNSPLASH_ACCESS", - "NEXT_PUBLIC_UNSPLASH_ENABLED", "NEXT_PUBLIC_TRACK_EVENTS", "NEXT_PUBLIC_PLAUSIBLE_DOMAIN", "NEXT_PUBLIC_CRISP_ID", diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx index 957f1131c..cfe18cd97 100644 --- a/web/components/core/image-picker-popover.tsx +++ b/web/components/core/image-picker-popover.tsx @@ -1,32 +1,23 @@ import React, { useEffect, useState, useRef, useCallback } from "react"; - -// next import Image from "next/image"; import { useRouter } from "next/router"; - -// swr import useSWR from "swr"; - -// react-dropdown import { useDropzone } from "react-dropzone"; - -// headless ui import { Tab, Transition, Popover } from "@headlessui/react"; // services import fileService from "services/file.service"; - -// components -import { Input, Spinner, PrimaryButton, SecondaryButton } from "components/ui"; // hooks import useWorkspaceDetails from "hooks/use-workspace-details"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; - -const unsplashEnabled = - process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "true" || - process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "1"; +// components +import { Input, PrimaryButton, SecondaryButton, Loader } from "components/ui"; const tabOptions = [ + { + key: "unsplash", + title: "Unsplash", + }, { key: "images", title: "Images", @@ -64,8 +55,22 @@ export const ImagePickerPopover: React.FC = ({ search: "", }); - const { data: images } = useSWR(`UNSPLASH_IMAGES_${searchParams}`, () => - fileService.getUnsplashImages(1, searchParams) + const { data: unsplashImages, error: unsplashError } = useSWR( + `UNSPLASH_IMAGES_${searchParams}`, + () => fileService.getUnsplashImages(searchParams), + { + revalidateOnFocus: false, + revalidateOnReconnect: false, + } + ); + + const { data: projectCoverImages } = useSWR( + `PROJECT_COVER_IMAGES`, + () => fileService.getProjectCoverImages(), + { + revalidateOnFocus: false, + revalidateOnReconnect: false, + } ); const imagePickerRef = useRef(null); @@ -115,18 +120,17 @@ export const ImagePickerPopover: React.FC = ({ }; useEffect(() => { - if (!images || value !== null) return; - onChange(images[0].urls.regular); - }, [value, onChange, images]); + if (!unsplashImages || value !== null) return; + + onChange(unsplashImages[0].urls.regular); + }, [value, onChange, unsplashImages]); useOutsideClickDetector(imagePickerRef, () => setIsOpen(false)); - if (!unsplashEnabled) return null; - return ( setIsOpen((prev) => !prev)} disabled={disabled} > @@ -141,15 +145,19 @@ export const ImagePickerPopover: React.FC = ({ leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - +
-
- - {tabOptions.map((tab) => ( + + {tabOptions.map((tab) => { + if (!unsplashImages && unsplashError && tab.key === "unsplash") return null; + if (projectCoverImages && projectCoverImages.length === 0 && tab.key === "images") + return null; + + return ( @@ -160,50 +168,106 @@ export const ImagePickerPopover: React.FC = ({ > {tab.title} - ))} - -
+ ); + })} + - -
- setFormData({ ...formData, search: e.target.value })} - placeholder="Search for images" - /> - setSearchParams(formData.search)} size="sm"> - Search - -
- {images ? ( -
- {images.map((image) => ( -
- {image.alt_description} { - setIsOpen(false); - onChange(image.urls.regular); - }} - /> + {(unsplashImages || !unsplashError) && ( + +
+ setFormData({ ...formData, search: e.target.value })} + placeholder="Search for images" + /> + setSearchParams(formData.search)} size="sm"> + Search + +
+ {unsplashImages ? ( + unsplashImages.length > 0 ? ( +
+ {unsplashImages.map((image) => ( +
{ + setIsOpen(false); + onChange(image.urls.regular); + }} + > + {image.alt_description} +
+ ))}
- ))} -
- ) : ( -
- -
- )} - - + ) : ( +

+ No images found. +

+ ) + ) : ( + + + + + + + + + + + )} + + )} + {(!projectCoverImages || projectCoverImages.length !== 0) && ( + + {projectCoverImages ? ( + projectCoverImages.length > 0 ? ( +
+ {projectCoverImages.map((image, index) => ( +
{ + setIsOpen(false); + onChange(image); + }} + > + {`Default +
+ ))} +
+ ) : ( +

+ No images found. +

+ ) + ) : ( + + + + + + + + + + + )} + + )} +
= ({ value={value} onChange={onChange} options={options} - buttonClassName="!px-2 shadow-md" + buttonClassName="border-[0.5px] !px-2 shadow-md" label={
{value ? ( diff --git a/web/next.config.js b/web/next.config.js index 1d466aaf5..058a68b7d 100644 --- a/web/next.config.js +++ b/web/next.config.js @@ -15,6 +15,7 @@ const nextConfig = { "vinci-web.s3.amazonaws.com", "planefs-staging.s3.ap-south-1.amazonaws.com", "planefs.s3.amazonaws.com", + "planefs-staging.s3.amazonaws.com", "images.unsplash.com", "avatars.githubusercontent.com", "localhost", diff --git a/web/services/file.service.ts b/web/services/file.service.ts index cbed73fc8..15cdc1786 100644 --- a/web/services/file.service.ts +++ b/web/services/file.service.ts @@ -76,21 +76,23 @@ class FileServices extends APIService { }); } - async getUnsplashImages(page: number = 1, query?: string): Promise { - const url = "/api/unsplash"; - - return this.request({ - method: "get", - url, + async getUnsplashImages(query?: string): Promise { + return this.get(`/api/unsplash/`, { params: { - page, - per_page: 20, query, }, }) - .then((response) => response?.data?.results ?? response?.data) - .catch((error) => { - throw error?.response?.data; + .then((res) => res?.data?.results ?? res?.data) + .catch((err) => { + throw err?.response?.data; + }); + } + + async getProjectCoverImages(): Promise { + return this.get(`/api/project-covers/`) + .then((res) => res?.data) + .catch((err) => { + throw err?.response?.data; }); } }