I'm building an application for managing orders from an e-commerce store using React-Beautiful-DnD.
I'm trying to save the data from my columns to the database in order to save the position and the specific column it was in even after closing the web page.
the web page uses React and Redux
this is the main page AdminContent
function AdminContent(props) {
const dispatch = useDispatch();
const [columns, setColumns] = useState([]);
const [orders, setOrders] = useState([]);
useEffect(() => {
props.fetchOrder(setOrders);
props.fetchColumns(setColumns);
}, []);
useEffect(() => {
setColumns((prevState) => {
return {
...prevState,
column: {
items: orders,
},
};
});
}, []);
console.log(orders);
console.log(columns);
const onDragEnd = (result, columns, setColumns) => {
if (!result.destination) return;
const { source, destination } = result;
if (source.droppableId !== destination.droppableId) {
const sourceColumns = columns[source.droppableId];
const destColumns = columns[destination.droppableId];
const sourceItems = [...sourceColumns.items];
const destItems = [...destColumns.items];
const [removed] = sourceItems.splice(source.index, 1);
destItems.splice(destination.index, 0, removed);
setColumns({
...columns,
[source.droppableId]: {
...sourceColumns,
items: sourceItems,
},
[destination.droppableId]: {
...destColumns,
items: destItems,
},
});
} else {
const column = columns[source.droppableId];
const copiedItems = [...column.items];
const [removed] = copiedItems.splice(source.index, 1);
copiedItems.splice(destination.index, 0, removed);
setColumns({
...columns,
[source.droppableId]: {
...column,
items: copiedItems,
},
});
}
console.log(result);
};
// take the id of the itme/object you want to delete
const deleteItem = (item, result, columns, setColumns) => {
const itemId = item._id;
console.log(itemId);
// use the dispatch you declared earlier with the function you import from Actions
dispatch(deleteOrder(itemId));
};
return (
<div className="adminPageContainer">
<DragDropContext
onDragEnd={(result) => onDragEnd(result, columns, setColumns)}
>
{Object.entries(columns).map(([_id, column]) => {
return (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<h2>{column.name}</h2>
<div style={{ margin: 8 }}>
<Droppable droppableId={_id} key={_id}>
{(provided, snapshot) => {
return (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={{
background: snapshot.isDraggingOver
? "lightblue"
: "lightgrey",
padding: 4,
width: 250,
minHeight: 500,
}}
>
{column.items.map((item, index) => {
return (
<Draggable
draggableId={item._id}
key={item._id}
index={index}
>
{(provided, snapshot) => {
return (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
userSelect: "none",
padding: "8px",
margin: "0 0 8px 0",
minHeigth: " 50px",
backgroundColor: snapshot.isDragging
? "#263B4A"
: "#456C86",
color: "white",
...provided.draggableProps.style,
}}
>
<div>Order: {item._id}</div>
<div>Name: {item.name}</div>
<div>Phone Number: {item.phoneNumber}</div>
<div>Peckup Point: {item.peckupPoint}</div>
<div>Date: {item.createdAt}</div>
<div>Total: {item.total}</div>
<div>
Cart Items:
{item.cartItems.map((x) => (
<div>
{x.count} {" x "} {x.name}
</div>
))}
</div>
<button
onClick={(result) =>
deleteItem(
item,
result,
columns,
setColumns
)
}
>
{" "}
delete{" "}
</button>
</div>
);
}}
</Draggable>
);
})}
{provided.placeholder}
</div>
);
}}
</Droppable>
</div>
</div>
);
})}
</DragDropContext>
</div>
);
}
export default connect(
(state) => ({
columns: state.columns,
orders: state.order.orders,
cartItems: state.cart.cartItems,
}),
{
fetchOrder,
deleteOrder,
fetchColumns,
}
)(AdminContent);
This is the scheme for the objects/columns in the backend:
const ColumnsFromBackend = mongoose.model(
"columns",
new mongoose.Schema({
_id: {
type: String,
default: shortid.generate,
},
name: String,
column: {
name: String,
items: [String],
},
})
);
and this is how objects for the columns look like in JSON format in the database
[
{
column: {
items: [],
name: "Requested",
},
_id: "qzExOX_X7",
name: "newOrder",
__v: 0,
},
{
column: {
items: [],
name: "in Progres",
},
_id: "tjEBA5qM0",
name: "inProgres",
__v: 0,
},
];
I want to import the orders from the backend and save their position in the columns.
if someone can help me find a solution on how to make it happen I will greatly appreciate it.
