From 707e95e9bf334ed86a9fe7c37ee98c3f51074e7f Mon Sep 17 00:00:00 2001
From: Nathanael Liu <supernathanliu@gmail.com>
Date: Sat, 10 Aug 2024 02:55:24 -0400
Subject: [PATCH] rename tasks (#211)

---
 .../Regions/Modals/TaskAssign/index.tsx       | 85 +++++++++++++++++--
 src/contexts/tasks/index.tsx                  | 16 +++-
 2 files changed, 95 insertions(+), 6 deletions(-)

diff --git a/src/components/Regions/Modals/TaskAssign/index.tsx b/src/components/Regions/Modals/TaskAssign/index.tsx
index d9dce676..1854ada0 100644
--- a/src/components/Regions/Modals/TaskAssign/index.tsx
+++ b/src/components/Regions/Modals/TaskAssign/index.tsx
@@ -1,3 +1,5 @@
+import { CheckOutlined, EditOutlined } from '@mui/icons-material';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 import {
   Alert,
   Box,
@@ -6,10 +8,12 @@ import {
   DialogActions,
   DialogContent,
   DialogProps,
+  IconButton,
   MenuItem,
   Paper,
   Select,
   Stack,
+  TextField,
   Typography,
   useTheme,
 } from '@mui/material';
@@ -35,6 +39,68 @@ interface TaskAssignModalProps extends DialogProps {
   regionMetadata: RegionMetadata;
 }
 
+type TaskItemProps = {
+  name: string;
+  id: number;
+  editable?: boolean;
+};
+
+const TaskItem = ({ name, id, editable = false }: TaskItemProps) => {
+  const { setTaskName } = useTasks();
+  const [editing, setEditing] = useState(false);
+  const [newName, setNewName] = useState<string>('');
+
+  const onEdit = (e: any) => {
+    setEditing(true);
+    setNewName(name);
+    e.stopPropagation();
+  };
+
+  const onApply = () => {
+    setTaskName(id, newName);
+    setEditing(false);
+  };
+
+  const onCancel = () => {
+    setEditing(false);
+  };
+
+  return (
+    <Stack
+      direction='row'
+      justifyContent='space-between'
+      alignItems='center'
+      width='100%'
+    >
+      {editing ? (
+        <TextField
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+          fullWidth
+          onClick={(e) => e.stopPropagation()}
+        />
+      ) : (
+        name
+      )}
+      {editable &&
+        (editing ? (
+          <Stack direction='row' alignItems='center' ml='1rem'>
+            <IconButton onClick={onApply}>
+              <CheckOutlined />
+            </IconButton>
+            <IconButton>
+              <CloseOutlinedIcon onClick={onCancel} />
+            </IconButton>
+          </Stack>
+        ) : (
+          <IconButton onClick={onEdit}>
+            <EditOutlined />
+          </IconButton>
+        ))}
+    </Stack>
+  );
+};
+
 export const TaskAssignModal = ({
   open,
   onClose,
@@ -55,6 +121,7 @@ export const TaskAssignModal = ({
   const { submitExtrinsicWithFeeInfo } = useSubmitExtrinsic();
 
   const [working, setWorking] = useState(false);
+  const [taskListOpen, openTaskList] = useState(false);
   const [taskSelected, selectTask] = useState<number>();
   const [taskModalOpen, openTaskModal] = useState(false);
 
@@ -104,10 +171,12 @@ export const TaskAssignModal = ({
   };
 
   useEffect(() => {
-    selectTask(tasks[0]?.id);
-    setWorking(false);
-    setFinality(FinalityType.FINAL);
-    openTaskModal(false);
+    if (!open) {
+      selectTask(tasks[0]?.id);
+      setWorking(false);
+      setFinality(FinalityType.FINAL);
+      openTaskModal(false);
+    }
   }, [open, tasks]);
 
   return (
@@ -163,10 +232,16 @@ export const TaskAssignModal = ({
                 <Select
                   value={taskSelected || ''}
                   onChange={(e) => selectTask(Number(e.target.value))}
+                  onOpen={() => openTaskList(true)}
+                  onClose={() => openTaskList(false)}
                 >
                   {tasks.map(({ name, id }, index) => (
                     <MenuItem key={index} value={id}>
-                      {name}
+                      <TaskItem
+                        name={name ?? ''}
+                        id={id}
+                        editable={taskListOpen}
+                      />
                     </MenuItem>
                   ))}
                 </Select>
diff --git a/src/contexts/tasks/index.tsx b/src/contexts/tasks/index.tsx
index faddba3e..35ac1cf2 100644
--- a/src/contexts/tasks/index.tsx
+++ b/src/contexts/tasks/index.tsx
@@ -1,4 +1,4 @@
-import { CoreIndex, getEncodedRegionId } from 'coretime-utils';
+import { CoreIndex, getEncodedRegionId, TaskId } from 'coretime-utils';
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
 import { parseHNString } from '@/utils/functions';
@@ -17,6 +17,7 @@ interface TasksData {
   fetchRegionWorkload: (_core: CoreIndex, _mask: string) => Promise<Task>;
   loadTasksFromLocalStorage: () => void;
   addTask: (_task: TaskMetadata) => void;
+  setTaskName: (_id: TaskId, _newName: string) => void;
 }
 
 const defaultTasksData: TasksData = {
@@ -36,6 +37,9 @@ const defaultTasksData: TasksData = {
   addTask: () => {
     /** */
   },
+  setTaskName: () => {
+    /** */
+  },
 };
 
 const TaskDataContext = createContext<TasksData>(defaultTasksData);
@@ -144,6 +148,15 @@ const TaskDataProvider = ({ children }: Props) => {
     localStorage.setItem(STORAGE_ITEM_KEY, JSON.stringify(_tasks));
   };
 
+  const setTaskName = (id: TaskId, newName: string) => {
+    const _tasks = tasks.map((item) => ({
+      ...item,
+      name: item.id === id ? newName : item.name,
+    }));
+    setTasks(_tasks);
+    localStorage.setItem(STORAGE_ITEM_KEY, JSON.stringify(_tasks));
+  };
+
   useEffect(() => {
     loadTasksFromLocalStorage();
   }, []);
@@ -156,6 +169,7 @@ const TaskDataProvider = ({ children }: Props) => {
         fetchRegionWorkload,
         loadTasksFromLocalStorage,
         addTask,
+        setTaskName,
       }}
     >
       {children}