mirror of
https://github.com/billsonnn/nitro-react.git
synced 2025-01-18 21:36:27 +01:00
CatalogGroupForumLayout
This commit is contained in:
parent
b4c69fba43
commit
be61c0b4a8
@ -15,9 +15,11 @@ import { CatalogLayoutGuildCustomFurniViewProps } from './CatalogLayoutGuildCust
|
|||||||
export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutGuildCustomFurniViewProps> = props =>
|
export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutGuildCustomFurniViewProps> = props =>
|
||||||
{
|
{
|
||||||
const { roomPreviewer = null, pageParser = null } = props;
|
const { roomPreviewer = null, pageParser = null } = props;
|
||||||
const [ selectedGroupIndex, setSelectedGroupIndex ] = useState<number>(0);
|
|
||||||
const { catalogState = null } = useCatalogContext();
|
const { catalogState = null } = useCatalogContext();
|
||||||
const { activeOffer = null, groups = null } = catalogState;
|
const { activeOffer = null, groups = null } = catalogState;
|
||||||
|
|
||||||
|
const [ selectedGroupIndex, setSelectedGroupIndex ] = useState<number>(0);
|
||||||
|
|
||||||
useEffect(() =>
|
useEffect(() =>
|
||||||
{
|
{
|
||||||
|
@ -1,10 +1,12 @@
|
|||||||
import { CatalogGroupsComposer } from '@nitrots/nitro-renderer';
|
import { CatalogGroupsComposer, HabboGroupEntryData } from '@nitrots/nitro-renderer';
|
||||||
import { FC, useEffect } from 'react';
|
import { FC, useEffect, useState } from 'react';
|
||||||
import { LocalizeText } from '../../../../../../api';
|
import { GetSessionDataManager, LocalizeText } from '../../../../../../api';
|
||||||
import { SendMessageHook } from '../../../../../../hooks/messages';
|
import { SendMessageHook } from '../../../../../../hooks/messages';
|
||||||
|
import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
|
||||||
import { GetCatalogPageText } from '../../../../common/CatalogUtilities';
|
import { GetCatalogPageText } from '../../../../common/CatalogUtilities';
|
||||||
import { useCatalogContext } from '../../../../context/CatalogContext';
|
import { useCatalogContext } from '../../../../context/CatalogContext';
|
||||||
import { CatalogActions } from '../../../../reducers/CatalogReducer';
|
import { CatalogActions } from '../../../../reducers/CatalogReducer';
|
||||||
|
import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
|
||||||
import { CatalogLayoutGuildForumViewProps } from './CatalogLayoutGuildForumView.types';
|
import { CatalogLayoutGuildForumViewProps } from './CatalogLayoutGuildForumView.types';
|
||||||
|
|
||||||
export const CatalogLayouGuildForumView: FC<CatalogLayoutGuildForumViewProps> = props =>
|
export const CatalogLayouGuildForumView: FC<CatalogLayoutGuildForumViewProps> = props =>
|
||||||
@ -14,6 +16,9 @@ export const CatalogLayouGuildForumView: FC<CatalogLayoutGuildForumViewProps> =
|
|||||||
const { catalogState = null, dispatchCatalogState = null } = useCatalogContext();
|
const { catalogState = null, dispatchCatalogState = null } = useCatalogContext();
|
||||||
const { activeOffer = null, groups = null } = catalogState;
|
const { activeOffer = null, groups = null } = catalogState;
|
||||||
|
|
||||||
|
const [ selectedGroupIndex, setSelectedGroupIndex ] = useState<number>(0);
|
||||||
|
const [ availableGroups, setAvailableGroups ] = useState<HabboGroupEntryData[]>([]);
|
||||||
|
|
||||||
const product = ((activeOffer && activeOffer.products[0]) || null);
|
const product = ((activeOffer && activeOffer.products[0]) || null);
|
||||||
|
|
||||||
useEffect(() =>
|
useEffect(() =>
|
||||||
@ -30,17 +35,47 @@ export const CatalogLayouGuildForumView: FC<CatalogLayoutGuildForumViewProps> =
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [ dispatchCatalogState, pageParser ]);
|
}, [ dispatchCatalogState, pageParser ]);
|
||||||
|
|
||||||
|
useEffect(() =>
|
||||||
|
{
|
||||||
|
const available: HabboGroupEntryData[] = [];
|
||||||
|
|
||||||
|
groups.forEach((group) =>
|
||||||
|
{
|
||||||
|
if(!group.hasForum && group.ownerId === GetSessionDataManager().userId) available.push(group);
|
||||||
|
});
|
||||||
|
|
||||||
|
setAvailableGroups(available);
|
||||||
|
}, [ groups ]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="row h-100 nitro-catalog-layout-guild-custom-furni">
|
<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 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 dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 1) } } />
|
||||||
</div>
|
</div>
|
||||||
<div className="col position-relative d-flex flex-column justify-content-center">
|
<div className="col position-relative d-flex flex-column justify-content-center align-items-center">
|
||||||
{ groups.length === 0 && <div className="bg-muted text-center rounded p-1 text-black">
|
{ availableGroups.length === 0 && <div className="bg-muted text-center rounded p-1 text-black">
|
||||||
{ LocalizeText('catalog.guild_selector.members_only') }
|
{ LocalizeText('catalog.guild_selector.members_only') }
|
||||||
<button className="btn btn-sm btn-primary mt-1">{ LocalizeText('catalog.guild_selector.find_groups') }</button>
|
<button className="btn btn-sm btn-primary mt-1">{ LocalizeText('catalog.guild_selector.find_groups') }</button>
|
||||||
</div> }
|
</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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user