feat: cover image selector for project create

apps/app/components/core/index.ts

@@ -9,3 +9,4 @@ export * from "./issues-view";
 export * from "./link-modal";
 export * from "./not-authorized-view";
 export * from "./multi-level-select";
+export * from "./unsplash-modal";

apps/app/components/core/unsplash-modal.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+
+import Image from "next/image";
+
+import useSWR from "swr";
+
+import { Dialog, Transition } from "@headlessui/react";
+
+// services
+import fileService from "services/file.service";
+// ui
+import { Button, Input, Spinner } from "components/ui";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onSelect: (url: string) => void;
+};
+
+export const UnsplashImageModal: React.FC<Props> = (props) => {
+  const { isOpen, handleClose, onSelect } = props;
+
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [formData, setFormData] = useState({
+    search: "",
+  });
+
+  const { data: images } = useSWR(`UNSPLASH_IMAGES_${searchQuery.toUpperCase()}`, () =>
+    fileService.getUnsplashImages(1, searchQuery)
+  );
+
+  const onClose = () => {
+    handleClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative h-[35rem] space-y-5 transform overflow-y-auto rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl sm:p-6">
+                <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                  Select an image
+                </Dialog.Title>
+
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    setSearchQuery(formData.search);
+                  }}
+                  className="flex items-center"
+                >
+                  <Input
+                    name="search"
+                    value={formData.search}
+                    onChange={(e) => setFormData({ ...formData, search: e.target.value })}
+                    placeholder="Search for images"
+                  />
+                  <Button type="submit">Search</Button>
+                </form>
+
+                {images ? (
+                  <div className="grid grid-cols-3 gap-5">
+                    {images.map((image) => (
+                      <button
+                        key={image.id}
+                        className="w-full relative h-32 bg-gray-200 rounded-md overflow-hidden"
+                        type="button"
+                        onClick={() => onSelect(image.urls.small)}
+                      >
+                        <Image src={image.urls.small} layout="fill" objectFit="cover" />
+                      </button>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="flex h-96 w-full items-center justify-center">
+                    <Spinner />
+                  </div>
+                )}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

apps/app/components/project/create-project-modal.tsx

@@ -14,7 +14,10 @@ import workspaceService from "services/workspace.service";
 import useToast from "hooks/use-toast";
 // ui
 import { Button, Input, TextArea, CustomSelect } from "components/ui";
+// icons
+import { PhotoIcon } from "@heroicons/react/24/outline";
 // components
+import { UnsplashImageModal } from "components/core";
 import EmojiIconPicker from "components/emoji-icon-picker";
 // helpers
 import { getRandomEmoji } from "helpers/common.helper";
@@ -36,6 +39,7 @@ const defaultValues: Partial<IProject> = {
   description: "",
   network: 2,
   icon: getRandomEmoji(),
+  cover_image: null,
 };
 
 const IsGuestCondition: React.FC<{
@@ -58,6 +62,7 @@ const IsGuestCondition: React.FC<{
 export const CreateProjectModal: React.FC<Props> = (props) => {
   const { isOpen, setIsOpen } = props;
 
+  const [isUnsplashModalOpen, setIsUnsplashModalOpen] = useState(false);
   const [isChangeIdentifierRequired, setIsChangeIdentifierRequired] = useState(true);
 
   const { setToastAlert } = useToast();
@@ -173,6 +178,15 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl sm:p-6">
+                <div className="absolute border-2 rounded-md p-2 bg-red-a500 right-4 top-4">
+                  <button
+                    type="button"
+                    className="w-full h-full flex items-center justify-center outline-none"
+                    onClick={() => setIsUnsplashModalOpen(true)}
+                  >
+                    <PhotoIcon className="w-5 h-5 text-gray-700" />
+                  </button>
+                </div>
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="space-y-5">
                     <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
@@ -299,6 +313,14 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
             </Transition.Child>
           </div>
         </div>
+        <UnsplashImageModal
+          handleClose={() => setIsUnsplashModalOpen(false)}
+          isOpen={isUnsplashModalOpen}
+          onSelect={(imageUrl) => {
+            setValue("cover_image", imageUrl);
+            setIsUnsplashModalOpen(false);
+          }}
+        />
       </Dialog>
     </Transition.Root>
   );

apps/app/next.config.js

@@ -9,6 +9,7 @@ const nextConfig = {
       "vinci-web.s3.amazonaws.com",
       "planefs-staging.s3.ap-south-1.amazonaws.com",
       "planefs.s3.amazonaws.com",
+      "images.unsplash.com",
     ],
   },
   output: "standalone",

apps/app/services/file.service.ts

@@ -3,6 +3,30 @@ import APIService from "services/api.service";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
+interface UnSplashImage {
+  id: string;
+  created_at: Date;
+  updated_at: Date;
+  promoted_at: Date;
+  width: number;
+  height: number;
+  color: string;
+  blur_hash: string;
+  description: null;
+  alt_description: string;
+  urls: UnSplashImageUrls;
+  [key: string]: any;
+}
+
+interface UnSplashImageUrls {
+  raw: string;
+  full: string;
+  regular: string;
+  small: string;
+  thumb: string;
+  small_s3: string;
+}
+
 class FileServices extends APIService {
   constructor() {
     super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
@@ -15,6 +39,24 @@ class FileServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  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`;
+
+    return this.request({
+      method: "get",
+      url,
+    })
+      .then((response) => {
+        return response?.data?.results ?? response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new FileServices();

apps/app/types/projects.d.ts

@@ -1,6 +1,7 @@
 import type { IUserLite, IWorkspace } from "./";
 
 export interface IProject {
+  cover_image: string | null;
   created_at: Date;
   created_by: string;
   cycle_view: boolean;