From ca9ecf9c8672ae2ccfa0a94f9a00bf13395694f3 Mon Sep 17 00:00:00 2001
From: Aaron Chong <aaronchongth@gmail.com>
Date: Fri, 30 Aug 2024 06:02:32 +0000
Subject: [PATCH] Fix component render sequence issues

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>
---
 packages/dashboard/src/components/appbar.tsx  |  3 +-
 .../src/components/tasks/task-schedule.tsx    |  3 +-
 .../dashboard/src/hooks/useCreateTaskForm.tsx | 15 ++++-
 .../lib/tasks/create-task.tsx                 | 64 +++++++++----------
 .../lib/tasks/types/patrol.tsx                |  1 -
 5 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/packages/dashboard/src/components/appbar.tsx b/packages/dashboard/src/components/appbar.tsx
index 8ba826f44..76ec0861a 100644
--- a/packages/dashboard/src/components/appbar.tsx
+++ b/packages/dashboard/src/components/appbar.tsx
@@ -159,7 +159,7 @@ export const AppBar = React.memo(({ extraToolbarItems }: AppBarProps): React.Rea
     FireAlarmTriggerState | undefined
   >(undefined);
 
-  const { waypointNames, pickupPoints, dropoffPoints, cleaningZoneNames } =
+  const { waypointNames, pickupPoints, dropoffPoints, cleaningZoneNames, fleets } =
     useCreateTaskFormData(rmf);
   const username = useGetUsername(rmf);
 
@@ -566,6 +566,7 @@ export const AppBar = React.memo(({ extraToolbarItems }: AppBarProps): React.Rea
       {openCreateTaskForm && (
         <CreateTaskForm
           user={username ? username : 'unknown user'}
+          fleets={fleets}
           tasksToDisplay={allowedTasks}
           patrolWaypoints={waypointNames}
           cleaningZones={cleaningZoneNames}
diff --git a/packages/dashboard/src/components/tasks/task-schedule.tsx b/packages/dashboard/src/components/tasks/task-schedule.tsx
index 86a85063b..2749aa81d 100644
--- a/packages/dashboard/src/components/tasks/task-schedule.tsx
+++ b/packages/dashboard/src/components/tasks/task-schedule.tsx
@@ -74,7 +74,7 @@ export const TaskSchedule = () => {
   const rmf = React.useContext(RmfAppContext);
   const { showAlert } = React.useContext(AppControllerContext);
 
-  const { waypointNames, pickupPoints, dropoffPoints, cleaningZoneNames } =
+  const { waypointNames, pickupPoints, dropoffPoints, cleaningZoneNames, fleets } =
     useCreateTaskFormData(rmf);
   const username = useGetUsername(rmf);
   const [eventScope, setEventScope] = React.useState<string>(EventScopes.CURRENT);
@@ -352,6 +352,7 @@ export const TaskSchedule = () => {
       {openCreateTaskForm && (
         <CreateTaskForm
           user={username ? username : 'unknown user'}
+          fleets={fleets}
           tasksToDisplay={allowedTasks}
           patrolWaypoints={waypointNames}
           cleaningZones={cleaningZoneNames}
diff --git a/packages/dashboard/src/hooks/useCreateTaskForm.tsx b/packages/dashboard/src/hooks/useCreateTaskForm.tsx
index 0acbfbe3a..97bb3c20d 100644
--- a/packages/dashboard/src/hooks/useCreateTaskForm.tsx
+++ b/packages/dashboard/src/hooks/useCreateTaskForm.tsx
@@ -9,6 +9,7 @@ export const useCreateTaskFormData = (rmf: RmfIngress | undefined) => {
   const [cleaningZoneNames, setCleaningZoneNames] = React.useState<string[]>([]);
   const [pickupPoints, setPickupPoints] = React.useState<Record<string, string>>({});
   const [dropoffPoints, setDropoffPoints] = React.useState<Record<string, string>>({});
+  const [fleets, setFleets] = React.useState<Record<string, string[]>>({});
 
   React.useEffect(() => {
     if (!rmf) {
@@ -42,9 +43,21 @@ export const useCreateTaskFormData = (rmf: RmfIngress | undefined) => {
         setWaypointNames(waypointNames);
       }),
     );
+    subs.push(
+      rmf.fleetsObs.subscribe((fleetStates) => {
+        const result: Record<string, string[]> = {};
+        for (const fleet of fleetStates) {
+          if (!fleet.name || !fleet.robots) {
+            continue;
+          }
+          result[fleet.name] = Object.keys(fleet.robots);
+        }
+        setFleets(result);
+      }),
+    );
 
     return () => subs.forEach((s) => s.unsubscribe());
   }, [rmf]);
 
-  return { waypointNames, pickupPoints, dropoffPoints, cleaningZoneNames };
+  return { waypointNames, pickupPoints, dropoffPoints, cleaningZoneNames, fleets };
 };
diff --git a/packages/react-components/lib/tasks/create-task.tsx b/packages/react-components/lib/tasks/create-task.tsx
index 2016192c0..ae136cf31 100644
--- a/packages/react-components/lib/tasks/create-task.tsx
+++ b/packages/react-components/lib/tasks/create-task.tsx
@@ -329,10 +329,7 @@ export interface CreateTaskFormProps
 
 export function CreateTaskForm({
   user,
-  fleets = {
-    f1: ['r11', 'r12'],
-    f2: ['r21', 'r22'],
-  },
+  fleets,
   tasksToDisplay = [
     PatrolTaskDefinition,
     DeliveryTaskDefinition,
@@ -710,15 +707,10 @@ export function CreateTaskForm({
       setSubmitting(true);
       if (scheduling) {
         await scheduleTask(request, schedule);
-      } else {
-        let robotDispatchTarget: RobotDispatchTarget | null = null;
-        if (dispatchType === DispatchType.Robot) {
-          robotDispatchTarget = {
-            fleet: '',
-            robot: '',
-          };
-        }
+      } else if (dispatchType === DispatchType.Robot) {
         await dispatchTask(request, robotDispatchTarget);
+      } else {
+        await dispatchTask(request, null);
       }
       setSubmitting(false);
 
@@ -844,7 +836,6 @@ export function CreateTaskForm({
   };
 
   const handleDispatchFleetTargetChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
-    console.log('handleDispatchFleetTargetChange called');
     setTaskRequest((prev) => {
       return {
         ...prev,
@@ -854,6 +845,10 @@ export function CreateTaskForm({
   };
 
   const handleDispatchRobotTargetChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    if (!fleets) {
+      setRobotDispatchTarget(null);
+      return;
+    }
     let robotFleet: string | null = null;
     for (const fleetName of Object.keys(fleets)) {
       if (fleets[fleetName].includes(ev.target.value)) {
@@ -1022,16 +1017,17 @@ export function CreateTaskForm({
                         fullWidth
                         margin="normal"
                         value={taskRequest.fleet_name ?? ''}
-                        defaultValue={Object.keys(fleets)[0]}
+                        defaultValue=""
                         onChange={handleDispatchFleetTargetChange}
                       >
-                        {Object.keys(fleets).map((fleetName) => {
-                          return (
-                            <MenuItem value={fleetName} key={fleetName}>
-                              {fleetName}
-                            </MenuItem>
-                          );
-                        })}
+                        {fleets &&
+                          Object.keys(fleets).map((fleetName) => {
+                            return (
+                              <MenuItem value={fleetName} key={fleetName}>
+                                {fleetName}
+                              </MenuItem>
+                            );
+                          })}
                       </TextField>
                     ) : dispatchType === DispatchType.Robot ? (
                       <TextField
@@ -1041,25 +1037,29 @@ export function CreateTaskForm({
                         variant="outlined"
                         fullWidth
                         margin="normal"
-                        value={robotDispatchTarget?.robot}
+                        value={robotDispatchTarget?.robot ?? ''}
+                        defaultValue=""
                         onChange={handleDispatchRobotTargetChange}
                       >
-                        {Object.keys(fleets).map((fleetName) => {
-                          return (
-                            <>
-                              <ListSubheader>{fleetName}</ListSubheader>
-                              {fleets[fleetName].map((robotName) => (
+                        {fleets &&
+                          Object.keys(fleets).flatMap((fleetName) => {
+                            const fleetRobots = [
+                              <Divider key={`${fleetName}_divider`} />,
+                              <MenuItem value={fleetName} key={fleetName} disabled>
+                                {fleetName}
+                              </MenuItem>,
+                            ];
+                            return fleetRobots.concat(
+                              fleets[fleetName].map((robotName) => (
                                 <MenuItem value={robotName} key={robotName}>
                                   {robotName}
                                 </MenuItem>
-                              ))}
-                            </>
-                          );
-                        })}
+                              )),
+                            );
+                          })}
                       </TextField>
                     ) : (
                       <TextField
-                        select
                         disabled
                         id="dispatch-automatic-type"
                         variant="outlined"
diff --git a/packages/react-components/lib/tasks/types/patrol.tsx b/packages/react-components/lib/tasks/types/patrol.tsx
index 703ea5455..c080e7385 100644
--- a/packages/react-components/lib/tasks/types/patrol.tsx
+++ b/packages/react-components/lib/tasks/types/patrol.tsx
@@ -124,7 +124,6 @@ export function PatrolTaskForm({
     onValidate(isPatrolTaskDescriptionValid(desc));
     onChange(desc);
   };
-  onValidate(isPatrolTaskDescriptionValid(taskDesc));
 
   return (
     <Grid container spacing={theme.spacing(2)} justifyContent="center" alignItems="center">