Merge pull request #36 from kscalelabs/second_milestone_serhii

fix_reorder_grid
kscalelabs · Sep 21, 2024 · 2805f57 · 2805f57
2 parents 815ec87 + f38227b
commit 2805f57
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 136 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,7 +16,7 @@
     "holderjs": "^2.9.9",
     "nth-check": "^2.1.1",
     "react": "^18.3.1",
-    "react-beautiful-dnd": "^13.1.1",
+    "react-beautiful-dnd-grid": "^0.1.3-alpha",
     "react-bootstrap-icons": "^1.11.4",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
@@ -58,7 +58,6 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@react-oauth/google": "^0.12.1",
     "@types/jest": "^29.5.12",
-    "@types/react-beautiful-dnd": "^13.1.8",
     "axios": "^1.7.2",
     "babel-eslint": "*",
     "bootstrap": "^5.3.3",

diff --git a/frontend/src/components/Audio.tsx b/frontend/src/components/Audio.tsx
@@ -16,7 +16,7 @@ interface AudioPlayerProps {
 const AudioPlayer: React.FC<AudioPlayerProps> = ({ currentImage, index }) => {
   const audioRef = useRef<HTMLAudioElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
-  const [playbackRate, setPlaybackRate] = useState(0.9);
+  const [playbackRate, setPlaybackRate] = useState(1);
   const [volume, setVolume] = useState(1);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);

diff --git a/frontend/src/pages/Collection.tsx b/frontend/src/pages/Collection.tsx
@@ -8,8 +8,8 @@ import { useAuth } from "contexts/AuthContext";
 import { useLoading } from "contexts/LoadingContext";
 import { useAlertQueue } from "hooks/alerts";
 import React, { useEffect, useMemo, useState } from "react";
-import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
-import { Col, Row } from "react-bootstrap";
+import { ListManager } from "react-beautiful-dnd-grid";
+import { Col } from "react-bootstrap";
 import {
   ArrowLeft,
   CaretLeft,
@@ -215,13 +215,12 @@ const CollectionPage: React.FC = () => {
   };
   // Inside your CollectionPage component
   /* eslint-disable */
-  const handleDragEnd = (result: any) => {
+  const handleDragEnd = (sourceIndex: number, destinationIndex: number) => {
     /* eslint-enable */
-    if (!result.destination || !reorderImageIds) return;
-    const [removed] = reorderImageIds.splice(result.source.index, 1);
-    reorderImageIds.splice(result.destination.index, 0, removed);
+    if (!reorderImageIds) return;
+    const [removed] = reorderImageIds.splice(sourceIndex, 1);
+    reorderImageIds.splice(destinationIndex, 0, removed);
     setReorderImageIds([...reorderImageIds]);
-
     // Optionally, you can save the new order to your backend here
   };
 
@@ -384,54 +383,41 @@ const CollectionPage: React.FC = () => {
             </button>
           </div>
         </Modal>
-        {/* Drag and Drop for Images */}
-        <DragDropContext onDragEnd={handleDragEnd}>
-          <Droppable droppableId="imageList" direction="horizontal">
-            {(provided) => (
-              <Row
-                className="align-items-center w-full"
-                ref={provided.innerRef}
-                {...provided.droppableProps}
-              >
-                {reorderImageIds ? (
-                  reorderImageIds.map((id, index) => {
-                    const image = images?.find((item) => item.id === id);
-                    if (image) {
-                      return (
-                        <Draggable key={id} draggableId={id} index={index}>
-                          {(provided) => (
-                            <Col
-                              lg={4}
-                              md={6}
-                              sm={12}
-                              className="p-0"
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              {...provided.dragHandleProps}
-                            >
-                              <ImageComponent
-                                {...image}
-                                handleTranslateOneImage={
-                                  handleTranslateOneImage
-                                }
-                                showDeleteModal={onShowDeleteImageModal}
-                              />
-                            </Col>
-                          )}
-                        </Draggable>
-                      );
-                    }
-                    return null; // Prevent rendering undefined
-                  })
-                ) : (
-                  <></>
-                )}
-                {provided.placeholder} {/* Important for drag and drop */}
-              </Row>
-            )}
-          </Droppable>
-        </DragDropContext>
 
+        {reorderImageIds && (
+          <ListManager
+            items={reorderImageIds}
+            direction="horizontal"
+            maxItems={3}
+            onDragEnd={handleDragEnd}
+            render={(id) => {
+              const image = images?.find((item) => item.id === id);
+              return (
+                <Col lg={4} md={6} sm={12} className="p-0">
+                  {image ? (
+                    <ImageComponent
+                      {...image}
+                      handleTranslateOneImage={handleTranslateOneImage}
+                      showDeleteModal={onShowDeleteImageModal}
+                    />
+                  ) : (
+                    <ImageComponent
+                      {...{
+                        id,
+                        is_translated: false,
+                        image_url: "",
+                        transcriptions: [],
+                        collection: collection.id,
+                      }}
+                      handleTranslateOneImage={handleTranslateOneImage}
+                      showDeleteModal={onShowDeleteImageModal}
+                    />
+                  )}
+                </Col>
+              );
+            }}
+          />
+        )}
         <ReturnButton key={id} />
       </div>
     );