From 31c104e6fae4cb3f3fea8f02c820ceb7b4abaaa0 Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Sun, 25 Jul 2021 21:08:47 +0530 Subject: [PATCH 01/19] Created user page --- pages/user/[name].js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 pages/user/[name].js diff --git a/pages/user/[name].js b/pages/user/[name].js new file mode 100644 index 0000000..2e1105f --- /dev/null +++ b/pages/user/[name].js @@ -0,0 +1,19 @@ +import React, {useEffect, useState} from 'react'; + +//components +import { RightBar, InfoBar, Header } from "../../components"; + +import Head from "next/head"; +export default function User(props) { + console.log(props); + return ( +
+ + + User - Code House + + +
+
+ ) +} From e48e5a9ccceea58cd379da75ed4c63f9f7118fa1 Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Mon, 26 Jul 2021 14:08:42 +0530 Subject: [PATCH 02/19] Getting username from URL using useRouter --- pages/user/[name].js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/pages/user/[name].js b/pages/user/[name].js index 2e1105f..9901031 100644 --- a/pages/user/[name].js +++ b/pages/user/[name].js @@ -4,13 +4,18 @@ import React, {useEffect, useState} from 'react'; import { RightBar, InfoBar, Header } from "../../components"; import Head from "next/head"; +import { useRouter } from "next/router"; + export default function User(props) { - console.log(props); + const router = useRouter(); // router + const { name } = router.query; + + console.log(name); return (
- User - Code House + {name} - Code House
From f50cb0595ffd25960996de154e6a9b5371d5f784 Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Mon, 26 Jul 2021 14:37:03 +0530 Subject: [PATCH 03/19] Removed the bookmarked bug on post page --- components/core/InfoBar.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/components/core/InfoBar.js b/components/core/InfoBar.js index e15d34f..5332dc7 100644 --- a/components/core/InfoBar.js +++ b/components/core/InfoBar.js @@ -51,11 +51,12 @@ const InfoBar = ({ // fetching bookmarked cheatsheets and check if already bookmarked or not const fetchBookmarkedCheatsheets = () => { - if (bookmarks.some((cheatsheet) => cheatsheet.id === id)) { - setIsBookMarked(true); - } else { - setIsBookMarked(false); + let bookmarked = false; + for(let bookmark of bookmarks) { + if(bookmark.id === id) + bookmarked = true; } + setIsBookMarked(bookmarked); }; // use effect to handle it From f6cb39e3cfd9f3157dad1743c55eb105d5943292 Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Mon, 26 Jul 2021 15:08:26 +0530 Subject: [PATCH 04/19] Bug Resolved: Reinitialize currentPost destructured elements --- components/core/InfoBar.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/components/core/InfoBar.js b/components/core/InfoBar.js index 5332dc7..2e49423 100644 --- a/components/core/InfoBar.js +++ b/components/core/InfoBar.js @@ -46,23 +46,31 @@ const InfoBar = ({ const [text, setText] = useState(""); // destructuring currentPost[0] - const { id, cheatsheet_name, website_url, upvotes, comments } = + let { id, cheatsheet_name, website_url, upvotes, comments } = currentPost.length > 0 && currentPost[0]; // fetching bookmarked cheatsheets and check if already bookmarked or not const fetchBookmarkedCheatsheets = () => { let bookmarked = false; for(let bookmark of bookmarks) { - if(bookmark.id === id) + if(bookmark.id === id){ bookmarked = true; + } } setIsBookMarked(bookmarked); }; // use effect to handle it useEffect(() => { - fetchBookmarkedCheatsheets(); - }, [bookmarks]); + if(currentPost.length > 0) { + id = currentPost[0].id; + cheatsheet_name = currentPost[0].cheatsheet_name; + website_url = currentPost[0].website_url; + upvotes = currentPost[0].upvotes; + comments = currentPost[0].comments; + } + return fetchBookmarkedCheatsheets(); + }, [bookmarks, currentPost]); useEffect(() => { // normal state @@ -252,8 +260,6 @@ const InfoBar = ({ } }; - console.log(comments); - return (
{loading ? ( From dd32fb23880cd81ec064656a0a170ed82aa38401 Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Mon, 26 Jul 2021 21:56:26 +0530 Subject: [PATCH 05/19] Added React-Beautiful-DND and created dnd template for collections page --- package-lock.json | 186 ++++++++++++++++++ package.json | 1 + pages/collections/dnd-components/bookmarks.js | 36 ++++ .../collections/dnd-components/collection.js | 24 +++ pages/collections/index.js | 107 ++++++++++ 5 files changed, 354 insertions(+) create mode 100644 pages/collections/dnd-components/bookmarks.js create mode 100644 pages/collections/dnd-components/collection.js create mode 100644 pages/collections/index.js diff --git a/package-lock.json b/package-lock.json index ef7d43f..b4584ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "parallax-js": "^3.1.0", "psl": "^1.8.0", "react": "^17.0.2", + "react-beautiful-dnd": "^13.1.0", "react-content-loader": "^6.0.3", "react-device-detect": "^1.17.0", "react-dom": "^17.0.2", @@ -2801,6 +2802,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/http-assert": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@types/http-assert/-/http-assert-1.5.1.tgz", @@ -2894,6 +2904,17 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-redux": { + "version": "7.1.18", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.18.tgz", + "integrity": "sha512-9iwAsPyJ9DLTRH+OFeIrm9cAbIj1i2ANL3sKQFATqnPWRbg+jEFXyZOKHiQK/N86pNRXbb4HRxAxo0SIX1XwzQ==", + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.0", + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0", + "redux": "^4.0.0" + } + }, "node_modules/@types/react-transition-group": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz", @@ -4216,6 +4237,14 @@ "node": ">=8" } }, + "node_modules/css-box-model": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", + "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", + "dependencies": { + "tiny-invariant": "^1.0.6" + } + }, "node_modules/css-select": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz", @@ -5999,6 +6028,11 @@ "node": ">= 0.6" } }, + "node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "node_modules/merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -7108,6 +7142,11 @@ "performance-now": "^2.1.0" } }, + "node_modules/raf-schd": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz", + "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==" + }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -7170,6 +7209,24 @@ "node": ">=0.10.0" } }, + "node_modules/react-beautiful-dnd": { + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz", + "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==", + "dependencies": { + "@babel/runtime": "^7.9.2", + "css-box-model": "^1.2.0", + "memoize-one": "^5.1.1", + "raf-schd": "^4.0.2", + "react-redux": "^7.2.0", + "redux": "^4.0.4", + "use-memo-one": "^1.1.1" + }, + "peerDependencies": { + "react": "^16.8.5 || ^17.0.0", + "react-dom": "^16.8.5 || ^17.0.0" + } + }, "node_modules/react-content-loader": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-6.0.3.tgz", @@ -7233,6 +7290,30 @@ "@emotion/core": "^10.0.22" } }, + "node_modules/react-redux": { + "version": "7.2.4", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz", + "integrity": "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==", + "dependencies": { + "@babel/runtime": "^7.12.1", + "@types/react-redux": "^7.1.16", + "hoist-non-react-statics": "^3.3.2", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.13.1" + }, + "peerDependencies": { + "react": "^16.8.3 || ^17" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -7297,6 +7378,14 @@ "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", "dev": true }, + "node_modules/redux": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.0.tgz", + "integrity": "sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==", + "dependencies": { + "@babel/runtime": "^7.9.2" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -8127,6 +8216,11 @@ "node": ">=0.6.0" } }, + "node_modules/tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, "node_modules/tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", @@ -8344,6 +8438,14 @@ "node": ">=0.4.x" } }, + "node_modules/use-memo-one": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz", + "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0" + } + }, "node_modules/use-subscription": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz", @@ -11114,6 +11216,15 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/http-assert": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@types/http-assert/-/http-assert-1.5.1.tgz", @@ -11214,6 +11325,17 @@ } } }, + "@types/react-redux": { + "version": "7.1.18", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.18.tgz", + "integrity": "sha512-9iwAsPyJ9DLTRH+OFeIrm9cAbIj1i2ANL3sKQFATqnPWRbg+jEFXyZOKHiQK/N86pNRXbb4HRxAxo0SIX1XwzQ==", + "requires": { + "@types/hoist-non-react-statics": "^3.3.0", + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0", + "redux": "^4.0.0" + } + }, "@types/react-transition-group": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz", @@ -12377,6 +12499,14 @@ "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==" }, + "css-box-model": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", + "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", + "requires": { + "tiny-invariant": "^1.0.6" + } + }, "css-select": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz", @@ -13861,6 +13991,11 @@ "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" }, + "memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -14791,6 +14926,11 @@ "performance-now": "^2.1.0" } }, + "raf-schd": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz", + "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==" + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -14843,6 +14983,20 @@ "object-assign": "^4.1.1" } }, + "react-beautiful-dnd": { + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz", + "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==", + "requires": { + "@babel/runtime": "^7.9.2", + "css-box-model": "^1.2.0", + "memoize-one": "^5.1.1", + "raf-schd": "^4.0.2", + "react-redux": "^7.2.0", + "redux": "^4.0.4", + "use-memo-one": "^1.1.1" + } + }, "react-content-loader": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-6.0.3.tgz", @@ -14900,6 +15054,19 @@ "@emotion/core": "^10.0.22" } }, + "react-redux": { + "version": "7.2.4", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz", + "integrity": "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==", + "requires": { + "@babel/runtime": "^7.12.1", + "@types/react-redux": "^7.1.16", + "hoist-non-react-statics": "^3.3.2", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.13.1" + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -14957,6 +15124,14 @@ } } }, + "redux": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.0.tgz", + "integrity": "sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -15646,6 +15821,11 @@ "setimmediate": "^1.0.4" } }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, "tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", @@ -15818,6 +15998,12 @@ } } }, + "use-memo-one": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz", + "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==", + "requires": {} + }, "use-subscription": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz", diff --git a/package.json b/package.json index 502a83e..65be5b2 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "parallax-js": "^3.1.0", "psl": "^1.8.0", "react": "^17.0.2", + "react-beautiful-dnd": "^13.1.0", "react-content-loader": "^6.0.3", "react-device-detect": "^1.17.0", "react-dom": "^17.0.2", diff --git a/pages/collections/dnd-components/bookmarks.js b/pages/collections/dnd-components/bookmarks.js new file mode 100644 index 0000000..2689cd3 --- /dev/null +++ b/pages/collections/dnd-components/bookmarks.js @@ -0,0 +1,36 @@ +import React, { useEffect, useState } from "react"; + +import {Droppable, Draggable} from "react-beautiful-dnd"; + +export default function BookmarksItem({collectionId, bookmarkData, bookmarkIDs, entities, setEntities}) { + return ( + + { + provided => ( +
+ { + bookmarkIDs ? ( + bookmarkIDs.map((bookmarkID, index) => ( + + { + provided => ( +
+
+

BookMark {bookmarkID}

+
+
+ ) + } + + ))) : ("") + } +
+ ) + } + + ) +} diff --git a/pages/collections/dnd-components/collection.js b/pages/collections/dnd-components/collection.js new file mode 100644 index 0000000..d234e4b --- /dev/null +++ b/pages/collections/dnd-components/collection.js @@ -0,0 +1,24 @@ +import React, {useEffect, useState} from "react"; + +import {Draggable} from "react-beautiful-dnd"; + +import BookMarksItem from "./bookmarks.js"; + +export default function Collection({entities, setEntities, collectionId, index}) { + return ( + + { + provided => ( +
+
+

{entities.collections[collectionId].title}

+
+ +
+
+
+ ) + } + + ) +} diff --git a/pages/collections/index.js b/pages/collections/index.js new file mode 100644 index 0000000..da65e87 --- /dev/null +++ b/pages/collections/index.js @@ -0,0 +1,107 @@ +import React, {useEffect, useState } from "react"; + +//components +import { RightBar, InfoBar, Header, SvgBanner } from "../../components"; +import Collection from "./dnd-components/collection"; + +import Head from "next/head"; +import { useRouter } from "next/router"; + +import { DragDropContext, Droppable } from "react-beautiful-dnd"; + +export default function Collections(props) { + const { bookmarks, user, fetchBookmarks, darkMode } = props; + const [entities, setEntities] = useState({ + 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"], + collections: { + "collection-0": { + id: "collection-0", + title: "To do", + bookmarkIDs: ["bookmark-0", "bookmark-1", "bookmark-2",] + }, + "collection-1": { + id: "collection-1", + title: "Done", + bookmarkIDs: ["bookmark-3", "bookmark-4"] + } + }, + }); + 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, bookmarks: listsContent }) + } + } catch (err) { + //Catching errors when the elements are dragged but not moved + //Do Nothing... + } + } + + return( +
+ + + Collections - Code House + + +
+ +
+ + + { + provided => ( +
+ { + entities.collectionOrder.map((collectionId, index) => ( + + )) + } +
+ ) + } + + +
+
+ ) +} From 41abe3e0bcc09c26c8817cccc82a4c1759a12500 Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Mon, 26 Jul 2021 21:58:22 +0530 Subject: [PATCH 06/19] Tiny fix --- pages/post/[id].js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/post/[id].js b/pages/post/[id].js index c36ea10..3c0ac8d 100644 --- a/pages/post/[id].js +++ b/pages/post/[id].js @@ -44,7 +44,7 @@ const Cheatsheet = (props) => {
- {currentPost[0] && currentPost[0].cheatsheet_name}- Code House + {currentPost[0] && currentPost[0].cheatsheet_name} - Code House
From cb42151f665229f4aa9c7d7036ebc65e65f50eaf Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Mon, 26 Jul 2021 22:25:58 +0530 Subject: [PATCH 07/19] Bug fixes: UI/UX and rbd --- pages/collections/dnd-components/bookmarks.js | 2 +- pages/collections/dnd-components/collection.js | 4 ++-- pages/collections/index.js | 18 ++++++++++++++---- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/pages/collections/dnd-components/bookmarks.js b/pages/collections/dnd-components/bookmarks.js index 2689cd3..5aeb2de 100644 --- a/pages/collections/dnd-components/bookmarks.js +++ b/pages/collections/dnd-components/bookmarks.js @@ -8,7 +8,7 @@ export default function BookmarksItem({collectionId, bookmarkData, bookmarkIDs, { provided => (
diff --git a/pages/collections/dnd-components/collection.js b/pages/collections/dnd-components/collection.js index d234e4b..a374399 100644 --- a/pages/collections/dnd-components/collection.js +++ b/pages/collections/dnd-components/collection.js @@ -9,10 +9,10 @@ export default function Collection({entities, setEntities, collectionId, index}) { provided => ( -
+

{entities.collections[collectionId].title}

-
+
diff --git a/pages/collections/index.js b/pages/collections/index.js index da65e87..d8d5c2b 100644 --- a/pages/collections/index.js +++ b/pages/collections/index.js @@ -7,7 +7,7 @@ import Collection from "./dnd-components/collection"; import Head from "next/head"; import { useRouter } from "next/router"; -import { DragDropContext, Droppable } from "react-beautiful-dnd"; +import { DragDropContext, Droppable, resetServerContext } from "react-beautiful-dnd"; export default function Collections(props) { const { bookmarks, user, fetchBookmarks, darkMode } = props; @@ -19,7 +19,7 @@ export default function Collections(props) { { id: "bookmark-3", title: "Task 3" }, { id: "bookmark-4", title: "Task 4" }, ], - collectionOrder: ["collection-0", "collection-1"], + collectionOrder: ["collection-0", "collection-1", "collection-2"], collections: { "collection-0": { id: "collection-0", @@ -28,9 +28,14 @@ export default function Collections(props) { }, "collection-1": { id: "collection-1", + title: "In Progress", + bookmarkIDs: ["bookmark-4"] + }, + "collection-2": { + id: "collection-2", title: "Done", - bookmarkIDs: ["bookmark-3", "bookmark-4"] - } + bookmarkIDs: ["bookmark-3"] + }, }, }); const onDragStart = (e) => { @@ -71,6 +76,10 @@ export default function Collections(props) { } } + useEffect(() => { + resetServerContext(); + },[]) + return(
@@ -96,6 +105,7 @@ export default function Collections(props) { )) } + {provided.placeholder}
) } From 4350de849786986a3b857a96e2faa4a0aa4dcfb5 Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Tue, 27 Jul 2021 04:41:28 +0530 Subject: [PATCH 08/19] Resolved window not ready bug, this caused rbd to break. --- package-lock.json | 152 +++++++++++++++++++++ package.json | 4 + pages/collections/dnd-components/dnd-ls.js | 50 +++++++ pages/collections/dnd-components/dnd.js | 71 ++++++++++ pages/collections/index.js | 95 +------------ 5 files changed, 284 insertions(+), 88 deletions(-) create mode 100644 pages/collections/dnd-components/dnd-ls.js create mode 100644 pages/collections/dnd-components/dnd.js diff --git a/package-lock.json b/package-lock.json index b4584ff..c65b9a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,10 @@ "": { "version": "0.1.0", "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", @@ -20,6 +23,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", @@ -2020,6 +2024,43 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" }, + "node_modules/@feizheng/next-abstract-storage": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@feizheng/next-abstract-storage/-/next-abstract-storage-2.1.0.tgz", + "integrity": "sha512-543IuA2gkL/zQRl7JRvZE9gSog8mOoiLw1CPKlhX/ys7UQ/x3B8z+PSncFpSiobnYi/hrOWsb7CZn0iKIGyEsQ==", + "dependencies": { + "@feizheng/next-js-core2": "^2.5.0", + "@feizheng/next-json": "^1.0.2", + "@feizheng/next-slice2str": "^1.0.1" + } + }, + "node_modules/@feizheng/next-js-core2": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@feizheng/next-js-core2/-/next-js-core2-2.6.0.tgz", + "integrity": "sha512-IFOlfhNX70oJ4p6eGh+b6QhpfM+MPdgqhajh6xy4lxuyhXFsox/yDrwWTqbYao8QdyFPEtRFgBQN0VXIfCzv3A==" + }, + "node_modules/@feizheng/next-json": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@feizheng/next-json/-/next-json-1.0.2.tgz", + "integrity": "sha512-Te9FHFF4ZOzb7Q/MStOBx6lKV7F5+TvxAjWrkqTA1ispI1nVwGINzjnv5XR3aeyWk3ywIBGv7FxXEc+beQnwmA==", + "dependencies": { + "@feizheng/next-js-core2": "^2.4.1" + } + }, + "node_modules/@feizheng/next-local-storage": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@feizheng/next-local-storage/-/next-local-storage-1.1.0.tgz", + "integrity": "sha512-Nb8cmgLWJrJJxtpk3fBDaQ0QNB4VQhNNOPDI76778LNlNEy9nUvK+vq6AYCAHb0WvJ+DpVoNLmVCvbML/rk7wg==", + "dependencies": { + "@feizheng/next-abstract-storage": "^2.0.0", + "@feizheng/next-js-core2": "^2.4.1" + } + }, + "node_modules/@feizheng/next-slice2str": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@feizheng/next-slice2str/-/next-slice2str-1.0.2.tgz", + "integrity": "sha512-1dctfFA6siWWQjX8BGd4NoOdquh7yLMUzGOwdyEMKKDF2bDHsdT0ufdT+20CS1SpiexyfHD0Nz8lr9xqILUx2g==" + }, "node_modules/@firebase/analytics": { "version": "0.6.11", "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.6.11.tgz", @@ -2397,6 +2438,38 @@ "resolved": "https://registry.npmjs.org/@josephg/resolvable/-/resolvable-1.0.1.tgz", "integrity": "sha512-CtzORUwWTTOTqfVtHaKRJ0I1kNQd1bpn3sUh8I3nJDVY+5/M/Oe1DnEWzPQvqq/xPIIkzzzIP7mfCoAjFRvDhg==" }, + "node_modules/@jswork/next": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@jswork/next/-/next-1.0.7.tgz", + "integrity": "sha512-mRTPfC+w9mYVK2hW4D6e8hnYo+8LG2uqKwuwr/juLTkYW59el7m42yLLBRLWb3QVqXewYIPJmMGi9WoSfbXwww==" + }, + "node_modules/@jswork/next-abstract-storage": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@jswork/next-abstract-storage/-/next-abstract-storage-1.0.2.tgz", + "integrity": "sha512-QtUDP4zIJeY6nwADVP8/27FsWHvdtR20p54cPcZoKf3I5MJbRqReLkTp1XfL7bE6BUi+7r8rukaikacqF479OA==", + "dependencies": { + "@jswork/next-json": "^1.0.0", + "@jswork/next-slice2str": "^1.0.0" + } + }, + "node_modules/@jswork/next-json": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@jswork/next-json/-/next-json-1.0.2.tgz", + "integrity": "sha512-LmxfLuOuZl0Y6GOjO0NAgWDzOme92aZb+3h3FoIrAApvluZGF+FrdKN9OgegclHcm5G1gpkyLrjD96Kn8IAtqg==" + }, + "node_modules/@jswork/next-local-storage": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@jswork/next-local-storage/-/next-local-storage-1.0.0.tgz", + "integrity": "sha512-He+Gsi7Ls4MdrHllexYmvZl7VeCXNhr3hytZTCnnYigmtj/L/gP8pM0z2gLzetTHMKRG6/UAxNLzbScIpG5M0A==", + "dependencies": { + "@jswork/next-abstract-storage": "^1.0.0" + } + }, + "node_modules/@jswork/next-slice2str": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@jswork/next-slice2str/-/next-slice2str-1.0.2.tgz", + "integrity": "sha512-gOTXfxargKJYToMiopDbwXh7g60SebRKUwzT4sZ/zpPtBbBl51SkV/LRIag9e0fivUeqAvrAIEf9Ig9gAsQjIg==" + }, "node_modules/@material-ui/core": { "version": "4.11.4", "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.4.tgz", @@ -5908,6 +5981,11 @@ "node": ">=4.0.0" } }, + "node_modules/local-storage": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/local-storage/-/local-storage-2.0.0.tgz", + "integrity": "sha512-/0sRoeijw7yr/igbVVygDuq6dlYCmtsuTmmpnweVlVtl/s10pf5BCq8LWBxW/AMyFJ3MhMUuggMZiYlx6qr9tw==" + }, "node_modules/locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -10485,6 +10563,43 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" }, + "@feizheng/next-abstract-storage": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@feizheng/next-abstract-storage/-/next-abstract-storage-2.1.0.tgz", + "integrity": "sha512-543IuA2gkL/zQRl7JRvZE9gSog8mOoiLw1CPKlhX/ys7UQ/x3B8z+PSncFpSiobnYi/hrOWsb7CZn0iKIGyEsQ==", + "requires": { + "@feizheng/next-js-core2": "^2.5.0", + "@feizheng/next-json": "^1.0.2", + "@feizheng/next-slice2str": "^1.0.1" + } + }, + "@feizheng/next-js-core2": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@feizheng/next-js-core2/-/next-js-core2-2.6.0.tgz", + "integrity": "sha512-IFOlfhNX70oJ4p6eGh+b6QhpfM+MPdgqhajh6xy4lxuyhXFsox/yDrwWTqbYao8QdyFPEtRFgBQN0VXIfCzv3A==" + }, + "@feizheng/next-json": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@feizheng/next-json/-/next-json-1.0.2.tgz", + "integrity": "sha512-Te9FHFF4ZOzb7Q/MStOBx6lKV7F5+TvxAjWrkqTA1ispI1nVwGINzjnv5XR3aeyWk3ywIBGv7FxXEc+beQnwmA==", + "requires": { + "@feizheng/next-js-core2": "^2.4.1" + } + }, + "@feizheng/next-local-storage": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@feizheng/next-local-storage/-/next-local-storage-1.1.0.tgz", + "integrity": "sha512-Nb8cmgLWJrJJxtpk3fBDaQ0QNB4VQhNNOPDI76778LNlNEy9nUvK+vq6AYCAHb0WvJ+DpVoNLmVCvbML/rk7wg==", + "requires": { + "@feizheng/next-abstract-storage": "^2.0.0", + "@feizheng/next-js-core2": "^2.4.1" + } + }, + "@feizheng/next-slice2str": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@feizheng/next-slice2str/-/next-slice2str-1.0.2.tgz", + "integrity": "sha512-1dctfFA6siWWQjX8BGd4NoOdquh7yLMUzGOwdyEMKKDF2bDHsdT0ufdT+20CS1SpiexyfHD0Nz8lr9xqILUx2g==" + }, "@firebase/analytics": { "version": "0.6.11", "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.6.11.tgz", @@ -10854,6 +10969,38 @@ "resolved": "https://registry.npmjs.org/@josephg/resolvable/-/resolvable-1.0.1.tgz", "integrity": "sha512-CtzORUwWTTOTqfVtHaKRJ0I1kNQd1bpn3sUh8I3nJDVY+5/M/Oe1DnEWzPQvqq/xPIIkzzzIP7mfCoAjFRvDhg==" }, + "@jswork/next": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@jswork/next/-/next-1.0.7.tgz", + "integrity": "sha512-mRTPfC+w9mYVK2hW4D6e8hnYo+8LG2uqKwuwr/juLTkYW59el7m42yLLBRLWb3QVqXewYIPJmMGi9WoSfbXwww==" + }, + "@jswork/next-abstract-storage": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@jswork/next-abstract-storage/-/next-abstract-storage-1.0.2.tgz", + "integrity": "sha512-QtUDP4zIJeY6nwADVP8/27FsWHvdtR20p54cPcZoKf3I5MJbRqReLkTp1XfL7bE6BUi+7r8rukaikacqF479OA==", + "requires": { + "@jswork/next-json": "^1.0.0", + "@jswork/next-slice2str": "^1.0.0" + } + }, + "@jswork/next-json": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@jswork/next-json/-/next-json-1.0.2.tgz", + "integrity": "sha512-LmxfLuOuZl0Y6GOjO0NAgWDzOme92aZb+3h3FoIrAApvluZGF+FrdKN9OgegclHcm5G1gpkyLrjD96Kn8IAtqg==" + }, + "@jswork/next-local-storage": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@jswork/next-local-storage/-/next-local-storage-1.0.0.tgz", + "integrity": "sha512-He+Gsi7Ls4MdrHllexYmvZl7VeCXNhr3hytZTCnnYigmtj/L/gP8pM0z2gLzetTHMKRG6/UAxNLzbScIpG5M0A==", + "requires": { + "@jswork/next-abstract-storage": "^1.0.0" + } + }, + "@jswork/next-slice2str": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@jswork/next-slice2str/-/next-slice2str-1.0.2.tgz", + "integrity": "sha512-gOTXfxargKJYToMiopDbwXh7g60SebRKUwzT4sZ/zpPtBbBl51SkV/LRIag9e0fivUeqAvrAIEf9Ig9gAsQjIg==" + }, "@material-ui/core": { "version": "4.11.4", "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.4.tgz", @@ -13889,6 +14036,11 @@ "json5": "^1.0.1" } }, + "local-storage": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/local-storage/-/local-storage-2.0.0.tgz", + "integrity": "sha512-/0sRoeijw7yr/igbVVygDuq6dlYCmtsuTmmpnweVlVtl/s10pf5BCq8LWBxW/AMyFJ3MhMUuggMZiYlx6qr9tw==" + }, "locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", diff --git a/package.json b/package.json index 65be5b2..c3dbfc6 100644 --- a/package.json +++ b/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", diff --git a/pages/collections/dnd-components/dnd-ls.js b/pages/collections/dnd-components/dnd-ls.js new file mode 100644 index 0000000..a17d176 --- /dev/null +++ b/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} diff --git a/pages/collections/dnd-components/dnd.js b/pages/collections/dnd-components/dnd.js new file mode 100644 index 0000000..cc67242 --- /dev/null +++ b/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( +
+ + + { + provided => ( +
+ { + entities.collectionOrder.map((collectionId, index) => ( + + )) + } + {provided.placeholder} +
+ ) + } + + +
+ ) +} diff --git a/pages/collections/index.js b/pages/collections/index.js index d8d5c2b..5e71c9e 100644 --- a/pages/collections/index.js +++ b/pages/collections/index.js @@ -1,84 +1,20 @@ import React, {useEffect, useState } from "react"; +import dynamic from "next/dynamic"; //components import { RightBar, InfoBar, Header, SvgBanner } from "../../components"; -import Collection from "./dnd-components/collection"; import Head from "next/head"; import { useRouter } from "next/router"; -import { DragDropContext, Droppable, resetServerContext } from "react-beautiful-dnd"; - +const Dnd = dynamic(import("./dnd-components/dnd")); export default function Collections(props) { - const { bookmarks, user, fetchBookmarks, darkMode } = props; - const [entities, setEntities] = useState({ - 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: "To do", - bookmarkIDs: ["bookmark-0", "bookmark-1", "bookmark-2",] - }, - "collection-1": { - id: "collection-1", - title: "In Progress", - bookmarkIDs: ["bookmark-4"] - }, - "collection-2": { - id: "collection-2", - title: "Done", - bookmarkIDs: ["bookmark-3"] - }, - }, - }); - 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, bookmarks: listsContent }) - } - } catch (err) { - //Catching errors when the elements are dragged but not moved - //Do Nothing... - } - } + const { bookmarks, user, fetchBookmarks, darkMode } = props, + [winReady, setWinReady] = useState(false); useEffect(() => { - resetServerContext(); - },[]) + setWinReady(true); + },[]); return(
@@ -94,24 +30,7 @@ export default function Collections(props) { image_url="/assets/3d/bookmarks.png" dark={darkMode} /> -
- - - { - provided => ( -
- { - entities.collectionOrder.map((collectionId, index) => ( - - )) - } - {provided.placeholder} -
- ) - } - - -
+ {winReady ? : null}
) } From 8a24b36a7178ceca3c86cc0ccee07cb435ee308d Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Tue, 27 Jul 2021 04:45:07 +0530 Subject: [PATCH 09/19] Removed unnecessarry dependencies I installed to fix the previous bug... --- package-lock.json | 152 ---------------------------------------------- package.json | 4 -- 2 files changed, 156 deletions(-) diff --git a/package-lock.json b/package-lock.json index c65b9a5..b4584ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,10 +7,7 @@ "": { "version": "0.1.0", "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", @@ -23,7 +20,6 @@ "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", @@ -2024,43 +2020,6 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" }, - "node_modules/@feizheng/next-abstract-storage": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@feizheng/next-abstract-storage/-/next-abstract-storage-2.1.0.tgz", - "integrity": "sha512-543IuA2gkL/zQRl7JRvZE9gSog8mOoiLw1CPKlhX/ys7UQ/x3B8z+PSncFpSiobnYi/hrOWsb7CZn0iKIGyEsQ==", - "dependencies": { - "@feizheng/next-js-core2": "^2.5.0", - "@feizheng/next-json": "^1.0.2", - "@feizheng/next-slice2str": "^1.0.1" - } - }, - "node_modules/@feizheng/next-js-core2": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/@feizheng/next-js-core2/-/next-js-core2-2.6.0.tgz", - "integrity": "sha512-IFOlfhNX70oJ4p6eGh+b6QhpfM+MPdgqhajh6xy4lxuyhXFsox/yDrwWTqbYao8QdyFPEtRFgBQN0VXIfCzv3A==" - }, - "node_modules/@feizheng/next-json": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@feizheng/next-json/-/next-json-1.0.2.tgz", - "integrity": "sha512-Te9FHFF4ZOzb7Q/MStOBx6lKV7F5+TvxAjWrkqTA1ispI1nVwGINzjnv5XR3aeyWk3ywIBGv7FxXEc+beQnwmA==", - "dependencies": { - "@feizheng/next-js-core2": "^2.4.1" - } - }, - "node_modules/@feizheng/next-local-storage": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@feizheng/next-local-storage/-/next-local-storage-1.1.0.tgz", - "integrity": "sha512-Nb8cmgLWJrJJxtpk3fBDaQ0QNB4VQhNNOPDI76778LNlNEy9nUvK+vq6AYCAHb0WvJ+DpVoNLmVCvbML/rk7wg==", - "dependencies": { - "@feizheng/next-abstract-storage": "^2.0.0", - "@feizheng/next-js-core2": "^2.4.1" - } - }, - "node_modules/@feizheng/next-slice2str": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@feizheng/next-slice2str/-/next-slice2str-1.0.2.tgz", - "integrity": "sha512-1dctfFA6siWWQjX8BGd4NoOdquh7yLMUzGOwdyEMKKDF2bDHsdT0ufdT+20CS1SpiexyfHD0Nz8lr9xqILUx2g==" - }, "node_modules/@firebase/analytics": { "version": "0.6.11", "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.6.11.tgz", @@ -2438,38 +2397,6 @@ "resolved": "https://registry.npmjs.org/@josephg/resolvable/-/resolvable-1.0.1.tgz", "integrity": "sha512-CtzORUwWTTOTqfVtHaKRJ0I1kNQd1bpn3sUh8I3nJDVY+5/M/Oe1DnEWzPQvqq/xPIIkzzzIP7mfCoAjFRvDhg==" }, - "node_modules/@jswork/next": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/@jswork/next/-/next-1.0.7.tgz", - "integrity": "sha512-mRTPfC+w9mYVK2hW4D6e8hnYo+8LG2uqKwuwr/juLTkYW59el7m42yLLBRLWb3QVqXewYIPJmMGi9WoSfbXwww==" - }, - "node_modules/@jswork/next-abstract-storage": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@jswork/next-abstract-storage/-/next-abstract-storage-1.0.2.tgz", - "integrity": "sha512-QtUDP4zIJeY6nwADVP8/27FsWHvdtR20p54cPcZoKf3I5MJbRqReLkTp1XfL7bE6BUi+7r8rukaikacqF479OA==", - "dependencies": { - "@jswork/next-json": "^1.0.0", - "@jswork/next-slice2str": "^1.0.0" - } - }, - "node_modules/@jswork/next-json": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@jswork/next-json/-/next-json-1.0.2.tgz", - "integrity": "sha512-LmxfLuOuZl0Y6GOjO0NAgWDzOme92aZb+3h3FoIrAApvluZGF+FrdKN9OgegclHcm5G1gpkyLrjD96Kn8IAtqg==" - }, - "node_modules/@jswork/next-local-storage": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@jswork/next-local-storage/-/next-local-storage-1.0.0.tgz", - "integrity": "sha512-He+Gsi7Ls4MdrHllexYmvZl7VeCXNhr3hytZTCnnYigmtj/L/gP8pM0z2gLzetTHMKRG6/UAxNLzbScIpG5M0A==", - "dependencies": { - "@jswork/next-abstract-storage": "^1.0.0" - } - }, - "node_modules/@jswork/next-slice2str": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@jswork/next-slice2str/-/next-slice2str-1.0.2.tgz", - "integrity": "sha512-gOTXfxargKJYToMiopDbwXh7g60SebRKUwzT4sZ/zpPtBbBl51SkV/LRIag9e0fivUeqAvrAIEf9Ig9gAsQjIg==" - }, "node_modules/@material-ui/core": { "version": "4.11.4", "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.4.tgz", @@ -5981,11 +5908,6 @@ "node": ">=4.0.0" } }, - "node_modules/local-storage": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/local-storage/-/local-storage-2.0.0.tgz", - "integrity": "sha512-/0sRoeijw7yr/igbVVygDuq6dlYCmtsuTmmpnweVlVtl/s10pf5BCq8LWBxW/AMyFJ3MhMUuggMZiYlx6qr9tw==" - }, "node_modules/locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -10563,43 +10485,6 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" }, - "@feizheng/next-abstract-storage": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@feizheng/next-abstract-storage/-/next-abstract-storage-2.1.0.tgz", - "integrity": "sha512-543IuA2gkL/zQRl7JRvZE9gSog8mOoiLw1CPKlhX/ys7UQ/x3B8z+PSncFpSiobnYi/hrOWsb7CZn0iKIGyEsQ==", - "requires": { - "@feizheng/next-js-core2": "^2.5.0", - "@feizheng/next-json": "^1.0.2", - "@feizheng/next-slice2str": "^1.0.1" - } - }, - "@feizheng/next-js-core2": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/@feizheng/next-js-core2/-/next-js-core2-2.6.0.tgz", - "integrity": "sha512-IFOlfhNX70oJ4p6eGh+b6QhpfM+MPdgqhajh6xy4lxuyhXFsox/yDrwWTqbYao8QdyFPEtRFgBQN0VXIfCzv3A==" - }, - "@feizheng/next-json": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@feizheng/next-json/-/next-json-1.0.2.tgz", - "integrity": "sha512-Te9FHFF4ZOzb7Q/MStOBx6lKV7F5+TvxAjWrkqTA1ispI1nVwGINzjnv5XR3aeyWk3ywIBGv7FxXEc+beQnwmA==", - "requires": { - "@feizheng/next-js-core2": "^2.4.1" - } - }, - "@feizheng/next-local-storage": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@feizheng/next-local-storage/-/next-local-storage-1.1.0.tgz", - "integrity": "sha512-Nb8cmgLWJrJJxtpk3fBDaQ0QNB4VQhNNOPDI76778LNlNEy9nUvK+vq6AYCAHb0WvJ+DpVoNLmVCvbML/rk7wg==", - "requires": { - "@feizheng/next-abstract-storage": "^2.0.0", - "@feizheng/next-js-core2": "^2.4.1" - } - }, - "@feizheng/next-slice2str": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@feizheng/next-slice2str/-/next-slice2str-1.0.2.tgz", - "integrity": "sha512-1dctfFA6siWWQjX8BGd4NoOdquh7yLMUzGOwdyEMKKDF2bDHsdT0ufdT+20CS1SpiexyfHD0Nz8lr9xqILUx2g==" - }, "@firebase/analytics": { "version": "0.6.11", "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.6.11.tgz", @@ -10969,38 +10854,6 @@ "resolved": "https://registry.npmjs.org/@josephg/resolvable/-/resolvable-1.0.1.tgz", "integrity": "sha512-CtzORUwWTTOTqfVtHaKRJ0I1kNQd1bpn3sUh8I3nJDVY+5/M/Oe1DnEWzPQvqq/xPIIkzzzIP7mfCoAjFRvDhg==" }, - "@jswork/next": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/@jswork/next/-/next-1.0.7.tgz", - "integrity": "sha512-mRTPfC+w9mYVK2hW4D6e8hnYo+8LG2uqKwuwr/juLTkYW59el7m42yLLBRLWb3QVqXewYIPJmMGi9WoSfbXwww==" - }, - "@jswork/next-abstract-storage": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@jswork/next-abstract-storage/-/next-abstract-storage-1.0.2.tgz", - "integrity": "sha512-QtUDP4zIJeY6nwADVP8/27FsWHvdtR20p54cPcZoKf3I5MJbRqReLkTp1XfL7bE6BUi+7r8rukaikacqF479OA==", - "requires": { - "@jswork/next-json": "^1.0.0", - "@jswork/next-slice2str": "^1.0.0" - } - }, - "@jswork/next-json": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@jswork/next-json/-/next-json-1.0.2.tgz", - "integrity": "sha512-LmxfLuOuZl0Y6GOjO0NAgWDzOme92aZb+3h3FoIrAApvluZGF+FrdKN9OgegclHcm5G1gpkyLrjD96Kn8IAtqg==" - }, - "@jswork/next-local-storage": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@jswork/next-local-storage/-/next-local-storage-1.0.0.tgz", - "integrity": "sha512-He+Gsi7Ls4MdrHllexYmvZl7VeCXNhr3hytZTCnnYigmtj/L/gP8pM0z2gLzetTHMKRG6/UAxNLzbScIpG5M0A==", - "requires": { - "@jswork/next-abstract-storage": "^1.0.0" - } - }, - "@jswork/next-slice2str": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@jswork/next-slice2str/-/next-slice2str-1.0.2.tgz", - "integrity": "sha512-gOTXfxargKJYToMiopDbwXh7g60SebRKUwzT4sZ/zpPtBbBl51SkV/LRIag9e0fivUeqAvrAIEf9Ig9gAsQjIg==" - }, "@material-ui/core": { "version": "4.11.4", "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.4.tgz", @@ -14036,11 +13889,6 @@ "json5": "^1.0.1" } }, - "local-storage": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/local-storage/-/local-storage-2.0.0.tgz", - "integrity": "sha512-/0sRoeijw7yr/igbVVygDuq6dlYCmtsuTmmpnweVlVtl/s10pf5BCq8LWBxW/AMyFJ3MhMUuggMZiYlx6qr9tw==" - }, "locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", diff --git a/package.json b/package.json index c3dbfc6..65be5b2 100644 --- a/package.json +++ b/package.json @@ -8,10 +8,7 @@ "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", @@ -24,7 +21,6 @@ "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", From 76d1999fab09de43b41745323a9d9351dc837395 Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Tue, 27 Jul 2021 18:08:11 +0530 Subject: [PATCH 10/19] Add new collection and edit collection title --- .../collections/dnd-components/collection.js | 60 +++++++++++++++---- pages/collections/dnd-components/dnd.js | 31 +++++++++- 2 files changed, 77 insertions(+), 14 deletions(-) diff --git a/pages/collections/dnd-components/collection.js b/pages/collections/dnd-components/collection.js index a374399..c58b3a3 100644 --- a/pages/collections/dnd-components/collection.js +++ b/pages/collections/dnd-components/collection.js @@ -1,24 +1,60 @@ -import React, {useEffect, useState} from "react"; +import React, {useEffect, useState, useRef} from "react"; import {Draggable} from "react-beautiful-dnd"; import BookMarksItem from "./bookmarks.js"; +import {FiPlus, FiTrash2} from "react-icons/fi"; +import {MdApps} from "react-icons/md"; + export default function Collection({entities, setEntities, collectionId, index}) { + const [collectionTitle, setCollectionTitle] = useState(entities.collections[collectionId].title), + collectionTitleRef = useRef(); + + const deleteCollection = () => { + let collections = entities.collections; + delete collections[collectionId]; + + let collectionOrder = entities.collectionOrder; + collectionOrder.splice(collectionOrder.indexOf(collectionId), 1); + + setEntities({ ...entities, collections, collectionOrder }); + } + + useEffect(() => { + let collections = entities.collections; + collections[collectionId].title = collectionTitle; + + setEntities({...entities, collections}); + }, [collectionTitle]); + return ( - + <> { - provided => ( -
-
-

