Renamed list to collection.

README.md

@@ -38,7 +38,7 @@ The objective is to have a self-hosted place to keep useful links in one place,
 
 * 🏷 Set multiple tags to each link.
 
-* 🗂 Assign each link to a list where we can further group links.
+* 🗂 Assign each link to a collection where we can further group links.
 
 **Also take a look at our planned features in the [project roadmap section](https://github.com/Daniel31x13/link-warden/wiki#project-roadmap).**
 

src/App.js

@@ -7,12 +7,12 @@ import Filters from "./componets/Filters";
 import sortList from "./modules/sortList";
 import filter from "./modules/filterData";
 import concatTags from "./modules/concatTags";
-import concatLists from "./modules/concatLists";
+import concatCollections from "./modules/concatCollections";
 import NoResults from "./componets/NoResults";
 import Loader from "./componets/Loader";
 import SideBar from "./componets/SideBar";
 import Tags from "./routes/Tags.js";
-import Lists from "./routes/Lists.js";
+import Collections from "./routes/Collections.js";
 import { Route, Routes } from "react-router-dom";
 
 function App() {
@@ -96,7 +96,7 @@ function App() {
     <div className="App">
       <SideBar
         tags={concatTags(data)}
-        lists={concatLists(data)}
+        collections={concatCollections(data)}
         handleToggleSidebar={handleToggleSidebar}
         toggle={toggle}
       />
@@ -154,7 +154,7 @@ function App() {
             reFetch={fetchData}
             lightMode={lightMode}
             tags={() => concatTags(data)}
-            lists={() => concatLists(data)}
+            collections={() => concatCollections(data)}
           />
         ) : null}
 
@@ -173,7 +173,7 @@ function App() {
                 SetLoader={SetLoader}
                 data={filteredData}
                 tags={concatTags(data)}
-                lists={concatLists(data)}
+                collections={concatCollections(data)}
                 reFetch={fetchData}
               />
             </div>
@@ -188,21 +188,21 @@ function App() {
               SetLoader={SetLoader}
               data={filteredData}
               tags={concatTags(data)}
-              lists={concatLists(data)}
+              collections={concatCollections(data)}
               reFetch={fetchData}
             />
           }
         />
 
         <Route
-          path="lists/:listId"
+          path="collections/:collectionId"
           element={
-            <Lists
+            <Collections
               lightMode={lightMode}
               SetLoader={SetLoader}
               data={filteredData}
               tags={concatTags(data)}
-              lists={concatLists(data)}
+              collections={concatCollections(data)}
               reFetch={fetchData}
             />
           }

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) {
+  function SetCollection(value) {
-    setList(value.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
+            <CollectionSelection
-              setList={SetList}
+              setCollection={SetCollection}
-              lists={lists}
+              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),
+    [tag, setTag] = useState(item.tag),
-   [list, setList] = useState(item.list);
+    [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) {
+  function SetCollection(value) {
-    setList(value.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
+            <CollectionSelection
-              setList={SetList}
+              setCollection={SetCollection}
-              lists={lists}
+              collections={collections}
-              list={list}
+              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>}
+            suffix={<span className="badge">{sortedCollections.length}</span>}
-            title={<div className="menu-item">Lists</div>}
+            title={<div className="menu-item">Collections</div>}
           >
-            {sortedLists.map((e, i) => {
+            <MenuItem prefix={<div className="sidebar-item-prefix">&#xf07b;</div>}>
-              const path = `/lists/${e}`;
+              <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>

src/modules/concatCollections.js

@@ -0,0 +1,13 @@
+const concatCollections = (data) => {
+  let collections = [];
+
+  for (let i = 0; i < data.length; i++) {
+    collections = collections.concat(data[i].collection);
+  }
+
+  collections = collections.filter((v, i, a) => a.indexOf(v) === i);
+
+  return collections;
+};
+
+export default concatCollections;

src/modules/concatLists.js

@@ -1,13 +0,0 @@
-const concatLists = (data) => {
-  let lists = [];
-
-  for (let i = 0; i < data.length; i++) {
-    lists = lists.concat(data[i].list);
-  }
-
-  lists = lists.filter((v, i, a) => a.indexOf(v) === i);
-
-  return lists;
-};
-
-export default concatLists;

src/modules/send.js

@@ -5,7 +5,7 @@ const addItem = async (
   name,
   link,
   tag,
-  list,
+  collection,
   reFetch,
   onExit,
   SetLoader,
@@ -37,7 +37,7 @@ const addItem = async (
         title: title,
         link: link,
         tag: tag,
-        list: list,
+        collection: collection,
         date: dateCreated,
       }),
       headers: {

src/routes/Collections.js

@@ -1,10 +1,10 @@
 import { useParams } from "react-router-dom";
 import List from "../componets/List";
 
-const Lists = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => {
+const Collections = ({ data, tags, collections, SetLoader, lightMode, reFetch }) => {
-  const { listId } = useParams();
+  const { collectionId } = useParams();
   const dataWithMatchingTag = data.filter((e) => {
-    return e.list.includes(listId);
+    return e.collection.includes(collectionId);
   });
 
   return (
@@ -13,7 +13,7 @@ const Lists = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => {
         lightMode={lightMode}
         data={dataWithMatchingTag}
         tags={tags}
-        lists={lists}
+        collections={collections}
         SetLoader={SetLoader}
         reFetch={reFetch}
       />
@@ -21,4 +21,4 @@ const Lists = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => {
   );
 };
 
-export default Lists;
+export default Collections;