Resolved window not ready bug, this caused rbd to break.

package.json

@@ -8,7 +8,10 @@
  "graphql": "node graphql/index.js"
  },
  "dependencies": {
+ "@feizheng/next-local-storage": "^1.1.0",
  "@headlessui/react": "^1.2.0",
+ "@jswork/next": "^1.0.7",
+ "@jswork/next-local-storage": "^1.0.0",
  "@material-ui/core": "^4.11.4",
  "animate.css": "^4.1.1",
  "aos": "^2.3.4",
@@ -21,6 +24,7 @@
  "firebase": "^8.6.5",
  "graphql": "^15.5.0",
  "html-metadata-parser": "^1.0.4",
+ "local-storage": "^2.0.0",
  "lodash": "^4.17.21",
  "next": "^11.0.0",
  "next-pwa": "^5.2.21",

pages/collections/dnd-components/dnd-ls.js

@@ -0,0 +1,50 @@
+import {resetServerContext} from 'react-beautiful-dnd';
+
+function updateLocalStorage(data) {
+ if(window.localStorage !== null) {
+ window.localStorage.setItem("codehouse-collections", null);
+ window.localStorage.setItem("codehouse-collections", JSON.stringify(data));
+ }
+}
+
+function getLocalStorage() {
+ // window.localStorage.setItem("codehouse-collections", null);
+ let data = {};
+ if(window.localStorage !== null) {
+ if(JSON.parse(window.localStorage.getItem("codehouse-collections")))
+ data = JSON.parse(window.localStorage.getItem("codehouse-collections"));
+ else {
+ data = {
+ bookmarks: [
+ { id: "bookmark-0", title: "Task 0" },
+ { id: "bookmark-1", title: "Task 1" },
+ { id: "bookmark-2", title: "Task 2" },
+ { id: "bookmark-3", title: "Task 3" },
+ { id: "bookmark-4", title: "Task 4" },
+ ],
+ collectionOrder: ["collection-0", "collection-1", "collection-2"],
+ collections: {
+ "collection-0": {
+ id: "collection-0",
+ title: "Recently Bookmarked",
+ bookmarkIDs: ["bookmark-0", "bookmark-1", "bookmark-2",]
+ },
+ "collection-1": {
+ id: "collection-1",
+ title: "Next and React",
+ bookmarkIDs: ["bookmark-4"]
+ },
+ "collection-2": {
+ id: "collection-2",
+ title: "Done",
+ bookmarkIDs: ["bookmark-3"]
+ },
+ },
+ };
+ updateLocalStorage(data);
+ }
+ }
+ return data;
+}
+
+export {updateLocalStorage, getLocalStorage}

pages/collections/dnd-components/dnd.js

@@ -0,0 +1,71 @@
+import React, {useEffect, useState } from "react";
+import { DragDropContext, Droppable } from "react-beautiful-dnd";
+import Collection from "./collection";
+
+import {updateLocalStorage, getLocalStorage} from "./dnd-ls";
+
+export default function Dnd() {
+ const [entities, setEntities] = useState(getLocalStorage());
+
+ const onDragStart = (e) => {}
+ const onDragEnd = (e) => {
+ try {
+ if (e.type === "collections") {
+ let listsArr = entities.collectionOrder;
+ let sourceIndex = e.source.index;
+ let targetIndex = e.destination.index;
+
+ let temp = listsArr[sourceIndex];
+ listsArr.splice(sourceIndex, 1);
+ listsArr.splice(targetIndex, 0, temp);
+
+ setEntities({ ...entities, collectionOrder: listsArr })
+ }
+ else if (e.type === "bookmark") {
+ let listsContent = entities.collections;
+
+ let sourceList = e.source.droppableId,
+ targetList = e.destination.droppableId,
+ sourceIndex = e.source.index,
+ targetIndex = e.destination.index;
+
+ let temp = listsContent[sourceList].bookmarkIDs[sourceIndex];
+ listsContent[sourceList].bookmarkIDs.splice(sourceIndex, 1);
+
+ if (!listsContent[targetList].bookmarkIDs)
+ listsContent[targetList].bookmarkIDs = [];
+ listsContent[targetList].bookmarkIDs.splice(targetIndex, 0, temp);
+
+ setEntities({ ...entities, collections: listsContent })
+ }
+ } catch (err) {
+ //Catching errors when the elements are dragged but not moved
+ //Do Nothing...
+ }
+ }
+
+ useEffect(() => {
+ updateLocalStorage(entities);
+ },[entities]);
+
+ return(
+ <div className="min-h-screen w-full p-8">
+ <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
+ <Droppable droppableId="collections" direction="vertical" type="collections">
+ {
+ provided => (
+ <div {...provided.droppableProps} ref={provided.innerRef}>
+ {
+ entities.collectionOrder.map((collectionId, index) => (
+ <Collection key={collectionId} entities={entities} setEntities={setEntities} collectionId={collectionId} index={index} />
+ ))
+ }
+ {provided.placeholder}
+ </div>
+ )
+ }
+ </Droppable>
+ </DragDropContext>
+ </div>
+ )
+}