Merge branch 'fix-calendar' into 'dev'

Fix calendar customImage

See merge request nitro/nitro-react!1

src/components/campaign/CalendarItemView.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
-import { GetRoomEngine, GetSessionDataManager } from '../../api';
+import { GetConfiguration, GetRoomEngine, GetSessionDataManager } from '../../api';
 import { Base, Column, Flex, LayoutImage } from '../../common';
+import { CalendarItem } from './common/CalendarItem';
 import { CalendarItemState } from './common/CalendarItemState';
 
 interface CalendarItemViewProps
@@ -8,13 +9,13 @@ interface CalendarItemViewProps
     itemId: number;
     state: number;
     active?: boolean;
-    productName?: string;
+    product?: CalendarItem;
     onClick: (itemId: number) => void;
 }
 
 export const CalendarItemView: FC<CalendarItemViewProps> = props =>
 {
-    const { itemId = -1, state = null, productName = null, active = false, onClick = null } = props;
+    const { itemId = -1, state = null, product = null, active = false, onClick = null } = props;
     
     const getFurnitureIcon = (name: string) =>
     {
@@ -37,8 +38,8 @@ export const CalendarItemView: FC<CalendarItemViewProps> = props =>
             { (state === CalendarItemState.STATE_UNLOCKED) &&
                 <Flex center className="campaign-spritesheet unlocked-bg">
                     <Flex center className="campaign-spritesheet campaign-opened">
-                        { productName &&
-                            <LayoutImage imageUrl={ getFurnitureIcon(productName) } /> }
+                        { product &&
+                            <LayoutImage imageUrl={ product.customImage ? GetConfiguration<string>('image.library.url') + product.customImage : getFurnitureIcon(product.productName) } /> }
                     </Flex>
                 </Flex> }
             { (state !== CalendarItemState.STATE_UNLOCKED) &&

src/components/campaign/CalendarView.tsx

@@ -2,13 +2,14 @@ import { FC, useState } from 'react';
 import { GetSessionDataManager, LocalizeText } from '../../api';
 import { Base, Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { CalendarItemView } from './CalendarItemView';
+import { CalendarItem } from './common/CalendarItem';
 import { CalendarItemState } from './common/CalendarItemState';
 
 interface CalendarViewProps
 {
     close(): void;
     openPackage(id: number, asStaff: boolean): void;
-    receivedProducts: Map<number, string>;
+    receivedProducts: Map<number, CalendarItem>;
     campaignName: string;
     currentDay: number;
     numDays: number;
@@ -128,7 +129,7 @@ export const CalendarView: FC<CalendarViewProps> = props =>
                                     
                                     return (
                                         <Column key={ i } overflow="hidden">
-                                            <CalendarItemView itemId={ day } state={ getDayState(day) } active={ (selectedDay === day) } productName={ receivedProducts.has(day) ? receivedProducts.get(day) : null } onClick={ onClickItem } />
+                                            <CalendarItemView itemId={ day } state={ getDayState(day) } active={ (selectedDay === day) } product={ receivedProducts.has(day) ? receivedProducts.get(day) : null } onClick={ onClickItem } />
                                         </Column>
                                     );
                                 }) }

src/components/campaign/CampaignView.tsx

@@ -3,12 +3,13 @@ import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, RemoveLinkEventTracker, SendMessageComposer } from '../../api';
 import { BatchUpdates, UseMessageEventHook } from '../../hooks';
 import { CalendarView } from './CalendarView';
+import { CalendarItem } from './common/CalendarItem';
 
 export const CampaignView: FC<{}> = props =>
 {
     const [ calendarData, setCalendarData ] = useState<CampaignCalendarData>(null);
     const [ lastOpenAttempt, setLastOpenAttempt ] = useState<number>(-1);
-    const [ receivedProducts, setReceivedProducts ] = useState<Map<number, string>>(new Map());
+    const [ receivedProducts, setReceivedProducts ] = useState<Map<number, CalendarItem>>(new Map());
     const [ isCalendarOpen, setCalendarOpen ] = useState(false);
     
     const onCampaignCalendarDataMessageEvent = useCallback((event: CampaignCalendarDataMessageEvent) =>
@@ -44,7 +45,7 @@ export const CampaignView: FC<{}> = props =>
                     setReceivedProducts(prev =>
                     {
                         const copy = new Map(prev);
-                        copy.set(lastAttempt, parser.furnitureClassName);
+                        copy.set(lastAttempt, new CalendarItem(parser.productName, parser.customImage,parser.furnitureClassName));
                         
                         return copy;
                     });

src/components/campaign/common/CalendarItem.ts

@@ -0,0 +1,30 @@
+import { ICalendarItem } from './ICalendarItem';
+
+export class CalendarItem implements ICalendarItem
+{
+    private _productName: string;
+    private _customImage: string;
+    private _furnitureClassName: string;
+
+    constructor(productName: string, customImage: string, furnitureClassName: string)
+    {
+        this._productName = productName;
+        this._customImage = customImage;
+        this._furnitureClassName = furnitureClassName;
+    }
+
+    public get productName(): string
+    {
+        return this._productName;
+    }
+
+    public get customImage(): string
+    {
+        return this._customImage;
+    }
+
+    public get furnitureClassName(): string
+    {
+        return this._furnitureClassName;
+    }
+}

src/components/campaign/common/ICalendarItem.ts

@@ -0,0 +1,6 @@
+export interface ICalendarItem
+{
+    readonly productName: string;
+    readonly customImage: string;
+    readonly furnitureClassName: string;
+}