From 7c92a9c88f48edbdb50ccb143312b13da5a558a3 Mon Sep 17 00:00:00 2001
From: Dan Gleason <dannycgleason@gmail.com>
Date: Tue, 3 Jan 2023 08:58:04 -0500
Subject: [PATCH] update add message to drag and drop

---
 package-lock.json |  76 +++++++++++++++++++++-
 package.json      |   4 +-
 pages/edit.js     | 158 +++++++++++++++++++++++-----------------------
 3 files changed, 157 insertions(+), 81 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bab563f..cb6422c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@heroicons/react": "^2.0.13",
         "@material-ui/core": "^4.12.4",
         "@mui/material": "^5.11.1",
+        "@reduxjs/toolkit": "^1.9.1",
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "antd": "^5.1.0",
         "axios": "^1.2.1",
@@ -37,7 +38,8 @@
         "react-dom": "^18",
         "react-modal": "^3.16.1",
         "react-router-dom": "^6.6.1",
-        "react-table": "^7.8.0"
+        "react-table": "^7.8.0",
+        "redux": "^4.2.0"
       },
       "devDependencies": {
         "postcss": "^8.4.20",
@@ -1702,6 +1704,29 @@
       "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
       "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.1.tgz",
+      "integrity": "sha512-HikrdY+IDgRfRYlCTGUQaiCxxDDgM1mQrRbZ6S1HFZX5ZYuJ4o8EstNmhTwHdPl2rTmLxzwSu0b3AyeyTlR+RA==",
+      "dependencies": {
+        "immer": "^9.0.16",
+        "redux": "^4.2.0",
+        "redux-thunk": "^2.4.2",
+        "reselect": "^4.1.7"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.0.2"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
@@ -2787,6 +2812,15 @@
       "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
       "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
     },
+    "node_modules/immer": {
+      "version": "9.0.17",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.17.tgz",
+      "integrity": "sha512-+hBruaLSQvkPfxRiTLK/mi4vLH+/VQS6z2KJahdoxlleFOI8ARqzOF17uy12eFDlqWmPoygwc5evgwcp+dlHhg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4984,11 +5018,24 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "node_modules/redux-thunk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
+      "peerDependencies": {
+        "redux": "^4"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "node_modules/reselect": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz",
+      "integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A=="
+    },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -6446,6 +6493,17 @@
       "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
       "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
     },
+    "@reduxjs/toolkit": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.1.tgz",
+      "integrity": "sha512-HikrdY+IDgRfRYlCTGUQaiCxxDDgM1mQrRbZ6S1HFZX5ZYuJ4o8EstNmhTwHdPl2rTmLxzwSu0b3AyeyTlR+RA==",
+      "requires": {
+        "immer": "^9.0.16",
+        "redux": "^4.2.0",
+        "redux-thunk": "^2.4.2",
+        "reselect": "^4.1.7"
+      }
+    },
     "@remix-run/router": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
@@ -7262,6 +7320,11 @@
       "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
       "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
     },
+    "immer": {
+      "version": "9.0.17",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.17.tgz",
+      "integrity": "sha512-+hBruaLSQvkPfxRiTLK/mi4vLH+/VQS6z2KJahdoxlleFOI8ARqzOF17uy12eFDlqWmPoygwc5evgwcp+dlHhg=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -8700,11 +8763,22 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "redux-thunk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
+      "requires": {}
+    },
     "regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "reselect": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz",
+      "integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A=="
+    },
     "resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
diff --git a/package.json b/package.json
index 558e0f9..27910cf 100755
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@heroicons/react": "^2.0.13",
     "@material-ui/core": "^4.12.4",
     "@mui/material": "^5.11.1",
+    "@reduxjs/toolkit": "^1.9.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "antd": "^5.1.0",
     "axios": "^1.2.1",
@@ -39,7 +40,8 @@
     "react-dom": "^18",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.6.1",
