From 34d8fd8323e59a4cd92f1ab8c7daccc9da79acea Mon Sep 17 00:00:00 2001
From: Albin Henriksson <albhe428@student.liu.se>
Date: Sun, 2 May 2021 08:52:34 +0200
Subject: [PATCH] Remake front-end code for moving slides
---
.../PresentationEditorPage.tsx | 73 +++++++------------
1 file changed, 26 insertions(+), 47 deletions(-)
diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
index 0fb7a72f..caaaba46 100644
--- a/client/src/pages/presentationEditor/PresentationEditorPage.tsx
+++ b/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>
)}
--
GitLab