From c91db8bc54e99979528cc2ae8f19ea5557af068b Mon Sep 17 00:00:00 2001
From: Florian <florian.schmidt.welzow@t-online.de>
Date: Tue, 17 Dec 2024 23:48:56 +0100
Subject: [PATCH 1/4] fix removing and changing to map in map rotation list

---
 .../map-rotation/map-rotation-list.jsx        | 264 +++++++++++-------
 1 file changed, 160 insertions(+), 104 deletions(-)

diff --git a/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx b/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx
index a3f139f40..e0661ed32 100644
--- a/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx
+++ b/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx
@@ -1,152 +1,208 @@
-import {makeStyles} from "@mui/styles";
-import {IconButton, ListItem, ListItemAvatar, ListItemText, Stack, Tooltip,} from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import {
+  IconButton,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Stack,
+  Tooltip,
+} from "@mui/material";
 import Avatar from "@mui/material/Avatar";
 import DeleteIcon from "@mui/icons-material/Delete";
 import InputIcon from "@mui/icons-material/Input";
-import {MapDescription} from "@/components/MapManager/map-details";
-import {getMapLayerImageSrc} from "@/components/MapManager/helpers";
-import {memo, useEffect, useState} from "react";
+import { MapDescription } from "@/components/MapManager/map-details";
+import { getMapLayerImageSrc } from "@/components/MapManager/helpers";
+import { memo, useEffect, useState } from "react";
 import {
   closestCenter,
   DndContext,
   KeyboardSensor,
   PointerSensor,
   useSensor,
-  useSensors
+  useSensors,
 } from "@dnd-kit/core";
 import {
   arrayMove,
   SortableContext,
   sortableKeyboardCoordinates,
   useSortable,
-  verticalListSortingStrategy
+  verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import {restrictToVerticalAxis} from "@dnd-kit/modifiers";
-import {CSS} from "@dnd-kit/utilities";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { CSS } from "@dnd-kit/utilities";
 
 const useStyles = makeStyles((theme) => ({
   draggingListItem: {
-    boxShadow: "rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset",
-  }, base: {
+    boxShadow:
+      "rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset",
+  },
+  base: {
     borderBottom: `1px solid ${theme.palette.divider}`,
-  }, secondaryAction: {
-    display: "flex", flexDirection: "row", gap: theme.spacing(2),
+  },
+  secondaryAction: {
+    display: "flex",
+    flexDirection: "row",
+    gap: theme.spacing(2),
   },
 }));
 
-function Sortable({thisList, mapLayer, index, id, onRemove, onChange, isSaved}) {
+function Sortable({
+  thisList,
+  mapLayer,
+  index,
+  id,
+  onRemove,
+  onChange,
+  isSaved,
+}) {
   const {
-    attributes, listeners, setNodeRef, isDragging, transform, transition
-  } = useSortable({id: id});
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging,
+    transform,
+    transition,
+  } = useSortable({ id: id });
 
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
   };
 
-  return (<div ref={setNodeRef} {...listeners} {...attributes} style={style}>
-    <Item
-      key={id}
-      index={index}
-      thisList={thisList}
-      mapLayer={mapLayer}
-      onRemove={onRemove}
-      onChange={onChange}
-      isSaved={isSaved}
-      isDragging={isDragging}
-    />
-  </div>);
+  return (
+    <div ref={setNodeRef} {...listeners} {...attributes} style={style}>
+      <Item
+        key={id}
+        index={index}
+        thisList={thisList}
+        mapLayer={mapLayer}
+        onRemove={onRemove}
+        onChange={onChange}
+        isSaved={isSaved}
+        isDragging={isDragging}
+      />
+    </div>
+  );
 }
 