-    "react-table": "^7.8.0"
+    "react-table": "^7.8.0",
+    "redux": "^4.2.0"
   },
   "devDependencies": {
     "postcss": "^8.4.20",
diff --git a/pages/edit.js b/pages/edit.js
index bb55fb8..f7ff6e8 100755
--- a/pages/edit.js
+++ b/pages/edit.js
@@ -49,14 +49,85 @@ const UserComponent = ({
   )
 }
 
-function InputForm() {
+
+function DragApp() {
 
   const [ questionOne, setQuestionOne] = useState('');
   const [selectedImage, setSelectedImage] = useState(null);
 
+    const [items, setItems] = useState([
+        {
+          id: "1",
+          note: "Manoj"
+        },
+        {
+          id: "2",
+          note: "John"
+        },
+        {
+          id: "3",
+          note: "Ronaldo"
+        },
+        {
+          id: "4",
+          note: "Harry"
+        },
+        {
+          id: "5",
+          note: "Jamie"
+        }
+      ])
+    const [renderTrigger, setRenderTrigger] = useState(false);
+
+    useEffect(() => {
+        setRenderTrigger(!renderTrigger);
+      }, [items]);
+
+    useEffect(() => {
+        fetch('https://jsonplaceholder.typicode.com/posts')
+          .then((response) => response.json())
+          .then((data) => setItems(data));
+          console.log('items', items)
+      }, []);
+
+
+
+  const sensors = [useSensor(PointerSensor)];
+
+
+  const saveOrder = () => {
+
+    console.log("order" + items.map(item => item.id))
+    // Send the current order of the items to a database via a POST route
+    fetch('/api/save-order', { // create this route in our API
+      method: 'POST',
+      body: JSON.stringify({
+        order: items.map(item => item.id)
+      })
+    })
+  }
+
+  const handleDragEnd = ({active, over}) => {
+    if (active.id !== over.id) {
+      setItems((items) => {
+        const oldIndex = items.findIndex(item => item.id === active.id)
+        const newIndex = items.findIndex(item => item.id === over.id)
+
+        return arrayMove(items, oldIndex, newIndex)
+      })
+    }
+  }
+
   return (
-    <>
-    <form className="space-y-8 divide-y divide-gray-200" action="#" method="POST">
+
+<>
+
+<div >
+
+<div className="grid grid-cols-2 divide-x-2 divide-gray-400">
+  <div className="col-span-1 p-6">
+
+  <form className="space-y-8 divide-y divide-gray-200" action="#" method="POST">
 <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
               <label htmlFor="username" className="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
               <em>Upload a note manually: </em>
@@ -116,7 +187,11 @@ function InputForm() {
         <div className="flex justify-end">
          
           <button
-            type="submit"
+            type="button"
+            onClick = {() => {
+              setItems([...items, { id: items.length + 1, title: "testing" , body: questionOne}]);
+            
+            }}
             className="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             Upload
@@ -124,81 +199,6 @@ function InputForm() {
         </div>
       </div>
     </form>
-    </>
-  
-  )
-
-}
-
-function DragApp() {
-
-    const [items, setItems] = useState([
-        {
-          id: "1",
-          name: "Manoj"
-        },
-        {
-          id: "2",
-          name: "John"
-        },
-        {
-          id: "3",
-          name: "Ronaldo"
-        },
-        {
-          id: "4",
-          name: "Harry"
-        },
-        {
-          id: "5",
-          name: "Jamie"
-        }
-      ])
-
-    useEffect(() => {
-        fetch('https://jsonplaceholder.typicode.com/posts')
-          .then((response) => response.json())
-          .then((data) => setItems(data));
-      }, []);
-
-
-
-  const sensors = [useSensor(PointerSensor)];
-
-
-  const saveOrder = () => {
-
-    console.log("order" + items.map(item => item.id))
-    // Send the current order of the items to a database via a POST route
-    fetch('/api/save-order', { // create this route in our API
-      method: 'POST',
-      body: JSON.stringify({
-        order: items.map(item => item.id)
-      })
-    })
-  }
-
-  const handleDragEnd = ({active, over}) => {
-    if (active.id !== over.id) {
-      setItems((items) => {
-        const oldIndex = items.findIndex(item => item.id === active.id)
-        const newIndex = items.findIndex(item => item.id === over.id)
-
-        return arrayMove(items, oldIndex, newIndex)
-      })
-    }
-  }
-
-  return (
-
-<>
-
-<div >
-
-<div className="grid grid-cols-2 divide-x-2 divide-gray-400">
-  <div className="col-span-1 p-6">
-
-  <InputForm/>
 
   </div>