Remake front-end code for moving slides

client/src/pages/presentationEditor/PresentationEditorPage.tsx

@@ -51,7 +51,7 @@ interface CompetitionParams {
 const PresentationEditorPage: React.FC = () => {
   const { competitionId }: CompetitionParams = useParams()
   const dispatch = useAppDispatch()
-  const [slides, setSlides] = useState<RichSlide[]>([])
+  const [sortedSlides, setSortedSlides] = useState<RichSlide[]>([])
   const activeSlideId = useAppSelector((state) => state.editor.activeSlideId)
   const activeViewTypeId = useAppSelector((state) => state.editor.activeViewTypeId)
   const competition = useAppSelector((state) => state.editor.competition)
@@ -63,7 +63,7 @@ const PresentationEditorPage: React.FC = () => {
   }, [])
 
   useEffect(() => {
-    setSlides(competition.slides)
+    setSortedSlides(competition.slides.sort((a, b) => (a.order > b.order ? 1 : -1)))
   }, [competition])
 
   const setActiveSlideId = (id: number) => {
@@ -122,30 +122,11 @@ const PresentationEditorPage: React.FC = () => {
       return
     }
     const draggedIndex = result.source.index
-    const draggedSlideId = slides.find((slide) => slide.order === draggedIndex)?.id
-    const slidesCopy = slides
-    const diff = result.destination.index - result.source.index
-    slides.map((slide) => {
-      if (slide.order === draggedIndex && result.destination) {
-        slide.order = result.destination.index
-      } else if (
-        result.destination &&
-        diff > 0 &&
-        slide.order > result.source.index &&
-        slide.order <= result.destination.index
-      ) {
-        slide.order = slide.order - 1
-      } else if (
-        result.destination &&
-        diff < 0 &&
-        slide.order < result.source.index &&
-        slide.order >= result.destination.index
-      ) {
-        slide.order = slide.order + 1
-      }
-    })
-    setSlides(slidesCopy)
-
+    const draggedSlideId = sortedSlides.find((slide) => slide.order === draggedIndex)?.id
+    const slidesCopy = [...sortedSlides]
+    const [removed] = slidesCopy.splice(draggedIndex, 1)
+    slidesCopy.splice(result.destination.index, 0, removed)
+    setSortedSlides(slidesCopy)
     if (draggedSlideId) {
       await axios
         .put(`/api/competitions/${competitionId}/slides/${draggedSlideId}/order`, { order: result.destination.index })
@@ -190,27 +171,25 @@ const PresentationEditorPage: React.FC = () => {
               <Droppable droppableId="droppable">
                 {(provided) => (
                   <div ref={provided.innerRef} {...provided.droppableProps}>
-                    {slides
-                      .sort((a, b) => (a.order > b.order ? 1 : -1))
-                      .map((slide, index) => (
-                        <Draggable key={slide.id} draggableId={slide.id.toString()} index={index}>
-                          {(provided, snapshot) => (
-                            <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-                              <SlideListItem
-                                divider
-                                key={slide.order}
-                                button
-                                selected={slide.id === activeSlideId}
-                                onClick={() => setActiveSlideId(slide.id)}
-                                onContextMenu={(event) => handleRightClick(event, slide.id)}
-                              >
-                                {renderSlideIcon(slide)}
-                                <ListItemText primary={`Sida ${slide.id}`} />
-                              </SlideListItem>
-                            </div>
-                          )}
-                        </Draggable>
-                      ))}
+                    {sortedSlides.map((slide, index) => (
+                      <Draggable key={slide.id} draggableId={slide.id.toString()} index={index}>
+                        {(provided, snapshot) => (
+                          <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                            <SlideListItem
+                              divider
+                              key={slide.order}
+                              button
+                              selected={slide.id === activeSlideId}
+                              onClick={() => setActiveSlideId(slide.id)}
+                              onContextMenu={(event) => handleRightClick(event, slide.id)}
+                            >
+                              {renderSlideIcon(slide)}
+                              <ListItemText primary={`Sida ${slide.id}`} />
+                            </SlideListItem>
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
                     {provided.placeholder}
                   </div>
                 )}