Update EditSubuserModal.tsx

resources/scripts/components/server/users/EditSubuserModal.tsx

@@ -1,14 +1,10 @@
-import React, { forwardRef, memo, useCallback, useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { Subuser } from '@/state/server/subusers';
-import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
+import { Form, Formik } from 'formik';
 import { array, object, string } from 'yup';
-import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import Field from '@/components/elements/Field';
 import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
-import TitledGreyBox from '@/components/elements/TitledGreyBox';
-import Checkbox from '@/components/elements/Checkbox';
-import styled from 'styled-components/macro';
 import createOrUpdateSubuser from '@/api/server/users/createOrUpdateSubuser';
 import { ServerContext } from '@/state/server';
 import FlashMessageRender from '@/components/FlashMessageRender';
@@ -17,104 +13,33 @@ import { usePermissions } from '@/plugins/usePermissions';
 import { useDeepCompareMemo } from '@/plugins/useDeepCompareMemo';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
-import Label from '@/components/elements/Label';
+import PermissionTitleBox from '@/components/server/users/PermissionTitleBox';
-import Input from '@/components/elements/Input';
+import asModal from '@/hoc/asModal';
-import isEqual from 'react-fast-compare';
+import PermissionRow from '@/components/server/users/PermissionRow';
+import ModalContext from '@/context/ModalContext';
 
 type Props = {
     subuser?: Subuser;
-} & RequiredModalProps;
+};
 
 interface Values {
     email: string;
     permissions: string[];
 }
 
-const PermissionLabel = styled.label`
+const EditSubuserModal = ({ subuser }: Props) => {
-  ${tw`flex items-center border border-transparent rounded md:p-2 transition-colors duration-75`};
+    const ref = useRef<HTMLHeadingElement>(null);
-  text-transform: none;
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const appendSubuser = ServerContext.useStoreActions(actions => actions.subusers.appendSubuser);
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const { dismiss, toggleSpinner } = useContext(ModalContext);
 
-  &:not(.disabled) {
+    const isRootAdmin = useStoreState(state => state.user.data!.rootAdmin);
-      ${tw`cursor-pointer`};
-
-      &:hover {
-        ${tw`border-neutral-500 bg-neutral-800`};
-      }
-  }
-
-  &:not(:first-of-type) {
-      ${tw`mt-4 sm:mt-2`};
-  }
-
-  &.disabled {
-      ${tw`opacity-50`};
-
-      & input[type="checkbox"]:not(:checked) {
-          ${tw`border-0`};
-      }
-  }
-`;
-
-interface TitleProps {
-    isEditable: boolean;
-    permission: string;
-    permissions: string[];
-    children: React.ReactNode;
-    className?: string;
-}
-
-const PermissionTitledBox = memo(({ isEditable, permission, permissions, className, children }: TitleProps) => {
-    const { values, setFieldValue } = useFormikContext<Values>();
-
-    const onCheckboxClicked = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-        console.log(e.currentTarget.checked, [
-            ...values.permissions,
-            ...permissions.filter(p => !values.permissions.includes(p)),
-        ]);
-
-        if (e.currentTarget.checked) {
-            setFieldValue('permissions', [
-                ...values.permissions,
-                ...permissions.filter(p => !values.permissions.includes(p)),
-            ]);
-        } else {
-            setFieldValue('permissions', [
-                ...values.permissions.filter(p => !permissions.includes(p)),
-            ]);
-        }
-    }, [ permissions, values.permissions ]);
-
-    return (
-        <TitledGreyBox
-            title={
-                <div css={tw`flex items-center`}>
-                    <p css={tw`text-sm uppercase flex-1`}>{permission}</p>
-                    {isEditable &&
-                        <Input
-                            type={'checkbox'}
-                            checked={permissions.every(p => values.permissions.includes(p))}
-                            onChange={onCheckboxClicked}
-                        />
-                    }
-                </div>
-            }
-            className={className}
-        >
-            {children}
-        </TitledGreyBox>
-    );
-}, isEqual);
-
-const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...props }, ref) => {
-    const { isSubmitting } = useFormikContext<Values>();
-    const [ canEditUser ] = usePermissions(subuser ? [ 'user.update' ] : [ 'user.create' ]);
     const permissions = useStoreState(state => state.permissions.data);
-
-    const user = useStoreState(state => state.user.data!);
-
     // The currently logged in user's permissions. We're going to filter out any permissions
     // that they should not need.
     const loggedInPermissions = ServerContext.useStoreState(state => state.server.permissions);
+    const [ canEditUser ] = usePermissions(subuser ? [ 'user.update' ] : [ 'user.create' ]);
 
     // The permissions that can be modified by this user.
     const editablePermissions = useDeepCompareMemo(() => {
@@ -123,120 +48,25 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
 
         const list: string[] = ([] as string[]).concat.apply([], Object.values(cleaned));
 
-        if (user.rootAdmin || (loggedInPermissions.length === 1 && loggedInPermissions[0] === '*')) {
+        if (isRootAdmin || (loggedInPermissions.length === 1 && loggedInPermissions[0] === '*')) {
             return list;
         }
 
         return list.filter(key => loggedInPermissions.indexOf(key) >= 0);
-    }, [ permissions, loggedInPermissions ]);
+    }, [ isRootAdmin, permissions, loggedInPermissions ]);
 
