Fix move slides on front-end

client/src/pages/presentationEditor/PresentationEditorPage.tsx

@@ -10,6 +10,7 @@ import { getCities } from '../../actions/cities'
 import { getEditorCompetition, setEditorSlideId, setEditorViewId } from '../../actions/editor'
 import { getTypes } from '../../actions/typesAction'
 import { useAppDispatch, useAppSelector } from '../../hooks'
+import { RichSlide } from '../../interfaces/ApiRichModels'
 import { renderSlideIcon } from '../../utils/renderSlideIcon'
 import { RemoveMenuItem } from '../admin/styledComp'
 import { Content, InnerContent } from '../views/styled'
@@ -50,6 +51,7 @@ interface CompetitionParams {
 const PresentationEditorPage: React.FC = () => {
   const { competitionId }: CompetitionParams = useParams()
   const dispatch = useAppDispatch()
+  const [slides, setSlides] = useState<RichSlide[]>([])
   const activeSlideId = useAppSelector((state) => state.editor.activeSlideId)
   const activeViewTypeId = useAppSelector((state) => state.editor.activeViewTypeId)
   const competition = useAppSelector((state) => state.editor.competition)
@@ -60,6 +62,10 @@ const PresentationEditorPage: React.FC = () => {
     dispatch(getCities())
   }, [])
 
+  useEffect(() => {
+    setSlides(competition.slides)
+  }, [competition])
+
   const setActiveSlideId = (id: number) => {
     dispatch(setEditorSlideId(id))
   }
@@ -111,16 +117,38 @@ const PresentationEditorPage: React.FC = () => {
   }
 
   const onDragEnd = async (result: DropResult) => {
-    // dropped outside the list
-    if (!result.destination) {
+    // dropped outside the list or same place
+    if (!result.destination || result.destination.index === result.source.index) {
       return
     }
     const draggedIndex = result.source.index
-    const draggedSlideId = competition.slides.find((slide) => slide.order === draggedIndex)?.id
+    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)
+
     if (draggedSlideId) {
       await axios
         .put(`/api/competitions/${competitionId}/slides/${draggedSlideId}/order`, { order: result.destination.index })
-        .then(() => dispatch(getEditorCompetition(competitionId)))
         .catch(console.log)
     }
   }
@@ -161,21 +189,23 @@ const PresentationEditorPage: React.FC = () => {
             <DragDropContext onDragEnd={onDragEnd}>
               <Droppable droppableId="droppable">
                 {(provided) => (
-                  <div key={provided.innerRef.toString()} ref={provided.innerRef} {...provided.droppableProps}>
-                    {competition.slides &&
-                      competition.slides.map((slide, index) => (
-                        <Draggable key={slide.order} draggableId={slide.id.toString()} index={index}>
+                  <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.order + 1}`} />
+                                <ListItemText primary={`Sida ${slide.id}`} />
                               </SlideListItem>
                             </div>
                           )}