From 9f934b5ab8c2209c6760e4388a6e0592e9dd41c2 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 27 Feb 2022 11:04:57 -0500
Subject: [PATCH] Break table rows into own component

---
 .../components/admin/users/UserTableRow.tsx   | 80 +++++++++++++++
 .../admin/users/UsersContainerV2.tsx          | 97 +++----------------
 2 files changed, 94 insertions(+), 83 deletions(-)
 create mode 100644 resources/scripts/components/admin/users/UserTableRow.tsx

diff --git a/resources/scripts/components/admin/users/UserTableRow.tsx b/resources/scripts/components/admin/users/UserTableRow.tsx
new file mode 100644
index 000000000..62d036a5c
--- /dev/null
+++ b/resources/scripts/components/admin/users/UserTableRow.tsx
@@ -0,0 +1,80 @@
+import { Checkbox } from '@/components/elements/inputs';
+import { Dropdown } from '@/components/elements/dropdown';
+import { BanIcon, DotsVerticalIcon, LockOpenIcon, PencilIcon, SupportIcon, TrashIcon } from '@heroicons/react/solid';
+import React, { useState } from 'react';
+import { User } from '@/api/admin/user';
+import { Dialog } from '@/components/elements/dialog';
+import { Button } from '@/components/elements/button/index';
+
+interface Props {
+    user: User;
+}
+
+const UserTableRow = ({ user }: Props) => {
+    const [ visible, setVisible ] = useState(false);
+
+    return (
+        <>
+            <Dialog title={'Delete account'} visible={visible} onDismissed={() => setVisible(false)}>
+                <Dialog.Icon type={'danger'}/>
+                This account will be permanently deleted.
+                <Dialog.Buttons>
+                    <Button.Text
+                        onClick={() => setVisible(false)}
+                    >
+                        Cancel
+                    </Button.Text>
+                    <Button.Danger>Delete</Button.Danger>
+                </Dialog.Buttons>
+            </Dialog>
+            <tr>
+                <td className={'whitespace-nowrap'}>
+                    <div className={'flex justify-end items-center w-8'}>
+                        <Checkbox/>
+                    </div>
+                </td>
+                <td className={'pl-6 py-4 whitespace-nowrap'}>
+                    <div className={'flex items-center'}>
+                        <div className={'w-10 h-10'}>
+                            <img src={user.avatarUrl} className={'w-10 h-10 rounded-full'} alt={'User avatar'}/>
+                        </div>
+                        <div className={'ml-4'}>
+                            <p className={'font-medium'}>
+                                {user.email}
+                            </p>
+                            <p className={'text-sm text-neutral-400'}>
+                                {user.uuid}
+                            </p>
+                        </div>
+                    </div>
+                </td>
+                <td className={'pl-2 py-4 whitespace-nowrap'}>
+                    {user.isUsingTwoFactor &&
+                    <span className={'bg-green-100 uppercase text-green-700 font-semibold text-xs px-2 py-0.5 rounded'}>
+                        2-FA Enabled
+                    </span>
+                    }
+                </td>
+                <td className={'px-6 py-4 whitespace-nowrap'}>
+                    <Dropdown>
+                        <Dropdown.Button className={'px-2'}>
+                            <DotsVerticalIcon/>
+                        </Dropdown.Button>
+                        <Dropdown.Item icon={<PencilIcon/>}>Edit</Dropdown.Item>
+                        <Dropdown.Item icon={<SupportIcon/>}>Reset Password</Dropdown.Item>
+                        <Dropdown.Item icon={<LockOpenIcon/>} disabled={!user.isUsingTwoFactor}>
+                            Disable 2-FA
+                        </Dropdown.Item>
+                        <Dropdown.Item icon={<BanIcon/>}>Suspend</Dropdown.Item>
+                        <Dropdown.Gap/>
+                        <Dropdown.Item icon={<TrashIcon/>} onClick={() => setVisible(true)} danger>Delete
+                            Account
+                        </Dropdown.Item>
+                    </Dropdown>
+                </td>
+            </tr>
+        </>
+    );
+};
+
+export default UserTableRow;
diff --git a/resources/scripts/components/admin/users/UsersContainerV2.tsx b/resources/scripts/components/admin/users/UsersContainerV2.tsx
index 96f57feca..f037fc9df 100644
--- a/resources/scripts/components/admin/users/UsersContainerV2.tsx
+++ b/resources/scripts/components/admin/users/UsersContainerV2.tsx
@@ -2,19 +2,10 @@ import React, { useEffect, useState } from 'react';
 import http from '@/api/http';
 import { User } from '@/api/admin/user';
 import { AdminTransformers } from '@/api/admin/transformers';
-import { Dropdown } from '@/components/elements/dropdown';
-import {
-    BanIcon,
-    DotsVerticalIcon,
-    LockOpenIcon,
-    PencilIcon,
-    PlusIcon,
-    SupportIcon,
-    TrashIcon,
-} from '@heroicons/react/solid';
+import { LockOpenIcon, PlusIcon, SupportIcon, TrashIcon } from '@heroicons/react/solid';
 import { Button } from '@/components/elements/button/index';
