diff --git a/src/components/groups/GroupsView.tsx b/src/components/groups/GroupsView.tsx index 2a2ec8b6..ac436811 100644 --- a/src/components/groups/GroupsView.tsx +++ b/src/components/groups/GroupsView.tsx @@ -12,30 +12,31 @@ import { GroupMembersView } from './views/members/GroupMembersView'; export const GroupsView: FC<{}> = props => { - const [ isCreatorVisible, setIsCreatorVisible ] = useState(false); - const [ groupMembersId, setGroupMembersId ] = useState(null); - const [ groupMembersLevel, setGroupMembersLevel ] = useState(null); + const [ currentGroupId, setCurrentGroupId ] = useState(null); + const [ currentGroupLevelId, setCurrentGroupLevelId ] = useState(null); + const [ isMembersVisible, setMembersVisible ] = useState(false); + const [ isCreatorVisible, setCreatorVisible ] = useState(false); const [ groupsState, dispatchGroupsState ] = useReducer(GroupsReducer, initialGroups); - const onGroupPurchasedEvent = useCallback((event: GroupPurchasedEvent) => - { - const parser = event.getParser(); - - setIsCreatorVisible(false); - TryVisitRoom(parser.roomId); - }, []); - - CreateMessageHook(GroupPurchasedEvent, onGroupPurchasedEvent); - const closeMembers = () => { BatchUpdates(() => { - setGroupMembersId(null); - setGroupMembersLevel(null); + setCurrentGroupId(null); + setCurrentGroupLevelId(null); }); } + const onGroupPurchasedEvent = useCallback((event: GroupPurchasedEvent) => + { + const parser = event.getParser(); + + setCreatorVisible(false); + TryVisitRoom(parser.roomId); + }, []); + + CreateMessageHook(GroupPurchasedEvent, onGroupPurchasedEvent); + const linkReceived = useCallback((url: string) => { const parts = url.split('/'); @@ -45,7 +46,7 @@ export const GroupsView: FC<{}> = props => switch(parts[1]) { case 'create': - setIsCreatorVisible(true); + setCreatorVisible(true); return; case 'manage': if(!parts[2]) return; @@ -55,12 +56,16 @@ export const GroupsView: FC<{}> = props => case 'members': if(!parts[2]) return; + const groupId = (parseInt(parts[2]) || -1); + const levelId = (parseInt(parts[3]) || 3); + BatchUpdates(() => { - setGroupMembersId(Number(parts[2])); - - if(parts[3]) setGroupMembersLevel(Number(parts[3])); + setCurrentGroupId(groupId); + setCurrentGroupLevelId(levelId); + setMembersVisible(true); }); + return; } }, []); @@ -86,9 +91,10 @@ export const GroupsView: FC<{}> = props =>
- setIsCreatorVisible(false) } /> + setCreatorVisible(false) } /> - + { isMembersVisible && + }
diff --git a/src/components/groups/views/members/GroupMembersView.tsx b/src/components/groups/views/members/GroupMembersView.tsx index 077035c6..7de661be 100644 --- a/src/components/groups/views/members/GroupMembersView.tsx +++ b/src/components/groups/views/members/GroupMembersView.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer } from '@nitrots/nitro-renderer'; import classNames from 'classnames'; -import { FC, KeyboardEvent, useCallback, useEffect, useState } from 'react'; +import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react'; import { GetSessionDataManager, GetUserProfile, LocalizeText } from '../../../../api'; import { Base, Button, Column, Flex, Grid, Text } from '../../../../common'; import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../hooks'; @@ -14,66 +14,29 @@ interface GroupMembersViewProps { groupId: number; levelId: number; + setLevelId: Dispatch>; onClose: () => void; } export const GroupMembersView: FC = props => { - const { groupId = null, levelId = null, onClose = null } = props; + const { groupId = -1, levelId = -1, setLevelId = null, onClose = null } = props; const [ pageData, setPageData ] = useState(null); + const [ pageId, setPageId ] = useState(-1); const [ searchQuery, setSearchQuery ] = useState(''); - const [ searchLevelId, setSearchLevelId ] = useState(3); const [ totalPages, setTotalPages ] = useState(0); const [ removingMemberName, setRemovingMemberName ] = useState(null); - const searchMembers = useCallback((pageId: number, newLevelId?: number) => + const refreshMembers = useCallback(() => { - if(!groupId) return; - - SendMessageHook(new GroupMembersComposer(groupId, pageId, searchQuery, ((newLevelId !== undefined) ? newLevelId : searchLevelId))); - }, [ groupId, searchLevelId, searchQuery ]); + if((groupId === -1) || (levelId === -1) || (pageId === -1)) return; - const onGroupMembersEvent = useCallback((event: GroupMembersEvent) => - { - const parser = event.getParser(); + SendMessageHook(new GroupMembersComposer(groupId, pageId, searchQuery, levelId)); + }, [ groupId, levelId, pageId, searchQuery ]); - BatchUpdates(() => - { - setPageData(null); - setPageData(parser); - setSearchLevelId(parser.level); - setTotalPages(Math.ceil(parser.totalMembersCount / parser.pageSize)); - }); - }, []); + const previousPage = () => setPageId(prevValue => (prevValue - 1)); - CreateMessageHook(GroupMembersEvent, onGroupMembersEvent); - - const onGroupConfirmMemberRemoveEvent = useCallback((event: GroupConfirmMemberRemoveEvent) => - { - const parser = event.getParser(); - - NotificationUtilities.confirm(LocalizeText(((parser.furnitureCount > 0) ? 'group.kickconfirm.desc' : 'group.kickconfirm_nofurni.desc'), [ 'user', 'amount' ], [ removingMemberName, parser.furnitureCount.toString() ]), () => - { - SendMessageHook(new GroupRemoveMemberComposer(pageData.groupId, parser.userId)); - searchMembers(pageData.pageIndex); - }, null); - - setRemovingMemberName(null); - }, [ pageData, removingMemberName, searchMembers ]); - - CreateMessageHook(GroupConfirmMemberRemoveEvent, onGroupConfirmMemberRemoveEvent); - - const selectSearchLevelId = (level: number) => - { - setSearchLevelId(level); - searchMembers(0, level); - } - - const previousPage = () => searchMembers((pageData.pageIndex - 1)); - - const nextPage = () => searchMembers((pageData.pageIndex + 1)); - - const onKeyDown = (event: KeyboardEvent) => ((event.key === 'Enter') && searchMembers(pageData.pageIndex)); + const nextPage = () => setPageId(prevValue => (prevValue + 1)); const getRankDescription = (member: GroupMemberParser) => { @@ -96,7 +59,7 @@ export const GroupMembersView: FC = props => if(member.rank !== GroupRank.ADMIN) SendMessageHook(new GroupAdminGiveComposer(pageData.groupId, member.id)); else SendMessageHook(new GroupAdminTakeComposer(pageData.groupId, member.id)); - searchMembers(pageData.pageIndex); + refreshMembers(); } const acceptMembership = (member: GroupMemberParser) => @@ -104,7 +67,8 @@ export const GroupMembersView: FC = props => if(member.rank !== GroupRank.REQUESTED) return; SendMessageHook(new GroupMembershipAcceptComposer(pageData.groupId, member.id)); - searchMembers(pageData.pageIndex); + + refreshMembers(); } const removeMemberOrDeclineMembership = (member: GroupMemberParser) => @@ -112,7 +76,8 @@ export const GroupMembersView: FC = props => if(member.rank === GroupRank.REQUESTED) { SendMessageHook(new GroupMembershipDeclineComposer(pageData.groupId, member.id)); - searchMembers(pageData.pageIndex); + + refreshMembers(); return; } @@ -121,21 +86,52 @@ export const GroupMembersView: FC = props => SendMessageHook(new GroupConfirmRemoveMemberComposer(pageData.groupId, member.id)); } - useEffect(() => + const onGroupMembersEvent = useCallback((event: GroupMembersEvent) => { + const parser = event.getParser(); + BatchUpdates(() => { - setPageData(null); - setSearchQuery(''); - setSearchLevelId(0); + setPageData(parser); + //setSearchLevelId(parser.level); + setTotalPages(Math.ceil(parser.totalMembersCount / parser.pageSize)); }); + }, []); - if(!groupId) return; + CreateMessageHook(GroupMembersEvent, onGroupMembersEvent); - if(levelId !== null) setSearchLevelId(levelId); + const onGroupConfirmMemberRemoveEvent = useCallback((event: GroupConfirmMemberRemoveEvent) => + { + const parser = event.getParser(); - searchMembers(0, levelId); - }, [ groupId, levelId, searchMembers ]); + NotificationUtilities.confirm(LocalizeText(((parser.furnitureCount > 0) ? 'group.kickconfirm.desc' : 'group.kickconfirm_nofurni.desc'), [ 'user', 'amount' ], [ removingMemberName, parser.furnitureCount.toString() ]), () => + { + SendMessageHook(new GroupRemoveMemberComposer(pageData.groupId, parser.userId)); + + refreshMembers(); + }, null); + + setRemovingMemberName(null); + }, [ pageData, removingMemberName, refreshMembers ]); + + CreateMessageHook(GroupConfirmMemberRemoveEvent, onGroupConfirmMemberRemoveEvent); + + useEffect(() => + { + setPageId(0); + }, [ groupId, levelId, searchQuery ]); + + useEffect(() => + { + + }) + + useEffect(() => + { + if((groupId === -1) || (levelId === -1) || (pageId === -1)) return; + + SendMessageHook(new GroupMembersComposer(groupId, pageId, searchQuery, levelId)); + }, [ groupId, levelId, pageId, searchQuery ]); if(!groupId || !pageData) return null; @@ -148,8 +144,8 @@ export const GroupMembersView: FC = props => - setSearchQuery(e.target.value) } onBlur={ () => searchMembers(pageData.pageIndex) } onKeyDown={ onKeyDown } /> - setSearchQuery(event.target.value) } /> + setState(index) } />