-const Item = ({thisList, isDragging, mapLayer, index, onRemove, onChange, isSaved}) => {
+const Item = ({
+  thisList,
+  isDragging,
+  mapLayer,
+  index,
+  onRemove,
+  onChange,
+  isSaved,
+}) => {
   const classes = useStyles();
 
-  return <ListItem
-    className={isDragging ? classes.draggingListItem : classes.base}
-    secondaryAction={<Stack direction="row" gap={2}>
-      {thisList.findIndex((aMapLayer) => aMapLayer.id === mapLayer.id) === index && (<Tooltip title={"Change map"}>
-        <span>
+  return (
+    <ListItem
+      className={isDragging ? classes.draggingListItem : classes.base}
+      secondaryAction={
+        <Stack direction="row" gap={2}>
+          {thisList.findIndex((aMapLayer) => aMapLayer.id === mapLayer.id) ===
+            index && (
+            <Tooltip title={"Change map"}>
+              <span>
+                <IconButton
+                  edge="end"
+                  aria-label="set map"
+                  disabled={!isSaved}
+                  onClick={() => onChange({
+                    ...mapLayer,
+                    id: mapLayer.originalId,
+                  })}
+                  size="large"
+                >
+                  <InputIcon />
+                </IconButton>
+              </span>
+            </Tooltip>
+          )}
           <IconButton
             edge="end"
-            aria-label="set map"
-            disabled={!isSaved}
-            onClick={() => onChange(mapLayer)}
+            aria-label="delete"
+            onClick={() => onRemove(index)}
             size="large"
           >
-            <InputIcon/>
+            <DeleteIcon />
           </IconButton>
-        </span>
-      </Tooltip>)}
-      <IconButton
-        edge="end"
-        aria-label="delete"
-        onClick={() => onRemove(index)}
-        size="large"
-      >
-        <DeleteIcon/>
-      </IconButton>
-    </Stack>}
-  >
-    <ListItemAvatar>
-      <Avatar src={getMapLayerImageSrc(mapLayer)}/>
-    </ListItemAvatar>
-    <ListItemText
-      primary={mapLayer.map.pretty_name}
-      secondary={<MapDescription mapLayer={mapLayer}/>}
-    />
-  </ListItem>
-}
+        </Stack>
+      }
+    >
+      <ListItemAvatar>
+        <Avatar src={getMapLayerImageSrc(mapLayer)} />
+      </ListItemAvatar>
+      <ListItemText
+        primary={mapLayer.map.pretty_name}
+        secondary={<MapDescription mapLayer={mapLayer} />}
+      />
+    </ListItem>
+  );
+};
 
-const DraggableList = memo(({maps, onDragEnd, onRemove, onChange, isSaved}) => {
-  function handleDragEnd(event) {
-    const {active, over} = event;
+const DraggableList = memo(
+  ({ maps, onDragEnd, onRemove, onChange, isSaved }) => {
+    function handleDragEnd(event) {
+      const { active, over } = event;
 
-    if (active.id !== over.id) {
-      const oldIndex = items.findIndex((m) => m.id === active.id);
-      const newIndex = items.findIndex((m) => m.id === over.id);
+      if (active.id !== over.id) {
+        const oldIndex = items.findIndex((m) => m.id === active.id);
+        const newIndex = items.findIndex((m) => m.id === over.id);
 
-      // for visual smoothyness only: change the items in our state before
-      // it is passed in as a new maps array
-      setItems((it) => {
-        return arrayMove(it, oldIndex, newIndex);
-      });
-      onDragEnd({
-        destination: {index: newIndex}, source: {index: oldIndex},
-      });
+        // for visual smoothyness only: change the items in our state before
+        // it is passed in as a new maps array
+        setItems((it) => {
+          return arrayMove(it, oldIndex, newIndex);
+        });
+        onDragEnd({
+          destination: { index: newIndex },
+          source: { index: oldIndex },
+        });
+      }
     }
-  }
 
-  useEffect(() => {
-    setItems(maps.map((m, idx) => ({...m, id: `${m.id}-${idx}`})));
-  }, [maps]);
+    useEffect(() => {
+      setItems(maps.map((m, idx) => ({ ...m, originalId: m.id, id: `${m.id}-${idx}` })));
+    }, [maps]);
 
-  const [items, setItems] = useState([]);
-  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
-    coordinateGetter: sortableKeyboardCoordinates,
-  }));
+    const [items, setItems] = useState([]);
+    const sensors = useSensors(
+      useSensor(PointerSensor, {
+        activationConstraint: {
+          delay: 100,
+        }
+      }),
+      useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+      })
+    );
 
-  return <DndContext
-    sensors={sensors}
-    collisionDetection={closestCenter}
-    modifiers={[restrictToVerticalAxis]}
-    onDragEnd={handleDragEnd}
-  >
-    <SortableContext
-      items={items}
-      strategy={verticalListSortingStrategy}
-    >
-      {items.map((mapLayer, index, thisList) => (<Sortable
-        id={mapLayer.id}
-        key={mapLayer.id}
-        index={index}
-        thisList={thisList}
-        mapLayer={mapLayer}
-        onRemove={onRemove}
-        onChange={onChange}
-        isSaved={isSaved}
-      />))}
-    </SortableContext>
-  </DndContext>
-});
+    return (
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        modifiers={[restrictToVerticalAxis]}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext items={items} strategy={verticalListSortingStrategy}>
+          {items.map((mapLayer, index, thisList) => (
+            <Sortable
+              id={mapLayer.id}
+              key={mapLayer.id}
+              index={index}
+              thisList={thisList}
+              mapLayer={mapLayer}
+              onRemove={onRemove}
+              onChange={onChange}
+              isSaved={isSaved}
+            />
+          ))}
+        </SortableContext>
+      </DndContext>
+    );
+  }
+);
 
 export default DraggableList;

