Modernizing ui (#73)

Modernizing ui

ui/src/views/user/UserRemovalModal.jsx

@@ -1,21 +1,9 @@
 import React from 'react';
-import { Modal, Header, Icon, Button } from 'semantic-ui-react';
-
+import { Modal } from '@douyinfe/semi-ui';
 const UserRemovalModal = function UserRemovalModal({ onOk, onCancel }) {
   return (
-    <Modal open={true}>
-      <Header icon="warning sign" content="Warning" />
-      <Modal.Content>
-        <p>Removing this user will also remove all associated jobs.</p>
-      </Modal.Content>
-      <Modal.Actions>
-        <Button color="red" onClick={() => onCancel()}>
-          <Icon name="remove" /> Cancel
-        </Button>
-        <Button color="green" onClick={() => onOk()}>
-          <Icon name="checkmark" /> Remove
-        </Button>
-      </Modal.Actions>
+    <Modal title="Removing user" visible={true} closable={false} onOk={onOk} onCancel={onCancel}>
+      <p>Removing this user will also remove all associated jobs.</p>
     </Modal>
   );
 };

ui/src/views/user/Users.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
-import ToastContext from '../../components/toasts/ToastContext';
+import { Toast } from '@douyinfe/semi-ui';
 import UserTable from '../../components/table/UserTable';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button, Icon } from 'semantic-ui-react';
+import { IconPlus } from '@douyinfe/semi-icons';
+import { Button } from '@douyinfe/semi-ui';
 import UserRemovalModal from './UserRemovalModal';
 import { xhrDelete } from '../../services/xhr';
 import { useHistory } from 'react-router';
@@ -14,7 +15,6 @@ const Users = function Users() {
   const dispatch = useDispatch();
   const [loading, setLoading] = React.useState(true);
   const users = useSelector((state) => state.user.users);
-  const ctx = React.useContext(ToastContext);
   const [userIdToBeRemoved, setUserIdToBeRemoved] = React.useState(null);
   const history = useHistory();
 
@@ -23,30 +23,19 @@ const Users = function Users() {
       await dispatch.user.getUsers();
       setLoading(false);
     }
+
     init();
   }, []);
 
   const onUserRemoval = async () => {
     try {
       await xhrDelete('/api/admin/users', { userId: userIdToBeRemoved });
-      ctx.showToast({
-        title: 'Success',
-        message: 'User successfully remove',
-        delay: 4000,
-        backgroundColor: '#87eb8f',
-        color: '#000',
-      });
+      Toast.success('User successfully remove');
       setUserIdToBeRemoved(null);
       await dispatch.jobs.getJobs();
       await dispatch.user.getUsers();
     } catch (error) {
-      ctx.showToast({
-        title: 'Error',
-        message: error,
-        delay: 8000,
-        backgroundColor: '#db2828',
-        color: '#fff',
-      });
+      Toast.error(error);
       setUserIdToBeRemoved(null);
     }
   };
@@ -57,8 +46,12 @@ const Users = function Users() {
         <React.Fragment>
           {userIdToBeRemoved && <UserRemovalModal onCancel={() => setUserIdToBeRemoved(null)} onOk={onUserRemoval} />}
 
-          <Button primary className="users__newButton" onClick={() => history.push('/users/new')}>
-            <Icon name="plus" />
+          <Button
+            type="primary"
+            className="users__newButton"
+            icon={<IconPlus />}
+            onClick={() => history.push('/users/new')}
+          >
             Create new User
           </Button>
 

ui/src/views/user/mutation/UserMutator.jsx

@@ -1,14 +1,12 @@
 import React from 'react';
 
-import ToastContext from '../../../components/toasts/ToastContext';
 import { xhrGet, xhrPost } from '../../../services/xhr';
 import { useHistory, useParams } from 'react-router';
-import { Button, Form } from 'semantic-ui-react';
 import { useDispatch } from 'react-redux';
-import Switch from 'react-switch';
-
+import { Divider, Input, Switch, Button, Toast } from '@douyinfe/semi-ui';
 import './UserMutator.less';
 import { SegmentPart } from '../../../components/segment/SegmentPart';
+import { IconPlusCircle } from '@douyinfe/semi-icons';
 
 const UserMutator = function UserMutator() {
   const params = useParams();
@@ -18,7 +16,6 @@ const UserMutator = function UserMutator() {
   const [isAdmin, setIsAdmin] = React.useState(false);
 
   const history = useHistory();
-  const ctx = React.useContext(ToastContext);
   const dispatch = useDispatch();
 
   React.useEffect(() => {
@@ -38,6 +35,7 @@ const UserMutator = function UserMutator() {
         }
       }
     }
+
     init();
   }, [params.userId]);
 
@@ -51,76 +49,62 @@ const UserMutator = function UserMutator() {
         isAdmin,
       });
       await dispatch.user.getUsers();
