-
-
Notifications
You must be signed in to change notification settings - Fork 72
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10 from Jaagrav/main
Feature(s) Add: Collections Page
- Loading branch information
Showing
17 changed files
with
613 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
|
|
||
| import {Droppable, Draggable} from "react-beautiful-dnd"; | ||
|
|
||
| import BookMarkItem from "./BookMarkItem"; | ||
|
|
||
| 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) => { | ||
| let collections = entities.collections; | ||
| let bookmarks = entities.bookmarks; | ||
| delete bookmarks[collections[collectionId].bookmarkIDs[index]]; | ||
|
|
||
| collections[collectionId].bookmarkIDs.splice(index, 1); | ||
|
|
||
| console.log(collections, bookmarks); | ||
| setEntities({ ...entities, collections, bookmarks }) | ||
| } | ||
|
|
||
| return ( | ||
| <Droppable droppableId={collectionId} type="bookmark" direction="horizontal"> | ||
| { | ||
| provided => ( | ||
| <div | ||
| className="overflow-x-auto overflow-y-hidden w-full min-h-[355px] whitespace-nowrap flex" | ||
| {...provided.droppableProps} | ||
| ref={provided.innerRef} | ||
| > | ||
| { | ||
| bookmarkIDs ? ( | ||
| 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="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(index)} /> | ||
| </div> | ||
| <BookMarkItem | ||
| data={content} | ||
| bookmarks={bookmarks} | ||
| fetchBookmarks={fetchBookmarks} | ||
| animated={false} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| </Draggable> | ||
| })) : ("") | ||
| } | ||
| </div> | ||
| ) | ||
| } | ||
| </Droppable> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import React, {useEffect, useState } from "react"; | ||
|
|
||
| import {Backdrop} from "@material-ui/core"; | ||
| import BookMarkItem from './BookMarkItem'; | ||
| 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 newBookmark = { | ||
| id: newBookmarkID, | ||
| content: data | ||
| } | ||
| 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()}> | ||
| <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 mb-4 mr-4" onClick={() => addToCollection(cheatsheet)}> | ||
| <BookMarkItem | ||
| data={cheatsheet} | ||
| key={key} | ||
| bookmarks={bookmarks} | ||
| fetchBookmarks={fetchBookmarks} | ||
| animated={false} | ||
| interactive={false} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </Backdrop> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import React, {useEffect, useState, useRef} from "react"; | ||
|
|
||
| import {Draggable} from "react-beautiful-dnd"; | ||
|
|
||
| import BookmarksItem from "./Bookmarks"; | ||
|
|
||
| import {FiPlus, FiTrash2} from "react-icons/fi"; | ||
| import {MdApps} from "react-icons/md"; | ||
|
|
||
| export default function Collection({entities, setEntities, collectionId, index, showBookmarks, setShowBookmarks, bookmarks, fetchBookmarks}) { | ||
| 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 ( | ||
| <> | ||
| { | ||
| entities?.collections[collectionId]?.id && <Draggable draggableId={entities.collections[collectionId].id} index={index} isDragDisabled={false}> | ||
| { | ||
| provided => ( | ||
| <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}> | ||
| <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"> | ||
| <FiTrash2 className="text-white text-lg cursor-pointer ml-2" onClick={deleteCollection} /> | ||
| <FiPlus className="text-white text-lg cursor-pointer ml-2" onClick={() => {setShowBookmarks(collectionId)}}/> | ||
| </div> | ||
| </div> | ||
| <div className="h-full w-full"> | ||
| <BookmarksItem collectionId={collectionId} bookmarkData={entities.bookmarks} bookmarkIDs={entities.collections[collectionId].bookmarkIDs} entities={entities} setEntities={setEntities} bookmarks={bookmarks} fetchBookmarks={fetchBookmarks}/> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| </Draggable> | ||
| } | ||
| </> | ||
| ) | ||
| } |
Oops, something went wrong.
7a0f1a6There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: