feat: update select thumbnail and fix bug

farhan-helmy · Jul 25, 2023 · 2afc68a · 2afc68a
1 parent 67b7b68
commit 2afc68a
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/src/components/AddSurauForm.tsx b/src/components/AddSurauForm.tsx
@@ -63,6 +63,7 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
   const [tempImageList, setTempImageList] = useState<UploadThingFilePath[]>([]);
   const [thumbnailChecked, setThumbnailChecked] = useState(false);
   const [thumbnailError, setThumbnailError] = useState("");
+  const [thumbnailIndex, setThumbnailIndex] = useState(0);
 
   const mall = api.surau.getMallOnDistrict.useQuery({
     district_id: choosenDistrict,
@@ -96,8 +97,9 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
     }
   }, [tempImageList]);
 
-  const markThumbnail = (id: string) => {
+  const markThumbnail = (id: string, index: number) => {
     const fileUrl = imagePreviews.find((image) => image.id === id)?.url;
+    setThumbnailIndex(index);
 
     filePath.forEach((file) => {
       if (file.file_path === fileUrl) {
@@ -483,14 +485,10 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
                           <div
                             id="imagePreviewDiv"
                             key={index}
-                            className="my-1 inline-flex items-center justify-between overflow-hidden rounded-md border p-2"
+                            className={`my-1 inline-flex items-center justify-between overflow-hidden rounded-md border p-2 ${thumbnailIndex === index ? "border-indigo-500" : "border-gray-300"}`}
+                            onClick={() => markThumbnail(imagePreview.id, index)}
                           >
                             <div className="flex items-center">
-                              <input
-                                type="checkbox"
-                                className="mr-2 h-4 w-4 rounded-sm border"
-                                onClick={() => markThumbnail(imagePreview.id)}
-                              />
                               <Image
                                 src={imagePreview.url}
                                 alt="image preview"

diff --git a/src/components/ReviewSurauForm.tsx b/src/components/ReviewSurauForm.tsx
@@ -59,7 +59,7 @@ const ReviewSurauForm: FC<ReviewSurauFormProps> = ({
     const urls: FilePath[] = [];
 
     uploadThingUrl.forEach((url) => {
-      urls.push({ file_path: url.fileUrl });
+      urls.push({ file_path: url.fileUrl, is_thumbnail: false });
       images.push({ id: url.fileKey, url: url.fileUrl });
     });
 

diff --git a/src/components/shared/CustomUpload.tsx b/src/components/shared/CustomUpload.tsx
@@ -180,6 +180,10 @@ function CustomUpload({ uploadedFileList }: UploadedFileProps) {
         </div>
       </div>
       {files.length > 0 && !isUploading && (
+        <>
+        <div className="italic text-xs text-center mt-2">
+          Please press upload button first to upload the files
+        </div>
         <div className="mt-2">
           <ul className="mb-2 rounded-lg border pt-2">
             {files.map((file: FileWithPath) => (
@@ -199,6 +203,7 @@ function CustomUpload({ uploadedFileList }: UploadedFileProps) {
             ))}
           </ul>
         </div>
+        </>
       )}
     </div>
   );

diff --git a/src/server/api/routers/surau.ts b/src/server/api/routers/surau.ts
@@ -83,6 +83,7 @@ export const surauRouter = createTRPCRouter({
               createMany: {
                 data: input.image.map((image) => ({
                   file_path: image.file_path,
+                  is_thumbnail: !!image.is_thumbnail,
                 })),
               },
             },