add dragndrop slice

ui2/src/app/App.css

@@ -14,3 +14,7 @@ main {
 .borderline-bottom {
   border-bottom: #7474ff 3px solid;
 }
+
+.dragged {
+  opacity: 0.3;
+}

ui2/src/app/store.ts

@@ -10,6 +10,7 @@ import groupDetailsReducer from "@/slices/groupDetails"
 import userDetailsReducer from "@/slices/userDetails"
 import {uploaderReducer} from "@/slices/uploader"
 import sizesSliceReducer from "@/slices/sizes"
+import dragndropReducer from "@/slices/dragndrop"
 
 export const store = configureStore({
   reducer: {
@@ -23,6 +24,7 @@ export const store = configureStore({
     groupDetails: groupDetailsReducer,
     userDetails: userDetailsReducer,
     uploader: uploaderReducer,
-    sizes: sizesSliceReducer
+    sizes: sizesSliceReducer,
+    dragndrop: dragndropReducer
   }
 })

ui2/src/components/Viewer/Thumbnail/Thumbnail.tsx

@@ -1,16 +1,23 @@
-import {useContext, useRef, useEffect, useState} from "react"
-import {useDispatch} from "react-redux"
+import {useContext, useRef, useState, useEffect} from "react"
+import {useDispatch, useSelector} from "react-redux"
 import {Stack, Checkbox} from "@mantine/core"
 import PanelContext from "@/contexts/PanelContext"
 
 import {useProtectedJpg} from "@/hooks/protected_image"
 import {setCurrentPage} from "@/slices/dualPanel/dualPanel"
+import {
+  dragPagesStart,
+  dragPagesEnd,
+  selectDraggedPages
+} from "@/slices/dragndrop"
 import type {PanelMode, PageType} from "@/types"
 
 import classes from "./Thumbnail.module.scss"
+import {RootState} from "@/app/types"
 
 const BORDERLINE_TOP = "borderline-top"
 const BORDERLINE_BOTTOM = "borderline-bottom"
+const DRAGGED = "dragged"
 
 type Args = {
   page: PageType
@@ -22,6 +29,24 @@ export default function Thumbnail({page}: Args) {
   const mode: PanelMode = useContext(PanelContext)
   const ref = useRef<HTMLDivElement>(null)
   const [cssClassNames, setCssClassNames] = useState<Array<string>>([])
+  const draggedPages = useSelector((state: RootState) =>
+    selectDraggedPages(state)
+  )
+
+  useEffect(() => {
+    const cur_page_is_being_dragged = draggedPages?.find(p => p.id == page.id)
+    if (cur_page_is_being_dragged) {
+      if (cssClassNames.indexOf(DRAGGED) < 0) {
+        setCssClassNames([...cssClassNames, DRAGGED])
+      }
+    } else {
+      // i.e. is not dragged
+      setCssClassNames(
+        // remove css class
+        cssClassNames.filter(item => item !== DRAGGED)
+      )
+    }
+  }, [draggedPages?.length])
 
   const onClick = () => {
     dispatch(setCurrentPage({mode, page: page.number}))
@@ -66,6 +91,22 @@ export default function Thumbnail({page}: Args) {
     event.preventDefault()
   }
 
+  const onDragStart = () => {
+    dispatch(dragPagesStart([page]))
+  }
+
+  const onDragEnd = () => {
+    dispatch(dragPagesEnd())
+  }
+
+  const onLocalDrop = () => {
+    // remove both borderline_bottom and borderline_top
+    const new_array = cssClassNames.filter(
+      i => i != BORDERLINE_BOTTOM && i != BORDERLINE_TOP
+    )
+    setCssClassNames(new_array)
+  }
+
   return (
     <Stack
       ref={ref}
@@ -74,9 +115,12 @@ export default function Thumbnail({page}: Args) {
       gap={"xs"}
       onClick={onClick}
       draggable
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
       onDragOver={onLocalDragOver}
       onDragLeave={onLocalDragLeave}
       onDragEnter={onLocalDragEnter}
+      onDrop={onLocalDrop}
     >
       <Checkbox className={classes.checkbox} />
       <img src={protectedImage.data || ""} />

ui2/src/slices/dragndrop.ts

@@ -0,0 +1,30 @@
+import {PageType} from "@/types"
+import {createSlice, PayloadAction} from "@reduxjs/toolkit"
+import {RootState} from "@/app/types"
+
+type DragNDrop = {
+  pages: Array<PageType> | null
+}
+
+const initialState: DragNDrop = {
+  pages: null
+}
+
+const dragndropSlice = createSlice({
+  name: "dragndrop",
+  initialState,
+  reducers: {
+    dragPagesStart(state, action: PayloadAction<Array<PageType>>) {
+      state.pages = action.payload
+    },
+    dragPagesEnd(state) {
+      state.pages = []
+    }
+  }
+})
+
+export default dragndropSlice.reducer
+
+export const {dragPagesStart, dragPagesEnd} = dragndropSlice.actions
+
+export const selectDraggedPages = (state: RootState) => state.dragndrop.pages