collaborators placeholder image

Vizzuality · Sep 23, 2024 · da570dd · da570dd
1 parent dda3a6b
commit da570dd
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 10 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/client/public/images/collaborators/no-image-placeholder.png b/client/public/images/collaborators/no-image-placeholder.png
diff --git a/client/src/components/new-dataset/step-description/csv-import.tsx b/client/src/components/new-dataset/step-description/csv-import.tsx
@@ -90,15 +90,15 @@ export default function CSVImport({
             uploadCollaboratorsCsv(files, {
               Authorization: `Bearer ${apiToken}`,
             }).then((data) => {
-              if (data.status === 200) {
+              if (data?.status === 200 || data?.failures?.length === 0) {
                 push("/collaborators");
               }
             });
           ME_DATA?.role?.type === "authenticated" &&
             uploadCollaboratorEditSuggestionsCsv(files, {
               Authorization: `Bearer ${apiToken}`,
             }).then((data) => {
-              if (data.status === 200) {
+              if (data?.status === 200 || data?.failures?.length === 0) {
                 push("/dashboard");
               }
             });

diff --git a/client/src/containers/collaborators/item.tsx b/client/src/containers/collaborators/item.tsx
@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+
 import Image from "next/image";
 import Link from "next/link";
 
@@ -13,13 +15,30 @@ import { Collaborator, CollaboratorListResponseDataItem } from "@/types/generate
 
 import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 
+import env from "@/env.mjs";
+
 type CollaboratorTypeItemProps = {
   id?: number;
   attributes?: Collaborator;
   status?: "authenticated" | "loading" | "unauthenticated";
 };
 
+function checkImage(url: string, callback: (isValid: boolean) => void) {
+  const img = document.createElement("img"); // Create an HTML image element
+
+  img.onload = function () {
+    callback(true); // Image is valid
+  };
+
+  img.onerror = function () {
+    callback(false); // Image is broken
+  };
+
+  img.src = url; // Set the image source
+}
+
 const CollaboratorTypeItem = ({ id, attributes, status }: CollaboratorTypeItemProps) => {
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
   const { data: collaboratorData } = useGetCollaboratorsId(
     id as number,
     {
@@ -32,6 +51,29 @@ const CollaboratorTypeItem = ({ id, attributes, status }: CollaboratorTypeItemPr
     },
   );
 
+  useEffect(() => {
+    const fallbackUrl = `/images/collaborators/collaborator-${id}.png`;
+    const placeholderUrl = `/images/collaborators/no-image-placeholder.png`;
+
+    // First image to check (from collaboratorData)
+    const initialUrl =
+      collaboratorData?.data?.attributes?.image?.data?.attributes?.url || fallbackUrl;
+
+    checkImage(initialUrl, (isValid) => {
+      if (isValid) {
+        setImageUrl(initialUrl);
+      } else {
+        checkImage(fallbackUrl, (isFallbackValid) => {
+          if (isFallbackValid) {
+            setImageUrl(fallbackUrl);
+          } else {
+            setImageUrl(placeholderUrl); // Use the placeholder if both images are broken
+          }
+        });
+      }
+    });
+  }, [id, collaboratorData]);
+
   return (
     <div
       key={id}
@@ -63,12 +105,14 @@ const CollaboratorTypeItem = ({ id, attributes, status }: CollaboratorTypeItemPr
       <div className="relative z-10 flex min-h-[134px] w-full flex-1 items-center justify-center p-8">
         <Image
           src={
-            (collaboratorData?.data?.attributes?.image?.data?.attributes?.url as string) ||
-            `/images/collaborators/collaborator-${id}.png`
+            imageUrl
+              ? `
+            ${collaboratorData?.data?.attributes?.image?.data?.attributes?.url}`
+              : `/images/collaborators/no-image-placeholder.png`
           }
           alt={attributes?.name || "Collaborator logo"}
-          width={134}
-          height={134}
+          width={imageUrl ? 134 : 90}
+          height={imageUrl ? 134 : 90}
         />
       </div>
     </div>

diff --git a/client/src/containers/projects/form/index.tsx b/client/src/containers/projects/form/index.tsx
@@ -338,7 +338,7 @@ export default function ProjectForm() {
       },
     }),
   });
-  console.log(previousData);
+
   const handleCancel = () => {
     push(`/?${URLParams.toString()}`);
   };

diff --git a/client/src/containers/welcome-message/index.tsx b/client/src/containers/welcome-message/index.tsx
@@ -10,7 +10,7 @@ import Image from "next/image";
 import { LuPlay } from "react-icons/lu";
 import screenfull from "screenfull";
 
-// import env from "@/env.mjs";
+import env from "@/env.mjs";
 
 import { cn } from "@/lib/classnames";
 
@@ -84,8 +84,8 @@ export default function WelcomeMessage() {
               {data?.data?.attributes?.image && (
                 <Image
                   // TO DO - get URL dynamically
-                  src="https://ccsa-staging-assets-bucket.s3.amazonaws.com/welcome_image_34ad0d15bc.png"
-                  // src={`${env.NEXT_PUBLIC_CMS_URL}${data?.data?.attributes?.image?.data?.attributes?.url}`}
+                  // src="https://ccsa-staging-assets-bucket.s3.amazonaws.com/welcome_image_34ad0d15bc.png"
+                  src={`${env.NEXT_PUBLIC_CMS_URL}${data?.data?.attributes?.image?.data?.attributes?.url}`}
                   alt="Welcome message"
                   width={data?.data?.attributes?.image?.data?.attributes?.width}
                   height={data?.data?.attributes?.image?.data?.attributes?.height}