{entities.collections[collectionId].title}

-
- + entities.collections[collectionId].id && + { + provided => ( +
+
+
+
+ +
+ setCollectionTitle(e.target.value)} className="text-2xl w-full font-bold text-[#fff] bg-transparent cursor-text" /> +
+ + +
+
+
+ +
+
-
-
- ) + ) + } + } - + ) } diff --git a/pages/collections/dnd-components/dnd.js b/pages/collections/dnd-components/dnd.js index cc67242..a625cc1 100644 --- a/pages/collections/dnd-components/dnd.js +++ b/pages/collections/dnd-components/dnd.js @@ -4,9 +4,30 @@ import Collection from "./collection"; import {updateLocalStorage, getLocalStorage} from "./dnd-ls"; +import { FiPlus } from "react-icons/fi"; + export default function Dnd() { - const [entities, setEntities] = useState(getLocalStorage()); + const [collectionName, setCollectionName] = useState(""), + [entities, setEntities] = useState(getLocalStorage()); + + const addNewCollection = (e) => { + if(collectionName.trim()) { + const newCollectionID = `collection-${Object.keys(entities.collections).length + 1}`; + let collections = entities.collections; + const emptyCollection = { + id: newCollectionID, + title: collectionName, + bookmarkIDs: [] + } + collections[newCollectionID] = emptyCollection; + let collectionOrder = entities.collectionOrder; + collectionOrder.push(newCollectionID); + + setEntities({...entities, collections, collectionOrder}); + setCollectionName(""); + } + } const onDragStart = (e) => {} const onDragEnd = (e) => { try { @@ -46,7 +67,7 @@ export default function Dnd() { useEffect(() => { updateLocalStorage(entities); - },[entities]); + }, [entities]); return(
@@ -61,6 +82,12 @@ export default function Dnd() { )) } {provided.placeholder} +
+ {if(e.keyCode === 13) addNewCollection();}} value={collectionName} onChange={(e) => setCollectionName(e.target.value)} /> +
+ +
+
) } From 63e75ae886f9ab0077bddd5d054de7480f42880d Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Tue, 27 Jul 2021 19:13:24 +0530 Subject: [PATCH 11/19] Fixed tailwind bugs and made setup proper --- pages/collections/dnd-components/dnd.js | 12 ++++++------ pages/collections/index.js | 5 ++++- styles/App.css | 4 ++++ 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/pages/collections/dnd-components/dnd.js b/pages/collections/dnd-components/dnd.js index a625cc1..9d4f373 100644 --- a/pages/collections/dnd-components/dnd.js +++ b/pages/collections/dnd-components/dnd.js @@ -76,18 +76,18 @@ export default function Dnd() { { provided => (
+
+ {if(e.keyCode === 13) addNewCollection();}} value={collectionName} onChange={(e) => setCollectionName(e.target.value)} /> +
+ +
+
{ entities.collectionOrder.map((collectionId, index) => ( )) } {provided.placeholder} -
- {if(e.keyCode === 13) addNewCollection();}} value={collectionName} onChange={(e) => setCollectionName(e.target.value)} /> -
- -
-
) } diff --git a/pages/collections/index.js b/pages/collections/index.js index 5e71c9e..75e76d8 100644 --- a/pages/collections/index.js +++ b/pages/collections/index.js @@ -1,4 +1,6 @@ import React, {useEffect, useState } from "react"; +import 'tailwindcss/tailwind.css'; + import dynamic from "next/dynamic"; //components @@ -17,7 +19,8 @@ export default function Collections(props) { },[]); return( -
+
+
Collections - Code House diff --git a/styles/App.css b/styles/App.css index 80388fd..6f99b69 100644 --- a/styles/App.css +++ b/styles/App.css @@ -8,6 +8,10 @@ @import url(./animations.css); @import url(./components.css); +@tailwind base; +@tailwind components; +@tailwind utilities; + /* Root */ * { font-family: "Epilogue", sans-serif; From 1e276101702c06bab5a61f4dcdfff03ee1ef5785 Mon Sep 17 00:00:00 2001 From: Jaagrav <jaagravseal03@gmail.com> Date: Tue, 27 Jul 2021 22:03:07 +0530 Subject: [PATCH 12/19] Created Bookmark dialog --- components/utils/BookMarkItem.js | 8 ++-- pages/collections/bookmarks-dialog.js | 46 +++++++++++++++++++ .../collections/dnd-components/collection.js | 6 +-- pages/collections/dnd-components/dnd-ls.js | 2 +- pages/collections/dnd-components/dnd.js | 20 +++++--- pages/collections/index.js | 16 ++++--- tailwind.config.js | 1 + 7 files changed, 78 insertions(+), 21 deletions(-) create mode 100644 pages/collections/bookmarks-dialog.js diff --git a/components/utils/BookMarkItem.js b/components/utils/BookMarkItem.js index c918aa2..b6adba5 100644 --- a/components/utils/BookMarkItem.js +++ b/components/utils/BookMarkItem.js @@ -14,7 +14,9 @@ import { Btn } from ".."; // axios for data fetching import axios from "axios"; -const BookMarkItem = ({ data, bookmarks, fetchBookmarks }) => { +const BookMarkItem = ({ data, bookmarks, fetchBookmarks, animated, interactive }) => { + if(animated === undefined || animated === null) animated = true; + if(interactive === undefined || interactive === null) interactive = true; const [meta, setMetadata] = useState([]); const [loading, setLoading] = useState(false); @@ -118,9 +120,9 @@ const BookMarkItem = ({ data, bookmarks, fetchBookmarks }) => { return ( <div - className="cursor-pointer flex justify-start items-center flex-col p-5 px-4 rounded-md duration-500 white-light-shadow bg-white m-2 w-10/12 md:w-5/12 lg:w-3/12 border border-[#ddd] hover:border-[#3d5eff98] item-hover-text parent-for-image-scale h-[325px] parent-for-image-scale dark:border-[#555] dark:bg-[#1F1F1F] dark:text-white" + className={`cursor-pointer flex justify-start items-center flex-col p-5 px-4 rounded-md duration-500 white-light-shadow bg-white mr-2 mb-2 w-[340px] border border-[#ddd] hover:border-[#3d5eff98] item-hover-text parent-for-image-scale h-[325px] parent-for-image-scale dark:border-[#555] dark:bg-[#1F1F1F] dark:text-white ${interactive ? "pointer-events-auto" : "pointer-events-none"}`} onClick={goToCheatSheetPage} - data-aos="fade-left" + data-aos={animated ? "fade-left" : "none"} > {loading ? ( <div className="w-full h-full"> diff --git a/pages/collections/bookmarks-dialog.js b/pages/collections/bookmarks-dialog.js new file mode 100644 index 0000000..f6b754a --- /dev/null +++ b/pages/collections/bookmarks-dialog.js @@ -0,0 +1,46 @@ +import React, {useEffect, useState } from "react"; + +import {Backdrop} from "@material-ui/core"; +import {BookMarkItem} from '../../components'; +import {FiX} from 'react-icons/fi'; + +export default function BookmarksDialog({entities, setEntities, bookmarks, fetchBookmarks, showBookmarks, setShowBookmarks}) { + const addToCollection = (data) => { + const newBookmarkID = `bookmark-${Object.keys(entities.bookmarks).length + 1}`; + let bookmarks = entities.bookmarks; + const emptyBookmark = { + id: newBookmarkID, + content: data + } + bookmarks[newBookmarkID] = emptyBookmark; + + let collections = entities.collections; + if(!collections[showBookmarks].bookmarkIDs) collections[showBookmarks].bookmarkIDs = []; + + setEntities({ ...entities, bookmarks, collections }); + } + return ( + <Backdrop open={!!showBookmarks} className="z-[100000] flex items-center justify-center bg-[#00000042]" onClick={() => setShowBookmarks(false)}> + <div className="glassmorphism rounded-lg h-3/4 w-3/4 p-6 overflow-y-auto" onClick={(e) => e.stopPropagation()}> + <div className="flex items-center justify-between"> + <h1 className="text-[#fff] text-3xl">All Bookmarks</h1> + <FiX className="cursor-pointer text-[#fff] text-lg" onClick={e => setShowBookmarks(false)} /> + </div> + <div className="mt-4 flex flex-wrap items-center justify-start"> + {bookmarks.map((cheatsheet, key) => ( + <div className="cursor-pointer" onClick={() => addToCollection(cheatsheet)}> + <BookMarkItem + data={cheatsheet} + key={key} + bookmarks={bookmarks} + fetchBookmarks={fetchBookmarks} + animated={false} + interactive={false} + /> + </div> + ))} + </div> + </div> + </Backdrop> + ) +} diff --git a/pages/collections/dnd-components/collection.js b/pages/collections/dnd-components/collection.js index c58b3a3..b22f3fe 100644 --- a/pages/collections/dnd-components/collection.js +++ b/pages/collections/dnd-components/collection.js @@ -7,7 +7,7 @@ import BookMarksItem from "./bookmarks.js"; import {FiPlus, FiTrash2} from "react-icons/fi"; import {MdApps} from "react-icons/md"; -export default function Collection({entities, setEntities, collectionId, index}) { +export default function Collection({entities, setEntities, collectionId, index, showBookmarks, setShowBookmarks}) { const [collectionTitle, setCollectionTitle] = useState(entities.collections[collectionId].title), collectionTitleRef = useRef(); @@ -31,7 +31,7 @@ export default function Collection({entities, setEntities, collectionId, index}) return ( <> { - entities.collections[collectionId].id && <Draggable draggableId={entities.collections[collectionId].id} index={index} isDragDisabled={false}> + entities?.collections[collectionId]?.id && <Draggable draggableId={entities.collections[collectionId].id} index={index} isDragDisabled={false}> { provided => ( <div className="h-[305px] mb-8 rounded-lg bg-[#ffffff20] dark:bg-[#ffffff20] border-b-[1px] border-[#eeeeee30]" {...provided.draggableProps} ref={provided.innerRef} style={provided.draggableProps.style}> @@ -43,7 +43,7 @@ export default function Collection({entities, setEntities, collectionId, index}) <input spellCheck={false} value={collectionTitle} onChange={(e) => setCollectionTitle(e.target.value)} className="text-2xl w-full font-bold text-[#fff] bg-transparent cursor-text" /> <div className="flex items-center justify-between"> <FiTrash2 className="text-white text-lg cursor-pointer ml-2" onClick={deleteCollection} /> - <FiPlus className="text-white text-lg cursor-pointer ml-2" /> + <FiPlus className="text-white text-lg cursor-pointer ml-2" onClick={() => {setShowBookmarks(collectionId)}}/> </div> </div> <div className="h-full w-full"> diff --git a/pages/collections/dnd-components/dnd-ls.js b/pages/collections/dnd-components/dnd-ls.js index a17d176..97b49fa 100644 --- a/pages/collections/dnd-components/dnd-ls.js +++ b/pages/collections/dnd-components/dnd-ls.js @@ -11,7 +11,7 @@ function getLocalStorage() { // window.localStorage.setItem("codehouse-collections", null); let data = {}; if(window.localStorage !== null) { - if(JSON.parse(window.localStorage.getItem("codehouse-collections"))) + if(JSON.parse(window?.localStorage?.getItem("codehouse-collections"))) data = JSON.parse(window.localStorage.getItem("codehouse-collections")); else { data = { diff --git a/pages/collections/dnd-components/dnd.js b/pages/collections/dnd-components/dnd.js index 9d4f373..32a3bab 100644 --- a/pages/collections/dnd-components/dnd.js +++ b/pages/collections/dnd-components/dnd.js @@ -6,11 +6,11 @@ import {updateLocalStorage, getLocalStorage} from "./dnd-ls"; import { FiPlus } from "react-icons/fi"; -export default function Dnd() { - const [collectionName, setCollectionName] = useState(""), - [entities, setEntities] = useState(getLocalStorage()); +export default function Dnd({entities, setEntities, showBookmarks, setShowBookmarks}) { + const [collectionName, setCollectionName] = useState(""); const addNewCollection = (e) => { + console.log(entities) if(collectionName.trim()) { const newCollectionID = `collection-${Object.keys(entities.collections).length + 1}`; let collections = entities.collections; @@ -66,7 +66,13 @@ export default function Dnd() { } useEffect(() => { - updateLocalStorage(entities); + setEntities(getLocalStorage()); + }, []); + + useEffect(() => { + if(entities) + updateLocalStorage(entities); + console.log(entities, getLocalStorage()); }, [entities]); return( @@ -78,13 +84,13 @@ export default function Dnd() { <div {...provided.droppableProps} ref={provided.innerRef}> <div className="flex items-center justify-between w-full bg-[#ffffff20] dark:bg-[#ffffff20] rounded-lg p-4 mb-8 border-b-[1px] border-[#eeeeee30]"> <input type="text" placeholder="Add new collection..." className="bg-transparent text-[#fff] w-full" onKeyDown={(e) => {if(e.keyCode === 13) addNewCollection();}} value={collectionName} onChange={(e) => setCollectionName(e.target.value)} /> - <div className="bg-[#3d5eff] p-2 cursor-pointer shine rounded-lg" onClick={addNewCollection}> + <div className="bg-[#3d5eff] active:bg-[#000] p-2 cursor-pointer shine rounded-lg" onClick={addNewCollection}> <FiPlus className="text-white" /> </div> </div> { - entities.collectionOrder.map((collectionId, index) => ( - <Collection key={collectionId} entities={entities} setEntities={setEntities} collectionId={collectionId} index={index} /> + entities?.collectionOrder && entities.collectionOrder.map((collectionId, index) => ( + <Collection key={collectionId} entities={entities} setEntities={setEntities} collectionId={collectionId} index={index} showBookmarks={showBookmarks} setShowBookmarks={setShowBookmarks} /> )) } {provided.placeholder} diff --git a/pages/collections/index.js b/pages/collections/index.js index 75e76d8..13429af 100644 --- a/pages/collections/index.js +++ b/pages/collections/index.js @@ -1,6 +1,4 @@ import React, {useEffect, useState } from "react"; -import 'tailwindcss/tailwind.css'; - import dynamic from "next/dynamic"; //components @@ -10,17 +8,21 @@ import Head from "next/head"; import { useRouter } from "next/router"; const Dnd = dynamic(import("./dnd-components/dnd")); +const BookmarksDialog = dynamic(import("./bookmarks-dialog")); + export default function Collections(props) { const { bookmarks, user, fetchBookmarks, darkMode } = props, - [winReady, setWinReady] = useState(false); + [winReady, setWinReady] = useState(false), + [showBookmarks, setShowBookmarks] = useState(null), + [entities, setEntities] = useState(null); useEffect(() => { - setWinReady(true); + return setWinReady(true); },[]); return( - <div className="divider relative bg-image"> - <div className=" fixed inset-0"></div> + <div className="relative bg-image"> + {winReady && <BookmarksDialog entities={entities} setEntities={setEntities} showBookmarks={showBookmarks} setShowBookmarks={setShowBookmarks} {...props}/>} <Head> <title> Collections - Code House @@ -33,7 +35,7 @@ export default function Collections(props) { image_url="/assets/3d/bookmarks.png" dark={darkMode} /> - {winReady ? <Dnd /> : null} + {winReady && <Dnd entities={entities} setEntities={setEntities} showBookmarks={showBookmarks} setShowBookmarks={setShowBookmarks} />} </div> ) } diff --git a/tailwind.config.js b/tailwind.config.js index c04f18e..24a8ae3 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,4 +1,5 @@ module.exports = { + important: true, mode: "jit", purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"], darkMode: "class", // or 'media' or 'class' From 8f2664104af39426fc969cc2e160d5c47713c441 Mon Sep 17 00:00:00 2001 From: Jaagrav <jaagravseal03@gmail.com> Date: Tue, 27 Jul 2021 23:23:28 +0530 Subject: [PATCH 13/19] Added functionality to collections page --- components/utils/BookMarkItem.js | 2 +- pages/collections/bookmarks-dialog.js | 9 ++++-- pages/collections/dnd-components/bookmarks.js | 22 +++++++++++---- .../collections/dnd-components/collection.js | 6 ++-- pages/collections/dnd-components/dnd-ls.js | 28 ++----------------- pages/collections/dnd-components/dnd.js | 4 +-- pages/collections/index.js | 2 +- 7 files changed, 33 insertions(+), 40 deletions(-) diff --git a/components/utils/BookMarkItem.js b/components/utils/BookMarkItem.js index b6adba5..121fb1d 100644 --- a/components/utils/BookMarkItem.js +++ b/components/utils/BookMarkItem.js @@ -120,7 +120,7 @@ const BookMarkItem = ({ data, bookmarks, fetchBookmarks, animated, interactive } return ( <div - className={`cursor-pointer flex justify-start items-center flex-col p-5 px-4 rounded-md duration-500 white-light-shadow bg-white mr-2 mb-2 w-[340px] border border-[#ddd] hover:border-[#3d5eff98] item-hover-text parent-for-image-scale h-[325px] parent-for-image-scale dark:border-[#555] dark:bg-[#1F1F1F] dark:text-white ${interactive ? "pointer-events-auto" : "pointer-events-none"}`} + className={`cursor-pointer flex justify-start items-center flex-col p-5 px-4 rounded-md duration-500 white-light-shadow bg-white w-[340px] border border-[#ddd] hover:border-[#3d5eff98] item-hover-text parent-for-image-scale h-[325px] parent-for-image-scale dark:border-[#555] dark:bg-[#1F1F1F] dark:text-white ${interactive ? "pointer-events-auto" : "pointer-events-none"}`} onClick={goToCheatSheetPage} data-aos={animated ? "fade-left" : "none"} > diff --git a/pages/collections/bookmarks-dialog.js b/pages/collections/bookmarks-dialog.js index f6b754a..d657617 100644 --- a/pages/collections/bookmarks-dialog.js +++ b/pages/collections/bookmarks-dialog.js @@ -8,17 +8,22 @@ export default function BookmarksDialog({entities, setEntities, bookmarks, fetch const addToCollection = (data) => { const newBookmarkID = `bookmark-${Object.keys(entities.bookmarks).length + 1}`; let bookmarks = entities.bookmarks; - const emptyBookmark = { + const newBookmark = { id: newBookmarkID, content: data } - bookmarks[newBookmarkID] = emptyBookmark; + bookmarks.push(newBookmark); let collections = entities.collections; if(!collections[showBookmarks].bookmarkIDs) collections[showBookmarks].bookmarkIDs = []; + let bookmarkIDs = collections[showBookmarks].bookmarkIDs; + bookmarkIDs.push(newBookmarkID); + setEntities({ ...entities, bookmarks, collections }); + setShowBookmarks(null); } + return ( <Backdrop open={!!showBookmarks} className="z-[100000] flex items-center justify-center bg-[#00000042]" onClick={() => setShowBookmarks(false)}> <div className="glassmorphism rounded-lg h-3/4 w-3/4 p-6 overflow-y-auto" onClick={(e) => e.stopPropagation()}> diff --git a/pages/collections/dnd-components/bookmarks.js b/pages/collections/dnd-components/bookmarks.js index 5aeb2de..58566fb 100644 --- a/pages/collections/dnd-components/bookmarks.js +++ b/pages/collections/dnd-components/bookmarks.js @@ -2,7 +2,10 @@ import React, { useEffect, useState } from "react"; import {Droppable, Draggable} from "react-beautiful-dnd"; -export default function BookmarksItem({collectionId, bookmarkData, bookmarkIDs, entities, setEntities}) { +import {BookMarkItem} from "../../../components"; + +export default function BookmarksItem({collectionId, bookmarkData, bookmarkIDs, entities, setEntities, bookmarks, fetchBookmarks}) { + console.log(bookmarkData, bookmarkIDs) return ( <Droppable droppableId={collectionId} type="bookmark" direction="horizontal"> { @@ -14,19 +17,26 @@ export default function BookmarksItem({collectionId, bookmarkData, bookmarkIDs, > { bookmarkIDs ? ( - bookmarkIDs.map((bookmarkID, index) => ( - <Draggable draggableId={bookmarkID} index={index} key={bookmarkID}> + bookmarkIDs.map((bookmarkID, index) => { + const contentIndex = parseInt(bookmarkID.replace("bookmark-", "")) - 1, + content = bookmarkData[contentIndex].content; + return <Draggable draggableId={bookmarkID} index={index} key={bookmarkID}> { provided => ( <div className="inline-block mt-4 mr-4" {...provided.draggableProps} style={provided.draggableProps.style} ref={provided.innerRef}> - <div className="h-56 w-72 dark:bg-[#ffffff20] border-b-[1px] border-[#eeeeee30] p-4 rounded-xl" {...provided.dragHandleProps}> - <h1 className="text-base text-[#fff]">BookMark {bookmarkID}</h1> + <div className="dark:bg-[#ffffff20] border-b-[1px] border-[#eeeeee30] pl-[30px] rounded-xl w-[370px] h-[325px]" {...provided.dragHandleProps}> + <BookMarkItem + data={content} + bookmarks={bookmarks} + fetchBookmarks={fetchBookmarks} + animated={false} + /> </div> </div> ) } </Draggable> - ))) : ("") + })) : ("") } </div> ) diff --git a/pages/collections/dnd-components/collection.js b/pages/collections/dnd-components/collection.js index b22f3fe..d207d41 100644 --- a/pages/collections/dnd-components/collection.js +++ b/pages/collections/dnd-components/collection.js @@ -7,7 +7,7 @@ import BookMarksItem from "./bookmarks.js"; import {FiPlus, FiTrash2} from "react-icons/fi"; import {MdApps} from "react-icons/md"; -export default function Collection({entities, setEntities, collectionId, index, showBookmarks, setShowBookmarks}) { +export default function Collection({entities, setEntities, collectionId, index, showBookmarks, setShowBookmarks, bookmarks, fetchBookmarks}) { const [collectionTitle, setCollectionTitle] = useState(entities.collections[collectionId].title), collectionTitleRef = useRef(); @@ -34,7 +34,7 @@ export default function Collection({entities, setEntities, collectionId, index, entities?.collections[collectionId]?.id && <Draggable draggableId={entities.collections[collectionId].id} index={index} isDragDisabled={false}> { provided => ( - <div className="h-[305px] mb-8 rounded-lg bg-[#ffffff20] dark:bg-[#ffffff20] border-b-[1px] border-[#eeeeee30]" {...provided.draggableProps} ref={provided.innerRef} style={provided.draggableProps.style}> + <div className="mb-8 rounded-lg bg-[#ffffff20] dark:bg-[#ffffff20] border-b-[1px] border-[#eeeeee30]" {...provided.draggableProps} ref={provided.innerRef} style={provided.draggableProps.style}> <div className="h-full w-full p-4"> <div className="flex items-center justify-between"> <div className="" {...provided.dragHandleProps}> @@ -47,7 +47,7 @@ export default function Collection({entities, setEntities, collectionId, index, </div> </div> <div className="h-full w-full"> - <BookMarksItem collectionId={collectionId} bookmarkData={entities.bookmarks} bookmarkIDs={entities.collections[collectionId].bookmarkIDs} entities={entities} setEntities={setEntities}/> + <BookMarksItem collectionId={collectionId} bookmarkData={entities.bookmarks} bookmarkIDs={entities.collections[collectionId].bookmarkIDs} entities={entities} setEntities={setEntities} bookmarks={bookmarks} fetchBookmarks={fetchBookmarks}/> </div> </div> </div> diff --git a/pages/collections/dnd-components/dnd-ls.js b/pages/collections/dnd-components/dnd-ls.js index 97b49fa..2e7a633 100644 --- a/pages/collections/dnd-components/dnd-ls.js +++ b/pages/collections/dnd-components/dnd-ls.js @@ -15,31 +15,9 @@ function getLocalStorage() { 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"] - }, - }, + bookmarks: [], + collectionOrder: [], + collections: {}, }; updateLocalStorage(data); } diff --git a/pages/collections/dnd-components/dnd.js b/pages/collections/dnd-components/dnd.js index 32a3bab..aa8a7de 100644 --- a/pages/collections/dnd-components/dnd.js +++ b/pages/collections/dnd-components/dnd.js @@ -6,7 +6,7 @@ import {updateLocalStorage, getLocalStorage} from "./dnd-ls"; import { FiPlus } from "react-icons/fi"; -export default function Dnd({entities, setEntities, showBookmarks, setShowBookmarks}) { +export default function Dnd({bookmarks, fetchBookmarks, entities, setEntities, showBookmarks, setShowBookmarks}) { const [collectionName, setCollectionName] = useState(""); const addNewCollection = (e) => { @@ -90,7 +90,7 @@ export default function Dnd({entities, setEntities, showBookmarks, setShowBookma </div> { entities?.collectionOrder && entities.collectionOrder.map((collectionId, index) => ( - <Collection key={collectionId} entities={entities} setEntities={setEntities} collectionId={collectionId} index={index} showBookmarks={showBookmarks} setShowBookmarks={setShowBookmarks} /> + <Collection key={collectionId} entities={entities} setEntities={setEntities} collectionId={collectionId} index={index} showBookmarks={showBookmarks} setShowBookmarks={setShowBookmarks} bookmarks={bookmarks} fetchBookmarks={fetchBookmarks} /> )) } {provided.placeholder} diff --git a/pages/collections/index.js b/pages/collections/index.js index 13429af..e77c5e2 100644 --- a/pages/collections/index.js +++ b/pages/collections/index.js @@ -35,7 +35,7 @@ export default function Collections(props) { image_url="/assets/3d/bookmarks.png" dark={darkMode} /> - {winReady && <Dnd entities={entities} setEntities={setEntities} showBookmarks={showBookmarks} setShowBookmarks={setShowBookmarks} />} + {winReady && <Dnd bookmarks={bookmarks} fetchBookmarks={fetchBookmarks} entities={entities} setEntities={setEntities} showBookmarks={showBookmarks} setShowBookmarks={setShowBookmarks} />} </div> ) } From 6401c89b38586cb16f9871875934fe29e697e7b9 Mon Sep 17 00:00:00 2001 From: Jaagrav <jaagravseal03@gmail.com> Date: Wed, 28 Jul 2021 01:15:37 +0530 Subject: [PATCH 14/19] Resolved some bugs in DND and added complete functionality to collection --- components/utils/BookMarkItem.js | 4 ++-- pages/collections/dnd-components/bookmarks.js | 22 ++++++++++++++++--- .../collections/dnd-components/collection.js | 2 +- pages/collections/index.js | 2 +- 4 files changed, 23 insertions(+), 7 deletions(-) diff --git a/components/utils/BookMarkItem.js b/components/utils/BookMarkItem.js index 121fb1d..8a1fa52 100644 --- a/components/utils/BookMarkItem.js +++ b/components/utils/BookMarkItem.js @@ -120,7 +120,7 @@ const BookMarkItem = ({ data, bookmarks, fetchBookmarks, animated, interactive } return ( <div - className={`cursor-pointer flex justify-start items-center flex-col p-5 px-4 rounded-md duration-500 white-light-shadow bg-white w-[340px] border border-[#ddd] hover:border-[#3d5eff98] item-hover-text parent-for-image-scale h-[325px] parent-for-image-scale dark:border-[#555] dark:bg-[#1F1F1F] dark:text-white ${interactive ? "pointer-events-auto" : "pointer-events-none"}`} + className={`whitespace-normal cursor-pointer flex justify-start items-center flex-col p-5 px-4 rounded-md duration-500 white-light-shadow bg-white w-[340px] border border-[#ddd] hover:border-[#3d5eff98] item-hover-text parent-for-image-scale h-[325px] parent-for-image-scale dark:border-[#555] dark:bg-[#1F1F1F] dark:text-white ${interactive ? "pointer-events-auto" : "pointer-events-none"}`} onClick={goToCheatSheetPage} data-aos={animated ? "fade-left" : "none"} > @@ -166,7 +166,7 @@ const BookMarkItem = ({ data, bookmarks, fetchBookmarks, animated, interactive } > {url.hostname && url.hostname} </a> - <a href={website_url} target="_blank"> + <a href={website_url} target="_blank" className="font-bold text-lg duration-500 hover:text-[#3d5eff]"> <h1 className="font-bold text-lg duration-500 hover:text-[#3d5eff]"> {cheatsheet_name.length > 50 ? cheatsheet_name.slice(0, 50) + "..." diff --git a/pages/collections/dnd-components/bookmarks.js b/pages/collections/dnd-components/bookmarks.js index 58566fb..14d4a8c 100644 --- a/pages/collections/dnd-components/bookmarks.js +++ b/pages/collections/dnd-components/bookmarks.js @@ -4,14 +4,24 @@ import {Droppable, Draggable} from "react-beautiful-dnd"; import {BookMarkItem} from "../../../components"; +import {FiPlus, FiTrash2} from "react-icons/fi"; +import {MdApps} from "react-icons/md"; + export default function BookmarksItem({collectionId, bookmarkData, bookmarkIDs, entities, setEntities, bookmarks, fetchBookmarks}) { - console.log(bookmarkData, bookmarkIDs) + const deleteBookmark = (index, collectionIndex) => { + let collections = entities.collections; + let bookmarks = entities.bookmarks; + bookmarks.splice(index, 1); + collections[collectionId].bookmarkIDs.splice(collectionIndex, 1); + setEntities({ ...entities, collections, bookmarks }); + } + return ( <Droppable droppableId={collectionId} type="bookmark" direction="horizontal"> { provided => ( <div - className="overflow-x-auto overflow-y-hidden whitespace-nowrap w-full h-full" + className="overflow-x-auto overflow-y-hidden w-full min-h-[355px] whitespace-nowrap flex" {...provided.droppableProps} ref={provided.innerRef} > @@ -24,7 +34,13 @@ export default function BookmarksItem({collectionId, bookmarkData, bookmarkIDs, { provided => ( <div className="inline-block mt-4 mr-4" {...provided.draggableProps} style={provided.draggableProps.style} ref={provided.innerRef}> - <div className="dark:bg-[#ffffff20] border-b-[1px] border-[#eeeeee30] pl-[30px] rounded-xl w-[370px] h-[325px]" {...provided.dragHandleProps}> + <div className="w-[340px] min-h-[355px]"> + <div className="rounded-t-lg dark:bg-[#ffffff20] w-min p-2 flex justify-start items-center mb-[-4px]"> + <div {...provided.dragHandleProps}> + <MdApps className="mx-2 text-white text-xl" /> + </div> + <FiTrash2 className="mx-2 text-white text-lg cursor-pointer" onClick={() => deleteBookmark(contentIndex, index)} /> + </div> <BookMarkItem data={content} bookmarks={bookmarks} diff --git a/pages/collections/dnd-components/collection.js b/pages/collections/dnd-components/collection.js index d207d41..b3d2918 100644 --- a/pages/collections/dnd-components/collection.js +++ b/pages/collections/dnd-components/collection.js @@ -38,7 +38,7 @@ export default function Collection({entities, setEntities, collectionId, index, <div className="h-full w-full p-4"> <div className="flex items-center justify-between"> <div className="" {...provided.dragHandleProps}> - <MdApps className="mb-1 mr-2 text-white text-xl" style={{transform: 'rotate(90deg)'}} /> + <MdApps className="mb-1 mr-2 text-white text-xl" /> </div> <input spellCheck={false} value={collectionTitle} onChange={(e) => setCollectionTitle(e.target.value)} className="text-2xl w-full font-bold text-[#fff] bg-transparent cursor-text" /> <div className="flex items-center justify-between"> diff --git a/pages/collections/index.js b/pages/collections/index.js index e77c5e2..029f751 100644 --- a/pages/collections/index.js +++ b/pages/collections/index.js @@ -30,7 +30,7 @@ export default function Collections(props) { </Head> <Header {...props} /> <SvgBanner - text="Your Collections" + text={`Your Collections (${entities ? entities.collectionOrder.length : 0})`} description="These are the collections of your bookmarked cheatsheets, you can move stuff around by dragging and dropping them 🤟" image_url="/assets/3d/bookmarks.png" dark={darkMode} From 0d02fca5c362556ad0d499b6a3757ab10a6e484e Mon Sep 17 00:00:00 2001 From: Jaagrav <jaagravseal03@gmail.com> Date: Wed, 28 Jul 2021 03:50:43 +0530 Subject: [PATCH 15/19] Got rid of a goddamn nasty hardass delete button bug finally!!! --- pages/bookmarks.js | 14 ++++++++------ pages/collections/bookmarks-dialog.js | 2 +- pages/collections/dnd-components/bookmarks.js | 13 ++++++++----- pages/collections/dnd-components/dnd-ls.js | 1 + pages/collections/dnd-components/dnd.js | 2 -- pages/collections/index.js | 2 +- 6 files changed, 19 insertions(+), 15 deletions(-) diff --git a/pages/bookmarks.js b/pages/bookmarks.js index 5ee748b..726baf1 100644 --- a/pages/bookmarks.js +++ b/pages/bookmarks.js @@ -24,12 +24,14 @@ const bookmarksPage = (props) => { /> <div className="flex w-full justify-center flex-wrap"> {bookmarks.map((cheatsheet, key) => ( - <BookMarkItem - data={cheatsheet} - key={key} - bookmarks={bookmarks} - fetchBookmarks={fetchBookmarks} - /> + <div className="m-4"> + <BookMarkItem + data={cheatsheet} + key={key} + bookmarks={bookmarks} + fetchBookmarks={fetchBookmarks} + /> + </div> ))} </div> </> diff --git a/pages/collections/bookmarks-dialog.js b/pages/collections/bookmarks-dialog.js index d657617..4245993 100644 --- a/pages/collections/bookmarks-dialog.js +++ b/pages/collections/bookmarks-dialog.js @@ -33,7 +33,7 @@ export default function BookmarksDialog({entities, setEntities, bookmarks, fetch </div> <div className="mt-4 flex flex-wrap items-center justify-start"> {bookmarks.map((cheatsheet, key) => ( - <div className="cursor-pointer" onClick={() => addToCollection(cheatsheet)}> + <div className="cursor-pointer mb-4 mr-4" onClick={() => addToCollection(cheatsheet)}> <BookMarkItem data={cheatsheet} key={key} diff --git a/pages/collections/dnd-components/bookmarks.js b/pages/collections/dnd-components/bookmarks.js index 14d4a8c..360f2e0 100644 --- a/pages/collections/dnd-components/bookmarks.js +++ b/pages/collections/dnd-components/bookmarks.js @@ -8,12 +8,15 @@ import {FiPlus, FiTrash2} from "react-icons/fi"; import {MdApps} from "react-icons/md"; export default function BookmarksItem({collectionId, bookmarkData, bookmarkIDs, entities, setEntities, bookmarks, fetchBookmarks}) { - const deleteBookmark = (index, collectionIndex) => { + const deleteBookmark = (index) => { let collections = entities.collections; let bookmarks = entities.bookmarks; - bookmarks.splice(index, 1); - collections[collectionId].bookmarkIDs.splice(collectionIndex, 1); - setEntities({ ...entities, collections, bookmarks }); + delete bookmarks[collections[collectionId].bookmarkIDs[index]]; + + collections[collectionId].bookmarkIDs.splice(index, 1); + + console.log(collections, bookmarks); + setEntities({ ...entities, collections, bookmarks }) } return ( @@ -39,7 +42,7 @@ export default function BookmarksItem({collectionId, bookmarkData, bookmarkIDs, <div {...provided.dragHandleProps}> <MdApps className="mx-2 text-white text-xl" /> </div> - <FiTrash2 className="mx-2 text-white text-lg cursor-pointer" onClick={() => deleteBookmark(contentIndex, index)} /> + <FiTrash2 className="mx-2 text-white text-lg cursor-pointer" onClick={() => deleteBookmark(index)} /> </div> <BookMarkItem data={content} diff --git a/pages/collections/dnd-components/dnd-ls.js b/pages/collections/dnd-components/dnd-ls.js index 2e7a633..1a1d50c 100644 --- a/pages/collections/dnd-components/dnd-ls.js +++ b/pages/collections/dnd-components/dnd-ls.js @@ -9,6 +9,7 @@ function updateLocalStorage(data) { function getLocalStorage() { // window.localStorage.setItem("codehouse-collections", null); + let data = {}; if(window.localStorage !== null) { if(JSON.parse(window?.localStorage?.getItem("codehouse-collections"))) diff --git a/pages/collections/dnd-components/dnd.js b/pages/collections/dnd-components/dnd.js index aa8a7de..1c745fe 100644 --- a/pages/collections/dnd-components/dnd.js +++ b/pages/collections/dnd-components/dnd.js @@ -10,7 +10,6 @@ export default function Dnd({bookmarks, fetchBookmarks, entities, setEntities, s const [collectionName, setCollectionName] = useState(""); const addNewCollection = (e) => { - console.log(entities) if(collectionName.trim()) { const newCollectionID = `collection-${Object.keys(entities.collections).length + 1}`; let collections = entities.collections; @@ -72,7 +71,6 @@ export default function Dnd({bookmarks, fetchBookmarks, entities, setEntities, s useEffect(() => { if(entities) updateLocalStorage(entities); - console.log(entities, getLocalStorage()); }, [entities]); return( diff --git a/pages/collections/index.js b/pages/collections/index.js index 029f751..acfc2d2 100644 --- a/pages/collections/index.js +++ b/pages/collections/index.js @@ -25,7 +25,7 @@ export default function Collections(props) { {winReady && <BookmarksDialog entities={entities} setEntities={setEntities} showBookmarks={showBookmarks} setShowBookmarks={setShowBookmarks} {...props}/>} <Head> <title> - Collections - Code House + {`Collections (${entities ? entities.collectionOrder.length : 0})`} - Code House
From a8dcb1515d8ac94a35d7dd2d7467752567354ab2 Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Sat, 31 Jul 2021 19:07:15 +0530 Subject: [PATCH 16/19] Added collections page link to header and mobile header. --- components/utils/Header.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/components/utils/Header.js b/components/utils/Header.js index ed80729..15d80fd 100644 --- a/components/utils/Header.js +++ b/components/utils/Header.js @@ -83,6 +83,11 @@ const Header = ({ setOpen, user, setUser }) => { On Review + + + Collections + + Bookmarks @@ -214,6 +219,13 @@ const Header = ({ setOpen, user, setUser }) => { + + +

+ Collections +

+ +

From 4215de18e8356b1ab8e0bb295a1831970ec2829e Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Tue, 3 Aug 2021 13:09:07 +0530 Subject: [PATCH 17/19] Test deploy preview --- components/utils/Header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/utils/Header.js b/components/utils/Header.js index 15d80fd..e0f10f1 100644 --- a/components/utils/Header.js +++ b/components/utils/Header.js @@ -83,7 +83,7 @@ const Header = ({ setOpen, user, setUser }) => { On Review - + Collections From 951cb2c747fe7d44017f2f798cff2e15c74440a5 Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Tue, 3 Aug 2021 17:02:05 +0530 Subject: [PATCH 18/19] Fixed issue that was causing build failure --- components/index.js | 4 +++ .../utils/Bookmarks.js | 2 +- .../utils/BookmarksDialog.js | 2 +- .../utils/Collection.js | 4 +-- .../dnd.js => components/utils/Dnd.js | 34 ++++++++++++++++--- .../{collections/index.js => collections.js} | 10 +++--- pages/collections/dnd-components/dnd-ls.js | 29 ---------------- 7 files changed, 44 insertions(+), 41 deletions(-) rename pages/collections/dnd-components/bookmarks.js => components/utils/Bookmarks.js (98%) rename pages/collections/bookmarks-dialog.js => components/utils/BookmarksDialog.js (97%) rename pages/collections/dnd-components/collection.js => components/utils/Collection.js (96%) rename pages/collections/dnd-components/dnd.js => components/utils/Dnd.js (82%) rename pages/{collections/index.js => collections.js} (83%) delete mode 100644 pages/collections/dnd-components/dnd-ls.js diff --git a/components/index.js b/components/index.js index 24cad3b..fcd308b 100644 --- a/components/index.js +++ b/components/index.js @@ -30,3 +30,7 @@ export { default as FeatureComponent } from "./utils/FeatureComponent"; export { default as BmcButton } from "./utils/BmcButton"; export { default as TwitterBtn } from "./utils/TwitterBtn"; export { default as Loader } from "./utils/Loader"; +export { default as Dnd } from "./utils/Dnd"; +export { default as BookmarksItem} from "./utils/Bookmarks"; +export { default as BookmarksDialog } from "./utils/BookmarksDialog"; +export { default as Collection } from "./utils/Collection"; diff --git a/pages/collections/dnd-components/bookmarks.js b/components/utils/Bookmarks.js similarity index 98% rename from pages/collections/dnd-components/bookmarks.js rename to components/utils/Bookmarks.js index 360f2e0..bd94b95 100644 --- a/pages/collections/dnd-components/bookmarks.js +++ b/components/utils/Bookmarks.js @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import {Droppable, Draggable} from "react-beautiful-dnd"; -import {BookMarkItem} from "../../../components"; +import BookMarkItem from "./BookMarkItem"; import {FiPlus, FiTrash2} from "react-icons/fi"; import {MdApps} from "react-icons/md"; diff --git a/pages/collections/bookmarks-dialog.js b/components/utils/BookmarksDialog.js similarity index 97% rename from pages/collections/bookmarks-dialog.js rename to components/utils/BookmarksDialog.js index 4245993..caa03df 100644 --- a/pages/collections/bookmarks-dialog.js +++ b/components/utils/BookmarksDialog.js @@ -1,7 +1,7 @@ import React, {useEffect, useState } from "react"; import {Backdrop} from "@material-ui/core"; -import {BookMarkItem} from '../../components'; +import BookMarkItem from './BookMarkItem'; import {FiX} from 'react-icons/fi'; export default function BookmarksDialog({entities, setEntities, bookmarks, fetchBookmarks, showBookmarks, setShowBookmarks}) { diff --git a/pages/collections/dnd-components/collection.js b/components/utils/Collection.js similarity index 96% rename from pages/collections/dnd-components/collection.js rename to components/utils/Collection.js index b3d2918..96ee959 100644 --- a/pages/collections/dnd-components/collection.js +++ b/components/utils/Collection.js @@ -2,7 +2,7 @@ import React, {useEffect, useState, useRef} from "react"; import {Draggable} from "react-beautiful-dnd"; -import BookMarksItem from "./bookmarks.js"; +import BookmarksItem from "./Bookmarks"; import {FiPlus, FiTrash2} from "react-icons/fi"; import {MdApps} from "react-icons/md"; @@ -47,7 +47,7 @@ export default function Collection({entities, setEntities, collectionId, index,

- +
diff --git a/pages/collections/dnd-components/dnd.js b/components/utils/Dnd.js similarity index 82% rename from pages/collections/dnd-components/dnd.js rename to components/utils/Dnd.js index 1c745fe..886a22a 100644 --- a/pages/collections/dnd-components/dnd.js +++ b/components/utils/Dnd.js @@ -1,12 +1,36 @@ import React, {useEffect, useState } from "react"; import { DragDropContext, Droppable } from "react-beautiful-dnd"; -import Collection from "./collection"; - -import {updateLocalStorage, getLocalStorage} from "./dnd-ls"; +import Collection from "./Collection"; import { FiPlus } from "react-icons/fi"; -export default function Dnd({bookmarks, fetchBookmarks, entities, setEntities, showBookmarks, setShowBookmarks}) { +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: [], + collectionOrder: [], + collections: {}, + }; + updateLocalStorage(data); + } + } + return data; +} + +function Dnd({bookmarks, fetchBookmarks, entities, setEntities, showBookmarks, setShowBookmarks}) { const [collectionName, setCollectionName] = useState(""); const addNewCollection = (e) => { @@ -100,3 +124,5 @@ export default function Dnd({bookmarks, fetchBookmarks, entities, setEntities, s
) } + +export default Dnd; diff --git a/pages/collections/index.js b/pages/collections.js similarity index 83% rename from pages/collections/index.js rename to pages/collections.js index acfc2d2..8965e44 100644 --- a/pages/collections/index.js +++ b/pages/collections.js @@ -2,15 +2,15 @@ import React, {useEffect, useState } from "react"; import dynamic from "next/dynamic"; //components -import { RightBar, InfoBar, Header, SvgBanner } from "../../components"; +import { RightBar, InfoBar, Header, SvgBanner } from "../components"; import Head from "next/head"; import { useRouter } from "next/router"; -const Dnd = dynamic(import("./dnd-components/dnd")); -const BookmarksDialog = dynamic(import("./bookmarks-dialog")); +const Dnd = dynamic(import("../components/utils/Dnd")); +const BookmarksDialog = dynamic(import("../components/utils/BookmarksDialog")); -export default function Collections(props) { +function Collections(props) { const { bookmarks, user, fetchBookmarks, darkMode } = props, [winReady, setWinReady] = useState(false), [showBookmarks, setShowBookmarks] = useState(null), @@ -39,3 +39,5 @@ export default function Collections(props) {
) } + +export default Collections; diff --git a/pages/collections/dnd-components/dnd-ls.js b/pages/collections/dnd-components/dnd-ls.js deleted file mode 100644 index 1a1d50c..0000000 --- a/pages/collections/dnd-components/dnd-ls.js +++ /dev/null @@ -1,29 +0,0 @@ -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: [], - collectionOrder: [], - collections: {}, - }; - updateLocalStorage(data); - } - } - return data; -} - -export {updateLocalStorage, getLocalStorage} From 2b308d4d4a1d59c82d99963b0a0beab81b283937 Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Thu, 5 Aug 2021 04:40:15 +0530 Subject: [PATCH 19/19] Updated Readme, ready to merge --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f4d602c..9a8f825 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,8 @@ Code House comes up with a whole bunch of amazing features to provide you the be - 📬 **Newsletter** (once a week) - 💻 **Fully Responsive** - 🔤 **Reply to a comment** +- 📩 **Create Collections with Bookmarks** +- 📱 **Drag and Drop to arrange collections** Code House is the next revolutionary app to hunt the best cheat sheets for all types ✨️ @@ -148,6 +150,7 @@ After your PR got merged, you'll be automatically appared on [contributors page] - [Material UI](http://material-ui.com/): for components - [Animate.css](https://animate.style/): for smooth Animations - [AOS](https://michalsnik.github.io/aos/): for scroll animations +- [React Beautiful DND](https://react-beautiful-dnd.netlify.app/): For Drag and Drop support on Collections Page - [Vercel](http://vercel.com/): for hosting ## 🌈 What's next @@ -161,7 +164,6 @@ Here are some idea that is coming really soon 👀 - Markdown support for feature requests - Twitter and Facebook Auth, **In Progress ⏳️** - Perform Operations with API -- Create Collection when bookmarking cheatsheets - Featuring Cheatsheets on day basis - Generate Cover Image for missing ones - Settings page