Renamed list to collection.

src/componets/AddItem.js

@@ -2,17 +2,24 @@ import { useState } from "react";
 import "../styles/SendItem.css";
 import TagSelection from "./TagSelection";
 import addItem from "../modules/send";
-import ListSelection from "./ListSelection";
+import CollectionSelection from "./CollectionSelection";
 
-const AddItem = ({ onExit, reFetch, tags, lists, SetLoader, lightMode }) => {
+const AddItem = ({
+  onExit,
+  reFetch,
+  tags,
+  collections,
+  SetLoader,
+  lightMode,
+}) => {
   const [name, setName] = useState(""),
     [link, setLink] = useState(""),
     [tag, setTag] = useState([]),
-    [list, setList] = useState([]);
+    [collection, setCollection] = useState("Unsorted");
 
   function newItem() {
     SetLoader(true);
-    addItem(name, link, tag, list, reFetch, onExit, SetLoader, "POST");
+    addItem(name, link, tag, collection, reFetch, onExit, SetLoader, "POST");
   }
 
   function SetName(e) {
@@ -27,8 +34,8 @@ const AddItem = ({ onExit, reFetch, tags, lists, SetLoader, lightMode }) => {
     setTag(value.map((e) => e.value.toLowerCase()));
   }
 
-  function SetList(value) {
-    setList(value.value);
+  function SetCollection(value) {
+    setCollection(value.value);
   }
 
   function abort(e) {
@@ -67,11 +74,11 @@ const AddItem = ({ onExit, reFetch, tags, lists, SetLoader, lightMode }) => {
             </h3>
             <TagSelection setTags={SetTags} tags={tags} lightMode={lightMode} />
             <h3>
-              List: <span className="optional">(Optional)</span>
+              Collections: <span className="optional">(Optional)</span>
             </h3>
-            <ListSelection
-              setList={SetList}
-              lists={lists}
+            <CollectionSelection
+              setCollection={SetCollection}
+              collections={collections}
               lightMode={lightMode}
             />
             <button onClick={newItem} className="send-btn">

src/componets/CollectionSelection.js

@@ -1,6 +1,11 @@
 import CreatableSelect from "react-select/creatable";
 
-export default function ListSelection({ setList, lists, list = 'Unsorted', lightMode }) {
+export default function CollectionSelection({
+  setCollection,
+  collections,
+  collection = "Unsorted",
+  lightMode,
+}) {
   const customStyles = {
     container: (provided) => ({
       ...provided,
@@ -46,17 +51,17 @@ export default function ListSelection({ setList, lists, list = 'Unsorted', light
     }),
   };
 
-  const data = lists().map((e) => {
+  const data = collections().map((e) => {
     return { value: e, label: e };
   });
 
-  const defaultList = { value: list, label: list };
+  const defaultCollection = { value: collection, label: collection };
 
   return (
     <CreatableSelect
-      defaultValue={defaultList}
+      defaultValue={defaultCollection}
       styles={customStyles}
-      onChange={setList}
+      onChange={setCollection}
       options={data}
     />
   );

src/componets/EditItem.js

@@ -3,12 +3,20 @@ import deleteEntity from "../modules/deleteEntity";
 import "../styles/SendItem.css";
 import TagSelection from "./TagSelection";
 import editItem from "../modules/send";
-import ListSelection from "./ListSelection";
+import CollectionSelection from "./CollectionSelection";
 
-const EditItem = ({ tags, lists, item, onExit, SetLoader, reFetch, lightMode }) => {
+const EditItem = ({
+  tags,
+  collections,
+  item,
+  onExit,
+  SetLoader,
+  reFetch,
+  lightMode,
+}) => {
   const [name, setName] = useState(item.name),
-   [tag, setTag] = useState(item.tag),
-   [list, setList] = useState(item.list);
+    [tag, setTag] = useState(item.tag),
+    [collection, setCollection] = useState(item.collection);
 
   function EditItem() {
     SetLoader(true);
@@ -16,7 +24,7 @@ const EditItem = ({ tags, lists, item, onExit, SetLoader, reFetch, lightMode })
       name,
       item.link,
       tag,
-      list,
+      collection,
       reFetch,
       onExit,
       SetLoader,
@@ -39,8 +47,8 @@ const EditItem = ({ tags, lists, item, onExit, SetLoader, reFetch, lightMode })
     setTag(value.map((e) => e.value.toLowerCase()));
   }
 
-  function SetList(value) {
-    setList(value.value);
+  function SetCollection(value) {
+    setCollection(value.value);
   }
 
   function abort(e) {
@@ -96,12 +104,12 @@ const EditItem = ({ tags, lists, item, onExit, SetLoader, reFetch, lightMode })
               lightMode={lightMode}
             />
             <h3>
-              List: <span className="optional">(Optional)</span>
+             Collection: <span className="optional">(Optional)</span>
             </h3>
-            <ListSelection
-              setList={SetList}
-              lists={lists}
-              list={list}
+            <CollectionSelection
+              setCollection={SetCollection}
+              collections={collections}
+              collection={collection}
               lightMode={lightMode}
             />
             <button onClick={EditItem} className="send-btn">

src/componets/List.js

@@ -5,7 +5,7 @@ import EditItem from "./EditItem";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 
-const List = ({ data, tags, lists, reFetch, SetLoader, lightMode }) => {
+const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
   const [editBox, setEditBox] = useState(false);
   const [editIndex, setEditIndex] = useState(0);
 
@@ -24,7 +24,7 @@ const List = ({ data, tags, lists, reFetch, SetLoader, lightMode }) => {
         <EditItem
           lightMode={lightMode}
           tags={() => tags}
-          lists={() => lists}
+          collections={() => collections}
           onExit={exitEditing}
           SetLoader={SetLoader}
           reFetch={reFetch}

src/componets/SideBar.js

@@ -11,7 +11,7 @@ import "react-pro-sidebar/dist/css/styles.css";
 import "../styles/SideBar.css";
 import { Link } from "react-router-dom";
 
-const SideBar = ({ tags, lists, handleToggleSidebar, toggle }) => {
+const SideBar = ({ tags, collections, handleToggleSidebar, toggle }) => {
   const sortedTags = tags.sort((a, b) => {
     const A = a.toLowerCase(),
       B = b.toLowerCase();
@@ -20,7 +20,7 @@ const SideBar = ({ tags, lists, handleToggleSidebar, toggle }) => {
     return 0;
   });
 
-  const sortedLists = lists
+  const sortedCollections = collections
     .sort((a, b) => {
       const A = a.toLowerCase(),
         B = b.toLowerCase();
@@ -52,11 +52,14 @@ const SideBar = ({ tags, lists, handleToggleSidebar, toggle }) => {
 
           <SubMenu
             icon={<h2 className="sidebar-icon">&#xf5fd;</h2>}
-            suffix={<span className="badge">{sortedTags.length}</span>}
-            title={<div className="menu-item">Lists</div>}
+            suffix={<span className="badge">{sortedCollections.length}</span>}
+            title={<div className="menu-item">Collections</div>}
           >
-            {sortedLists.map((e, i) => {
-              const path = `/lists/${e}`;
+            <MenuItem prefix={<div className="sidebar-item-prefix">&#xf07b;</div>}>
+              <Link className="sidebar-entity" to="/collections/Unsorted">Unsorted</Link>
+            </MenuItem>
+            {sortedCollections.map((e, i) => {
+              const path = `/collections/${e}`;
               return (
                 <MenuItem prefix={<div className="sidebar-item-prefix">&#xf07b;</div>} key={i}>
                   <Link className="sidebar-entity" to={path}>{e}</Link>