feature: add web & migrate commands

frontend/src/Admin/index.tsx

@@ -3,11 +3,11 @@ import Admin from 'shared/components/Admin';
 import Select from 'shared/components/Select';
 import GlobalTopNavbar from 'App/TopNavbar';
 import {
-  useUsersQuery,
-  useDeleteUserAccountMutation,
-  useCreateUserAccountMutation,
-  UsersDocument,
-  UsersQuery,
+    useUsersQuery,
+    useDeleteUserAccountMutation,
+    useCreateUserAccountMutation,
+    UsersDocument,
+    UsersQuery,
 } from 'shared/generated/graphql';
 import Input from 'shared/components/Input';
 import styled from 'styled-components';
@@ -33,25 +33,25 @@ const DeleteUserButton = styled(Button)`
 `;
 
 type DeleteUserPopupProps = {
-  onDeleteUser: () => void;
+    onDeleteUser: () => void;
 };
 const DeleteUserPopup: React.FC<DeleteUserPopupProps> = ({ onDeleteUser }) => {
-  return (
-    <DeleteUserWrapper>
-      <DeleteUserDescription>Deleting this user will remove all user related data.</DeleteUserDescription>
-      <DeleteUserButton onClick={() => onDeleteUser()} color="danger">
-        Delete user
+    return (
+        <DeleteUserWrapper>
+            <DeleteUserDescription>Deleting this user will remove all user related data.</DeleteUserDescription>
+            <DeleteUserButton onClick={() => onDeleteUser()} color="danger">
+                Delete user
       </DeleteUserButton>
-    </DeleteUserWrapper>
-  );
+        </DeleteUserWrapper>
+    );
 };
 type CreateUserData = {
-  email: string;
-  username: string;
-  fullName: string;
-  initials: string;
-  password: string;
-  roleCode: string;
+    email: string;
+    username: string;
+    fullName: string;
+    initials: string;
+    password: string;
+    roleCode: string;
 };
 const CreateUserForm = styled.form`
   display: flex;
@@ -73,162 +73,167 @@ const InputError = styled.span`
 `;
 
 type AddUserPopupProps = {
-  onAddUser: (user: CreateUserData) => void;
+    onAddUser: (user: CreateUserData) => void;
 };
 
 const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
-  const { register, handleSubmit, errors, setValue } = useForm<CreateUserData>();
-  const [role, setRole] = useState<string | null>(null);
-  register({ name: 'roleCode' }, { required: true });
+    const { register, handleSubmit, errors, setValue } = useForm<CreateUserData>();
+    const [role, setRole] = useState<string | null>(null);
+    register({ name: 'roleCode' }, { required: true });
 
-  const createUser = (data: CreateUserData) => {
-    onAddUser(data);
-  };
-  return (
-    <CreateUserForm onSubmit={handleSubmit(createUser)}>
-      <AddUserInput
-        floatingLabel
-        width="100%"
-        label="Full Name"
-        id="fullName"
-        name="fullName"
-        variant="alternate"
-        ref={register({ required: 'Full name is required' })}
-      />
-      {errors.fullName && <InputError>{errors.fullName.message}</InputError>}
-      <AddUserInput
-        floatingLabel
-        width="100%"
-        label="Email"
-        id="email"
-        name="email"
-        variant="alternate"
-        ref={register({ required: 'Email is required' })}
-      />
-      <Select
-        label="Role"
-        value={role}
-        options={[
-          { label: 'Admin', value: 'admin' },
-          { label: 'Member', value: 'member' },
-        ]}
-        onChange={newRole => {
-          setRole(newRole);
-          setValue('roleCode', newRole.value);
-        }}
-      />
-      {errors.email && <InputError>{errors.email.message}</InputError>}
-      <AddUserInput
-        floatingLabel
-        width="100%"
-        label="Username"
-        id="username"
-        name="username"
-        variant="alternate"
-        ref={register({ required: 'Username is required' })}
-      />
-      {errors.username && <InputError>{errors.username.message}</InputError>}
-      <AddUserInput
-        floatingLabel
-        width="100%"
-        label="Initials"
-        id="initials"
-        name="initials"
-        variant="alternate"
-        ref={register({ required: 'Initials is required' })}
-      />
-      {errors.initials && <InputError>{errors.initials.message}</InputError>}
-      <AddUserInput
-        floatingLabel
-        width="100%"
-        label="Password"
-        id="password"
-        name="password"
-        variant="alternate"
-        ref={register({ required: 'Password is required' })}
-      />
-      {errors.password && <InputError>{errors.password.message}</InputError>}
-      <CreateUserButton type="submit">Create</CreateUserButton>
-    </CreateUserForm>
-  );
+    const createUser = (data: CreateUserData) => {
+        onAddUser(data);
+    };
+    return (
+        <CreateUserForm onSubmit={handleSubmit(createUser)}>
+            <AddUserInput
+                floatingLabel
+                width="100%"
+                label="Full Name"
+                id="fullName"
+                name="fullName"
+                variant="alternate"
+                ref={register({ required: 'Full name is required' })}
+            />
+            {errors.fullName && <InputError>{errors.fullName.message}</InputError>}
+            <AddUserInput
+                floatingLabel
+                width="100%"
+                label="Email"
+                id="email"
+                name="email"
+                variant="alternate"
+                ref={register({ required: 'Email is required' })}
+            />
+            <Select
+                label="Role"
+                value={role}
+                options={[
+                    { label: 'Admin', value: 'admin' },
+                    { label: 'Member', value: 'member' },
+                ]}
+                onChange={newRole => {
+                    setRole(newRole);
+                    setValue('roleCode', newRole.value);
+                }}
+            />
+            {errors.email && <InputError>{errors.email.message}</InputError>}
+            <AddUserInput
+                floatingLabel
+                width="100%"
+                label="Username"
+                id="username"
+                name="username"
+                variant="alternate"
+                ref={register({ required: 'Username is required' })}
+            />
+            {errors.username && <InputError>{errors.username.message}</InputError>}
+            <AddUserInput
+                floatingLabel
+                width="100%"
+                label="Initials"
+                id="initials"
+                name="initials"
+                variant="alternate"
+                ref={register({ required: 'Initials is required' })}
+            />
+            {errors.initials && <InputError>{errors.initials.message}</InputError>}
+            <AddUserInput
+                floatingLabel
+                width="100%"
+                label="Password"
+                id="password"
+                name="password"
+                variant="alternate"
+                ref={register({ required: 'Password is required' })}
+            />
+            {errors.password && <InputError>{errors.password.message}</InputError>}
+            <CreateUserButton type="submit">Create</CreateUserButton>
+        </CreateUserForm>
+    );
 };
 
 const AdminRoute = () => {
-  useEffect(() => {
-    document.title = 'Citadel | Admin';
-  }, []);
-  const { loading, data } = useUsersQuery();
-  const { showPopup, hidePopup } = usePopup();
-  const [deleteUser] = useDeleteUserAccountMutation({
-    update: (client, response) => {
-      updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
-        produce(cache, draftCache => {
-          draftCache.users = cache.users.filter(u => u.id !== response.data.deleteUserAccount.userAccount.id);
-        }),
-      );
-    },
-  });
-  const [createUser] = useCreateUserAccountMutation({
-    update: (client, createData) => {
-      const cacheData: any = client.readQuery({
-        query: UsersDocument,
-      });
-      console.log(cacheData);
-      console.log(createData);
-      const newData = produce(cacheData, (draftState: any) => {
-        draftState.users = [...draftState.users, { ...createData.data.createUserAccount }];
-      });
-
-      client.writeQuery({
-        query: UsersDocument,
-        data: {
-          ...newData,
+    useEffect(() => {
+        document.title = 'Citadel | Admin';
+    }, []);
+    const { loading, data } = useUsersQuery();
+    const { showPopup, hidePopup } = usePopup();
+    const [deleteUser] = useDeleteUserAccountMutation({
+        update: (client, response) => {
+            updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
+                produce(cache, draftCache => {
+                    draftCache.users = cache.users.filter(u => u.id !== response.data.deleteUserAccount.userAccount.id);
+                }),
+            );
         },
-      });
-    },
-  });
-  if (loading) {
-    return <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />;
-  }
-  if (data) {
-    return (
-      <>
-        <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />
-        <Admin
-          initialTab={1}
-          users={data.users}
-          onInviteUser={() => {}}
-          onDeleteUser={($target, userID) => {
-            showPopup(
-              $target,
-              <Popup tab={0} title="Delete user?" onClose={() => hidePopup()}>
-                <DeleteUserPopup
-                  onDeleteUser={() => {
-                    deleteUser({ variables: { userID } });
-                    hidePopup();
-                  }}
+    });
+    const [createUser] = useCreateUserAccountMutation({
+        update: (client, createData) => {
+            const cacheData: any = client.readQuery({
+                query: UsersDocument,
+            });
+            console.log(cacheData);
+            console.log(createData);
+            const newData = produce(cacheData, (draftState: any) => {
+                draftState.users = [...draftState.users, { ...createData.data.createUserAccount }];
+            });
+
+            client.writeQuery({
+                query: UsersDocument,
+                data: {
+                    ...newData,
+                },
+            });
+        },
+    });
+    if (loading) {
+        return <GlobalTopNavbar projectID={null} onSaveProjectName={() => { }} name={null} />;
+    }
+    if (data) {
+        return (
+            <>
+                <GlobalTopNavbar projectID={null} onSaveProjectName={() => { }} name={null} />
+                <Admin
+                    initialTab={1}
+                    users={data.users}
+                    onInviteUser={() => { }}
+                    onUpdateUserPassword={(user, password) => {
+                        console.log(user)
+                        console.log(password)
+                        hidePopup()
+                    }}
+                    onDeleteUser={($target, userID) => {
+                        showPopup(
+                            $target,
+                            <Popup tab={0} title="Delete user?" onClose={() => hidePopup()}>
+                                <DeleteUserPopup
+                                    onDeleteUser={() => {
+                                        deleteUser({ variables: { userID } });
+                                        hidePopup();
+                                    }}
+                                />
+                            </Popup>,
+                        );
+                    }}
+                    onAddUser={$target => {
+                        showPopup(
+                            $target,
+                            <Popup tab={0} title="Add member" onClose={() => hidePopup()}>
+                                <AddUserPopup
+                                    onAddUser={user => {
+                                        createUser({ variables: { ...user } });
+                                        hidePopup();
+                                    }}
+                                />
+                            </Popup>,
+                        );
+                    }}
                 />
-              </Popup>,
-            );
-          }}
-          onAddUser={$target => {
-            showPopup(
-              $target,
-              <Popup tab={0} title="Add member" onClose={() => hidePopup()}>
-                <AddUserPopup
-                  onAddUser={user => {
-                    createUser({ variables: { ...user } });
-                    hidePopup();
-                  }}
-                />
-              </Popup>,
-            );
-          }}
-        />
-      </>
-    );
-  }
-  return <span>error</span>;
+            </>
+        );
+    }
+    return <span>error</span>;
 };
 
 export default AdminRoute;