-import { Dialog } from '@/components/elements/dialog';
 import { Checkbox, InputField } from '@/components/elements/inputs';
+import UserTableRow from '@/components/admin/users/UserTableRow';
 
 const UsersContainerV2 = () => {
     const [ users, setUsers ] = useState<User[]>([]);
@@ -22,8 +13,6 @@ const UsersContainerV2 = () => {
         document.title = 'Admin | Users';
     }, []);
 
-    const [ visible, setVisible ] = useState(false);
-
     useEffect(() => {
         http.get('/api/application/users')
             .then(({ data }) => {
@@ -39,37 +28,30 @@ const UsersContainerV2 = () => {
                     Add User <PlusIcon className={'ml-2 w-5 h-5'}/>
                 </Button>
             </div>
-            <Dialog title={'Delete account'} visible={visible} onDismissed={() => setVisible(false)}>
-                <Dialog.Icon type={'danger'}/>
-                This account will be permanently deleted.
-                <Dialog.Buttons>
-                    <Button.Text
-                        onClick={() => setVisible(false)}
-                    >
-                        Cancel
-                    </Button.Text>
-                    <Button.Danger>Delete</Button.Danger>
-                </Dialog.Buttons>
-            </Dialog>
             <div className={'relative flex items-center rounded-t bg-neutral-700 px-4 py-2'}>
                 <div className={'mr-6'}>
-                    <Checkbox />
+                    <Checkbox/>
                 </div>
                 <div className={'flex-1'}>
-                    <InputField type={'text'} name={'filter'} placeholder={'Begin typing to filter...'} className={'w-56 focus:w-96'} />
+                    <InputField
+                        type={'text'}
+                        name={'filter'}
+                        placeholder={'Begin typing to filter...'}
+                        className={'w-56 focus:w-96'}
+                    />
                 </div>
                 <div className={'absolute rounded-t bg-neutral-700 w-full h-full top-0 left-0 flex items-center justify-end space-x-4 px-4'}>
                     <div className={'flex-1'}>
-                        <Checkbox indeterminate />
+                        <Checkbox indeterminate/>
                     </div>
                     <Button.Text square>
-                        <SupportIcon className={'w-4 h-4'} />
+                        <SupportIcon className={'w-4 h-4'}/>
                     </Button.Text>
                     <Button.Text square>
-                        <LockOpenIcon className={'w-4 h-4'} />
+                        <LockOpenIcon className={'w-4 h-4'}/>
                     </Button.Text>
                     <Button.Text square>
-                        <TrashIcon className={'w-4 h-4'} />
+                        <TrashIcon className={'w-4 h-4'}/>
                     </Button.Text>
                 </div>
             </div>
@@ -83,58 +65,7 @@ const UsersContainerV2 = () => {
                     </tr>
                 </thead>
                 <tbody>
-                    {users.map(user => (
-                        <tr key={user.uuid}>
-                            <td className={'whitespace-nowrap'}>
-                                <div className={'flex justify-end items-center w-8'}>
-                                    <Checkbox/>
-                                </div>
-                            </td>
-                            <td className={'pl-6 py-4 whitespace-nowrap'}>
-                                <div className={'flex items-center'}>
-                                    <div className={'w-10 h-10'}>
-                                        <img
-                                            src={user.avatarUrl}
-                                            className={'w-10 h-10 rounded-full'}
-                                            alt={'User avatar'}
-                                        />
-                                    </div>
-                                    <div className={'ml-4'}>
-                                        <p className={'font-medium'}>
-                                            {user.email}
-                                        </p>
-                                        <p className={'text-sm text-neutral-400'}>
-                                            {user.uuid}
-                                        </p>
-                                    </div>
-                                </div>
-                            </td>
-                            <td className={'pl-2 py-4 whitespace-nowrap'}>
-                                {user.isUsingTwoFactor &&
-                                <span className={'bg-green-100 uppercase text-green-600 font-semibold text-xs px-2 py-0.5 rounded'}>
-                                    2-FA Enabled
-                                </span>
-                                }
-                            </td>
-                            <td className={'px-6 py-4 whitespace-nowrap'}>
-                                <Dropdown>
-                                    <Dropdown.Button className={'px-2'}>
-                                        <DotsVerticalIcon/>
-                                    </Dropdown.Button>
-                                    <Dropdown.Item icon={<PencilIcon/>}>Edit</Dropdown.Item>
-                                    <Dropdown.Item icon={<SupportIcon/>}>Reset Password</Dropdown.Item>
-                                    <Dropdown.Item icon={<LockOpenIcon/>} disabled={!user.isUsingTwoFactor}>
-                                        Disable 2-FA
-                                    </Dropdown.Item>
-                                    <Dropdown.Item icon={<BanIcon/>}>Suspend</Dropdown.Item>
-                                    <Dropdown.Gap/>
-                                    <Dropdown.Item icon={<TrashIcon/>} onClick={() => setVisible(true)} danger>Delete
-                                        Account
-                                    </Dropdown.Item>
-                                </Dropdown>
-                            </td>
-                        </tr>
-                    ))}
+                    {users.map(user => <UserTableRow user={user} key={user.uuid}/>)}
                 </tbody>
             </table>
         </div>