mirror of
https://github.com/billsonnn/nitro-react.git
synced 2025-01-19 05:46:27 +01:00
More group updates
This commit is contained in:
parent
c8a7a17049
commit
87f1ee4c5d
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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 = () =>
|
||||||
|
Loading…
Reference in New Issue
Block a user