From 20360b6d66c9c8766ba6addf88d630c8f4606b31 Mon Sep 17 00:00:00 2001
From: Florian <florian.schmidt.welzow@t-online.de>
Date: Tue, 17 Dec 2024 23:56:08 +0100
Subject: [PATCH 2/4] revert prettier fixes

---
 .../map-rotation/map-rotation-list.jsx        | 273 ++++++++----------
 1 file changed, 113 insertions(+), 160 deletions(-)

diff --git a/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx b/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx
index e0661ed32..e8424322e 100644
--- a/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx
+++ b/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx
@@ -1,208 +1,161 @@
-import { makeStyles } from "@mui/styles";
-import {
-  IconButton,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  Stack,
-  Tooltip,
-} from "@mui/material";
+import {makeStyles} from "@mui/styles";
+import {IconButton, ListItem, ListItemAvatar, ListItemText, Stack, Tooltip,} from "@mui/material";
 import Avatar from "@mui/material/Avatar";
 import DeleteIcon from "@mui/icons-material/Delete";
 import InputIcon from "@mui/icons-material/Input";
-import { MapDescription } from "@/components/MapManager/map-details";
-import { getMapLayerImageSrc } from "@/components/MapManager/helpers";
-import { memo, useEffect, useState } from "react";
+import {MapDescription} from "@/components/MapManager/map-details";
+import {getMapLayerImageSrc} from "@/components/MapManager/helpers";
+import {memo, useEffect, useState} from "react";
 import {
   closestCenter,
   DndContext,
   KeyboardSensor,
   PointerSensor,
   useSensor,
-  useSensors,
+  useSensors
 } from "@dnd-kit/core";
 import {
   arrayMove,
   SortableContext,
   sortableKeyboardCoordinates,
   useSortable,
-  verticalListSortingStrategy,
+  verticalListSortingStrategy
 } from "@dnd-kit/sortable";
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
-import { CSS } from "@dnd-kit/utilities";
+import {restrictToVerticalAxis} from "@dnd-kit/modifiers";
+import {CSS} from "@dnd-kit/utilities";
 
 const useStyles = makeStyles((theme) => ({
   draggingListItem: {
-    boxShadow:
-      "rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset",
-  },
-  base: {
+    boxShadow: "rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset",
+  }, base: {
     borderBottom: `1px solid ${theme.palette.divider}`,
-  },
-  secondaryAction: {
-    display: "flex",
-    flexDirection: "row",
-    gap: theme.spacing(2),
+  }, secondaryAction: {
+    display: "flex", flexDirection: "row", gap: theme.spacing(2),
   },
 }));
 
-function Sortable({
-  thisList,
-  mapLayer,
-  index,
-  id,
-  onRemove,
-  onChange,
-  isSaved,
-}) {
+function Sortable({thisList, mapLayer, index, id, onRemove, onChange, isSaved}) {
   const {
-    attributes,
-    listeners,
-    setNodeRef,
-    isDragging,
-    transform,
-    transition,
-  } = useSortable({ id: id });
+    attributes, listeners, setNodeRef, isDragging, transform, transition
+  } = useSortable({id: id});
 
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
   };
 
-  return (
-    <div ref={setNodeRef} {...listeners} {...attributes} style={style}>
-      <Item
-        key={id}
-        index={index}
-        thisList={thisList}
-        mapLayer={mapLayer}
-        onRemove={onRemove}
-        onChange={onChange}
-        isSaved={isSaved}
-        isDragging={isDragging}
-      />
-    </div>
-  );
+  return (<div ref={setNodeRef} {...listeners} {...attributes} style={style}>
+    <Item
+      key={id}
+      index={index}
+      thisList={thisList}
+      mapLayer={mapLayer}
+      onRemove={onRemove}
+      onChange={onChange}
+      isSaved={isSaved}
+      isDragging={isDragging}
+    />
+  </div>);
 }
 
