Drag and drop working with redux state update

package-lock.json

@@ -9385,6 +9385,16 @@
         "schedule": "^0.5.0"
       }
     },
+    "react-drag-list": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-drag-list/-/react-drag-list-1.1.0.tgz",
+      "integrity": "sha512-stV5hWy9ui/0RLdWuSH/q3M11wwWWpLs2lgNMpfVddjCbhXU/1w95h2NMmcsxnSmKZ/WvN1zlbymk/UlT0vP0A==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.5",
+        "sortablejs": "^1.5.1"
+      }
+    },
     "react-error-overlay": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.1.tgz",
@@ -10834,6 +10844,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.7.0.tgz",
+      "integrity": "sha1-gKKyNwq9Vo4c7IwnETHvMKkE+ig="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.5.0",
     "react-dom": "^16.5.0",
+    "react-drag-list": "^1.1.0",
     "react-markdown": "^4.0.3",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",

src/components/RegistrationPage.js

@@ -2,6 +2,8 @@ import React from 'react'
 import topicService from '../services/topic'
 import { connect } from 'react-redux'
 import './RegistrationPage.css'
+import ReactDragList from 'react-drag-list'
+import Topic from './Topic'
 // MUI
 import ExpansionPanel from '@material-ui/core/ExpansionPanel'
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
@@ -40,22 +42,13 @@ class RegistrationPage extends React.Component {
     }
   }
 
+  handleUpdate = (evt, updated) => {
+    console.log(evt)
+    console.log(updated)
+    this.props.updateTopics(updated)
+  }
 
   render() {
-    let topicsList = this.props.topics.map((topic, idx) => (
-      <ExpansionPanel key={idx}>
-        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography style={{ flex: 1 }}>{topic.content.customerName}</Typography>
-          <Typography style={{ flex:  1 }}>{topic.content.title}</Typography>
-        </ExpansionPanelSummary>
-        <ExpansionPanelDetails>
-          <Typography>
-            {topic.content.description}
-          </Typography>
-        </ExpansionPanelDetails>
-      </ExpansionPanel>
-    ))
-
     let questions = testQuestions.map((item, idx) => (
       <Card style={{ marginBottom: '10px' }} key={idx} >
         <CardContent>
@@ -72,12 +65,22 @@ class RegistrationPage extends React.Component {
           <h2 className="landingpage-header">User details</h2>
           <p>---</p>
           <h2>Topics</h2>
-          <p>Order the list of topics by your preference</p>
+          <p>Order the list of topics by your preference, click to expand</p>
-          <div className="expandable-section-headers">
+          <ReactDragList
-            <p className="expandable-section-headers-customer">Customer</p>
+            handles={false}
-            <p className="expandable-section-headers-topic">Topic</p>
+            dataSource={this.props.topics}
-          </div>
+            onUpdate={this.handleUpdate}
-          {topicsList}
+            row={(topic, index) => (
+              <ExpansionPanel key={index}>
+                <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+                  <Typography style={{ flex: 6, fontWeight: 'bold', color: 'gray', fontStyle: 'italic' }}>Customer: {topic.content.customerName}</Typography>
+                  <Typography style={{ flex:  6, fontWeight: 'bold', color: 'gray', fontStyle: 'italic' }}>{topic.content.title}</Typography>
+                </ExpansionPanelSummary>
+                <ExpansionPanelDetails>
+                  <Topic content={topic.content}/>
+                </ExpansionPanelDetails>
+              </ExpansionPanel>)}
+          />
         </div>
         <div className="section">
           <h2>Details</h2>

src/components/Topic.js

@@ -8,7 +8,7 @@ const Topic = ({ content, isEditable, onPageChange }) => {
   return (
     <div className="single-topic-container">
       <div className="block">
-        <Typography variant="h2" id="title">
+        <Typography variant="h4" id="title">
           {content.title}
         </Typography>
       </div>
@@ -33,7 +33,7 @@ const Topic = ({ content, isEditable, onPageChange }) => {
         <ReactMarkdown>{content.specialRequests}</ReactMarkdown>
       </div>
       <div className="block">
-        <Typography variant="h6">Additional info</Typography>
+        <Typography variant="h6">Additional information</Typography>
         <ReactMarkdown>{content.additionalInfo}</ReactMarkdown>
       </div>
       {isEditable && (