Fix Group Members view

This commit is contained in:
MyNameIsBatman 2021-09-13 17:59:36 -03:00
parent 5892902ee2
commit 556616ac61

View File

@ -115,7 +115,7 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
} }
searchMembers(pageData.pageIndex); searchMembers(pageData.pageIndex);
}, [ pageData ]); }, [ pageData, searchMembers ]);
const acceptMembership = useCallback((member) => const acceptMembership = useCallback((member) =>
{ {
@ -124,7 +124,7 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
SendMessageHook(new GroupMembershipAcceptComposer(pageData.groupId, member.id)); SendMessageHook(new GroupMembershipAcceptComposer(pageData.groupId, member.id));
searchMembers(pageData.pageIndex); searchMembers(pageData.pageIndex);
} }
}, [ pageData ]); }, [ pageData, searchMembers ]);
const removeMemberOrDeclineMembership = useCallback((member) => const removeMemberOrDeclineMembership = useCallback((member) =>
{ {
@ -138,66 +138,68 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
setRemovingMemberName(member.name); setRemovingMemberName(member.name);
SendMessageHook(new GroupConfirmRemoveMemberComposer(pageData.groupId, member.id)); SendMessageHook(new GroupConfirmRemoveMemberComposer(pageData.groupId, member.id));
} }
}, [ pageData ]); }, [ pageData, searchMembers ]);
if(!pageData) return null; if(!groupId) return null;
return ( return (
<NitroCardView className="nitro-group-members" simple={ true }> <NitroCardView className="nitro-group-members" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('group.members.title', ['groupName'], [ pageData.groupTitle ]) } onCloseClick={ onClose } /> <NitroCardHeaderView headerText={ LocalizeText('group.members.title', ['groupName'], [ pageData ? pageData.groupTitle : '' ]) } onCloseClick={ onClose } />
<NitroCardContentView className="pb-2"> { pageData && <>
<div className="d-flex gap-2 align-items-center mb-2"> <NitroCardContentView className="pb-2">
<div className="group-badge"> <div className="d-flex gap-2 align-items-center mb-2">
<BadgeImageView badgeCode={ pageData.badge } isGroup={ true } /> <div className="group-badge">
<BadgeImageView badgeCode={ pageData.badge } isGroup={ true } />
</div>
<div className="w-100">
<input type="text" className="form-control form-control-sm w-100 mb-1" placeholder={ LocalizeText('group.members.searchinfo') } value={ searchQuery } onChange={ (e) => setSearchQuery(e.target.value) } onBlur={ () => searchMembers(pageData.pageIndex) } onKeyDown={ onKeyDown } />
<select className="form-select form-select-sm w-100" value={ searchLevelId } onChange={ (e) => selectSearchLevelId(Number(e.target.value)) }>
<option value="0">{ LocalizeText('group.members.search.all') }</option>
<option value="1">{ LocalizeText('group.members.search.admins') }</option>
<option value="2">{ LocalizeText('group.members.search.pending') }</option>
</select>
</div>
</div> </div>
<div className="w-100"> <div className="row row-cols-2 align-content-start g-0 w-100 members-list overflow-auto">
<input type="text" className="form-control form-control-sm w-100 mb-1" placeholder={ LocalizeText('group.members.searchinfo') } value={ searchQuery } onChange={ (e) => setSearchQuery(e.target.value) } onBlur={ () => searchMembers(pageData.pageIndex) } onKeyDown={ onKeyDown } /> { pageData.result.map((member, index) =>
<select className="form-select form-select-sm w-100" value={ searchLevelId } onChange={ (e) => selectSearchLevelId(Number(e.target.value)) }> {
<option value="0">{ LocalizeText('group.members.search.all') }</option> return (
<option value="1">{ LocalizeText('group.members.search.admins') }</option> <div key={ index } className={ 'col pb-1' + classNames({ ' pe-1': index % 2 === 0 }) }>
<option value="2">{ LocalizeText('group.members.search.pending') }</option> <div className="list-member bg-white rounded d-flex text-black">
</select> <div className="avatar-head flex-shrink-0 cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>
</div> <AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
</div> </div>
<div className="row row-cols-2 align-content-start g-0 w-100 members-list overflow-auto"> <div className="p-1 w-100 d-flex flex-column justify-content-center">
{ pageData.result.map((member, index) => <div className="fw-bold small cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>{ member.name }</div>
{ { member.rank !== GroupRank.REQUESTED && <div className="text-muted fst-italic small">{ LocalizeText('group.members.since', ['date'], [member.joinedAt]) }</div> }
return ( </div>
<div key={ index } className={ 'col pb-1' + classNames({ ' pe-1': index % 2 === 0 }) }> <div className="d-flex flex-column pe-2 align-items-center justify-content-center">
<div className="list-member bg-white rounded d-flex text-black"> <div className="d-flex align-items-center">
<div className="avatar-head flex-shrink-0 cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }> <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': pageData.admin }) } title={ LocalizeText(getRankDescription(member)) } onClick={ () => toggleAdmin(member) } />
<AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } /> </div>
</div> { member.rank === GroupRank.REQUESTED && <div className="d-flex align-items-center">
<div className="p-1 w-100 d-flex flex-column justify-content-center"> <i className="icon cursor-pointer icon-accept" title={ LocalizeText('group.members.accept') } onClick={ () => acceptMembership(member) } />
<div className="fw-bold small cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>{ member.name }</div> </div> }
{ member.rank !== GroupRank.REQUESTED && <div className="text-muted fst-italic small">{ LocalizeText('group.members.since', ['date'], [member.joinedAt]) }</div> } { member.rank !== GroupRank.OWNER && pageData.admin && member.id !== GetSessionDataManager().userId &&<div className="d-flex align-items-center mt-1">
</div> <i className="icon cursor-pointer icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ () => removeMemberOrDeclineMembership(member) } />
<div className="d-flex flex-column pe-2 align-items-center justify-content-center"> </div> }
<div className="d-flex align-items-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': pageData.admin }) } title={ LocalizeText(getRankDescription(member)) } onClick={ () => toggleAdmin(member) } />
</div> </div>
{ member.rank === GroupRank.REQUESTED && <div className="d-flex align-items-center">
<i className="icon cursor-pointer icon-accept" title={ LocalizeText('group.members.accept') } onClick={ () => acceptMembership(member) } />
</div> }
{ member.rank !== GroupRank.OWNER && pageData.admin && member.id !== GetSessionDataManager().userId &&<div className="d-flex align-items-center mt-1">
<i className="icon cursor-pointer icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ () => removeMemberOrDeclineMembership(member) } />
</div> }
</div> </div>
</div> </div>
</div> );
); }) }
}) }
</div>
<div className="d-flex w-100 align-items-center">
<div>
<button disabled={ pageData.pageIndex === 0 } className="btn btn-primary" onClick={ previousPage }><i className="fas fa-chevron-left" /></button>
</div> </div>
<div className="text-center text-black w-100">{ LocalizeText('group.members.pageinfo', ['amount', 'page', 'totalPages'], [pageData.totalMembersCount.toString(), (pageData.pageIndex + 1).toString(), totalPages.toString()]) }</div> <div className="d-flex w-100 align-items-center">
<div> <div>
<button disabled={ pageData.pageIndex === totalPages - 1 } className="btn btn-primary" onClick={ nextPage }><i className="fas fa-chevron-right" /></button> <button disabled={ pageData.pageIndex === 0 } className="btn btn-primary" onClick={ previousPage }><i className="fas fa-chevron-left" /></button>
</div>
<div className="text-center text-black w-100">{ LocalizeText('group.members.pageinfo', ['amount', 'page', 'totalPages'], [pageData.totalMembersCount.toString(), (pageData.pageIndex + 1).toString(), totalPages.toString()]) }</div>
<div>
<button disabled={ pageData.pageIndex === totalPages - 1 } className="btn btn-primary" onClick={ nextPage }><i className="fas fa-chevron-right" /></button>
</div>
</div> </div>
</div> </NitroCardContentView>
</NitroCardContentView> </> }
</NitroCardView> </NitroCardView>
); );
}; };