refactor: migrate to dndkit for drag list

frontend/package.json

@@ -19,6 +19,8 @@
     "format:check": "oxfmt --check"
   },
   "dependencies": {
+    "@dnd-kit/helpers": "^0.2.4",
+    "@dnd-kit/react": "^0.2.4",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^9.2.0",
@@ -31,7 +33,6 @@
     "prop-types": "^15.8.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "react-drag-list": "^1.1.0",
     "react-markdown": "^10.1.0",
     "react-redux": "^9.3.0",
     "react-router-dom": "^7.18.2",

frontend/src/components/RegistrationDetailsPage.jsx

@@ -2,7 +2,6 @@ import { withRouter } from '../utils/withRouter'
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
-import ReactDragList from 'react-drag-list'
 
 import registrationActions from '../reducers/actions/registrationActions'
 import { setError } from '../reducers/actions/notificationActions'
@@ -11,8 +10,8 @@ import peerReviewService from '../services/peerReview'
 
 import Typography from '@mui/material/Typography'
 import { Input, Card, CardContent, Select, MenuItem } from '@mui/material'
-import TopicDialog from './TopicDialog'
 import CourseMaterial from './common/CourseMaterial'
+import SortableTopicList from './SortableTopicList'
 
 import { formatDate, extractCallingName } from '../utils/functions'
 
@@ -125,26 +124,8 @@ const PreferredTopics = ({ topics }) => {
   return (
     <div>
       <h2>Preferred Topics</h2>
-      <div className="dragndrop-container">
-        <div className="dragndrop-indexes-container">
-          {topics.map((topic, index) => {
-            return (
-              <Card key={index} className="dragndrop-index">
-                {index + 1}
-              </Card>
-            )
-          })}
-        </div>
-        <ReactDragList
-          className="dragndrop-list"
-          handles={false}
-          dataSource={topics}
-          rowKey="id"
-          row={(topic) => {
-            return <TopicDialog topic={topic} key={topic.content.title} />
-          }}
-          disabled
-        />
+      <div className="dragndrop-container" style={{ flexDirection: 'column' }}>
+        <SortableTopicList topics={topics} isReadOnly={true} />
       </div>
     </div>
   )

frontend/src/components/RegistrationPage.css

@@ -27,10 +27,6 @@
   flex-direction: row;
 }
 
-.dragndrop-list {
-  flex: 99;
-}
-
 .dragndrop-indexes-container {
   flex: 1;
   height: 80px;

frontend/src/components/RegistrationPage.jsx

@@ -2,7 +2,6 @@ import { withRouter } from '../utils/withRouter'
 import React from 'react'
 
 import { connect } from 'react-redux'
-import ReactDragList from 'react-drag-list'
 // MUI
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
@@ -19,7 +18,6 @@ import configurationService from '../services/configuration'
 // components
 import LoadingSpinner from './common/LoadingSpinner'
 import CourseMaterial from './common/CourseMaterial'
-import TopicDialog from './TopicDialog'
 import UserDetails from './UserDetails'
 import './RegistrationPage.css'
 // Actions
@@ -27,6 +25,7 @@ import registrationPageActions from '../reducers/actions/registrationPageActions
 import * as notificationActions from '../reducers/actions/notificationActions'
 import registrationActions from '../reducers/actions/registrationActions'
 import registrationmanagementActions from '../reducers/actions/registrationManagementActions'
+import SortableTopicList from './SortableTopicList'
 
 const Prerequisites = ({ checkbox1, checkbox2, checkbox3, onToggle1, onToggle2, onToggle3 }) => {
   return (
@@ -306,12 +305,6 @@ class RegistrationPage extends React.Component {
       </Card>
     ))
 
-    const indexes = this.props.topics.map((item, idx) => (
-      <Card key={idx} className="dragndrop-index">
-        {idx + 1}
-      </Card>
-    ))
-
     return (
       <div>
         <div
@@ -455,15 +448,7 @@ class RegistrationPage extends React.Component {
                   dragging and dropping, click to expand details
                 </div>
                 <div className="dragndrop-container">
-                  <div className="dragndrop-indexes-container">{indexes}</div>
-                  <ReactDragList
-                    className="dragndrop-list"
-                    handles={false}
-                    dataSource={this.props.topics}
-                    onUpdate={this.handleUpdate}
-                    rowKey="id"
-                    row={(topic) => <TopicDialog topic={topic} key={topic.content.title} />}
-                  />
+                  <SortableTopicList topics={this.props.topics} onUpdate={this.handleUpdate} />
                 </div>
               </>
             )}

frontend/src/components/SortableTopicList.jsx

@@ -0,0 +1,65 @@
+import { DragDropProvider } from '@dnd-kit/react'
+import { useSortable } from '@dnd-kit/react/sortable'
+import { move } from '@dnd-kit/helpers'
+import Card from '@mui/material/Card'
+import TopicDialog from './TopicDialog'
+
+const SortableTopicItem = ({ topic, index, isReadOnly }) => {
+  const { ref, isDragging } = useSortable({
+    id: topic.id,
+    index,
+    disabled: isReadOnly,
+  })
+
+  const style = {
+    opacity: isDragging ? 0.4 : 1,
+    display: 'flex',
+    alignItems: 'stretch',
+    marginBottom: '8px',
+  }
+
+  return (
+    <div
+      ref={isReadOnly ? null : ref}
+      style={{ ...style, cursor: isReadOnly ? 'default' : 'grab' }}
+    >
+      <Card
+        className="dragndrop-index"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minWidth: '40px',
+          maxHeight: 'none',
+          padding: 0,
+        }}
+      >
+        {index + 1}
+      </Card>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <TopicDialog topic={topic} showDragIcon={!isReadOnly} />
+      </div>
+    </div>
+  )
+}
+
+const SortableTopicList = ({ topics, onUpdate, isReadOnly }) => {
+  const handleDragEnd = (event) => {
+    if (!event.canceled && onUpdate) {
+      const newTopics = move(topics, event)
+      onUpdate(null, newTopics)
+    }
+  }
+
+  return (
+    <DragDropProvider onDragEnd={handleDragEnd}>
+      <div className="dragndrop-list">
+        {topics.map((topic, index) => (
+          <SortableTopicItem key={topic.id} topic={topic} index={index} isReadOnly={isReadOnly} />
+        ))}
+      </div>
+    </DragDropProvider>
+  )
+}
+
+export default SortableTopicList

frontend/src/components/TopicDialog.jsx

@@ -7,6 +7,7 @@ import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Topic from './Topic'
 import Typography from '@mui/material/Typography'
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator'
 
 class TopicDialog extends React.Component {
   constructor(props) {
@@ -37,8 +38,29 @@ class TopicDialog extends React.Component {
       : 'Software is published under an open source license'
 
     return (
-      <Card style={{ margin: '2px', height: '78px' }}>
-        <CardContent style={{ padding, display: 'flex', flexDirection: 'row' }}>
+      <Card style={{ margin: '2px', minHeight: '78px' }}>
+        <CardContent
+          style={{
+            padding,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          {this.props.showDragIcon && (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginRight: '12px',
+                color: '#888',
+                flexShrink: 0,
+              }}
+            >
+              <DragIndicatorIcon />
+            </div>
+          )}
           <div style={{ flex: 4 }}>
             <Typography style={{ flex: 1, fontWeight: 'bold' }}>
               {this.props.topic.content.title}

package-lock.json

@@ -6,8 +6,6 @@
   "packages": {
     "": {
       "name": "ohtuilmo",
-      "version": "1.0.0",
-      "license": "ISC",
       "devDependencies": {
         "husky": "^9.1.7",
         "lint-staged": "^17.3.0"