Issue #17 - Catalog room events

src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx

@@ -1,8 +1,8 @@
-import { GetRoomAdPurchaseInfoComposer, GetUserEventCatsMessageComposer, PurchaseRoomAdMessageComposer, RoomAdPurchaseInfoEvent, RoomEntryData, UserEventCatsEvent } from '@nitrots/nitro-renderer';
+import { GetRoomAdPurchaseInfoComposer, GetUserEventCatsMessageComposer, PurchaseRoomAdMessageComposer, RoomAdPurchaseInfoEvent, RoomEntryData } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../../api';
 import { Base, Button, Column, Text } from '../../../../../common';
-import { useMessageEvent } from '../../../../../hooks';
+import { useCatalog, useMessageEvent, useNavigator, useRoomPromote } from '../../../../../hooks';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 
 export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
@@ -14,7 +14,33 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
     const [ availableRooms, setAvailableRooms ] = useState<RoomEntryData[]>([]);
     const [ extended, setExtended ] = useState<boolean>(false);
     const [ categoryId, setCategoryId ] = useState<number>(1);
-    const [ categories, setCategories ] = useState<INavigatorCategory[]>(null);
+    const { categories = null } = useNavigator();
+    const { setIsVisible = null } = useCatalog();
+    const { promoteInformation, isExtended, setIsExtended } = useRoomPromote();
+
+    useEffect(() =>
+    {
+        if(isExtended)
+        {
+            setRoomId(promoteInformation.data.flatId);
+            setEventName(promoteInformation.data.eventName);
+            setEventDesc(promoteInformation.data.eventDescription);
+            setCategoryId(promoteInformation.data.categoryId);
+            setExtended(isExtended); // This is for sending to packet
+            setIsExtended(false); // This is from hook useRoomPromotte
+        }
+
+    }, [ isExtended, eventName, eventDesc, categoryId ]);
+
+    const resetData = () =>
+    {
+        setRoomId(-1);
+        setEventName('');
+        setEventDesc('');
+        setCategoryId(1);
+        setIsExtended(false);
+        setIsVisible(false);
+    }
 
     const purchaseAd = () =>
     {
@@ -25,7 +51,8 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
         const desc = eventDesc;
         const catId = categoryId;
 
-        SendMessageComposer(new PurchaseRoomAdMessageComposer(pageId, offerId, flatId, name, extended, desc, catId))
+        SendMessageComposer(new PurchaseRoomAdMessageComposer(pageId, offerId, flatId, name, extended, desc, catId));
+        resetData();
     }
 
     useMessageEvent<RoomAdPurchaseInfoEvent>(RoomAdPurchaseInfoEvent, event =>
@@ -37,13 +64,6 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
         setAvailableRooms(parser.rooms);
     });
 
