From 9da4d37d446a0ad986cf76f257629b973ddf909f Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Sun, 31 Dec 2023 16:01:17 -0800 Subject: [PATCH] make compatible with multiple store gallery images (#627) * make compatible with multiple store gallery images' * Change into an array * Refactor to make sure first picture is always displayed --- src/store/components/AdminItemPage/index.tsx | 4 ++-- src/store/components/CartDisplay/index.tsx | 4 ++-- src/store/components/ItemCard/index.tsx | 6 ++++-- src/store/components/ItemPage/index.tsx | 5 +++-- src/types.ts | 7 ++++++- src/utils.tsx | 14 +++++++++++++- 6 files changed, 30 insertions(+), 10 deletions(-) diff --git a/src/store/components/AdminItemPage/index.tsx b/src/store/components/AdminItemPage/index.tsx index 2c7f357c..ace0e05d 100644 --- a/src/store/components/AdminItemPage/index.tsx +++ b/src/store/components/AdminItemPage/index.tsx @@ -5,7 +5,7 @@ import * as Yup from 'yup'; import Config from '../../../config'; import { history } from '../../../redux_store'; import { PublicMerchCollection, PublicMerchItem } from '../../../types'; -import { fetchService, notify } from '../../../utils'; +import { fetchService, getDefaultMerchItemPicture, notify } from '../../../utils'; import OptionDisplay from '../OptionDisplay'; import StoreButton from '../StoreButton'; @@ -104,7 +104,7 @@ const AdminItemPage: React.FC = (props) => { collection: item?.collection?.uuid ?? '', itemName: item?.itemName ?? '', description: item?.description ?? '', - existingPicture: item?.picture, + existingPicture: getDefaultMerchItemPicture(item), newPicture: undefined, hidden: item?.hidden ?? false, monthlyLimit: item?.monthlyLimit.toString() ?? '', diff --git a/src/store/components/CartDisplay/index.tsx b/src/store/components/CartDisplay/index.tsx index 7a827e1e..ec7fe048 100644 --- a/src/store/components/CartDisplay/index.tsx +++ b/src/store/components/CartDisplay/index.tsx @@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'; import { Button, Select, Table, Typography } from 'antd'; import { CartItem, PublicMerchItem, PublicMerchItemOption } from '../../../types'; -import { toProperCase } from '../../../utils'; +import { getDefaultMerchItemPicture, toProperCase } from '../../../utils'; import { addToCart, editInCart, removeFromCart } from '../../storeActions'; import './style.less'; @@ -132,7 +132,7 @@ const CartDisplay: React.FC = (props) => { const renderItemImage = (item: PublicMerchItem) => (
- {item.itemName} + {item.itemName}
); diff --git a/src/store/components/ItemCard/index.tsx b/src/store/components/ItemCard/index.tsx index d73ec477..f67444bf 100644 --- a/src/store/components/ItemCard/index.tsx +++ b/src/store/components/ItemCard/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { PublicMerchItem } from '../../../types'; -import { processItem, processItemPrice } from '../../../utils'; +import { getDefaultMerchItemPicture, processItem, processItemPrice } from '../../../utils'; import StorePlus from '../../../assets/icons/store-plus-icon.svg'; import EditableIcon from '../../../assets/icons/editable-icon.svg'; @@ -36,7 +36,9 @@ const ItemCard: React.FC = (props) => { return null; } - const { uuid, itemName, description, picture, hidden } = item; + const { uuid, itemName, description, hidden } = item; + + const picture = getDefaultMerchItemPicture(item); const { outOfStock } = processItem(item.options); diff --git a/src/store/components/ItemPage/index.tsx b/src/store/components/ItemPage/index.tsx index 7339bdd8..f1a5d2dd 100644 --- a/src/store/components/ItemPage/index.tsx +++ b/src/store/components/ItemPage/index.tsx @@ -5,7 +5,7 @@ import { replace } from 'connected-react-router'; import { Modal } from 'antd'; import { PublicMerchItemWithPurchaseLimits, PublicMerchItemOption, UserAccessType } from '../../../types'; -import { processItem, processItemPrice } from '../../../utils'; +import { getDefaultMerchItemPicture, processItem, processItemPrice } from '../../../utils'; import { addToCart } from '../../storeActions'; import StoreHeader from '../StoreHeader'; @@ -42,7 +42,8 @@ const ItemPage: React.FC = (props) => { const { outOfStock: optionOutOfStock } = currentOption ? processItem([currentOption]) : { outOfStock: false }; const itemOptionPrice = currentOption ? processItemPrice([currentOption]) : null; - const { itemName, description, hasVariantsEnabled, options, picture, hidden } = item; + const { itemName, description, hasVariantsEnabled, options, hidden } = item; + const picture = getDefaultMerchItemPicture(item); const limitHit = item.monthlyRemaining === 0 || item.lifetimeRemaining === 0; let limitMessage; diff --git a/src/types.ts b/src/types.ts index b2c9f6ed..c79aaa03 100644 --- a/src/types.ts +++ b/src/types.ts @@ -78,7 +78,12 @@ export interface PublicMerchItem { uuid: Uuid; itemName: string; collection?: PublicMerchCollection; - picture: string; + merchPhotos: { + uuid: string; + uploadedPhoto: string; + uploadedAt: string; + position: number; + }[]; description: string; monthlyLimit: number; lifetimeLimit: number; diff --git a/src/utils.tsx b/src/utils.tsx index b0192919..21f07c7d 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { notification } from 'antd'; import Storage from './storage'; -import { HttpRequestMethod, MimeType, FetchServiceOptions, PublicMerchItemOption, OrderStatus } from './types'; +import { HttpRequestMethod, MimeType, FetchServiceOptions, PublicMerchItemOption, OrderStatus, PublicMerchItem } from './types'; import DiamondDisplay from './store/components/DiamondDisplay'; @@ -309,3 +309,15 @@ export const parseOrderStatus = (status: OrderStatus) => { return ''; } }; + +/** + * Given a merch item, return the first picture associated with it. + */ +export const getDefaultMerchItemPicture = (item: PublicMerchItem | undefined): string | undefined => { + if (item && item.merchPhotos.length !== 0) { + // Get the item here with the smallest position (since it doesn't always arrive sorted) + item.merchPhotos.sort((a, b) => a.position - b.position); + return item.merchPhotos[0].uploadedPhoto; + } + return undefined; +};