-
Edit bookmark
+
+
Edit bookmark
+
Link:{" "}
@@ -89,6 +105,15 @@ const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => {
tag={tag}
lightMode={lightMode}
/>
+
+ Collection: (Optional)
+
+
diff --git a/src/componets/List.js b/src/componets/List.js
index ee8d87c..33b33f8 100644
--- a/src/componets/List.js
+++ b/src/componets/List.js
@@ -2,12 +2,14 @@ import "../styles/List.css";
import LazyLoad from "react-lazyload";
import ViewArchived from "./ViewArchived";
import EditItem from "./EditItem";
-import { useState } from "react";
+import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
+import NoResults from "./NoResults";
-const List = ({ data, tags, reFetch, SetLoader, lightMode }) => {
- const [editBox, setEditBox] = useState(false);
- const [editIndex, setEditIndex] = useState(0);
+const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
+ const [editBox, setEditBox] = useState(false),
+ [editIndex, setEditIndex] = useState(0),
+ [numberOfResults, setNumberOfResults] = useState(0);
function edit(index) {
setEditBox(true);
@@ -18,12 +20,23 @@ const List = ({ data, tags, reFetch, SetLoader, lightMode }) => {
setEditBox(false);
}
+ useEffect(() => {
+ setNumberOfResults(data.length);
+ }, [data]);
+
return (
+ {numberOfResults > 0 ? (
+
{numberOfResults} Bookmarks found
+ ) : null}
+
+ {numberOfResults === 0 ?
: null}
+
{editBox ? (
tags}
+ collections={() => collections}
onExit={exitEditing}
SetLoader={SetLoader}
reFetch={reFetch}
diff --git a/src/componets/SideBar.js b/src/componets/SideBar.js
index c20a10e..6d1dcc2 100644
--- a/src/componets/SideBar.js
+++ b/src/componets/SideBar.js
@@ -7,11 +7,12 @@ import {
MenuItem,
SubMenu,
} from "react-pro-sidebar";
-import "react-pro-sidebar/dist/css/styles.css";
+// import "react-pro-sidebar/dist/css/styles.css";
+import "../styles/SideBar_S.scss";
import "../styles/SideBar.css";
import { Link } from "react-router-dom";
-const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
+const SideBar = ({ tags, collections, handleToggleSidebar, toggle }) => {
const sortedTags = tags.sort((a, b) => {
const A = a.toLowerCase(),
B = b.toLowerCase();
@@ -19,6 +20,19 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
if (A > B) return 1;
return 0;
});
+
+ const sortedCollections = collections
+ .sort((a, b) => {
+ const A = a.toLowerCase(),
+ B = b.toLowerCase();
+ if (A < B) return -1;
+ if (A > B) return 1;
+ return 0;
+ })
+ .filter((e) => {
+ return e !== "Unsorted";
+ });
+
return (
{
className="sidebar"
>
- LinkWarden
+ LinkWarden
Tags
}
+ title={Tags
}
>
{sortedTags.map((e, i) => {
const path = `/tags/${e}`;
return (
-
} key={i}>
+
{e}
);
})}
diff --git a/src/componets/TagSelection.js b/src/componets/TagSelection.js
index 3f36e76..5515638 100644
--- a/src/componets/TagSelection.js
+++ b/src/componets/TagSelection.js
@@ -1,6 +1,5 @@
import CreatableSelect from "react-select/creatable";
-// lightMode ? "Black" : "White"
export default function TagSelection({ setTags, tags, tag = [], lightMode }) {
const customStyles = {
container: (provided) => ({
@@ -13,16 +12,19 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) {
color: "#a9a9a9",
}),
+ option: (provided) => ({
+ ...provided,
+ ':before': {
+ content: '"#"',
+ marginRight: 8,
+ },
+ }),
+
multiValueRemove: (provided) => ({
...provided,
color: "gray",
}),
- indicatorSeparator: (provided) => ({
- ...provided,
- display: "none",
- }),
-
menu: (provided) => ({
...provided,
border: "solid",
@@ -41,6 +43,14 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) {
color: lightMode ? "rgb(64, 64, 64)" : "white",
}),
+ multiValueLabel: (provided) => ({
+ ...provided,
+ ':before': {
+ content: '"#"',
+ marginRight: 4,
+ },
+ }),
+
control: (provided, state) => ({
...provided,
background: lightMode ? "lightyellow" : "#273949",
@@ -61,6 +71,7 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) {
return (
{
+ 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;
diff --git a/src/modules/filterData.js b/src/modules/filterData.js
index cb77e46..5867bfe 100644
--- a/src/modules/filterData.js
+++ b/src/modules/filterData.js
@@ -4,24 +4,24 @@ const filteredData = (
filterCheckbox
) => {
return data.filter((e) => {
- const name = e.name.toLowerCase().includes(searchQuery.toLowerCase());
- const title = e.title.toLowerCase().includes(searchQuery.toLowerCase());
+ const linkName = e.name.toLowerCase().includes(searchQuery.toLowerCase());
+ const websiteTitle = e.title.toLowerCase().includes(searchQuery.toLowerCase());
const tags = e.tag.some((e) => e.includes(searchQuery.toLowerCase()));
- if (filterCheckbox === [true, true, true]) {
- return name || title || tags;
+ if (filterCheckbox.every(e => e === true)) {
+ return linkName || websiteTitle || tags;
} else if (filterCheckbox[0] && filterCheckbox[2]) {
- return name || tags;
+ return linkName || tags;
} else if (filterCheckbox[0] && filterCheckbox[1]) {
- return name || title;
+ return linkName || websiteTitle;
} else if (filterCheckbox[2] && filterCheckbox[1]) {
- return tags || title;
+ return tags || websiteTitle;
} else if (filterCheckbox[0]) {
- return name;
+ return linkName;
} else if (filterCheckbox[1]) {
- return tags;
+ return websiteTitle;
} else if (filterCheckbox[2]) {
- return title;
+ return tags;
}
});
};
diff --git a/src/modules/send.js b/src/modules/send.js
index 4b22bec..715382a 100644
--- a/src/modules/send.js
+++ b/src/modules/send.js
@@ -5,6 +5,7 @@ const addItem = async (
name,
link,
tag,
+ collection,
reFetch,
onExit,
SetLoader,
@@ -36,6 +37,7 @@ const addItem = async (
title: title,
link: link,
tag: tag,
+ collection: collection,
date: dateCreated,
}),
headers: {
diff --git a/src/routes/Collections.js b/src/routes/Collections.js
new file mode 100644
index 0000000..a08f196
--- /dev/null
+++ b/src/routes/Collections.js
@@ -0,0 +1,24 @@
+import { useParams } from "react-router-dom";
+import List from "../componets/List";
+
+const Collections = ({ data, tags, collections, SetLoader, lightMode, reFetch }) => {
+ const { collectionId } = useParams();
+ const dataWithMatchingTag = data.filter((e) => {
+ return e.collection.includes(collectionId);
+ });
+
+ return (
+
+
+
+ );
+};
+
+export default Collections;
diff --git a/src/routes/Tags.js b/src/routes/Tags.js
index d2f8fee..1d2abb7 100644
--- a/src/routes/Tags.js
+++ b/src/routes/Tags.js
@@ -1,7 +1,7 @@
import { useParams } from "react-router-dom";
import List from "../componets/List";
-const Tags = ({ data, tags, SetLoader, lightMode, reFetch }) => {
+const Tags = ({ data, tags, collections, SetLoader, lightMode, reFetch }) => {
const { tagId } = useParams();
const dataWithMatchingTag = data.filter((e) => {
return e.tag.includes(tagId);
@@ -13,6 +13,7 @@ const Tags = ({ data, tags, SetLoader, lightMode, reFetch }) => {
lightMode={lightMode}
data={dataWithMatchingTag}
tags={tags}
+ collections={collections}
SetLoader={SetLoader}
reFetch={reFetch}
/>
diff --git a/src/styles/App.css b/src/styles/App.css
index f73e08b..7a8c882 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -32,7 +32,7 @@
}
.content {
- padding: 0px 20px 20px 20px;
+ padding: 0px 20px 0 20px;
}
.head {
@@ -86,21 +86,11 @@ input:focus {
outline: none;
}
-.results {
- margin: 20px 20px 0px 0px;
- display: inline-block;
-}
-
-.no-results {
- text-align: center;
- padding-top: 5%;
- padding-bottom: 5%;
- box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
- rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
- margin-top: 10px;
-}
-
.dark-light-btn {
margin-left: 10px;
font-size: 1.2em;
}
+
+.select {
+ font-family: "Font Awesome 5 Free"
+}
\ No newline at end of file
diff --git a/src/styles/List.css b/src/styles/List.css
index 9544082..52f13dd 100644
--- a/src/styles/List.css
+++ b/src/styles/List.css
@@ -172,9 +172,9 @@
}
.delete {
- margin: 20px 20px 20px 0px;
- background-color: #273949;
- float: right;
+ margin-top: 20px;
+ margin-left: 10px;
+ display: inline;
font-size: 1.1rem;
width: 40px;
height: 40px;
@@ -188,17 +188,13 @@
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
- background-color: #273949;
+ background-color: rgba(255, 75, 75, 0.8);
+ color: white;
border: none;
- transition: background-color 0.1s;
+ transition: box-shadow 0.1s;
}
.delete:hover {
- background-color: rgba(255, 75, 75, 0.8);
- color: #d8d8d8;
-}
-
-.delete:active {
box-shadow: 0px 0px 10px rgb(255, 83, 140);
}
@@ -208,3 +204,20 @@
opacity: 80%;
margin-right: auto;
}
+
+.no-results {
+ text-align: center;
+ padding-top: 5%;
+ padding-bottom: 5%;
+ box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
+ rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+ margin-top: 10px;
+}
+
+.edit-title {
+ display: inline;
+}
+
+.title-delete-group {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/src/styles/SideBar.css b/src/styles/SideBar.css
index 219396e..75d71e4 100644
--- a/src/styles/SideBar.css
+++ b/src/styles/SideBar.css
@@ -3,7 +3,7 @@
position: fixed;
}
-.sidebar h1 {
+.sidebar h3 {
text-align: center;
}
@@ -17,18 +17,11 @@
text-decoration: underline;
}
-.pro-sidebar-layout {
- background: #384952;
- text-shadow: none;
- color: white;
-}
-
.badge {
padding: 3px 10px;
font-size: 0.8rem;
letter-spacing: 1px;
border-radius: 14px;
- background-color: rgb(52, 121, 181);
}
.sidebar-icon {
@@ -46,4 +39,17 @@
.pro-inner-item {
margin-bottom: 10px;
-}
\ No newline at end of file
+}
+
+.sidebar-entity {
+ font-size: 1.2rem;
+}
+
+.sidebar-item-prefix {
+ font-family: "Font Awesome 5 Free";
+}
+
+.pro-sidebar-layout * {
+ color: white;
+ text-shadow: none;
+}
diff --git a/src/styles/SideBar_S.scss b/src/styles/SideBar_S.scss
new file mode 100644
index 0000000..48c4bc8
--- /dev/null
+++ b/src/styles/SideBar_S.scss
@@ -0,0 +1,4 @@
+$sidebar-bg-color: #373737;
+$submenu-bg-color: #373737;
+
+@import '~react-pro-sidebar/dist/scss/styles.scss';
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
index 6f71356..dce6689 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -23,11 +23,6 @@ body {
content: "";
}
-.delete {
- background-color: #1f2c38;
- color: #ffffffb6;
-}
-
.no-results {
background-color: #1f2c38;
}
@@ -111,11 +106,6 @@ body {
color: gray;
}
-.light .delete {
- background-color: lightyellow;
- color: rgb(176, 176, 176);
-}
-
.light input {
background-color: lightyellow;
color: black;