-      ctx.showToast({
-        title: 'Success',
-        message: 'User successfully saved...',
-        delay: 5000,
-        backgroundColor: '#87eb8f',
-        color: '#000',
-      });
+      Toast.success('User successfully saved...');
       history.push('/users');
-    } catch (Exception) {
-      console.error(Exception);
-      ctx.showToast({
-        title: 'Error',
-        message: Exception.json.message,
-        delay: 6000,
-        backgroundColor: '#db2828',
-        color: '#fff',
-      });
+    } catch (error) {
+      console.error(error);
+      Toast.error(error.json.message);
     }
   };
 
   return (
-    <Form inverted className="userMutator">
+    <form className="userMutator">
       <SegmentPart name="Username" helpText="The username used to login to Fredy">
-        <Form.Input
+        <Input
           type="text"
           label="Username"
           maxLength={30}
           placeholder="Username"
           autoFocus
-          inverted
           width={6}
-          defaultValue={username}
-          onChange={(e) => setUsername(e.target.value)}
+          value={username}
+          onChange={(val) => setUsername(val)}
         />
       </SegmentPart>
+      <Divider margin="1rem" />
       <SegmentPart name="Password" helpText="The password used to login to Fredy">
-        <Form.Input
-          type="password"
+        <Input
+          mode="password"
           label="Password"
           placeholder="Password"
-          inverted
           width={6}
-          defaultValue={password}
-          onChange={(e) => setPassword(e.target.value)}
+          value={password}
+          onChange={(val) => setPassword(val)}
         />
       </SegmentPart>
+      <Divider margin="1rem" />
       <SegmentPart name="Retype password" helpText="Retype the password to make sure they match">
-        <Form.Input
-          type="password"
+        <Input
+          mode="password"
           label="Retype password"
           placeholder="Retype password"
-          inverted
           width={6}
-          defaultValue={password2}
-          onChange={(e) => setPassword2(e.target.value)}
+          value={password2}
+          onChange={(val) => setPassword2(val)}
         />
       </SegmentPart>
-      <SegmentPart name="Admin use" helpText="Check this if the user is an administrator">
-        <Form.Field>
-          <label>Is user an admin?</label>
-          <Switch checked={isAdmin} onChange={(checked) => setIsAdmin(checked)} />
-        </Form.Field>
+      <Divider margin="1rem" />
+      <SegmentPart name="Is user an admin?" helpText="Check this if the user is an administrator">
+        <Switch checked={isAdmin} onChange={(checked) => setIsAdmin(checked)} />
       </SegmentPart>
-      <Button color="red" onClick={() => history.push('/users')}>
+      <Divider margin="1rem" />
+      <Button type="danger" style={{ marginRight: '1rem' }} onClick={() => history.push('/users')}>
         Cancel
       </Button>
-      <Button color="green" onClick={saveUser}>
+      <Button type="primary" icon={<IconPlusCircle />} onClick={saveUser}>
         Save
       </Button>
-    </Form>
+    </form>
   );
 };