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

@@ -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<AdminItemPageProps> = (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() ?? '',

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<CartDisplayProps> = (props) => {
 
   const renderItemImage = (item: PublicMerchItem) => (
     <div className="image-container">
-      <img className="image" src={item.picture} alt={item.itemName} />
+      <img className="image" src={getDefaultMerchItemPicture(item)} alt={item.itemName} />
     </div>
   );
 

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<ItemCardProps> = (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);
 

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<ItemPageProps> = (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;

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;

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;
+};