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

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;