update battery view

typescript/frontend-marios2/src/content/dashboards/BatteryView/BatteryView.tsx

@@ -36,12 +36,22 @@ function BatteryView(props: BatteryViewProps) {
   }
   const currentLocation = useLocation();
   const navigate = useNavigate();
-  const numOfBatteries = props.values.batteryView.length;
+  const sortedBatteryView = [...props.values.batteryView].sort(
+    (a, b) => b.BatteryId - a.BatteryId
+  );
 
   const handleMainStatsButton = () => {
     navigate(routes.mainstats);
   };
 
+  const findBatteryData = (batteryId: number) => {
+    for (let i = 0; i < props.values.batteryView.length; i++) {
+      if (props.values.batteryView[i].BatteryId == batteryId) {
+        return props.values.batteryView[i];
+      }
+    }
+  };
+
   return (
     <>
       <Container maxWidth="xl">
@@ -97,14 +107,14 @@ function BatteryView(props: BatteryViewProps) {
                 <MainStats s3Credentials={props.s3Credentials}></MainStats>
               }
             />
-            {Array.from({ length: numOfBatteries }).map((_, i) => (
+            {props.values.batteryView.map((battery) => (
               <Route
-                key={routes.detailed_view + i}
+                key={routes.detailed_view + battery.BatteryId}
-                path={routes.detailed_view + i}
+                path={routes.detailed_view + battery.BatteryId}
                 element={
                   <DetailedBatteryView
                     s3Credentials={props.s3Credentials}
-                    batteryData={props.values.batteryView[i]}
+                    batteryData={findBatteryData(battery.BatteryId)}
                   ></DetailedBatteryView>
                 }
               />
@@ -138,7 +148,7 @@ function BatteryView(props: BatteryViewProps) {
               </TableRow>
             </TableHead>
             <TableBody>
-              {props.values.batteryView.map((battery) => (
+              {sortedBatteryView.map((battery) => (
                 <TableRow
                   key={battery.BatteryId}
                   style={{
@@ -153,12 +163,9 @@ function BatteryView(props: BatteryViewProps) {
                   >
                     <Link
                       style={{ color: 'black' }}
-                      to={
+                      to={routes.detailed_view + battery.BatteryId.toString()}
-                        routes.detailed_view +
-                        (battery.BatteryId - 1).toString()
-                      }
                     >
-                      {'Battery ' + battery.BatteryId}
+                      {'Node ' + battery.BatteryId}
                     </Link>
                   </TableCell>
                   <TableCell