Skip to content

Commit

Permalink
Improve Save Drag and Drop Data Feature to a More Stable Feature (#189)
Browse files Browse the repository at this point in the history
  • Loading branch information
stanleyowen committed May 30, 2021
1 parent ea159e6 commit 6c8fa43
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 69 deletions.
14 changes: 4 additions & 10 deletions client/src/components/home.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -117,22 +117,16 @@ const Home = ({ userData }) => {
}

const handleOnDragEnd = (res) => {
console.log(res)
const {source, destination} = res
if (!destination || !source || !res.draggableId || destination.index == source.index) return;
if (!destination || !source || destination.index == source.index) return;
const items = Array.from(todoData)
const [reorderedItem] = items.splice(res.source.index, 1)
items.splice(res.destination.index, 0, reorderedItem)
setTodoData(items)
localStorage.setItem('todoData', JSON.stringify(items))
console.log(document.getElementById('todo').querySelectorAll('tr')[source.index].getAttribute('data-rbd-drag-handle-draggable-id'), document.getElementById('todo').querySelectorAll('tr')[0].getAttribute('data-rbd-drag-handle-draggable-id'))
const data = {
_id: destination.index > source.index ? res.draggableId : document.getElementById('todo').querySelectorAll('tr')[destination.index].getAttribute('data-rbd-drag-handle-draggable-id'),
previousId: destination.index > source.index ? document.getElementById('todo').querySelectorAll('tr')[destination.index].getAttribute('data-rbd-drag-handle-draggable-id') : res.draggableId,
newSourceId: destination.index > source.index ? document.getElementById('todo').querySelectorAll('tr')[source.index+1].getAttribute('data-rbd-drag-handle-draggable-id') : res.draggableId,
// newSourceId: Math.abs(destination.index - source.index) === 1 ? destination.index > source.index ? '' : res.draggableId : destination.index > source.index ? document.getElementById('todo').querySelectorAll('tr')[source.index+1].getAttribute('data-rbd-drag-handle-draggable-id') : res.draggableId,
}
axios.put(`${SERVER_URL}/todo/index`, data, { headers: { 'XSRF-TOKEN': getCSRFToken() }, withCredentials: true })
const data = []
items.map((a, index) => data.push({ _id: a._id, index }))
axios.put(`${SERVER_URL}/todo/index`, {data}, { headers: { 'XSRF-TOKEN': getCSRFToken() }, withCredentials: true })
.then().catch(err => setNotification(NOTIFICATION_TYPES.DANGER, err.response.data.message))
}
const todoList = (b = todoData ? todoData : cacheTodo) => {
Expand Down
68 changes: 11 additions & 57 deletions server/lib/passport.js
Original file line number Diff line number Diff line change
Expand Up @@ -452,62 +452,19 @@ passport.use('todoData', new localStrategy({ usernameField: 'email', passwordFie
else
Todo.find({email}, (err, data) => {
if(err) return done(err, false)
let sortData = []
let sortedData = []
let todoData = []
data.map(a =>{
let data = todoData
if(a.previousId) data = sortData
data.push({
data.map(a =>
todoData.push({
_id: String(a._id),
email: a.email,
title: decrypt(a.title, 1),
label: decrypt(a.label, 1),
description: a.description.data ? decrypt(a.description, 1) : '',
date: decrypt(a.date, 1),
previousId: a.previousId ? a.previousId : '',
updatedAt: a.updatedAt
index: a.index
})
})
for (let a=0; a<sortData.length; a++) {
for (let b=0; b<sortData.length; b++) {
if(sortData[a]._id === sortData[b].previousId){
sortData.splice(b+1, 0, sortData[a])
sortData.splice(a, 1)
}
else if(sortData[a].previousId === sortData[b].previousId && a !== b) {
sortedData = [sortData[a], sortData[b]]
sortedData.sort((a,b) => {
if(a.updatedAt > b.updatedAt) return -1
if(a.updatedAt < b.updatedAt) return 1
return 0
})
sortData.splice(a, 1)
sortData.splice(b-1, 1)
sortData.splice(a, 0, ...sortedData)
// console.log(sortData)
}
}
}
// sortData.sort((a, b) => {
// if(a.updateAt < b.updateAt) return -1
// if(a.updateAt > b.updateAt) return 1
// return 0
// })
console.log(sortData)
if(sortData.length > 0)
for(let a=sortData.length-1; a>-1; a--) {
for (let b=0; b<todoData.length; b++) {
if(sortData[a].previousId === todoData[b]._id) {
// sortData.splice(a, 1)
// console.log(sortData.length, a)
todoData.splice(b+1, 0, sortData[a])
// console.log(todoData)
}
}
}
// console.log(todoData)
return done(null, todoData)
)
return done(null, todoData.sort((a, b) => { return a.index - b.index }))
})
}))

Expand Down Expand Up @@ -549,18 +506,15 @@ passport.use('updateTodo', new localStrategy({ usernameField: 'email', passwordF
}))

passport.use('updateIndex', new localStrategy({ usernameField: 'email', passwordField: '_id', passReqToCallback: true, session: false }, (req, email, _id, done) => {
var {previousId} = req.body
if(!previousId) return done(null, false, {status: 400, message: MSG_DESC[11]})
const {data} = req.body
if(!data) return done(null, false, {status: 400, message: MSG_DESC[11]})
else if(EMAIL_VAL.test(String(email).toLocaleLowerCase()) === false || email.length < 6 || email.length > 60) return done(null, false, {status: 400, message: MSG_DESC[8]})
// else if(previousId === _id) previousId=null
// console.log(previousId)
Todo.findOneAndUpdate({_id, email}, { previousId }, (err) => {
if(err) return done(err, false)
Todo.findOneAndUpdate({_id: previousId, email}, { previousId: '' }, (err, data) => {
data.map(a =>
Todo.findOneAndUpdate({_id: a._id, email}, { index: a.index }, (err) => {
if(err) return done(err, false)
return done(null, true, { status: 200, message: MSG_DESC[21] })
})
})
)
return done(null, true, { status: 200, message: MSG_DESC[21] })
}))

passport.use('deleteTodo', new localStrategy({ usernameField: 'email', passwordField: 'objId', session: false }, (email, _id, done) => {
Expand Down
6 changes: 5 additions & 1 deletion server/models/todo.model.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,11 @@ const todoSchema = new Schema ({
maxlength: 32
}
},
previousId: { type: String }
index: {
type: Number,
required: true,
default: 0
}
}, { timestamps: true })

const Todo = mongoose.model('todo', todoSchema)
Expand Down
2 changes: 1 addition & 1 deletion server/routes/todo.route.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ router.put('/index', async (req, res, next) =>
passport.authenticate('jwt', { session: false }, (err, user, info) => {
if(err) return res.status(500).send(JSON.stringify({status: 500, message: MSG_DESC[0]}, null, 2))
else if(info && (info.status ? info.status >= 300 ? true : false : true)) return res.status(info.status ? info.status : info.status = 400).send(JSON.stringify(info, null, 2))
else if(user && (req.body = {...req.body, email: user.email}))
else if(user && (req.body = {...req.body, ...user}))
passport.authenticate('updateIndex', { session: false }, (err, data, info) => {
if(err) return res.status(500).send(JSON.stringify({status: 500, message: MSG_DESC[0]}, null, 2))
else if(info && (info.status ? info.status >= 300 ? true : false : true)) return res.status(info.status ? info.status : info.status = 400).send(JSON.stringify(info, null, 2))
Expand Down

0 comments on commit 6c8fa43

Please sign in to comment.