-    useMessageEvent<UserEventCatsEvent>(UserEventCatsEvent, event =>
-    {
-        const parser = event.getParser();
-
-        setCategories(parser.categories);
-    });
-
     useEffect(() =>
     {
         SendMessageComposer(new GetRoomAdPurchaseInfoComposer());
@@ -54,30 +74,31 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
     return (<>
         <Text bold center>{ LocalizeText('roomad.catalog_header') }</Text>
         <Column size={ 12 } overflow="hidden" className="text-black">
-            <Base>{ LocalizeText('roomad.catalog_text') }</Base>
+            <Base>{ LocalizeText('roomad.catalog_text', [ 'duration' ], [ '120' ]) }</Base>
             <Base className="bg-muted rounded p-1">
                 <Column gap={ 2 }>
-                    <select className="form-select form-select-sm" value={ categoryId } onChange={ event => setCategoryId(parseInt(event.target.value)) }>
-                        { categories && categories.map((cat, index) => <option key={ index } value={ cat.id }>{ cat.name }</option>) }
+                    <Text bold>{ LocalizeText('navigator.category') }</Text>
+                    <select className="form-select form-select-sm" value={ categoryId } onChange={ event => setCategoryId(parseInt(event.target.value)) } disabled={ extended }>
+                        { categories && categories.map((cat, index) => <option key={ index } value={ cat.id }>{ LocalizeText(cat.name) }</option>) }
                     </select>
                 </Column>
                 <Column gap={ 1 }>
                     <Text bold>{ LocalizeText('roomad.catalog_name') }</Text>
-                    <input type="text" className="form-control form-control-sm" maxLength={ 64 } value={ eventName } onChange={ event => setEventName(event.target.value) } />
+                    <input type="text" className="form-control form-control-sm" maxLength={ 64 } value={ eventName } onChange={ event => setEventName(event.target.value) } readOnly={ extended } />
                 </Column>
                 <Column gap={ 1 }>
                     <Text bold>{ LocalizeText('roomad.catalog_description') }</Text>
-                    <textarea className="form-control form-control-sm" maxLength={ 64 } value={ eventDesc } onChange={ event => setEventDesc(event.target.value) }/>
+                    <textarea className="form-control form-control-sm" maxLength={ 64 } value={ eventDesc } onChange={ event => setEventDesc(event.target.value) } readOnly={ extended } />
                 </Column>
                 <Column gap={ 1 }>
                     <Text bold>{ LocalizeText('roomad.catalog_roomname') }</Text>
-                    <select className="form-select form-select-sm" value={ roomId } onChange={ event => setRoomId(parseInt(event.target.value)) }>
+                    <select className="form-select form-select-sm" value={ roomId } onChange={ event => setRoomId(parseInt(event.target.value)) } disabled={ extended }>
                         <option value={ -1 } disabled>{ LocalizeText('roomad.catalog_roomname') }</option>
                         { availableRooms && availableRooms.map((room, index) => <option key={ index } value={ room.roomId }>{ room.roomName }</option>) }
                     </select>
                 </Column>
                 <Column gap={ 1 }>
-                    <Button onClick={ purchaseAd }>{ LocalizeText('buy') }</Button>
+                    <Button variant={ (!eventName || !eventDesc || roomId === -1) ? 'danger' : 'success' } onClick={ purchaseAd } disabled={ (!eventName || !eventDesc || roomId === -1) }>{ extended ? LocalizeText('roomad.extend.event') : LocalizeText('buy') }</Button>
                 </Column>
             </Base>
         </Column>

src/components/right-side/RightSideView.tsx

@@ -3,6 +3,7 @@ import { Column } from '../../common';
 import { GroupRoomInformationView } from '../groups/views/GroupRoomInformationView';
 import { NotificationCenterView } from '../notification-center/NotificationCenterView';
 import { PurseView } from '../purse/PurseView';
+import { RoomPromotesWidgetView } from '../room/widgets/room-promotes/RoomPromotesWidgetView';
 
 export const RightSideView: FC<{}> = props =>
 {
@@ -11,6 +12,7 @@ export const RightSideView: FC<{}> = props =>
             <Column position="relative" gap={ 1 }>
                 <PurseView />
                 <GroupRoomInformationView />
+                <RoomPromotesWidgetView />
                 <NotificationCenterView />
             </Column>
         </div>

src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx

@@ -0,0 +1,55 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { DesktopViewEvent } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { GetSessionDataManager } from '../../../../api';
+import { Base, Column, Flex, Text } from '../../../../common';
+import { useMessageEvent, useRoomPromote } from '../../../../hooks';
+import { RoomPromoteEditWidgetView, RoomPromoteMyOwnEventWidgetView, RoomPromoteOtherEventWidgetView } from './views';
+
+export const RoomPromotesWidgetView: FC<{}> = props =>
+{
+    const [ isEditingPromote, setIsEditingPromote ] = useState<boolean>(false);
+    const [ isOpen, setIsOpen ] = useState<boolean>(true);
+    const { promoteInformation, setPromoteInformation } = useRoomPromote();
+
+    useMessageEvent<DesktopViewEvent>(DesktopViewEvent, event =>
+    {
+        setPromoteInformation(null);
+    });
+
+    if(!promoteInformation) return null;
+
+    return (
+        <>
+            { promoteInformation.data.adId !== -1 &&
+                <Base className="nitro-notification-bubble rounded">
+                    <Column>
+                        <Flex alignItems="center" justifyContent="between" pointer onClick={ event => setIsOpen(value => !value) }>
+                            <Text variant="white" overflow="hidden">{ promoteInformation.data.eventName }</Text>
+                            <FontAwesomeIcon icon={ isOpen ? 'chevron-up' : 'chevron-down' } />
+                        </Flex>
+                        { (isOpen && GetSessionDataManager().userId !== promoteInformation.data.ownerAvatarId) &&
+                            <RoomPromoteOtherEventWidgetView
+                                eventDescription={ promoteInformation.data.eventDescription }
+                            />
+                        }
+                        { (isOpen && GetSessionDataManager().userId === promoteInformation.data.ownerAvatarId) &&
+                            <RoomPromoteMyOwnEventWidgetView
+                                eventDescription={ promoteInformation.data.eventDescription }
+                                setIsEditingPromote={ () => setIsEditingPromote(true) }
+                            />
+                        }
+                        { isEditingPromote &&
+                            <RoomPromoteEditWidgetView
+                                eventId={ promoteInformation.data.adId }
+                                eventName={ promoteInformation.data.eventName }
+                                eventDescription={ promoteInformation.data.eventDescription }
+                                setIsEditingPromote={ () => setIsEditingPromote(false) }
+                            />
+                        }
+                    </Column>
+                </Base>
+            }
+        </>
+    );
+};

src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx

@@ -0,0 +1,44 @@
+import { EditEventMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { LocalizeText, SendMessageComposer } from '../../../../../api';
+import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
+
+interface RoomPromoteEditWidgetViewProps
+{
+    eventId: number;
+    eventName: string;
+    eventDescription: string;
+    setIsEditingPromote: (value: boolean) => void;
+}
+
+export const RoomPromoteEditWidgetView: FC<RoomPromoteEditWidgetViewProps> = props =>
+{
+    const { eventId = -1, eventName = '', eventDescription = '', setIsEditingPromote = null } = props;
+    const [ newEventName, setNewEventName ] = useState<string>(eventName);
+    const [ newEventDescription, setNewEventDescription ] = useState<string>(eventDescription);
+
+    const updatePromote = () =>
+    {
+        SendMessageComposer(new EditEventMessageComposer(eventId, newEventName, newEventDescription));
+        setIsEditingPromote(false);
+    }
+
+    return (
+        <NitroCardView className="nitro-guide-tool" theme="primary-slim">
+            <NitroCardHeaderView headerText={ LocalizeText('navigator.eventsettings.editcaption') } onCloseClick={ () => setIsEditingPromote(false) } />
+            <NitroCardContentView className="text-black">
+                <Column>
+                    <Text bold>{ LocalizeText('navigator.eventsettings.name') }</Text>
+                    <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.eventsettings.name') } maxLength={ 64 } value={ newEventName } onChange={ event => setNewEventName(event.target.value) } />
+                </Column>
+                <Column>
+                    <Text bold>{ LocalizeText('navigator.eventsettings.desc') }</Text>
+                    <textarea className="form-control form-control-sm" placeholder={ LocalizeText('navigator.eventsettings.desc') } maxLength={ 64 } value={ newEventDescription } onChange={ event => setNewEventDescription(event.target.value) }></textarea>
+                </Column>
+                <Column>
+                    <Button fullWidth disabled={ !newEventName || !newEventDescription } variant={ (!newEventName || !newEventDescription) ? 'danger' : 'success' } onClick={ event => updatePromote() }>{ LocalizeText('navigator.eventsettings.edit') }</Button>
+                </Column>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+};

src/components/room/widgets/room-promotes/views/RoomPromoteMyOwnEventWidgetView.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { CreateLinkEvent, LocalizeText } from '../../../../../api';
+import { Button, Flex, Grid, Text } from '../../../../../common';
+import { useRoomPromote } from '../../../../../hooks';
+
+interface RoomPromoteMyOwnEventWidgetViewProps
+{
+    eventDescription: string;
+    setIsEditingPromote: (value: boolean) => void;
+}
+
+export const RoomPromoteMyOwnEventWidgetView: FC<RoomPromoteMyOwnEventWidgetViewProps> = props =>
+{
+    const { eventDescription = '', setIsEditingPromote = null } = props;
+    const { setIsExtended } = useRoomPromote();
+
+    const extendPromote = () =>
+    {
+        setIsExtended(true);
+        CreateLinkEvent('catalog/open/room_event');
+    }
+
+    return (
+        <>
+            <Flex alignItems="center" gap={ 2 } style={ { overflowWrap: 'anywhere' } }>
+                <Text variant="white">{ eventDescription }</Text>
+            </Flex>
+            <br /><br />
+            <Grid className="d-flex align-items-center justify-content-end gap-2">
+                <Button className="btn btn-primary w-100 btn-sm" onClick={ event => setIsEditingPromote(true) }>{ LocalizeText('navigator.roominfo.editevent') }</Button>
+                <Button className="btn btn-success w-100 btn-sm" onClick={ event => extendPromote() }>{ LocalizeText('roomad.extend.event') }</Button>
+            </Grid>
+        </>
+    );
+};

src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { Base, Column, Flex, Text } from '../../../../../common';
+
+interface RoomPromoteOtherEventWidgetViewProps
+{
+    eventDescription: string;
+}
+
+export const RoomPromoteOtherEventWidgetView: FC<RoomPromoteOtherEventWidgetViewProps> = props =>
+{
+    const { eventDescription = '' } = props;
+
+    return (
+        <>
+            <Flex alignItems="center" gap={ 2 } style={ { overflowWrap: 'anywhere' } }>
+                <Text variant="white">{ eventDescription }</Text>
+            </Flex>
+            <br /><br />
+            <Column alignItems="center" gap={ 1 }>
+                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
+                    <Flex fit center position="absolute">
+                        <Text variant="white" center>{ LocalizeText('navigator.eventinprogress') }</Text>
+                    </Flex>
+                    <Text>&nbsp;</Text>
+                </Base>
+            </Column>
+        </>
+    );
+};

src/components/room/widgets/room-promotes/views/index.ts

@@ -0,0 +1,3 @@
+export * from './RoomPromoteEditWidgetView';
+export * from './RoomPromoteMyOwnEventWidgetView';
+export * from './RoomPromoteOtherEventWidgetView';

src/hooks/rooms/index.ts

@@ -1,3 +1,4 @@
 export * from './engine';
+export * from './promotes';
 export * from './useRoom';
 export * from './widgets';

src/hooks/rooms/promotes/index.ts

@@ -0,0 +1 @@
+export * from './useRoomPromote';

src/hooks/rooms/promotes/useRoomPromote.ts

@@ -0,0 +1,23 @@
+import { RoomEventEvent, RoomEventMessageParser } from '@nitrots/nitro-renderer';
+import { useState } from 'react';
+import { useBetween } from 'use-between';
+import { useMessageEvent } from '../../events';
+
+const useRoomPromoteState = () =>
+{
+    const [ promoteInformation, setPromoteInformation ] = useState<RoomEventMessageParser>(null);
+    const [ isExtended, setIsExtended ] = useState<boolean>(false);
+
+    useMessageEvent<RoomEventEvent>(RoomEventEvent, event =>
+    {
+        const parser = event.getParser();
+
+        if (!parser) return;
+
+        setPromoteInformation(parser);
+    });
+
+    return { promoteInformation, isExtended, setPromoteInformation, setIsExtended };
+}
+
+export const useRoomPromote = () => useBetween(useRoomPromoteState);