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

Refactor groups

Browse Source
This commit is contained in:
Bill 2022-02-16 18:28:04 -05:00
parent a4fb7c54d2
commit 01d5e5e1be
22 changed files with 160 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/groups/GroupsContext.tsx Normal file
View File

@ -0,0 +1,20 @@
import { createContext, Dispatch, FC, ProviderProps, useContext } from 'react';
import { IGroupsAction, IGroupsState } from './reducers/GroupsReducer';
interface IGroupsContext
{
groupsState: IGroupsState;
dispatchGroupsState: Dispatch<IGroupsAction>;
}
const GroupsContext = createContext<IGroupsContext>({
groupsState: null,
dispatchGroupsState: null
});
export const GroupsContextProvider: FC<ProviderProps<IGroupsContext>> = props =>
{
return <GroupsContext.Provider value={ props.value }>{ props.children }</GroupsContext.Provider>
}
export const useGroupsContext = () => useContext(GroupsContext);

4
src/components/groups/GroupsMessageHandler.tsx
View File

@ -2,8 +2,8 @@ import { GroupBadgePartsEvent, GroupBuyDataEvent, GroupSettingsEvent, RoomCreate
import { FC, useCallback } from 'react';
import { CreateMessageHook } from '../../hooks';
import { GroupBadgePart } from './common/GroupBadgePart';
import { useGroupsContext } from './context/GroupsContext';
import { GroupsActions } from './context/GroupsContext.types';
import { useGroupsContext } from './GroupsContext';
import { GroupsActions } from './reducers/GroupsReducer';
function compareId(a, b)
{

51
src/components/groups/GroupsView.tsx
View File

@ -1,10 +1,10 @@
import { GroupBadgePartsComposer, GroupPurchasedEvent, GroupSettingsComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useReducer, useState } from 'react';
import { AddEventLinkTracker, RemoveLinkEventTracker, TryVisitRoom } from '../../api';
import { CreateMessageHook, SendMessageHook } from '../../hooks';
import { GroupsContextProvider } from './context/GroupsContext';
import { GroupsReducer, initialGroups } from './context/GroupsContext.types';
import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../hooks';
import { GroupsContextProvider } from './GroupsContext';
import { GroupsMessageHandler } from './GroupsMessageHandler';
import { GroupsReducer, initialGroups } from './reducers/GroupsReducer';
import { GroupCreatorView } from './views/creator/GroupCreatorView';
import { GroupInformationStandaloneView } from './views/information-standalone/GroupInformationStandaloneView';
import { GroupManagerView } from './views/manager/GroupManagerView';
@ -12,17 +12,30 @@ import { GroupMembersView } from './views/members/GroupMembersView';
export const GroupsView: FC<{}> = props =>
{
const [ groupsState, dispatchGroupsState ] = useReducer(GroupsReducer, initialGroups);
const [ isCreatorVisible, setIsCreatorVisible ] = useState<boolean>(false);
const [ groupMembersId, setGroupMembersId ] = useState<number>(null);
const [ groupMembersLevel, setGroupMembersLevel ] = useState<number>(null);
const [ groupsState, dispatchGroupsState ] = useReducer(GroupsReducer, initialGroups);
useEffect(() =>
const onGroupPurchasedEvent = useCallback((event: GroupPurchasedEvent) =>
{
SendMessageHook(new GroupBadgePartsComposer());
const parser = event.getParser();
setIsCreatorVisible(false);
TryVisitRoom(parser.roomId);
}, []);
CreateMessageHook(GroupPurchasedEvent, onGroupPurchasedEvent);
const closeMembers = () =>
{
BatchUpdates(() =>
{
setGroupMembersId(null);
setGroupMembersLevel(null);
});
}
const linkReceived = useCallback((url: string) =>
{
const parts = url.split('/');
@ -41,10 +54,13 @@ export const GroupsView: FC<{}> = props =>
return;
case 'members':
if(!parts[2]) return;
setGroupMembersId(Number(parts[2]));
if(parts[3]) setGroupMembersLevel(Number(parts[3]));
BatchUpdates(() =>
{
setGroupMembersId(Number(parts[2]));
if(parts[3]) setGroupMembersLevel(Number(parts[3]));
});
return;
}
}, []);
@ -61,20 +77,9 @@ export const GroupsView: FC<{}> = props =>
return () => RemoveLinkEventTracker(linkTracker);
}, [ linkReceived ]);
const onGroupPurchasedEvent = useCallback((event: GroupPurchasedEvent) =>
useEffect(() =>
{
const parser = event.getParser();
setIsCreatorVisible(false);
TryVisitRoom(parser.roomId);
}, []);
CreateMessageHook(GroupPurchasedEvent, onGroupPurchasedEvent);
const closeMembers = useCallback(() =>
{
setGroupMembersId(null);
setGroupMembersLevel(null);
SendMessageHook(new GroupBadgePartsComposer());
}, []);
return (

14
src/components/groups/context/GroupsContext.tsx
View File

@ -1,14 +0,0 @@
import { createContext, FC, useContext } from 'react';
import { GroupsContextProps, IGroupsContext } from './GroupsContext.types';
const GroupsContext = createContext<IGroupsContext>({
groupsState: null,
dispatchGroupsState: null
});
export const GroupsContextProvider: FC<GroupsContextProps> = props =>
{
return <GroupsContext.Provider value={ props.value }>{ props.children }</GroupsContext.Provider>
}
export const useGroupsContext = () => useContext(GroupsContext);

13
src/components/groups/context/GroupsContext.types.ts → src/components/groups/reducers/GroupsReducer.ts
View File

@ -1,17 +1,6 @@
import { Dispatch, ProviderProps, Reducer } from 'react';
import { Reducer } from 'react';
import { GroupBadgePart } from '../common/GroupBadgePart';
export interface IGroupsContext
{
groupsState: IGroupsState;
dispatchGroupsState: Dispatch<IGroupsAction>;
}
export interface GroupsContextProps extends ProviderProps<IGroupsContext>
{
}
export interface IGroupsState
{
availableRooms: { id: number, name: string }[];

6
src/components/groups/views/creator/tab-confirmation/GroupCreatorTabConfirmationView.tsx → src/components/groups/views/creator/GroupCreatorTabConfirmationView.tsx
View File

@ -1,7 +1,7 @@
import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../../../api';
import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
import { useGroupsContext } from '../../../context/GroupsContext';
import { LocalizeText } from '../../../../api';
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
import { useGroupsContext } from '../../GroupsContext';
export const GroupCreatorTabConfirmationView: FC<{}> = props =>
{

19
src/components/groups/views/creator/GroupCreatorView.tsx
View File

@ -5,16 +5,21 @@ import { Button } from 'react-bootstrap';
import { HasHabboClub, LocalizeText } from '../../../../api';
import { SendMessageHook } from '../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { useGroupsContext } from '../../context/GroupsContext';
import { GroupsActions } from '../../context/GroupsContext.types';
import { GroupSharedTabBadgeView } from '../shared-tabs/tab-badge/GroupSharedTabBadgeView';
import { GroupSharedTabColorsView } from '../shared-tabs/tab-colors/GroupSharedTabColorsView';
import { GroupSharedTabIdentityView } from '../shared-tabs/tab-identity/GroupSharedTabIdentityView';
import { GroupCreatorViewProps } from './GroupCreatorView.types';
import { GroupCreatorTabConfirmationView } from './tab-confirmation/GroupCreatorTabConfirmationView';
import { useGroupsContext } from '../../GroupsContext';
import { GroupsActions } from '../../reducers/GroupsReducer';
import { GroupSharedTabBadgeView } from '../shared-tabs/GroupSharedTabBadgeView';
import { GroupSharedTabColorsView } from '../shared-tabs/GroupSharedTabColorsView';
import { GroupSharedTabIdentityView } from '../shared-tabs/GroupSharedTabIdentityView';
import { GroupCreatorTabConfirmationView } from './GroupCreatorTabConfirmationView';
const TABS: number[] = [1, 2, 3, 4];
interface GroupCreatorViewProps
{
isVisible: boolean;
onClose: () => void;
}
export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
{
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();

5
src/components/groups/views/creator/GroupCreatorView.types.ts
View File

@ -1,5 +0,0 @@
export interface GroupCreatorViewProps
{
isVisible: boolean;
onClose: () => void;
}

10
src/components/groups/views/information/GroupInformationView.tsx
View File

@ -1,4 +1,4 @@
import { GroupRemoveMemberComposer } from '@nitrots/nitro-renderer';
import { GroupInformationParser, GroupRemoveMemberComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { CreateLinkEvent, GetSessionDataManager, LocalizeText, TryVisitRoom } from '../../../../api';
import { GetGroupManager } from '../../../../api/groups/GetGroupManager';
@ -9,7 +9,13 @@ import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageV
import { CatalogPageName } from '../../../catalog/common/CatalogPageName';
import { GroupMembershipType } from '../../common/GroupMembershipType';
import { GroupType } from '../../common/GroupType';
import { GroupInformationViewProps } from './GroupInformationView.types';
interface GroupInformationViewProps
{
groupInformation: GroupInformationParser;
onJoin?: () => void;
onClose?: () => void;
}
export const GroupInformationView: FC<GroupInformationViewProps> = props =>
{

8
src/components/groups/views/information/GroupInformationView.types.ts
View File

@ -1,8 +0,0 @@
import { GroupInformationParser } from '@nitrots/nitro-renderer';
export interface GroupInformationViewProps
{
groupInformation: GroupInformationParser;
onJoin?: () => void;
onClose?: () => void;
}

10
src/components/groups/views/manager/GroupManagerView.tsx
View File

@ -3,11 +3,11 @@ import { FC, useCallback, useState } from 'react';
import { LocalizeText } from '../../../../api';
import { SendMessageHook } from '../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
import { useGroupsContext } from '../../context/GroupsContext';
import { GroupsActions } from '../../context/GroupsContext.types';
import { GroupSharedTabBadgeView } from '../shared-tabs/tab-badge/GroupSharedTabBadgeView';
import { GroupSharedTabColorsView } from '../shared-tabs/tab-colors/GroupSharedTabColorsView';
import { GroupSharedTabIdentityView } from '../shared-tabs/tab-identity/GroupSharedTabIdentityView';
import { useGroupsContext } from '../../GroupsContext';
import { GroupsActions } from '../../reducers/GroupsReducer';
import { GroupSharedTabBadgeView } from '../shared-tabs/GroupSharedTabBadgeView';
import { GroupSharedTabColorsView } from '../shared-tabs/GroupSharedTabColorsView';
import { GroupSharedTabIdentityView } from '../shared-tabs/GroupSharedTabIdentityView';
import { GroupManagerTabSettingsView } from './tab-settings/GroupManagerTabSettingsView';
const TABS: number[] = [1, 2, 3, 5];

4
src/components/groups/views/manager/tab-settings/GroupManagerTabSettingsView.tsx
View File

@ -1,7 +1,7 @@
import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../../../api/utils/LocalizeText';
import { useGroupsContext } from '../../../context/GroupsContext';
import { GroupsActions } from '../../../context/GroupsContext.types';
import { useGroupsContext } from '../../../GroupsContext';
import { GroupsActions } from '../../../reducers/GroupsReducer';
const STATES: string[] = ['regular', 'exclusive', 'private'];

9
src/components/groups/views/members/GroupMembersView.tsx
View File

@ -6,7 +6,14 @@ import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
import { GroupMembersViewProps } from './GroupMembersView.types';
interface GroupMembersViewProps
{
groupId: number;
levelId: number;
onClose: () => void;
}
export const GroupMembersView: FC<GroupMembersViewProps> = props =>
{

6
src/components/groups/views/members/GroupMembersView.types.ts
View File

@ -1,6 +0,0 @@
export interface GroupMembersViewProps
{
groupId: number;
levelId: number;
onClose: () => void;
}

14
src/components/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.tsx → src/components/groups/views/shared-tabs/GroupSharedTabBadgeView.tsx
View File

@ -1,13 +1,17 @@
import classNames from 'classnames';
import { FC, useCallback, useEffect, useState } from 'react';
import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
import { GroupBadgePart } from '../../../common/GroupBadgePart';
import { useGroupsContext } from '../../../context/GroupsContext';
import { GroupsActions } from '../../../context/GroupsContext.types';
import { GroupSharedTabBadgeViewProps } from './GroupSharedTabBadgeView.types';
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
import { GroupBadgePart } from '../../common/GroupBadgePart';
import { useGroupsContext } from '../../GroupsContext';
import { GroupsActions } from '../../reducers/GroupsReducer';
const POSITIONS: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8];
interface GroupSharedTabBadgeViewProps
{
skipDefault?: boolean;
}
export const GroupSharedTabBadgeView: FC<GroupSharedTabBadgeViewProps> = props =>
{
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();

6
src/components/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.tsx → src/components/groups/views/shared-tabs/GroupSharedTabColorsView.tsx
View File

@ -1,8 +1,8 @@
import classNames from 'classnames';
import { FC, useCallback, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../../api';
import { useGroupsContext } from '../../../context/GroupsContext';
import { GroupsActions } from '../../../context/GroupsContext.types';
import { LocalizeText } from '../../../../api';
import { useGroupsContext } from '../../GroupsContext';
import { GroupsActions } from '../../reducers/GroupsReducer';
export const GroupSharedTabColorsView: FC<{}> = props =>
{

12
src/components/groups/views/shared-tabs/tab-identity/GroupSharedTabIdentityView.tsx → src/components/groups/views/shared-tabs/GroupSharedTabIdentityView.tsx
View File

@ -1,8 +1,12 @@
import { FC, useCallback } from 'react';
import { CreateLinkEvent, LocalizeText } from '../../../../../api';
import { useGroupsContext } from '../../../context/GroupsContext';
import { GroupsActions } from '../../../context/GroupsContext.types';
import { GroupSharedTabIdentityViewProps } from './GroupSharedTabIdentityView.types';
import { CreateLinkEvent, LocalizeText } from '../../../../api';
import { useGroupsContext } from '../../GroupsContext';
import { GroupsActions } from '../../reducers/GroupsReducer';
interface GroupSharedTabIdentityViewProps
{
isCreator?: boolean;
}
export const GroupSharedTabIdentityView: FC<GroupSharedTabIdentityViewProps> = props =>
{

53
src/components/groups/views/shared-tabs/GroupSharedTabs.scss
View File

@ -26,5 +26,54 @@
}
}
@import './tab-badge/GroupSharedTabBadgeView';
@import './tab-colors/GroupSharedTabColorsView';
.shared-tab-badge {
.position-swatch {
position: relative;
border-radius: $border-radius;
width: 16px;
height: 16px;
background: $white;
border: 2px solid $white;
box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
&.active {
background: $primary;
box-shadow: none;
}
}
.color-swatch {
position: relative;
border-radius: $border-radius;
width: 16px;
height: 16px;
border: 2px solid $white;
box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
&.active {
box-shadow: none;
}
}
.selection-list {
height: 160px;
min-height: 160px;
max-height: 160px;
}
}
.shared-tab-colors {
.color-swatch {
position: relative;
border-radius: $border-radius;
width: 15px;
height: 15px;
border: 2px solid $white;
box-shadow: inset 2px 2px rgba(0, 0, 0, .2);
&.active {
box-shadow: none;
}
}
}

35
src/components/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.scss
View File

@ -1,35 +0,0 @@
.shared-tab-badge {
.position-swatch {
position: relative;
border-radius: $border-radius;
width: 16px;
height: 16px;
background: $white;
border: 2px solid $white;
box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
&.active {
background: $primary;
box-shadow: none;
}
}
.color-swatch {
position: relative;
border-radius: $border-radius;
width: 16px;
height: 16px;
border: 2px solid $white;
box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
&.active {
box-shadow: none;
}
}
.selection-list {
height: 160px;
min-height: 160px;
max-height: 160px;
}
}

4
src/components/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.types.ts
View File

@ -1,4 +0,0 @@
export interface GroupSharedTabBadgeViewProps
{
skipDefault?: boolean;
}

15
src/components/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.scss
View File

@ -1,15 +0,0 @@
.shared-tab-colors {
.color-swatch {
position: relative;
border-radius: $border-radius;
width: 15px;
height: 15px;
border: 2px solid $white;
box-shadow: inset 2px 2px rgba(0, 0, 0, .2);
&.active {
box-shadow: none;
}
}
}

4
src/components/groups/views/shared-tabs/tab-identity/GroupSharedTabIdentityView.types.ts
View File

@ -1,4 +0,0 @@
export interface GroupSharedTabIdentityViewProps
{
isCreator?: boolean;
}