update task assignment modal (#102)

* update task assignment modal * add alert to pooling modal --------- Co-authored-by: Sergej <sakacszergej@gmail.com>
RegionX-Labs · May 9, 2024 · 938fd85 · 938fd85
1 parent 5149e37
commit 938fd85
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 24 deletions.
diff --git a/src/components/Modals/Pooling/index.tsx b/src/components/Modals/Pooling/index.tsx
@@ -1,4 +1,5 @@
 import {
+  Alert,
   Box,
   Button,
   Dialog,
@@ -134,6 +135,10 @@ export const PoolingModal = ({
             <Typography className={styles.optionKey}>Finality:</Typography>
             <FinalitySelector {...{ finality, setFinality }} />
           </Box>
+          <Alert className={styles.alert} severity='info'>
+            Finally pooled regions can no longer be managed. <br />
+            They will not be displayed on the Region Management page anymore.
+          </Alert>
           <Box className={styles.optionItem}>
             <Typography className={styles.optionKey}>Payee:</Typography>
             <Input

diff --git a/src/components/Modals/TaskAssign/index.module.scss b/src/components/Modals/TaskAssign/index.module.scss
@@ -12,7 +12,8 @@
   margin: 2rem 0 1rem 0;
 }
 
-.taskWrapper {
+.taskWrapper,
+.finalityWrapper {
   display: flex;
   flex-direction: column;
   padding: 1.25rem;

diff --git a/src/components/Modals/TaskAssign/index.tsx b/src/components/Modals/TaskAssign/index.tsx
@@ -14,14 +14,18 @@ import {
 } from '@mui/material';
 import { useEffect, useState } from 'react';
 
-import { ProgressButton, SimpleRegionCard } from '@/components/Elements';
+import {
+  FinalitySelector,
+  ProgressButton,
+  SimpleRegionCard,
+} from '@/components/Elements';
 
 import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';
 import { useTasks } from '@/contexts/tasks';
 import { useToast } from '@/contexts/toast';
-import { RegionMetadata } from '@/models';
+import { FinalityType, RegionMetadata } from '@/models';
 
 import styles from './index.module.scss';
 import { AddTaskModal } from '../AddTask';
@@ -50,11 +54,13 @@ export const TaskAssignModal = ({
   const { tasks } = useTasks();
   const { toastError, toastInfo, toastSuccess } = useToast();
 
-  const [working, setWorking] = useState<'Final' | 'Provisional' | null>(null);
+  const [working, setWorking] = useState(false);
   const [taskSelected, selectTask] = useState<number>();
   const [taskModalOpen, openTaskModal] = useState(false);
 
-  const onAssign = async (final: boolean) => {
+  const [finality, setFinality] = useState<FinalityType>(FinalityType.FINAL);
+
+  const onAssign = async () => {
     if (!coretimeApi || !activeAccount || !activeSigner) return;
 
     if (taskSelected === undefined) {
@@ -65,19 +71,19 @@ export const TaskAssignModal = ({
     const txAssign = coretimeApi.tx.broker.assign(
       regionMetadata.region.getOnChainRegionId(),
       taskSelected,
-      final ? 'Final' : 'Provisional'
+      finality
     );
 
     try {
-      setWorking(final ? 'Final' : 'Provisional');
+      setWorking(true);
       await txAssign.signAndSend(
         activeAccount.address,
         { signer: activeSigner },
         ({ status, events }) => {
           if (status.isReady) toastInfo('Transaction was initiated');
           else if (status.isInBlock) toastInfo(`In Block`);
           else if (status.isFinalized) {
-            setWorking(null);
+            setWorking(false);
             events.forEach(({ event: { method } }) => {
               if (method === 'ExtrinsicSuccess') {
                 toastSuccess('Successfully assigned a task');
@@ -92,13 +98,14 @@ export const TaskAssignModal = ({
       );
     } catch (e) {
       toastError(`Failed to assign a task. ${e}`);
-      setWorking(null);
+      setWorking(false);
     }
   };
 
   useEffect(() => {
     selectTask(tasks[0]?.id);
-    setWorking(null);
+    setWorking(false);
+    setFinality(FinalityType.FINAL);
     openTaskModal(false);
   }, [open, tasks]);
 
@@ -164,28 +171,30 @@ export const TaskAssignModal = ({
                 </Select>
               </Stack>
             </Paper>
+            <Paper className={styles.finalityWrapper}>
+              <Stack direction='row' gap='1rem' alignItems='center'>
+                <Typography
+                  sx={{ fontWeight: 700, color: theme.palette.common.black }}
+                >
+                  Finality:
+                </Typography>
+                <FinalitySelector {...{ finality, setFinality }} />
+              </Stack>
+              <Alert className={styles.alert} severity='info'>
+                Finally assigned regions can no longer be managed. <br />
+                They will not be displayed on the Region Management page
+                anymore.
+              </Alert>
+            </Paper>
           </Box>
-          <Alert className={styles.alert} severity='info'>
-            Finally assigned regions can no longer be managed. <br />
-            They will not be displayed on the Region Management page anymore.
-          </Alert>
         </DialogContent>
 
         <DialogActions>
           <Button onClick={onClose} variant='outlined'>
             Cancel
           </Button>
 
-          <ProgressButton
-            onClick={() => onAssign(false)}
-            label='Provisional Assignment'
-            loading={working === 'Provisional'}
-          />
-          <ProgressButton
-            onClick={() => onAssign(true)}
-            label='Final Assignment'
-            loading={working === 'Final'}
-          />
+          <ProgressButton onClick={onAssign} label='Assign' loading={working} />
         </DialogActions>
       </Dialog>
       {taskModalOpen && (