Create user screen

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Convert the Quantifier Pool screen to a User Admin screen #320 #395
+
 ### Fixed
 
 ## [0.7.0] - 2022-05-31

packages/api/src/user/controllers.ts

@@ -173,6 +173,12 @@ const removeRole = async (
 
   const { role } = req.body;
   if (!role) throw new BadRequestError('Role is required');
+  if (role === UserRole.ADMIN) {
+    const allAdmins = await UserModel.find({ roles: { $in: ['ADMIN'] } });
+    if (allAdmins.length <= 1) {
+      throw new BadRequestError("You can't remove the last admin!");
+    }
+  }
 
   const roleIndex = user.roles.indexOf(role);
 

packages/frontend/src/components/InlineLabel.tsx

@@ -22,7 +22,7 @@ export const InlineLabel = ({
         onClick={onClick}
         className={classNames(
           className,
-          'h-6 pl-1 pr-1 mr-1 text-xs text-white no-underline bg-gray-800 py-[1px] rounded',
+          'h-6 pl-1 pr-1 mr-1 whitespace-nowrap text-xs text-white no-underline bg-gray-800 py-[1px] rounded',
           onClick ? 'cursor-pointer' : ''
         )}
       >

packages/frontend/src/model/users.ts

@@ -44,6 +44,17 @@ export const AllUsers = atom<UserDto[] | undefined>({
   default: undefined,
 });
 
+export const AllAdminUsers = selector({
+  key: 'AllAdminUsers',
+  get: ({ get }) => {
+    const users = get(AllUsers);
+    if (users) {
+      return users.filter((user) => user.roles.includes(UserRole.ADMIN));
+    }
+    return undefined;
+  },
+});
+
 export const AllQuantifierUsers = selector({
   key: 'AllQuantifierUsers',
   get: ({ get }) => {
@@ -55,6 +66,17 @@ export const AllQuantifierUsers = selector({
   },
 });
 
+export const AllForwarderUsers = selector({
+  key: 'AllForwarderUsers',
+  get: ({ get }) => {
+    const users = get(AllUsers);
+    if (users) {
+      return users.filter((user) => user.roles.includes(UserRole.FORWARDER));
+    }
+    return undefined;
+  },
+});
+
 export const useAllUsersQuery = (): AxiosResponse<unknown> => {
   const allUsersQueryResponse = useAuthApiQuery(AllUsersQuery);
   const [allUsers, setAllUsers] = useRecoilState(AllUsers);
@@ -72,6 +94,13 @@ export const useAllUsersQuery = (): AxiosResponse<unknown> => {
   return allUsersQueryResponse;
 };
 
+/**
+ * Types for `useParams()`
+ */
+export type SingleUserParams = {
+  userId: string | undefined;
+};
+
 export const SingleUser = selectorFamily({
   key: 'SingleUser',
   get:

packages/frontend/src/navigation/AuthenticatedRoutes.tsx

@@ -7,6 +7,9 @@ import { difference } from 'lodash';
 import { useRecoilValue } from 'recoil';
 
 const MyPraisePage = React.lazy(() => import('@/pages/MyPraise/MyPraisePage'));
+const UserDetailsPage = React.lazy(
+  () => import('@/pages/UserDetails/UserDetailsPage')
+);
 const UsersPage = React.lazy(() => import('@/pages/Users/UsersPage'));
 
 const PeriodsPage = React.lazy(() => import('@/pages/Periods/PeriodsPage'));
@@ -84,10 +87,27 @@ const AuthenticatedRoutes = (): JSX.Element | null => {
         <MyPraisePage />
       </Route>
 
-      <AuthRoute userRoles={userRoles} roles={[ROLE_ADMIN]} path={'/pool'}>
+      <AuthRoute
+        userRoles={userRoles}
+        roles={[ROLE_ADMIN]}
+        exact
+        path={'/users'}
+      >
         <UsersPage />
       </AuthRoute>
 
+      <AuthRoute
+        userRoles={userRoles}
+        roles={[ROLE_ADMIN]}
+        path={'/users/:userId'}
+      >
+        <UserDetailsPage />
+      </AuthRoute>
+
+      <Route exact path={'/periods'}>
+        <PeriodsPage />
+      </Route>
+
       <AuthRoute
         userRoles={userRoles}
         roles={[ROLE_ADMIN]}

packages/frontend/src/navigation/Nav.tsx

@@ -49,11 +49,7 @@ export default function Nav(): JSX.Element {
               to="/mypraise"
             />
             <AdminOnly>
-              <NavItem
-                icon={faUserFriends}
-                description="Quantifier pool"
-                to="/pool"
-              />
+              <NavItem icon={faUserFriends} description="Users" to="/users" />
             </AdminOnly>
             <NavItem
               icon={faCalculator}

packages/frontend/src/pages/UserDetails/UserDetailsPage.tsx

@@ -0,0 +1,95 @@
+import { shortenEthAddress } from 'api/dist/user/utils';
+import { faUserGroup } from '@fortawesome/free-solid-svg-icons';
+import BreadCrumb from '@/components/BreadCrumb';
+import BackLink from '@/navigation/BackLink';
+import { SingleUser, SingleUserParams, useAdminUsers } from '@/model/users';
+import { useRecoilValue } from 'recoil';
+import { useParams } from 'react-router-dom';
+import { formatIsoDateUTC } from '@/utils/date';
+import { classNames } from '@/utils/index';
+import { UserDto, UserRole } from 'api/dist/user/types';
+import { toast } from 'react-hot-toast';
+
+const roles = [UserRole.ADMIN, UserRole.FORWARDER, UserRole.QUANTIFIER];
+
+const UserDetailsPage = (): JSX.Element | null => {
+  const { userId } = useParams<SingleUserParams>();
+  const user = useRecoilValue(SingleUser(userId));
+  const { addRole, removeRole } = useAdminUsers();
+
+  const handleRole = async (role: UserRole, user: UserDto): Promise<void> => {
+    let resp;
+    const isRemove = user.roles.includes(role);
+    if (isRemove) {
+      resp = await removeRole(user._id, role);
+    } else {
+      resp = await addRole(user._id, role);
+    }
+    if (resp?.status === 200) {
+      toast.success(`Role ${isRemove ? 'removed' : 'added'} successfully!`);
+    }
+  };
+
+  if (!user) return null;
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <BreadCrumb name="User details" icon={faUserGroup} />
+      <BackLink to="/users" />
+      <div className="praise-box flex flex-col gap-2">
+        <span>User identity</span>
+        <span className="text-xl font-bold">
+          {user.ethereumAddress && shortenEthAddress(user.ethereumAddress)}
+        </span>
+        <div>
+          Created: {formatIsoDateUTC(user.createdAt)}
+          <br />
+          Last updated: {formatIsoDateUTC(user.updatedAt)}
+        </div>
+      </div>
+      <div className="praise-box flex flex-col gap-2">
+        <span>Linked Discord identity</span>
+        {user?.accounts?.map((account) => (
+          <>
+            <span className="text-xl font-bold">{account.name}</span>
+            <div>
+              Discord User ID: {account.user}
+              <br />
+              Created: {formatIsoDateUTC(account.createdAt)}
+              <br />
+              Last updated: {formatIsoDateUTC(account.updatedAt)}
+            </div>
+          </>
+        ))}
+      </div>
+      <div className="praise-box">
+        <span className="text-xl font-bold">Roles</span>
+        <div className="flex gap-4 pt-5">
+          {roles.map((role) => (
+            <div
+              key={role}
+              className={classNames(
+                'flex gap-2 justify-center items-center py-2 px-3 rounded-md cursor-pointer bg-black',
+                user.roles.includes(role) ? '' : 'opacity-50'
+              )}
+              onClick={(): void => void handleRole(role, user)}
+            >
+              <input
+                checked={user.roles.includes(role)}
+                className="text-lime-500 cursor-pointer"
+                name={role}
+                type="checkbox"
+                readOnly
+              />
+              <label className="text-white cursor-pointer" htmlFor={role}>
+                {role}
+              </label>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserDetailsPage;

packages/frontend/src/pages/Users/UsersPage.tsx

@@ -1,58 +1,14 @@
 import BreadCrumb from '@/components/BreadCrumb';
-import { useAdminUsers } from '@/model/users';
-import PoolAddDialog from '@/pages/Users/components/AddDialog';
-import { faPlus, faUserFriends } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Dialog } from '@headlessui/react';
-import { UserRole } from 'api/dist/user/types';
-import React from 'react';
+import { faUserFriends } from '@fortawesome/free-solid-svg-icons';
+import UsersStatistics from './components/UsersStatistics';
 import UsersTable from './components/UsersTable';
 
-const AddRoleButton = (): JSX.Element => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const { addRole } = useAdminUsers();
-
-  const handleAddQuantifierClick = (): void => {
-    setIsOpen(true);
-  };
-
-  const handleQuantifierAdded = (id: string): void => {
-    void addRole(id, UserRole.QUANTIFIER);
-  };
-
-  return (
-    <button className="praise-button" onClick={handleAddQuantifierClick}>
-      <FontAwesomeIcon icon={faPlus} size="1x" className="mr-2" />
-      Add quantifier
-      {isOpen ? (
-        <Dialog
-          open={isOpen}
-          onClose={(): void => setIsOpen(false)}
-          className="fixed inset-0 z-10 overflow-y-auto"
-        >
-          <div>
-            <PoolAddDialog
-              onClose={(): void => setIsOpen(false)}
-              onQuantifierAdded={handleQuantifierAdded}
-            />
-          </div>
-        </Dialog>
-      ) : null}
-    </button>
-  );
-};
-
 const UsersPage = (): JSX.Element => {
   return (
     <div className="max-w-2xl mx-auto">
-      <BreadCrumb name="Quantifier pool" icon={faUserFriends} />
-
+      <BreadCrumb name="Users" icon={faUserFriends} />
+      <UsersStatistics />
       <div className="praise-box">
-        <div className="mb-2 text-right">
-          <React.Suspense fallback="Loading…">
-            <AddRoleButton />
-          </React.Suspense>
-        </div>
         <UsersTable />
       </div>
     </div>