Store: show second merch image on hover (#235)

* Cross fade between first two images * Circle effect from mouse * refactor: Rename auth/SignIn components to common/VerticalForm because they're used for more than just signing in * fix type error * switch to cross fade * remove redundant overflow hidden unsure if it was necessary * fix icon layering
acmucsd · May 4, 2024 · ac77e3b · ac77e3b
1 parent 03e2a12
commit ac77e3b
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 22 deletions.
diff --git a/src/components/store/CollectionSlider/index.tsx b/src/components/store/CollectionSlider/index.tsx
@@ -5,7 +5,6 @@ import ItemCard from '@/components/store/ItemCard';
 import StoreEditButton from '@/components/store/StoreEditButton';
 import { config } from '@/lib';
 import { PublicMerchItem } from '@/lib/types/apiResponses';
-import { getDefaultMerchItemPhoto } from '@/lib/utils';
 import Link from 'next/link';
 import styles from './style.module.scss';
 
@@ -40,7 +39,9 @@ const CollectionSlider = ({
           .map(item => (
             <ItemCard
               className={styles.card}
-              image={getDefaultMerchItemPhoto(item)}
+              images={[...item.merchPhotos]
+                .sort((a, b) => a.position - b.position)
+                .map(photo => photo.uploadedPhoto)}
               title={item.itemName}
               href={`${config.store.itemRoute}${item.uuid}`}
               cost={item.options[0]?.price ?? 0}

diff --git a/src/components/store/ItemCard/index.tsx b/src/components/store/ItemCard/index.tsx
@@ -1,11 +1,12 @@
 import Diamonds from '@/components/store/Diamonds';
+import NoImage from '@/public/assets/graphics/cat404.png';
 import Image from 'next/image';
 import Link from 'next/link';
 import { PropsWithChildren } from 'react';
 import styles from './style.module.scss';
 
 interface CommonOptions {
-  image: string;
+  images: string[];
   title: string;
   href: string;
   className?: string;
@@ -29,18 +30,21 @@ type ItemCardProps = (StoreItemOptions | CollectionOptions) & CommonOptions;
  * - a collection with a `description`.
  */
 const ItemCard = ({
-  image,
+  images,
   title,
   href,
   className,
   children,
   ...props
 }: PropsWithChildren<ItemCardProps>) => {
+  const [first = NoImage, second = first] = images;
+
   return (
     <article className={`${styles.itemCard} ${className}`}>
       <Link href={href} className={styles.linkWrapper}>
         <div className={styles.imageWrapper}>
-          <Image src={image} alt={title} fill />
+          <Image className={styles.first} src={first} alt={title} fill />
+          <Image src={second} alt="" aria-hidden fill />
         </div>
         <div className={styles.details}>
           <p className={styles.title}>{title}</p>

diff --git a/src/components/store/ItemCard/style.module.scss b/src/components/store/ItemCard/style.module.scss
@@ -30,6 +30,15 @@
     img {
       object-fit: cover;
     }
+
+    .first {
+      transition: opacity 0.5s;
+      z-index: 1;
+    }
+  }
+
+  &:hover .imageWrapper .first {
+    opacity: 0;
   }
 
   .details {
@@ -63,5 +72,6 @@
     position: absolute;
     right: 0.5rem;
     top: 0.5rem;
+    z-index: 2;
   }
 }
diff --git a/src/components/store/ItemCard/style.module.scss.d.ts b/src/components/store/ItemCard/style.module.scss.d.ts
@@ -1,6 +1,7 @@
 export type Styles = {
   cost: string;
   details: string;
+  first: string;
   icons: string;
   imageWrapper: string;
   itemCard: string;

diff --git a/src/pages/store/collection/[uuid].tsx b/src/pages/store/collection/[uuid].tsx
@@ -6,7 +6,7 @@ import withAccessType, { GetServerSidePropsWithAuth } from '@/lib/hoc/withAccess
 import { CookieService, PermissionService } from '@/lib/services';
 import { PrivateProfile, PublicMerchCollection } from '@/lib/types/apiResponses';
 import { CookieType } from '@/lib/types/enums';
-import { getDefaultMerchCollectionPhoto, getDefaultMerchItemPhoto } from '@/lib/utils';
+import { getDefaultMerchCollectionPhoto } from '@/lib/utils';
 import styles from '@/styles/pages/StoreCollectionPage.module.scss';
 import Image from 'next/image';
 import { useMemo } from 'react';
@@ -64,7 +64,9 @@ const CollectionsPage = ({
           .filter(item => storeAdminVisible || !item.hidden)
           .map(item => (
             <ItemCard
-              image={getDefaultMerchItemPhoto(item)}
+              images={[...item.merchPhotos]
+                .sort((a, b) => a.position - b.position)
+                .map(photo => photo.uploadedPhoto)}
               title={item.itemName}
               href={`${config.store.itemRoute}${item.uuid}`}
               cost={item.options[0]?.price ?? 0}

diff --git a/src/pages/store/index.tsx b/src/pages/store/index.tsx
@@ -14,7 +14,6 @@ import withAccessType, { GetServerSidePropsWithAuth } from '@/lib/hoc/withAccess
 import { CookieService, PermissionService } from '@/lib/services';
 import { PrivateProfile, PublicMerchCollection } from '@/lib/types/apiResponses';
 import { CookieType } from '@/lib/types/enums';
-import { getDefaultMerchCollectionPhoto } from '@/lib/utils';
 import styles from '@/styles/pages/StoreHomePage.module.scss';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -96,20 +95,35 @@ const StoreHomePage = ({
         </div>
         {view === 'collections' ? (
           <div className={styles.collections}>
-            {visibleCollections.map(collection => (
-              <ItemCard
-                image={getDefaultMerchCollectionPhoto(collection)}
-                title={collection.title}
-                description={collection.description}
-                href={`${config.store.collectionRoute}${collection.uuid}`}
-                key={collection.uuid}
-              >
-                {storeAdminVisible && collection.archived ? <HiddenIcon type="collection" /> : null}
-                {storeAdminVisible ? (
-                  <StoreEditButton type="collection" uuid={collection.uuid} />
-                ) : null}
-              </ItemCard>
-            ))}
+            {visibleCollections.map(collection => {
+              const collectionPhotos = [...collection.collectionPhotos]
+                .sort((a, b) => a.position - b.position)
+                .map(photo => photo.uploadedPhoto);
+              return (
+                <ItemCard
+                  images={
+                    collectionPhotos.length > 0
+                      ? collectionPhotos
+                      : // Default to using item photos if there are no collection photos
+                        collection.items
+                          .flatMap(item => item.merchPhotos)
+                          .sort((a, b) => a.position - b.position)
+                          .map(photo => photo.uploadedPhoto)
+                  }
+                  title={collection.title}
+                  description={collection.description}
+                  href={`${config.store.collectionRoute}${collection.uuid}`}
+                  key={collection.uuid}
+                >
+                  {storeAdminVisible && collection.archived ? (
+                    <HiddenIcon type="collection" />
+                  ) : null}
+                  {storeAdminVisible ? (
+                    <StoreEditButton type="collection" uuid={collection.uuid} />
+                  ) : null}
+                </ItemCard>
+              );
+            })}
             {storeAdminVisible ? (
               <CreateButton type="collection">Create a collection</CreateButton>
             ) : null}