ui(admin): add "working" React admin ui

resources/scripts/components/admin/users/UserAboutContainer.tsx

@@ -0,0 +1,62 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { useNavigate } from 'react-router-dom';
+
+import type { UpdateUserValues } from '@/api/admin/users';
+import { updateUser } from '@/api/admin/users';
+import UserDeleteButton from '@/components/admin/users/UserDeleteButton';
+import UserForm from '@/components/admin/users/UserForm';
+import { Context } from '@/components/admin/users/UserRouter';
+import type { ApplicationStore } from '@/state';
+import tw from 'twin.macro';
+
+const UserAboutContainer = () => {
+    const navigate = useNavigate();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const user = Context.useStoreState(state => state.user);
+    const setUser = Context.useStoreActions(actions => actions.setUser);
+
+    if (user === undefined) {
+        return <></>;
+    }
+
+    const submit = (values: UpdateUserValues, { setSubmitting }: FormikHelpers<UpdateUserValues>) => {
+        clearFlashes('user');
+
+        updateUser(user.id, values)
+            .then(() => setUser({ ...user, ...values }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'user', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <UserForm
+            title={'Edit User'}
+            initialValues={{
+                externalId: user.externalId,
+                username: user.username,
+                email: user.email,
+                adminRoleId: user.adminRoleId,
+                password: '',
+                rootAdmin: user.isRootAdmin,
+            }}
+            onSubmit={submit}
+            uuid={user.uuid}
+            role={user.relationships.role || null}
+        >
+            <div css={tw`flex`}>
+                <UserDeleteButton userId={user.id} onDeleted={() => navigate('/admin/users')} />
+            </div>
+        </UserForm>
+    );
+};
+
+export default UserAboutContainer;