Added missing border for GDPR banner, updated image artifacts, small …

…updates to Navbar and sidebar
kscalelabs · Nov 15, 2024 · 703fc70 · 703fc70
1 parent f78e61b
commit 703fc70
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 44 deletions.
diff --git a/frontend/src/components/gdpr/gdprbanner.tsx b/frontend/src/components/gdpr/gdprbanner.tsx
@@ -81,7 +81,7 @@ const GDPRBanner: React.FC = () => {
       )}
 
       {showOptOutForm && (
-        <div className="bg-gray-12 p-4 fixed bottom-0 left-1/2 transform -translate-x-1/2 w-full max-w-lg flex flex-col items-center z-50 shadow-md rounded-lg">
+        <div className="bg-gray-12 p-4 fixed bottom-0 left-1/2 transform -translate-x-1/2 w-full max-w-lg flex flex-col items-center z-50 shadow-md rounded-lg border border-gray-2">
           <div className="text-gray-1 text-sm text-center mb-2 max-w-full">
             Please select which services you would like to opt out of.
           </div>

diff --git a/frontend/src/components/listing/ListingImageFlipper.tsx b/frontend/src/components/listing/ListingImageFlipper.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { FaChevronLeft, FaChevronRight, FaTimes } from "react-icons/fa";
 
 import placeholder from "@/components/listing/pics/placeholder.jpg";
@@ -15,7 +15,27 @@ const ListingImageFlipper = (props: Props) => {
   const { artifacts, name, currentImageIndex, setCurrentImageIndex } = props;
   const [isFullScreen, setIsFullScreen] = useState(false);
 
-  if (artifacts.length === 0) {
+  const imageArtifacts = useMemo(
+    () =>
+      artifacts
+        .map((artifact, index) => ({ artifact, originalIndex: index }))
+        .filter(({ artifact }) => artifact.artifact_type === "image")
+        .map(({ artifact, originalIndex }, newIndex) => ({
+          artifact,
+          originalIndex,
+          newIndex,
+        })),
+    [artifacts],
+  );
+
+  const currentImageArrayIndex = useMemo(() => {
+    const found = imageArtifacts.findIndex(
+      ({ originalIndex }) => originalIndex === currentImageIndex,
+    );
+    return found >= 0 ? found : 0;
+  }, [imageArtifacts, currentImageIndex]);
+
+  if (imageArtifacts.length === 0) {
     return (
       <div className="w-full md:w-1/2 relative">
         <div className="aspect-square bg-white rounded-lg overflow-hidden">
@@ -29,7 +49,18 @@ const ListingImageFlipper = (props: Props) => {
     );
   }
 
-  const currentArtifact = artifacts[currentImageIndex];
+  const handleNavigate = (direction: "next" | "prev") => {
+    const nextIndex =
+      direction === "next"
+        ? (currentImageArrayIndex + 1) % imageArtifacts.length
+        : currentImageArrayIndex === 0
+          ? imageArtifacts.length - 1
+          : currentImageArrayIndex - 1;
+
+    setCurrentImageIndex(imageArtifacts[nextIndex].originalIndex);
+  };
+
+  const currentArtifact = imageArtifacts[currentImageArrayIndex].artifact;
 
   return (
     <>
@@ -41,24 +72,16 @@ const ListingImageFlipper = (props: Props) => {
           className="cursor-zoom-in rounded-lg w-[500px]"
         />
         {/* Navigation arrows */}
-        {artifacts.length > 1 && (
+        {imageArtifacts.length > 1 && (
           <>
             <button
-              onClick={() =>
-                setCurrentImageIndex((prev) =>
-                  prev === 0 ? artifacts.length - 1 : prev - 1,
-                )
-              }
+              onClick={() => handleNavigate("prev")}
               className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 w-8 h-8 rounded-full flex items-center justify-center shadow-md border border-gray-11"
             >
               <FaChevronLeft className="text-gray-11" />
             </button>
             <button
-              onClick={() =>
-                setCurrentImageIndex((prev) =>
-                  prev === artifacts.length - 1 ? 0 : prev + 1,
-                )
-              }
+              onClick={() => handleNavigate("next")}
               className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 w-8 h-8 rounded-full flex items-center justify-center shadow-md border border-gray-11"
             >
               <FaChevronRight className="text-gray-11" />

diff --git a/frontend/src/components/listing/ListingRenderer.tsx b/frontend/src/components/listing/ListingRenderer.tsx
@@ -38,7 +38,12 @@ const ListingRenderer = ({ listing }: { listing: ListingResponse }) => {
     reservation_deposit_amount: reservationDepositAmount,
   } = listing;
   const [artifacts, setArtifacts] = useState(initialArtifacts);
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [currentImageIndex, setCurrentImageIndex] = useState(() => {
+    const firstImageIndex = artifacts.findIndex(
+      (artifact) => artifact.artifact_type === "image",
+    );
+    return firstImageIndex >= 0 ? firstImageIndex : 0;
+  });
   const isForSale = priceAmount && stripeProductId && inventoryType;
 
   const handleAddArtifacts = (newArtifacts: Artifact[]) => {

diff --git a/frontend/src/components/listings/ListingGrid.tsx b/frontend/src/components/listings/ListingGrid.tsx
@@ -51,6 +51,15 @@ const ListingGrid = (props: ListingGridProps) => {
 
         const detailsMap: Record<string, ListingDetails> = {};
         data.listings.forEach((listing) => {
+          const firstImageArtifact = listing.artifacts?.find(
+            (artifact) => artifact.artifact_type === "image",
+          );
+          if (firstImageArtifact) {
+            listing.artifacts = [
+              firstImageArtifact,
+              ...listing.artifacts.filter((a) => a !== firstImageArtifact),
+            ];
+          }
           detailsMap[listing.id] = listing;
         });
         setListingDetails(detailsMap);

diff --git a/frontend/src/components/listings/MyListingGrid.tsx b/frontend/src/components/listings/MyListingGrid.tsx
@@ -47,27 +47,39 @@ const MyListingGrid = ({ userId }: MyListingGridProps) => {
       setListingInfos(data.listings);
 
       if (data.listings.length > 0) {
-        const { data: batchData, error: batchError } = await auth.client.GET(
-          "/listings/batch",
-          {
+        const fetchListingDetails = async (ids: string[]) => {
+          const { data, error } = await auth.client.GET("/listings/batch", {
             params: {
               query: {
-                ids: data.listings.map((info: ListingInfo) => info.id),
+                ids: ids,
               },
             },
-          },
-        );
+          });
+
+          if (error) {
+            addErrorAlert(error);
+            return;
+          }
 
-        if (batchError) {
-          addErrorAlert(batchError);
-          return;
-        }
+          const detailsMap: Record<string, ListingDetails> = {};
+          data.listings.forEach((listing: ListingDetails) => {
+            const firstImageArtifact = listing.artifacts?.find(
+              (artifact) => artifact.artifact_type === "image",
+            );
+            if (firstImageArtifact) {
+              listing.artifacts = [
+                firstImageArtifact,
+                ...listing.artifacts.filter((a) => a !== firstImageArtifact),
+              ];
+            }
+            detailsMap[listing.id] = listing;
+          });
+          setListingDetails(detailsMap);
+        };
 
-        const detailsMap: Record<string, ListingDetails> = {};
-        batchData.listings.forEach((listing: ListingDetails) => {
-          detailsMap[listing.id] = listing;
-        });
-        setListingDetails(detailsMap);
+        await fetchListingDetails(
+          data.listings.map((info: ListingInfo) => info.id),
+        );
       }
     };
 

diff --git a/frontend/src/components/listings/UpvotedGrid.tsx b/frontend/src/components/listings/UpvotedGrid.tsx
@@ -78,6 +78,15 @@ const UpvotedGrid = ({ page, setPage }: UpvotedGridProps) => {
 
     const detailsMap: Record<string, ListingDetails> = {};
     data.listings.forEach((listing: ListingDetails) => {
+      const firstImageArtifact = listing.artifacts?.find(
+        (artifact) => artifact.artifact_type === "image",
+      );
+      if (firstImageArtifact) {
+        listing.artifacts = [
+          firstImageArtifact,
+          ...listing.artifacts.filter((a) => a !== firstImageArtifact),
+        ];
+      }
       detailsMap[listing.id] = listing;
     });
     setListingDetails(detailsMap);

diff --git a/frontend/src/components/nav/Navbar.tsx b/frontend/src/components/nav/Navbar.tsx
@@ -57,8 +57,24 @@ const Navbar = () => {
                     onClick={() =>
                       handleFeaturedClick(listing.username, listing.slug)
                     }
-                    variant="outline"
-                    className="px-2 xl:px-3 py-2 text-sm tracking-widest text-gray-1"
+                    variant={
+                      location.pathname ===
+                      ROUTES.BOT.buildPath({
+                        username: listing.username,
+                        slug: listing.slug || "",
+                      })
+                        ? "ghost"
+                        : "outline"
+                    }
+                    className={`px-2 xl:px-3 py-2 text-sm tracking-widest text-gray-1 ${
+                      location.pathname ===
+                      ROUTES.BOT.buildPath({
+                        username: listing.username,
+                        slug: listing.slug || "",
+                      })
+                        ? "underline underline-offset-4 decoration-2"
+                        : ""
+                    }`}
                   >
                     {listing.name}
                   </Button>
@@ -87,9 +103,15 @@ const Navbar = () => {
                     key={item.name}
                     asChild
                     variant={
-                      location.pathname === item.path ? "default" : "outline"
+                      location.pathname.startsWith(item.path)
+                        ? "ghost"
+                        : "outline"
                     }
-                    className="px-2 xl:px-3 py-2 text-sm tracking-widest"
+                    className={`px-2 xl:px-3 py-2 text-sm tracking-widest ${
+                      location.pathname.startsWith(item.path)
+                        ? "underline underline-offset-4 decoration-2"
+                        : ""
+                    }`}
                   >
                     <Link to={item.path}>
                       <div className="flex items-center gap-2">{item.name}</div>
@@ -103,15 +125,31 @@ const Navbar = () => {
                 <>
                   <Button
                     asChild
-                    variant="outline"
-                    className="px-3 py-2 text-gray-1"
+                    variant={
+                      location.pathname.startsWith(ROUTES.ACCOUNT.path)
+                        ? "ghost"
+                        : "outline"
+                    }
+                    className={`px-3 py-2 text-gray-1 ${
+                      location.pathname.startsWith(ROUTES.ACCOUNT.path)
+                        ? "underline underline-offset-4 decoration-2"
+                        : ""
+                    }`}
                   >
                     <Link to={ROUTES.ACCOUNT.path}>Account</Link>
                   </Button>
                   <Button
                     asChild
-                    variant="outline"
-                    className="px-3 py-2 text-gray-1"
+                    variant={
+                      location.pathname.startsWith(ROUTES.LOGOUT.path)
+                        ? "ghost"
+                        : "outline"
+                    }
+                    className={`px-3 py-2 text-gray-1 ${
+                      location.pathname.startsWith(ROUTES.LOGOUT.path)
+                        ? "underline underline-offset-4 decoration-2"
+                        : ""
+                    }`}
                   >
                     <Link to={ROUTES.LOGOUT.path}>Logout</Link>
                   </Button>
@@ -120,15 +158,31 @@ const Navbar = () => {
                 <>
                   <Button
                     asChild
-                    variant="outline"
-                    className="px-3 py-2 text-gray-1"
+                    variant={
+                      location.pathname.startsWith(ROUTES.LOGIN.path)
+                        ? "ghost"
+                        : "outline"
+                    }
+                    className={`px-3 py-2 text-gray-1 ${
+                      location.pathname.startsWith(ROUTES.LOGIN.path)
+                        ? "underline underline-offset-4 decoration-2"
+                        : ""
+                    }`}
                   >
                     <Link to={ROUTES.LOGIN.path}>Log In</Link>
                   </Button>
                   <Button
                     asChild
-                    variant="outline"
-                    className="px-3 py-2 text-gray-1"
+                    variant={
+                      location.pathname.startsWith(ROUTES.SIGNUP.path)
+                        ? "ghost"
+                        : "outline"
+                    }
+                    className={`px-3 py-2 text-gray-1 ${
+                      location.pathname.startsWith(ROUTES.SIGNUP.path)
+                        ? "underline underline-offset-4 decoration-2"
+                        : ""
+                    }`}
                   >
                     <Link to={ROUTES.SIGNUP.path}>Sign Up</Link>
                   </Button>

diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
@@ -28,7 +28,7 @@ const SidebarItem = ({
   <li>
     <button
       onClick={onClick}
-      className="w-full flex items-center py-2 px-3 text-xl text-gray-1 hover:bg-gray-1 hover:text-primary-9 rounded-md"
+      className="w-full flex items-center py-2 px-3 text-xl text-gray-1 hover:bg-gray-11 hover:text-primary-9 rounded-md"
     >
       {icon && <span className="mr-2">{icon}</span>}
       <span className="flex items-center gap-2">