Skip to content

Commit

Permalink
update add message to drag and drop
Browse files Browse the repository at this point in the history
dcgleason committed Jan 3, 2023
1 parent b8389ab commit 7c92a9c
Showing 3 changed files with 157 additions and 81 deletions.
76 changes: 75 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
158 changes: 79 additions & 79 deletions pages/edit.js
Original file line number Diff line number Diff line change
@@ -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,89 +187,18 @@ 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
</button>
</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>

0 comments on commit 7c92a9c

Please sign in to comment.