Skip to content

Commit c2eb671

Browse files
alihadimazehalihadimazeh
committed
front end changes
- displaying unverified users using `BannedPendingUsersTable` - replaced `pendingTable` prop with `tableType` - refactored related components because of this change
1 parent 824002f commit c2eb671

File tree

7 files changed

+66
-32
lines changed

7 files changed

+66
-32
lines changed

‎app/assets/locales/en.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,7 @@
208208
"ban": "Ban",
209209
"unban": "Unban",
210210
"unverified": "Unverified",
211+
"verify": "Verify",
211212
"deleted": "Deleted",
212213
"invited_tab": "Invited",
213214
"invite_user": "Invite User",
@@ -231,6 +232,8 @@
231232
"empty_pending_users_subtext": "When a user's status gets changed to pending, they will appear here.",
232233
"empty_banned_users": "There are no banned users on this server yet!",
233234
"empty_banned_users_subtext": "When a user's status gets changed to banned, they will appear here.",
235+
"empty_unverified_users": "There are no unverified users on this server yet!",
236+
"empty_unverified_users_subtext": "When a user's status gets changed to unverified, they will appear here.",
234237
"empty_invited_users": "There are no invited users on this server yet!",
235238
"empty_invited_users_subtext": "When a user's status gets changed to invited, they will appear here.",
236239
"invited": {

‎app/javascript/components/admin/manage_users/BannedPendingRow.jsx‎

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,51 @@ import {
2626
EllipsisVerticalIcon,
2727
XCircleIcon,
2828
} from '@heroicons/react/24/outline';
29+
import { render } from 'react-dom';
2930
import Avatar from '../../users/user/Avatar';
3031
import useUpdateUserStatus from '../../../hooks/mutations/admin/manage_users/useUpdateUserStatus';
3132
import { localizeDateTimeString } from '../../../helpers/DateTimeHelper';
3233
import { useAuth } from '../../../contexts/auth/AuthProvider';
3334

34-
export default function BannedPendingRow({ user, pendingTable }) {
35+
export default function BannedPendingRow({ user, tableType }) {
3536
const { t } = useTranslation();
3637
const updateUserStatus = useUpdateUserStatus();
3738
const currentUser = useAuth();
3839
const localizedTime = localizeDateTimeString(user?.created_at, currentUser?.language);
3940

41+
const renderDropdownItems = () => {
42+
if (tableType === 'pending') {
43+
return (
44+
<>
45+
<Dropdown.Item onClick={() => updateUserStatus.mutate({ id: user.id, status: 'active' })}>
46+
<CheckCircleIcon className="hi-s me-2" />
47+
{t('admin.manage_users.approve')}
48+
</Dropdown.Item>
49+
<Dropdown.Item onClick={() => updateUserStatus.mutate({ id: user.id, status: 'banned' })}>
50+
<XCircleIcon className="hi-s me-2" />
51+
{t('admin.manage_users.decline')}
52+
</Dropdown.Item>
53+
</>
54+
);
55+
}
56+
if (tableType === 'banned') {
57+
return (
58+
<Dropdown.Item onClick={() => updateUserStatus.mutate({ id: user.id, status: 'active' })}>
59+
<CheckIcon className="hi-s me-2" />
60+
{t('admin.manage_users.unban')}
61+
</Dropdown.Item>
62+
);
63+
}
64+
if (tableType === 'unverified') {
65+
return (
66+
<Dropdown.Item onClick={() => updateUserStatus.mutate({ id: user.id, verified: true })}>
67+
<CheckIcon className="hi-s me-2" />
68+
{t('admin.manage_users.verify')}
69+
</Dropdown.Item>
70+
);
71+
}
72+
};
73+
4074
return (
4175
<tr key={user.id} className="align-middle text-muted border border-2">
4276
<td className="border-end-0">
@@ -56,23 +90,7 @@ export default function BannedPendingRow({ user, pendingTable }) {
5690
<Dropdown className="float-end cursor-pointer">
5791
<Dropdown.Toggle className="hi-s" as={EllipsisVerticalIcon} />
5892
<Dropdown.Menu>
59-
{pendingTable ? (
60-
<>
61-
<Dropdown.Item onClick={() => updateUserStatus.mutate({ id: user.id, status: 'active' })}>
62-
<CheckCircleIcon className="hi-s me-2" />
63-
{t('admin.manage_users.approve')}
64-
</Dropdown.Item>
65-
<Dropdown.Item onClick={() => updateUserStatus.mutate({ id: user.id, status: 'banned' })}>
66-
<XCircleIcon className="hi-s me-2" />
67-
{t('admin.manage_users.decline')}
68-
</Dropdown.Item>
69-
</>
70-
) : (
71-
<Dropdown.Item onClick={() => updateUserStatus.mutate({ id: user.id, status: 'active' })}>
72-
<CheckIcon className="hi-s me-2" />
73-
{t('admin.manage_users.unban')}
74-
</Dropdown.Item>
75-
)}
93+
{renderDropdownItems()}
7694
</Dropdown.Menu>
7795
</Dropdown>
7896
</td>
@@ -89,5 +107,5 @@ BannedPendingRow.propTypes = {
89107
created_at: PropTypes.string.isRequired,
90108
language: PropTypes.string.isRequired,
91109
}).isRequired,
92-
pendingTable: PropTypes.bool.isRequired,
110+
tableType: PropTypes.string.isRequired
93111
};

‎app/javascript/components/admin/manage_users/BannedPendingUsersTable.jsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,26 @@ import EmptyUsersList from './EmptyUsersList';
2323
import ManageUsersPendingBannedRowPlaceHolder from './ManageUsersPendingBannedRowPlaceHolder';
2424
import Pagination from '../../shared_components/Pagination';
2525

26-
// pendingTable prop is true when table is being used for pending data, false when table is being used for banned data
2726
export default function BannedPendingUsersTable({
28-
users, pendingTable, isLoading, pagination, setPage,
27+
users, tableType, isLoading, pagination, setPage,
2928
}) {
3029
const { t } = useTranslation();
3130

31+
// if (!isLoading && users.length === 0) {
32+
// if (pendingTable) {
33+
// return <EmptyUsersList text={t('admin.manage_users.empty_pending_users')} subtext={t('admin.manage_users.empty_pending_users_subtext')} />;
34+
// }
35+
// return <EmptyUsersList text={t('admin.manage_users.empty_banned_users')} subtext={t('admin.manage_users.empty_banned_users_subtext')} />;
36+
// }
3237
if (!isLoading && users.length === 0) {
33-
if (pendingTable) {
38+
if (tableType === 'pending') {
3439
return <EmptyUsersList text={t('admin.manage_users.empty_pending_users')} subtext={t('admin.manage_users.empty_pending_users_subtext')} />;
3540
}
36-
return <EmptyUsersList text={t('admin.manage_users.empty_banned_users')} subtext={t('admin.manage_users.empty_banned_users_subtext')} />;
41+
if (tableType === 'unverified') {
42+
return <EmptyUsersList text={t('admin.manage_users.empty_pending_users')} subtext={t('admin.manage_users.empty_unverified_users_subtext')} />;
43+
}
44+
45+
return <EmptyUsersList text={t('admin.manage_users.empty_pending_users')} subtext={t('admin.manage_users.empty_banned_users_subtext')} />;
3746
}
3847

3948
return (
@@ -56,7 +65,7 @@ export default function BannedPendingUsersTable({
5665
users?.length
5766
&& (
5867
users?.map((user) => (
59-
<BannedPendingRow key={user.id} user={user} pendingTable={pendingTable} />
68+
<BannedPendingRow key={user.id} user={user} tableType={tableType} />
6069
))
6170
)
6271
)
@@ -95,7 +104,7 @@ BannedPendingUsersTable.propTypes = {
95104
avatar: PropTypes.string.isRequired,
96105
name: PropTypes.string.isRequired,
97106
})),
98-
pendingTable: PropTypes.bool.isRequired,
107+
tableType: PropTypes.string.isRequired,
99108
isLoading: PropTypes.bool.isRequired,
100109
pagination: PropTypes.shape({
101110
page: PropTypes.number.isRequired,

‎app/javascript/components/admin/manage_users/BannedUsers.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default function BannedUsers({ searchInput }) {
2525
const [page, setPage] = useState();
2626
const { isLoading, data: bannedUsers } = useBannedUsers(searchInput, page);
2727
const { t } = useTranslation();
28+
const tableType = 'banned';
2829

2930
return (
3031
<div>
@@ -37,7 +38,7 @@ export default function BannedUsers({ searchInput }) {
3738
) : (
3839
<BannedPendingUsersTable
3940
users={bannedUsers?.data}
40-
pendingTable={false}
41+
tableType={tableType}
4142
isLoading={isLoading}
4243
pagination={bannedUsers?.meta}
4344
setPage={setPage}

‎app/javascript/components/admin/manage_users/ManageUsers.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import PendingUsers from './PendingUsers';
3434
import BannedUsers from './BannedUsers';
3535
import { useAuth } from '../../../contexts/auth/AuthProvider';
3636
import useEnv from '../../../hooks/queries/env/useEnv';
37-
import UnverifiedUsers from "./UnverifiedUsers";
37+
import UnverifiedUsers from './UnverifiedUsers';
3838

3939
export default function ManageUsers() {
4040
const { t } = useTranslation();
@@ -100,7 +100,7 @@ export default function ManageUsers() {
100100
<Tab eventKey="active" title={t('admin.manage_users.active')}>
101101
<VerifiedUsers searchInput={searchInput} />
102102
</Tab>
103-
<Tab eventKey="unverified" title={t('admin.manage_users.unverified')} >
103+
<Tab eventKey="unverified" title="Test Tab">
104104
<UnverifiedUsers searchInput={searchInput} />
105105
</Tab>
106106
{registrationMethod === 'approval'

‎app/javascript/components/admin/manage_users/PendingUsers.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default function PendingUsers({ searchInput }) {
2525
const [page, setPage] = useState();
2626
const { isLoading, data: users } = usePendingUsers(searchInput, page);
2727
const { t } = useTranslation();
28+
const tableType = 'pending';
2829

2930
return (
3031
<div>
@@ -35,7 +36,7 @@ export default function PendingUsers({ searchInput }) {
3536
<NoSearchResults text={t('user.search_not_found')} searchInput={searchInput} />
3637
</div>
3738
) : (
38-
<BannedPendingUsersTable users={users?.data} pendingTable isLoading={isLoading} pagination={users?.meta} setPage={setPage} />
39+
<BannedPendingUsersTable users={users?.data} tableType={tableType} isLoading={isLoading} pagination={users?.meta} setPage={setPage} />
3940
)
4041
}
4142
</div>

‎app/javascript/components/admin/manage_users/UnverifiedUsers.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,16 @@
1717
import React, { useState } from 'react';
1818
import PropTypes from 'prop-types';
1919
import { useTranslation } from 'react-i18next';
20-
import useUnverifiedUsers from "../../../hooks/queries/admin/manage_users/useUnverifiedUsers";
20+
import useUnverifiedUsers from '../../../hooks/queries/admin/manage_users/useUnverifiedUsers';
2121
import ManageUsersTable from './ManageUsersTable';
2222
import NoSearchResults from '../../shared_components/search/NoSearchResults';
23+
import BannedPendingUsersTable from "./BannedPendingUsersTable";
2324

24-
// TODO create a useUnverifiedUsers query & change all verified instances in this file to unverified
2525
export default function UnverifiedUsers({ searchInput }) {
2626
const [page, setPage] = useState();
2727
const { isLoading, data: unverifiedUsers } = useUnverifiedUsers(searchInput, page);
2828
const { t } = useTranslation();
29+
const tableType = 'unverified';
2930

3031
return (
3132
<div>
@@ -36,7 +37,8 @@ export default function UnverifiedUsers({ searchInput }) {
3637
<NoSearchResults text={t('user.search_not_found')} searchInput={searchInput} />
3738
</div>
3839
) : (
39-
<ManageUsersTable users={unverifiedUsers?.data} isLoading={isLoading} pagination={unverifiedUsers?.meta} setPage={setPage} />
40+
// <ManageUsersTable users={unverifiedUsers?.data} isLoading={isLoading} pagination={unverifiedUsers?.meta} setPage={setPage} />
41+
<BannedPendingUsersTable users={unverifiedUsers?.data} tableType={tableType} isLoading={isLoading} pagination={unverifiedUsers?.meta} setPage={setPage}/>
4042
)
4143
}
4244
</div>

0 commit comments

Comments
 (0)