-const Item = ({
-  thisList,
-  isDragging,
-  mapLayer,
-  index,
-  onRemove,
-  onChange,
-  isSaved,
-}) => {
+const Item = ({thisList, isDragging, mapLayer, index, onRemove, onChange, isSaved}) => {
   const classes = useStyles();
 
-  return (
-    <ListItem
-      className={isDragging ? classes.draggingListItem : classes.base}
-      secondaryAction={
-        <Stack direction="row" gap={2}>
-          {thisList.findIndex((aMapLayer) => aMapLayer.id === mapLayer.id) ===
-            index && (
-            <Tooltip title={"Change map"}>
-              <span>
-                <IconButton
-                  edge="end"
-                  aria-label="set map"
-                  disabled={!isSaved}
-                  onClick={() => onChange({
-                    ...mapLayer,
-                    id: mapLayer.originalId,
-                  })}
-                  size="large"
-                >
-                  <InputIcon />
-                </IconButton>
-              </span>
-            </Tooltip>
-          )}
+  return <ListItem
+    className={isDragging ? classes.draggingListItem : classes.base}
+    secondaryAction={<Stack direction="row" gap={2}>
+      {thisList.findIndex((aMapLayer) => aMapLayer.id === mapLayer.id) === index && (<Tooltip title={"Change map"}>
+        <span>
           <IconButton
             edge="end"
-            aria-label="delete"
-            onClick={() => onRemove(index)}
+            aria-label="set map"
+            disabled={!isSaved}
+            onClick={() => onChange({
+              ...mapLayer,
+              id: mapLayer.originalId,
+            })}
             size="large"
           >
-            <DeleteIcon />
+            <InputIcon/>
           </IconButton>
-        </Stack>
-      }
-    >
-      <ListItemAvatar>
-        <Avatar src={getMapLayerImageSrc(mapLayer)} />
-      </ListItemAvatar>
-      <ListItemText
-        primary={mapLayer.map.pretty_name}
-        secondary={<MapDescription mapLayer={mapLayer} />}
-      />
-    </ListItem>
-  );
-};
+        </span>
+      </Tooltip>)}
+      <IconButton
+        edge="end"
+        aria-label="delete"
+        onClick={() => onRemove(index)}
+        size="large"
+      >
+        <DeleteIcon/>
+      </IconButton>
+    </Stack>}
+  >
+    <ListItemAvatar>
+      <Avatar src={getMapLayerImageSrc(mapLayer)}/>
+    </ListItemAvatar>
+    <ListItemText
+      primary={mapLayer.map.pretty_name}
+      secondary={<MapDescription mapLayer={mapLayer}/>}
+    />
+  </ListItem>
+}
 
-const DraggableList = memo(
-  ({ maps, onDragEnd, onRemove, onChange, isSaved }) => {
-    function handleDragEnd(event) {
-      const { active, over } = event;
+const DraggableList = memo(({maps, onDragEnd, onRemove, onChange, isSaved}) => {
+  function handleDragEnd(event) {
+    const {active, over} = event;
 
-      if (active.id !== over.id) {
-        const oldIndex = items.findIndex((m) => m.id === active.id);
-        const newIndex = items.findIndex((m) => m.id === over.id);
+    if (active.id !== over.id) {
+      const oldIndex = items.findIndex((m) => m.id === active.id);
+      const newIndex = items.findIndex((m) => m.id === over.id);
 
-        // for visual smoothyness only: change the items in our state before
-        // it is passed in as a new maps array
-        setItems((it) => {
-          return arrayMove(it, oldIndex, newIndex);
-        });
-        onDragEnd({
-          destination: { index: newIndex },
-          source: { index: oldIndex },
-        });
-      }
+      // for visual smoothyness only: change the items in our state before
+      // it is passed in as a new maps array
+      setItems((it) => {
+        return arrayMove(it, oldIndex, newIndex);
+      });
+      onDragEnd({
+        destination: {index: newIndex}, source: {index: oldIndex},
+      });
     }
+  }
 
-    useEffect(() => {
-      setItems(maps.map((m, idx) => ({ ...m, originalId: m.id, id: `${m.id}-${idx}` })));
-    }, [maps]);
+  useEffect(() => {
+    setItems(maps.map((m, idx) => ({...m, originalId: m.id, id: `${m.id}-${idx}`})));
+  }, [maps]);
 
-    const [items, setItems] = useState([]);
-    const sensors = useSensors(
-      useSensor(PointerSensor, {
-        activationConstraint: {
-          delay: 100,
-        }
-      }),
-      useSensor(KeyboardSensor, {
-        coordinateGetter: sortableKeyboardCoordinates,
-      })
-    );
+  const [items, setItems] = useState([]);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        delay: 100,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates,
+  }));
 
-    return (
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        modifiers={[restrictToVerticalAxis]}
-        onDragEnd={handleDragEnd}
-      >
-        <SortableContext items={items} strategy={verticalListSortingStrategy}>
-          {items.map((mapLayer, index, thisList) => (
-            <Sortable
-              id={mapLayer.id}
-              key={mapLayer.id}
-              index={index}
-              thisList={thisList}
-              mapLayer={mapLayer}
-              onRemove={onRemove}
-              onChange={onChange}
-              isSaved={isSaved}
-            />
-          ))}
-        </SortableContext>
-      </DndContext>
-    );
-  }
-);
+  return <DndContext
+    sensors={sensors}
+    collisionDetection={closestCenter}
+    modifiers={[restrictToVerticalAxis]}
+    onDragEnd={handleDragEnd}
+  >
+    <SortableContext
+      items={items}
+      strategy={verticalListSortingStrategy}
+    >
+      {items.map((mapLayer, index, thisList) => (<Sortable
+        id={mapLayer.id}
+        key={mapLayer.id}
+        index={index}
+        thisList={thisList}
+        mapLayer={mapLayer}
+        onRemove={onRemove}
+        onChange={onChange}
+        isSaved={isSaved}
+      />))}
+    </SortableContext>
+  </DndContext>
+});
 
 export default DraggableList;

