nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

CatalogGroupForumLayout

Browse Source
This commit is contained in:
MyNameIsBatman 2021-09-06 04:19:11 -03:00
parent b4c69fba43
commit be61c0b4a8
2 changed files with 43 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/catalog/views/page/layout/guild-custom-furni/CatalogLayoutGuildCustomFurniView.tsx
View File

@ -15,10 +15,12 @@ import { CatalogLayoutGuildCustomFurniViewProps } from './CatalogLayoutGuildCust
export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutGuildCustomFurniViewProps> = props =>
{
const { roomPreviewer = null, pageParser = null } = props;
const [ selectedGroupIndex, setSelectedGroupIndex ] = useState<number>(0);
const { catalogState = null } = useCatalogContext();
const { activeOffer = null, groups = null } = catalogState;
const [ selectedGroupIndex, setSelectedGroupIndex ] = useState<number>(0);
useEffect(() =>
{
SendMessageHook(new CatalogGroupsComposer());

45
src/views/catalog/views/page/layout/guild-forum/CatalogLayoutGuildForumView.tsx
View File

@ -1,10 +1,12 @@
import { CatalogGroupsComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react';
import { LocalizeText } from '../../../../../../api';
import { CatalogGroupsComposer, HabboGroupEntryData } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { GetSessionDataManager, LocalizeText } from '../../../../../../api';
import { SendMessageHook } from '../../../../../../hooks/messages';
import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
import { GetCatalogPageText } from '../../../../common/CatalogUtilities';
import { useCatalogContext } from '../../../../context/CatalogContext';
import { CatalogActions } from '../../../../reducers/CatalogReducer';
import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
import { CatalogLayoutGuildForumViewProps } from './CatalogLayoutGuildForumView.types';
export const CatalogLayouGuildForumView: FC<CatalogLayoutGuildForumViewProps> = props =>
@ -14,6 +16,9 @@ export const CatalogLayouGuildForumView: FC<CatalogLayoutGuildForumViewProps> =
const { catalogState = null, dispatchCatalogState = null } = useCatalogContext();
const { activeOffer = null, groups = null } = catalogState;
const [ selectedGroupIndex, setSelectedGroupIndex ] = useState<number>(0);
const [ availableGroups, setAvailableGroups ] = useState<HabboGroupEntryData[]>([]);
const product = ((activeOffer && activeOffer.products[0]) || null);
useEffect(() =>
@ -31,16 +36,46 @@ export const CatalogLayouGuildForumView: FC<CatalogLayoutGuildForumViewProps> =
}
}, [ dispatchCatalogState, pageParser ]);
useEffect(() =>
{
const available: HabboGroupEntryData[] = [];
groups.forEach((group) =>
{
if(!group.hasForum && group.ownerId === GetSessionDataManager().userId) available.push(group);
});
setAvailableGroups(available);
}, [ groups ]);
return (
<div className="row h-100 nitro-catalog-layout-guild-custom-furni">
<div className="col-7 overflow-auto h-100 d-flex flex-column bg-muted rounded py-1 px-2 text-black">
<div dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 1) } } />
</div>
<div className="col position-relative d-flex flex-column justify-content-center">
{ groups.length === 0 && <div className="bg-muted text-center rounded p-1 text-black">
<div className="col position-relative d-flex flex-column justify-content-center align-items-center">
{ availableGroups.length === 0 && <div className="bg-muted text-center rounded p-1 text-black">
{ LocalizeText('catalog.guild_selector.members_only') }
<button className="btn btn-sm btn-primary mt-1">{ LocalizeText('catalog.guild_selector.find_groups') }</button>
</div> }
{ availableGroups[selectedGroupIndex] && <div style={{ width: '50px', height: '50px', zIndex: 1 }}>
<BadgeImageView badgeCode={ availableGroups[selectedGroupIndex].badgeCode } isGroup={ true } />
</div> }
{ availableGroups.length > 0 && <>
<div className="d-flex mb-2 w-100">
<div className="rounded d-flex overflow-hidden me-1 border">
<div className="h-100" style={{ width: '20px', backgroundColor: '#' + availableGroups[selectedGroupIndex].colorA }}></div>
<div className="h-100" style={{ width: '20px', backgroundColor: '#' + availableGroups[selectedGroupIndex].colorB }}></div>
</div>
<select className="form-select form-select-sm" value={ selectedGroupIndex } onChange={ (e) => setSelectedGroupIndex(parseInt(e.target.value)) }>
{ availableGroups.map((group, index) =>
{
return <option key={ index } value={ index }>{ group.groupName }</option>;
}) }
</select>
</div>
<CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ availableGroups[selectedGroupIndex] ? availableGroups[selectedGroupIndex].groupId.toString() : '' } />
</> }
</div>
</div>
);