Refactor subuser modal and fix to be less of a code monstrosity; closes #2583

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

@@ -10,7 +10,7 @@ export default () => {
 
     return (
         <>
-            {visible && <EditSubuserModal appear visible onDismissed={() => setVisible(false)}/>}
+            <EditSubuserModal visible={visible} onModalDismissed={() => setVisible(false)}/>
             <Button onClick={() => setVisible(true)}>
                 <FontAwesomeIcon icon={faUserPlus} css={tw`mr-1`}/> New User
             </Button>

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,111 +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);
-            <h2 css={tw`text-2xl`} ref={ref}>
-                {subuser ?
-                    `${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}`
-                    :
-                    'Create new subuser'
-                }
-            </h2>
-            <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-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) => {
-                    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) {
@@ -236,10 +75,8 @@ export default ({ subuser, ...props }: Props) => {
             });
     };
 
-    useEffect(() => {
+    useEffect(() => () => {
-        return () => {
         clearFlashes('user:edit');
-        };
     }, []);
 
     return (
@@ -258,8 +95,61 @@ export default ({ subuser, ...props }: Props) => {
             })}
         >
             <Form>
-                <EditSubuserModal ref={ref} subuser={subuser} {...props}/>
+                <h2 css={tw`text-2xl`} ref={ref}>
+                    {subuser ? `${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}` : 'Create new subuser'}
+                </h2>
+                <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);

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