From 4d398013817415b113f194b9245c11b4bf26d560 Mon Sep 17 00:00:00 2001
From: Florian <florian.schmidt.welzow@t-online.de>
Date: Tue, 17 Dec 2024 23:57:27 +0100
Subject: [PATCH 3/4] at least one styling

---
 .../settings/map-manager/map-rotation/map-rotation-list.jsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx b/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx
index e8424322e..56de19486 100644
--- a/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx
+++ b/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx
@@ -131,8 +131,9 @@ const DraggableList = memo(({maps, onDragEnd, onRemove, onChange, isSaved}) => {
       },
     }),
     useSensor(KeyboardSensor, {
-    coordinateGetter: sortableKeyboardCoordinates,
-  }));
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
 
   return <DndContext
     sensors={sensors}

From fc8bdc496738d45ebdcb374cedaee18d4b54f1d3 Mon Sep 17 00:00:00 2001
From: Dorfieeee <rosendorf.dev@gmail.com>
Date: Thu, 19 Dec 2024 14:45:58 +0000
Subject: [PATCH 4/4] fix error when map item only clicked

---
 .../map-rotation/map-rotation-list.jsx        | 19 ++++++++++++++-----
 .../map-manager/map-rotation/map-rotation.jsx |  6 ++++--
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx b/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx
index 56de19486..2c2232804 100644
--- a/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx
+++ b/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation-list.jsx
@@ -70,10 +70,13 @@ const Item = ({thisList, isDragging, mapLayer, index, onRemove, onChange, isSave
             edge="end"
             aria-label="set map"
             disabled={!isSaved}
-            onClick={() => onChange({
-              ...mapLayer,
-              id: mapLayer.originalId,
-            })}
+            onClick={(event) => {
+              event.stopPropagation();
+              onChange({
+                ...mapLayer,
+                id: mapLayer.originalId,
+              });
+            }}
             size="large"
           >
             <InputIcon/>
@@ -83,7 +86,10 @@ const Item = ({thisList, isDragging, mapLayer, index, onRemove, onChange, isSave
       <IconButton
         edge="end"
         aria-label="delete"
-        onClick={() => onRemove(index)}
+        onClick={(event) => {
+          event.stopPropagation();
+          onRemove(index);
+        }}
         size="large"
       >
         <DeleteIcon/>
@@ -104,6 +110,9 @@ const DraggableList = memo(({maps, onDragEnd, onRemove, onChange, isSaved}) => {
   function handleDragEnd(event) {
     const {active, over} = event;
 
+    // if the item is only being clicked, don't do anything
+    if (!over) return;
+
     if (active.id !== over.id) {
       const oldIndex = items.findIndex((m) => m.id === active.id);
       const newIndex = items.findIndex((m) => m.id === over.id);
diff --git a/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation.jsx b/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation.jsx
index 3dc6d087d..78c1211c7 100644
--- a/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation.jsx
+++ b/rcongui/src/pages/settings/map-manager/map-rotation/map-rotation.jsx
@@ -84,8 +84,10 @@ const MapRotation = () => {
   };
 
   const onRemoveItem = useCallback((index) => {
-    rotation.splice(index, 1);
-    setRotation(Array.from(rotation));
+    setRotation((prevRotation) => {
+      const newRotation = prevRotation.slice(0, index).concat(prevRotation.slice(index + 1));
+      return newRotation;
+    });
   });
 
   const onMapChange = useCallback((mapLayer) => {