More group updates

This commit is contained in:
Bill 2022-03-02 22:52:15 -05:00
parent c8a7a17049
commit 87f1ee4c5d
3 changed files with 25 additions and 34 deletions

View File

@ -25,7 +25,7 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
{ {
const { groupInformation = null, onClose = null } = props; const { groupInformation = null, onClose = null } = props;
const isRealOwner = () => (groupInformation && (groupInformation.ownerName === GetSessionDataManager().userName)); const isRealOwner = (groupInformation && (groupInformation.ownerName === GetSessionDataManager().userName));
const joinGroup = () => (groupInformation && TryJoinGroup(groupInformation.id)); const joinGroup = () => (groupInformation && TryJoinGroup(groupInformation.id));
@ -43,7 +43,7 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
{ {
if(groupInformation.membershipType === GroupMembershipType.NOT_MEMBER || groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) return null; if(groupInformation.membershipType === GroupMembershipType.NOT_MEMBER || groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) return null;
if(isRealOwner()) return <i className="icon icon-group-owner" title={ LocalizeText('group.youareowner') } />; if(isRealOwner) return <i className="icon icon-group-owner" title={ LocalizeText('group.youareowner') } />;
if(groupInformation.isAdmin) return <i className="icon icon-group-admin" title={ LocalizeText('group.youareadmin') } />; if(groupInformation.isAdmin) return <i className="icon icon-group-admin" title={ LocalizeText('group.youareadmin') } />;
@ -52,20 +52,17 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
const getButtonText = () => const getButtonText = () =>
{ {
if(groupInformation.type === GroupType.PRIVATE) return ''; if(isRealOwner) return 'group.youareowner';
if(isRealOwner()) return 'group.youareowner'; if(groupInformation.type === GroupType.PRIVATE) return '';
if(groupInformation.membershipType === GroupMembershipType.MEMBER) return 'group.leave'; if(groupInformation.membershipType === GroupMembershipType.MEMBER) return 'group.leave';
if(groupInformation.membershipType === GroupMembershipType.NOT_MEMBER && groupInformation.type === GroupType.REGULAR) return 'group.join'; if((groupInformation.membershipType === GroupMembershipType.NOT_MEMBER) && groupInformation.type === GroupType.REGULAR) return 'group.join';
if(groupInformation.type === GroupType.EXCLUSIVE)
{
if(groupInformation.membershipType === GroupMembershipType.NOT_MEMBER) return 'group.requestmembership';
if(groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) return 'group.membershippending'; if(groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) return 'group.membershippending';
}
if((groupInformation.membershipType === GroupMembershipType.NOT_MEMBER) && groupInformation.type === GroupType.EXCLUSIVE) return 'group.requestmembership';
} }
const handleButtonClick = () => const handleButtonClick = () =>
@ -143,7 +140,7 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
<Text small underline pointer>{ LocalizeText('group.showgroups') }</Text> <Text small underline pointer>{ LocalizeText('group.showgroups') }</Text>
</Column> </Column>
{ (groupInformation.type !== GroupType.PRIVATE) && { (groupInformation.type !== GroupType.PRIVATE) &&
<Button disabled={ (groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) || isRealOwner() } onClick={ handleButtonClick }> <Button disabled={ (groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) || isRealOwner } onClick={ handleButtonClick }>
{ LocalizeText(getButtonText()) } { LocalizeText(getButtonText()) }
</Button> } </Button> }
</Column> </Column>

View File

@ -1,6 +1,5 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer, ILinkEventTracker } from '@nitrots/nitro-renderer'; import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
import classNames from 'classnames';
import { FC, useCallback, useEffect, useState } from 'react'; import { FC, useCallback, useEffect, useState } from 'react';
import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker } from '../../../api'; import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker } from '../../../api';
import { Base, Button, Column, Flex, Grid, Text } from '../../../common'; import { Base, Button, Column, Flex, Grid, Text } from '../../../common';
@ -20,10 +19,6 @@ export const GroupMembersView: FC<{}> = props =>
const [ searchQuery, setSearchQuery ] = useState<string>(''); const [ searchQuery, setSearchQuery ] = useState<string>('');
const [ removingMemberName, setRemovingMemberName ] = useState<string>(null); const [ removingMemberName, setRemovingMemberName ] = useState<string>(null);
const previousPage = () => setPageId(prevValue => (prevValue - 1));
const nextPage = () => setPageId(prevValue => (prevValue + 1));
const getRankDescription = (member: GroupMemberParser) => const getRankDescription = (member: GroupMemberParser) =>
{ {
if(member.rank === GroupRank.OWNER) return 'group.members.owner'; if(member.rank === GroupRank.OWNER) return 'group.members.owner';
@ -47,7 +42,7 @@ export const GroupMembersView: FC<{}> = props =>
const toggleAdmin = (member: GroupMemberParser) => const toggleAdmin = (member: GroupMemberParser) =>
{ {
if(member.rank === GroupRank.OWNER) return; if(!membersData.admin || (member.rank === GroupRank.OWNER)) return;
if(member.rank !== GroupRank.ADMIN) SendMessageHook(new GroupAdminGiveComposer(membersData.groupId, member.id)); if(member.rank !== GroupRank.ADMIN) SendMessageHook(new GroupAdminGiveComposer(membersData.groupId, member.id));
else SendMessageHook(new GroupAdminTakeComposer(membersData.groupId, member.id)); else SendMessageHook(new GroupAdminTakeComposer(membersData.groupId, member.id));
@ -57,7 +52,7 @@ export const GroupMembersView: FC<{}> = props =>
const acceptMembership = (member: GroupMemberParser) => const acceptMembership = (member: GroupMemberParser) =>
{ {
if(member.rank !== GroupRank.REQUESTED) return; if(!membersData.admin || (member.rank !== GroupRank.REQUESTED)) return;
SendMessageHook(new GroupMembershipAcceptComposer(membersData.groupId, member.id)); SendMessageHook(new GroupMembershipAcceptComposer(membersData.groupId, member.id));
@ -66,6 +61,8 @@ export const GroupMembersView: FC<{}> = props =>
const removeMemberOrDeclineMembership = (member: GroupMemberParser) => const removeMemberOrDeclineMembership = (member: GroupMemberParser) =>
{ {
if(!membersData.admin) return;
if(member.rank === GroupRank.REQUESTED) if(member.rank === GroupRank.REQUESTED)
{ {
SendMessageHook(new GroupMembershipDeclineComposer(membersData.groupId, member.id)); SendMessageHook(new GroupMembershipDeclineComposer(membersData.groupId, member.id));
@ -191,22 +188,22 @@ export const GroupMembersView: FC<{}> = props =>
<AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } /> <AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
</div> </div>
<Column grow gap={ 1 }> <Column grow gap={ 1 }>
<Text bold small pointer onClick={ () => GetUserProfile(member.id) }>{ member.name }</Text> <Text bold small pointer onClick={ event => GetUserProfile(member.id) }>{ member.name }</Text>
{ (member.rank !== GroupRank.REQUESTED) && { (member.rank !== GroupRank.REQUESTED) &&
<Text small italics variant="muted">{ LocalizeText('group.members.since', ['date'], [member.joinedAt]) }</Text> } <Text small italics variant="muted">{ LocalizeText('group.members.since', [ 'date' ], [ member.joinedAt ]) }</Text> }
</Column> </Column>
<Column gap={ 1 }> <Column gap={ 1 }>
{ (member.rank !== GroupRank.REQUESTED) && { (member.rank !== GroupRank.REQUESTED) &&
<Flex center> <Flex center>
<i className={ 'icon icon-group-small-' + classNames({ 'owner': (member.rank === GroupRank.OWNER), 'admin': (member.rank === GroupRank.ADMIN), 'not-admin': (member.rank === GroupRank.MEMBER), 'cursor-pointer': membersData.admin }) } title={ LocalizeText(getRankDescription(member)) } onClick={ () => toggleAdmin(member) } /> <Base pointer={ membersData.admin } className={ `icon icon-group-small-${ ((member.rank === GroupRank.OWNER) ? 'owner' : (member.rank === GroupRank.ADMIN) ? 'admin' : (membersData.admin && (member.rank === GroupRank.MEMBER)) ? 'not-admin' : '') }` } title={ LocalizeText(getRankDescription(member)) } onClick={ event => toggleAdmin(member) } />
</Flex> } </Flex> }
{ (member.rank === GroupRank.REQUESTED) && { membersData.admin && (member.rank === GroupRank.REQUESTED) &&
<Flex alignItems="center"> <Flex alignItems="center">
<Base pointer className="nitro-friends-spritesheet icon-accept" title={ LocalizeText('group.members.accept') } onClick={ () => acceptMembership(member) }></Base> <Base pointer className="nitro-friends-spritesheet icon-accept" title={ LocalizeText('group.members.accept') } onClick={ event => acceptMembership(member) }></Base>
</Flex> } </Flex> }
{ (member.rank !== GroupRank.OWNER) && membersData.admin && (member.id !== GetSessionDataManager().userId) && { membersData.admin && (member.rank !== GroupRank.OWNER) && (member.id !== GetSessionDataManager().userId) &&
<Flex alignItems="center"> <Flex alignItems="center">
<Base pointer className="nitro-friends-spritesheet icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ () => removeMemberOrDeclineMembership(member) }></Base> <Base pointer className="nitro-friends-spritesheet icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ event => removeMemberOrDeclineMembership(member) }></Base>
</Flex> } </Flex> }
</Column> </Column>
</Flex> </Flex>
@ -214,13 +211,13 @@ export const GroupMembersView: FC<{}> = props =>
}) } }) }
</Grid> </Grid>
<Flex gap={ 1 } justifyContent="between" alignItems="center"> <Flex gap={ 1 } justifyContent="between" alignItems="center">
<Button disabled={ (membersData.pageIndex === 0) } onClick={ previousPage }> <Button disabled={ (membersData.pageIndex === 0) } onClick={ event => setPageId(prevValue => (prevValue - 1)) }>
<FontAwesomeIcon icon="chevron-left" /> <FontAwesomeIcon icon="chevron-left" />
</Button> </Button>
<Text small> <Text small>
{ LocalizeText('group.members.pageinfo', ['amount', 'page', 'totalPages'], [membersData.totalMembersCount.toString(), (membersData.pageIndex + 1).toString(), totalPages.toString()]) } { LocalizeText('group.members.pageinfo', ['amount', 'page', 'totalPages'], [membersData.totalMembersCount.toString(), (membersData.pageIndex + 1).toString(), totalPages.toString()]) }
</Text> </Text>
<Button disabled={ (membersData.pageIndex === (totalPages - 1)) } onClick={ nextPage }> <Button disabled={ (membersData.pageIndex === (totalPages - 1)) } onClick={ event => setPageId(prevValue => (prevValue + 1)) }>
<FontAwesomeIcon icon="chevron-right" /> <FontAwesomeIcon icon="chevron-right" />
</Button> </Button>
</Flex> </Flex>

View File

@ -94,14 +94,11 @@ export const GroupRoomInformationView: FC<{}> = props =>
if(groupInformation.membershipType === GroupMembershipType.MEMBER) return 'group.leave'; if(groupInformation.membershipType === GroupMembershipType.MEMBER) return 'group.leave';
if(groupInformation.membershipType === GroupMembershipType.NOT_MEMBER && groupInformation.type === GroupType.REGULAR) return 'group.join'; if((groupInformation.membershipType === GroupMembershipType.NOT_MEMBER) && groupInformation.type === GroupType.REGULAR) return 'group.join';
if(groupInformation.type === GroupType.EXCLUSIVE)
{
if(groupInformation.membershipType === GroupMembershipType.NOT_MEMBER) return 'group.requestmembership';
if(groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) return 'group.membershippending'; if(groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) return 'group.membershippending';
}
if((groupInformation.membershipType === GroupMembershipType.NOT_MEMBER) && groupInformation.type === GroupType.EXCLUSIVE) return 'group.requestmembership';
} }
const handleButtonClick = () => const handleButtonClick = () =>