Add new collection and edit collection title

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 (
- <Draggable draggableId={entities.collections[collectionId].id} index={index} isDragDisabled={false}>
+ <>
  {
- provided => (
- <div className="h-[305px] mb-8 rounded-lg 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">
- <h1 {...provided.dragHandleProps} className="text-2xl font-bold text-[#fff]">{entities.collections[collectionId].title}</h1>
- <div className="h-full w-full">
- <BookMarksItem collectionId={collectionId} bookmarkData={entities.bookmarks} bookmarkIDs={entities.collections[collectionId].bookmarkIDs} entities={entities} setEntities={setEntities}/>
+ 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="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)'}} />
+ </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" />
+ </div>
+ </div>
+ <div className="h-full w-full">
+ <BookMarksItem collectionId={collectionId} bookmarkData={entities.bookmarks} bookmarkIDs={entities.collections[collectionId].bookmarkIDs} entities={entities} setEntities={setEntities}/>
+ </div>
+ </div>
  </div>
- </div>
- </div>
- )
+ )
+ }
+ </Draggable>
  }
- </Draggable>
+ </>
  )
 }

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(
  <div className="min-h-screen w-full p-8">
@@ -61,6 +82,12 @@ export default function Dnd() {
  ))
  }
  {provided.placeholder}
+ <div className="flex items-center justify-between w-24 bg-[#ffffff20] dark:bg-[#ffffff20] rounded-lg p-4 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}>
+ <FiPlus className="text-white" />
+ </div>
+ </div>
  </div>
  )
  }