ClimbingView: change photos order

src/components/FeaturePanel/Climbing/ClimbingCragDialogHeader.tsx

@@ -1,22 +1,26 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Router from 'next/router';
 import styled from '@emotion/styled';
 import CloseIcon from '@mui/icons-material/Close';
 import TuneIcon from '@mui/icons-material/Tune';
 import {
   AppBar,
-  Toolbar,
-  Typography,
+  Box,
   IconButton,
+  Toolbar,
   Tooltip,
-  Box,
+  Typography,
 } from '@mui/material';
 import { useClimbingContext } from './contexts/ClimbingContext';
 import { PhotoLink } from './PhotoLink';
 import { useFeatureContext } from '../../utils/FeatureContext';
 import { getLabel } from '../../../helpers/featureLabel';
 import { getOsmappLink } from '../../../services/helpers';
 import { UserSettingsDialog } from '../../HomepagePanel/UserSettingsDialog';
+import {
+  HighlightedDropzoneVertical,
+  useDragItems,
+} from '../../utils/useDragItems';
 
 const Title = styled.div`
   flex: 1;
@@ -42,8 +46,15 @@ export const ClimbingCragDialogHeader = ({ onClose }) => {
   const [isUserSettingsOpened, setIsUserSettingsOpened] =
     useState<boolean>(false);
   const [clickCounter, setClickCounter] = useState<number>(0);
-  const { photoPath, setAreRoutesLoading, photoPaths, setShowDebugMenu } =
-    useClimbingContext();
+  const {
+    photoPath,
+    setAreRoutesLoading,
+    photoPaths,
+    setShowDebugMenu,
+    isEditMode,
+    routes,
+    setRoutes,
+  } = useClimbingContext();
 
   const { feature } = useFeatureContext();
 
@@ -64,6 +75,26 @@ export const ClimbingCragDialogHeader = ({ onClose }) => {
     }
   };
 
+  const movePhotos = (oldIndex, newIndex) => {
+    console.log('___', photoPaths[oldIndex], photoPaths[newIndex], routes);
+
+    // setRoutes(routes);
+
+    console.log('___movePhotos', oldIndex, newIndex);
+  };
+
+  const {
+    handleDragStart,
+    handleDragOver,
+    handleDragEnd,
+    HighlightedDropzone,
+    ItemContainer,
+  } = useDragItems<string>({
+    initialItems: photoPaths,
+    moveItems: movePhotos,
+    direction: 'horizontal',
+  });
+
   return (
     <AppBar position="static" color="transparent">
       <Toolbar variant="dense">
@@ -81,13 +112,24 @@ export const ClimbingCragDialogHeader = ({ onClose }) => {
               <PhotosTitle>Photos:</PhotosTitle>
               <PhotoLinks>
                 {photoPaths.map((photo, index) => (
-                  <PhotoLink
-                    key={photo}
-                    onClick={() => onPhotoChange(photo)}
-                    isCurrentPhoto={photo === photoPath}
-                  >
-                    {index}
-                  </PhotoLink>
+                  <ItemContainer key={photo}>
+                    <PhotoLink
+                      key={photo}
+                      onClick={() => onPhotoChange(photo)}
+                      isCurrentPhoto={photo === photoPath}
+                      {...(isEditMode
+                        ? {
+                            draggable: true,
+                            onDragStart: (e) => handleDragStart(e, photo),
+                            onDragOver: (e) => handleDragOver(e, index),
+                            onDragEnd: handleDragEnd,
+                          }
+                        : {})}
+                    >
+                      {photo}
+                    </PhotoLink>
+                    <HighlightedDropzone index={index} />
+                  </ItemContainer>
                 ))}
               </PhotoLinks>
             </PhotosContainer>

src/components/FeaturePanel/Climbing/PhotoLink.tsx

@@ -1,14 +1,19 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { Tooltip } from '@mui/material';
+import { useClimbingContext } from './contexts/ClimbingContext';
 
 type Props = {
   children: string | number;
   isCurrentPhoto: boolean;
   onClick: (e: any) => void;
+  onDragStart?: (e: any) => void;
+  onDragOver?: (e: any) => void;
+  onDragEnd?: (e: any) => void;
+  draggable?: boolean;
 };
 
-const Container = styled.div<{ $isCurrentPhoto: boolean }>`
+const Container = styled.div<{ $isCurrentPhoto: boolean; draggable?: boolean }>`
   display: block;
   background: ${({ $isCurrentPhoto, theme }) =>
     $isCurrentPhoto ? theme.palette.action.selected : 'transparent'};
@@ -19,13 +24,33 @@ const Container = styled.div<{ $isCurrentPhoto: boolean }>`
   border-radius: 6px;
   padding: 2px 8px;
   font-size: 12px;
-  cursor: pointer;
+  cursor: ${({ draggable }) => (draggable ? 'move' : 'pointer')};
+  &[draggable='true'] {
+    opacity: 0.8;
+  }
 `;
 
-export const PhotoLink = ({ children, isCurrentPhoto, onClick }: Props) => (
-  <Tooltip title={`Show photo ${children}`}>
-    <Container $isCurrentPhoto={isCurrentPhoto} onClick={onClick}>
-      {children}
-    </Container>
-  </Tooltip>
-);
+export const PhotoLink = ({
+  children,
+  isCurrentPhoto,
+  onClick,
+  onDragStart,
+  onDragOver,
+  onDragEnd,
+  draggable,
+}: Props) => {
+  return (
+    <Tooltip title={`Show photo ${children}`}>
+      <Container
+        $isCurrentPhoto={isCurrentPhoto}
+        onClick={onClick}
+        onDragStart={onDragStart}
+        onDragOver={onDragOver}
+        onDragEnd={onDragEnd}
+        draggable={draggable}
+      >
+        {children}
+      </Container>
+    </Tooltip>
+  );
+};

src/components/FeaturePanel/Climbing/RouteList/RouteListDndContent.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import { useClimbingContext } from '../contexts/ClimbingContext';
 import { RenderListRow } from './RouteListRow';
+import { useDragItems } from '../../../utils/useDragItems';
 
 type Item = {
   id: number;
@@ -58,15 +59,7 @@ const RowContent = styled.div`
   display: flex;
   align-items: center;
 `;
-const HighlightedDropzone = styled.div<{ $isActive: boolean }>`
-  position: absolute;
-  width: 100%;
-  margin-top: -2px;
-  height: 4px;
-  background: ${({ $isActive, theme }) =>
-    $isActive ? theme.palette.climbing.active : 'transparent'};
-  z-index: 1000000;
-`;
+
 const TableHeader = styled.div`
   display: flex;
   justify-content: center;
@@ -106,9 +99,6 @@ export const RouteListDndContent = ({ isEditable }) => {
   }, [routes]);
   const parentRef = React.useRef<HTMLDivElement>(null);
 
-  const [draggedItem, setDraggedItem] = useState<Item | null>(null);
-  const [draggedOverIndex, setDraggedOverIndex] = useState<number | null>(null);
-
   const onRowClick = (index: number) => {
     const routeNumber = routeSelectedIndex === index ? null : index;
     if (isEditMode) {
@@ -118,69 +108,6 @@ export const RouteListDndContent = ({ isEditable }) => {
     }
   };
 
-  const handleDragStart = (
-    e: React.DragEvent<HTMLDivElement>,
-    dragged: Item,
-  ) => {
-    e.stopPropagation();
-    e.preventDefault();
-    e.dataTransfer.setData('text/plain', JSON.stringify(dragged));
-    setDraggedItem(dragged);
-  };
-
-  const handleDragOver = (
-    e: React.DragEvent<HTMLDivElement>,
-    index: number,
-  ) => {
-    e.preventDefault();
-    let newIndex = index;
-
-    if (draggedItem) {
-      const target = e.target as HTMLDivElement;
-      const targetRect = target.getBoundingClientRect();
-      const offsetY = e.clientY - targetRect.top;
-
-      if (offsetY < targetRect.height / 2) {
-        newIndex = index; // up
-      } else if (
-        index === items.length - 1 &&
-        offsetY > targetRect.height / 2
-      ) {
-        newIndex = items.length; // last
-      } else {
-        newIndex = index; // down
-      }
-    }
-
-    if (newIndex !== draggedOverIndex) {
-      setDraggedOverIndex(newIndex);
-    }
-  };
-
-  const handleDragEnd = () => {
-    if (draggedOverIndex !== null && draggedItem) {
-      const newItems = [...items];
-      const oldIndex = items.findIndex((item) => item.id === draggedItem.id);
-      newItems.splice(oldIndex, 1);
-
-      let newIndex = draggedOverIndex;
-      if (
-        draggedOverIndex === items.length ||
-        draggedOverIndex === items.length - 1
-      ) {
-        newIndex = items.length;
-      }
-
-      newItems.splice(newIndex, 0, draggedItem);
-      setItems(newItems);
-      moveRoute(oldIndex, newIndex);
-      if (routeSelectedIndex === oldIndex) setRouteSelectedIndex(newIndex);
-      if (routeSelectedIndex === newIndex) setRouteSelectedIndex(oldIndex);
-    }
-    setDraggedItem(null);
-    setDraggedOverIndex(null);
-  };
-
   const handleControlDragStart = (
     e: React.DragEvent<HTMLDivElement>,
     dragged: Item,
@@ -199,6 +126,27 @@ export const RouteListDndContent = ({ isEditable }) => {
     e.stopPropagation();
   };
 
+  const {
+    handleDragStart,
+    handleDragOver,
+    handleDragEnd,
+    HighlightedDropzone,
+    setDraggedItem,
+    setDraggedOverIndex,
+    draggedItem,
+    draggedOverIndex,
+  } = useDragItems<React.ReactNode>({
+    initialItems: routes,
+    moveItems: (oldIndex, newIndex) => {
+      moveRoute(oldIndex, newIndex);
+
+      // maybe move to moveRoute?
+      if (routeSelectedIndex === oldIndex) setRouteSelectedIndex(newIndex);
+      if (routeSelectedIndex === newIndex) setRouteSelectedIndex(oldIndex);
+    },
+    direction: 'vertical',
+  });
+
   return (
     <Container ref={parentRef}>
       <TableHeader>
@@ -211,9 +159,7 @@ export const RouteListDndContent = ({ isEditable }) => {
         const isSelected = isRouteSelected(index);
         return (
           <Row key={item.id}>
-            {draggedItem?.id > index && (
-              <HighlightedDropzone $isActive={draggedOverIndex === index} />
-            )}
+            {draggedItem?.id > index && <HighlightedDropzone index={index} />}
             <RowWithDragHandler
               isDraggedOver={index === draggedOverIndex}
               draggable
@@ -246,9 +192,7 @@ export const RouteListDndContent = ({ isEditable }) => {
                 </RowContent>
               </MaxWidthContainer>
             </RowWithDragHandler>
-            {draggedItem?.id <= index && (
-              <HighlightedDropzone $isActive={draggedOverIndex === index} />
-            )}
+            {draggedItem?.id <= index && <HighlightedDropzone index={index} />}
           </Row>
         );
       })}