@@ -0,0 +1,65 @@
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+import Checkbox from '@/components/elements/Checkbox';
+import React from 'react';
+import { useStoreState } from 'easy-peasy';
+import Label from '@/components/elements/Label';
+
+const Container = styled.label`
+  ${tw`flex items-center border border-transparent rounded md:p-2 transition-colors duration-75`};
+  text-transform: none;
+
+  &:not(.disabled) {
+      ${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 Props {
+    permission: string;
+    disabled: boolean;
+}
+
+const PermissionRow = ({ permission, disabled }: Props) => {
+    const [ key, pkey ] = permission.split('.', 2);
+    const permissions = useStoreState(state => state.permissions.data);
+
+    return (
+        <Container htmlFor={`permission_${permission}`} className={disabled ? 'disabled' : undefined}>
+            <div css={tw`p-2`}>
+                <Checkbox
+                    id={`permission_${permission}`}
+                    name={'permissions'}
+                    value={permission}
+                    css={tw`w-5 h-5 mr-2`}
+                    disabled={disabled}
+                />
+            </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>
+        </Container>
+    );
+};
+
+export default PermissionRow;

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

@@ -0,0 +1,50 @@
+import React, { memo, useCallback } from 'react';
+import { useField } from 'formik';
+import TitledGreyBox from '@/components/elements/TitledGreyBox';
+import tw from 'twin.macro';
+import Input from '@/components/elements/Input';
+import isEqual from 'react-fast-compare';
+
+interface Props {
+    isEditable: boolean;
+    title: string;
+    permissions: string[];
+    className?: string;
+}
+
+const PermissionTitleBox: React.FC<Props> = memo(({ isEditable, title, permissions, className, children }) => {
+    const [ { value }, , { setValue } ] = useField<string[]>('permissions');
+
+    const onCheckboxClicked = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.currentTarget.checked) {
+            setValue([
+                ...value,
+                ...permissions.filter(p => !value.includes(p)),
+            ]);
+        } else {
+            setValue(value.filter(p => !permissions.includes(p)));
+        }
+    }, [ permissions, value ]);
+
+    return (
+        <TitledGreyBox
+            title={
+                <div css={tw`flex items-center`}>
+                    <p css={tw`text-sm uppercase flex-1`}>{title}</p>
+                    {isEditable &&
+                    <Input
+                        type={'checkbox'}
+                        checked={permissions.every(p => value.includes(p))}
+                        onChange={onCheckboxClicked}
+                    />
+                    }
+                </div>
+            }
+            className={className}
+        >
+            {children}
+        </TitledGreyBox>
+    );
+}, isEqual);
+
+export default PermissionTitleBox;

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

@@ -19,14 +19,11 @@ export default ({ subuser }: Props) => {
 
     return (
         <GreyRowBox css={tw`mb-2`}>
-            {visible &&
             <EditSubuserModal
-                appear
-                visible
                 subuser={subuser}
-                onDismissed={() => setVisible(false)}
+                visible={visible}
+                onModalDismissed={() => setVisible(false)}
             />
-            }
             <div css={tw`w-10 h-10 rounded-full bg-white border-2 border-neutral-800 overflow-hidden hidden md:block`}>
                 <img css={tw`w-full h-full`} src={`${subuser.image}?s=400`}/>
             </div>

resources/scripts/hoc/asModal.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import Modal, { ModalProps } from '@/components/elements/Modal';
 import ModalContext from '@/context/ModalContext';
-import isEqual from 'react-fast-compare';
 
 export interface AsModalProps {
     visible: boolean;
@@ -13,7 +12,7 @@ type ExtendedModalProps = Omit<ModalProps, 'appear' | 'visible' | 'onDismissed'>
 interface State {
     render: boolean;
     visible: boolean;
-    modalProps: ExtendedModalProps | undefined;
+    showSpinnerOverlay?: boolean;
 }
 
 type ExtendedComponentType<T> = (C: React.ComponentType<T>) => React.ComponentType<T & AsModalProps>;
@@ -30,17 +29,18 @@ function asModal<P extends object> (modalProps?: ExtendedModalProps | ((props: P
                 this.state = {
                     render: props.visible,
                     visible: props.visible,
-                    modalProps: typeof modalProps === 'function' ? modalProps(this.props) : modalProps,
+                    showSpinnerOverlay: undefined,
+                };
+            }
+
+            get modalProps () {
+                return {
+                    ...(typeof modalProps === 'function' ? modalProps(this.props) : modalProps),
+                    showSpinnerOverlay: this.state.showSpinnerOverlay,
                 };
             }
 
             componentDidUpdate (prevProps: Readonly<P & AsModalProps>) {
-                const mapped = typeof modalProps === 'function' ? modalProps(this.props) : modalProps;
-                if (!isEqual(this.state.modalProps, mapped)) {
-                    // noinspection JSPotentiallyInvalidUsageOfThis
-                    this.setState({ modalProps: mapped });
-                }
-
                 if (prevProps.visible && !this.props.visible) {
                     // noinspection JSPotentiallyInvalidUsageOfThis
                     this.setState({ visible: false });
@@ -52,22 +52,10 @@ function asModal<P extends object> (modalProps?: ExtendedModalProps | ((props: P
 
             dismiss = () => this.setState({ visible: false });
 
-            toggleSpinner = (value?: boolean) => this.setState(s => ({
+            toggleSpinner = (value?: boolean) => this.setState({ showSpinnerOverlay: value });
-                modalProps: {
-                    ...s.modalProps,
-                    showSpinnerOverlay: value || false,
-                },
-            }));
 
             render () {
                 return (
-                    <ModalContext.Provider
-                        value={{
-                            dismiss: this.dismiss.bind(this),
-                            toggleSpinner: this.toggleSpinner.bind(this),
-                        }}
-                    >
-                        {
                     this.state.render ?
                         <Modal
                             appear
@@ -77,14 +65,19 @@ function asModal<P extends object> (modalProps?: ExtendedModalProps | ((props: P
                                     this.props.onModalDismissed();
                                 }
                             })}
-                                    {...this.state.modalProps}
+                            {...this.modalProps}
+                        >
+                            <ModalContext.Provider
+                                value={{
+                                    dismiss: this.dismiss.bind(this),
+                                    toggleSpinner: this.toggleSpinner.bind(this),
+                                }}
                             >
                                 <Component {...this.props}/>
+                            </ModalContext.Provider>
                         </Modal>
                         :
                         null
-                        }
-                    </ModalContext.Provider>
                 );
             }
         };