-    return (
+    const submit = (values: Values) => {
-        <Modal {...props} top={false} showSpinnerOverlay={isSubmitting}>
+        toggleSpinner(true);
-            <div css={tw`flex justify-between`}>
-                <div>
-                    <h2 css={tw`text-2xl mr-4`} ref={ref}>
-                        {subuser ?
-                            `${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}`
-                            :
-                            'Create new subuser '
-                        }
-                    </h2>
-                </div>
-                <div>
-                    <Button type={'submit'} css={tw`w-full sm:w-auto`}>
-                        {subuser ? 'Save' : 'Invite User'}
-                    </Button>
-                </div>
-            </div>
-            <FlashMessageRender byKey={'user:edit'} css={tw`mt-4`} />
-            {(!user.rootAdmin && loggedInPermissions[0] !== '*') &&
-                <div css={tw`mt-4 pl-4 py-2 border-l-4 border-cyan-400`}>
-                    <p css={tw`text-sm text-neutral-300`}>
-                        Only permissions which your account is currently assigned may be selected when creating or
-                        modifying other users.
-                    </p>
-                </div>
-            }
-            {!subuser &&
-                <div css={tw`mt-4`}>
-                    <Field
-                        name={'email'}
-                        label={'User Email'}
-                        description={'Enter the email address of the user you wish to invite as a subuser for this server.'}
-                    />
-                </div>
-            }
-            <div css={tw`my-6`}>
-                {Object.keys(permissions).filter(key => key !== 'websocket').map((key, index) => {
-                    const group = Object.keys(permissions[key].keys).map(pkey => `${key}.${pkey}`);
-
-                    return (
-                        <PermissionTitledBox
-                            key={`permission_${key}`}
-                            isEditable={canEditUser}
-                            permission={key}
-                            permissions={group}
-                            css={index > 0 ? tw`mt-4` : undefined}
-                        >
-                            <p css={tw`text-sm text-neutral-400 mb-4`}>
-                                {permissions[key].description}
-                            </p>
-                            {Object.keys(permissions[key].keys).map(pkey => (
-                                <PermissionLabel
-                                    key={`permission_${key}_${pkey}`}
-                                    htmlFor={`permission_${key}_${pkey}`}
-                                    className={(!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0) ? 'disabled' : undefined}
-                                >
-                                    <div css={tw`p-2`}>
-                                        <Checkbox
-                                            id={`permission_${key}_${pkey}`}
-                                            name={'permissions'}
-                                            value={`${key}.${pkey}`}
-                                            css={tw`w-5 h-5 mr-2`}
-                                            disabled={!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0}
-                                        />
-                                    </div>
-                                    <div css={tw`flex-1`}>
-                                        <Label as={'p'} css={tw`font-medium`}>{pkey}</Label>
-                                        {permissions[key].keys[pkey].length > 0 &&
-                                            <p css={tw`text-xs text-neutral-400 mt-1`}>
-                                                {permissions[key].keys[pkey]}
-                                            </p>
-                                        }
-                                    </div>
-                                </PermissionLabel>
-                            ))}
-                        </PermissionTitledBox>
-                    );
-                })}
-            </div>
-            <Can action={subuser ? 'user.update' : 'user.create'}>
-                <div css={tw`pb-6 flex justify-end`}>
-                    <Button type={'submit'} css={tw`w-full sm:w-auto`}>
-                        {subuser ? 'Save' : 'Invite User'}
-                    </Button>
-                </div>
-            </Can>
-        </Modal>
-    );
-});
-
-export default ({ subuser, ...props }: Props) => {
-    const ref = useRef<HTMLHeadingElement>(null);
-    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
-    const appendSubuser = ServerContext.useStoreActions(actions => actions.subusers.appendSubuser);
-    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
-
-    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('user:edit');
+
         createOrUpdateSubuser(uuid, values, subuser)
             .then(subuser => {
                 appendSubuser(subuser);
-                props.onDismissed();
+                dismiss();
             })
             .catch(error => {
                 console.error(error);
-                setSubmitting(false);
+                toggleSpinner(false);
                 clearAndAddHttpError({ key: 'user:edit', error });
 
                 if (ref.current) {
@@ -245,10 +75,8 @@ export default ({ subuser, ...props }: Props) => {
             });
     };
 
-    useEffect(() => {
+    useEffect(() => () => {
-        return () => {
+        clearFlashes('user:edit');
-            clearFlashes('user:edit');
-        };
     }, []);
 
     return (
@@ -267,8 +95,68 @@ export default ({ subuser, ...props }: Props) => {
             })}
         >
             <Form>
-                <EditSubuserModal ref={ref} subuser={subuser} {...props} />
+                <div css={tw`flex justify-between`}>
+                    <h2 css={tw`text-2xl`} ref={ref}>
+                        {subuser ? `${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}` : 'Create new subuser'}
+                    </h2>
+                    <div>
+                        <Button type={'submit'} css={tw`w-full sm:w-auto`}>
+                            {subuser ? 'Save' : 'Invite User'}
+                        </Button>
+                    </div>
+                </div>
+                <FlashMessageRender byKey={'user:edit'} css={tw`mt-4`} />
+                {(!isRootAdmin && loggedInPermissions[0] !== '*') &&
+                    <div css={tw`mt-4 pl-4 py-2 border-l-4 border-cyan-400`}>
+                        <p css={tw`text-sm text-neutral-300`}>
+                            Only permissions which your account is currently assigned may be selected when creating or
+                            modifying other users.
+                        </p>
+                    </div>
+                }
+                {!subuser &&
+                    <div css={tw`mt-6`}>
+                        <Field
+                            name={'email'}
+                            label={'User Email'}
+                            description={'Enter the email address of the user you wish to invite as a subuser for this server.'}
+                        />
+                    </div>
+                }
+                <div css={tw`my-6`}>
+                    {Object.keys(permissions).filter(key => key !== 'websocket').map((key, index) => (
+                        <PermissionTitleBox
+                            key={`permission_${key}`}
+                            title={key}
+                            isEditable={canEditUser}
+                            permissions={Object.keys(permissions[key].keys).map(pkey => `${key}.${pkey}`)}
+                            css={index > 0 ? tw`mt-4` : undefined}
+                        >
+                            <p css={tw`text-sm text-neutral-400 mb-4`}>
+                                {permissions[key].description}
+                            </p>
+                            {Object.keys(permissions[key].keys).map(pkey => (
+                                <PermissionRow
+                                    key={`permission_${key}.${pkey}`}
+                                    permission={`${key}.${pkey}`}
+                                    disabled={!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0}
+                                />
+                            ))}
+                        </PermissionTitleBox>
+                    ))}
+                </div>
+                <Can action={subuser ? 'user.update' : 'user.create'}>
+                    <div css={tw`pb-6 flex justify-end`}>
+                        <Button type={'submit'} css={tw`w-full sm:w-auto`}>
+                            {subuser ? 'Save' : 'Invite User'}
+                        </Button>
+                    </div>
+                </Can>
             </Form>
         </Formik>
     );
 };
+
+export default asModal<Props>({
+    top: false,
+})(EditSubuserModal);