diff --git a/docker-compose.yml b/docker-compose.yml
index e25d6ea..fec9548 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -7,6 +7,8 @@ services:
image: mongo
volumes:
- ./mongo:/data/db
+ ports:
+ - 27017:27017
restart: unless-stopped
link-warden-api:
diff --git a/src/App.js b/src/App.js
index 2190a34..2dc7c0f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,7 @@ 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 NoResults from "./componets/NoResults";
import Loader from "./componets/Loader";
import SideBar from "./componets/SideBar";
@@ -59,6 +60,8 @@ function App() {
const tags = concatTags(data);
+ const lists = concatLists(data);
+
async function fetchData() {
const res = await fetch(API_HOST + "/api");
const resJSON = await res.json();
@@ -153,6 +156,7 @@ function App() {
reFetch={fetchData}
lightMode={lightMode}
tags={() => tags}
+ lists={() => lists}
/>
) : null}
@@ -171,6 +175,7 @@ function App() {
SetLoader={SetLoader}
data={filteredData}
tags={tags}
+ lists={lists}
reFetch={fetchData}
/>
diff --git a/src/componets/AddItem.js b/src/componets/AddItem.js
index 24a489f..f42bac8 100644
--- a/src/componets/AddItem.js
+++ b/src/componets/AddItem.js
@@ -2,15 +2,17 @@ import { useState } from "react";
import "../styles/SendItem.css";
import TagSelection from "./TagSelection";
import addItem from "../modules/send";
+import ListSelection from "./ListSelection";
-const AddItem = ({ onExit, reFetch, tags, SetLoader, lightMode }) => {
- const [name, setName] = useState("");
- const [link, setLink] = useState("");
- const [tag, setTag] = useState([]);
+const AddItem = ({ onExit, reFetch, tags, lists, SetLoader, lightMode }) => {
+ const [name, setName] = useState(""),
+ [link, setLink] = useState(""),
+ [tag, setTag] = useState([]),
+ [list, setList] = useState([]);
function newItem() {
SetLoader(true);
- addItem(name, link, tag, reFetch, onExit, SetLoader, "POST");
+ addItem(name, link, tag, list, reFetch, onExit, SetLoader, "POST");
}
function SetName(e) {
@@ -22,10 +24,13 @@ const AddItem = ({ onExit, reFetch, tags, SetLoader, lightMode }) => {
}
function SetTags(value) {
- setTag(value);
setTag(value.map((e) => e.value.toLowerCase()));
}
+ function SetList(value) {
+ setList(value.value);
+ }
+
function abort(e) {
if (e.target.className === "add-overlay") {
onExit();
@@ -61,6 +66,14 @@ const AddItem = ({ onExit, reFetch, tags, SetLoader, lightMode }) => {
Tags: (Optional)
+
+ List: (Optional)
+
+
diff --git a/src/componets/EditItem.js b/src/componets/EditItem.js
index 78c0a76..9638a09 100644
--- a/src/componets/EditItem.js
+++ b/src/componets/EditItem.js
@@ -3,10 +3,12 @@ import deleteEntity from "../modules/deleteEntity";
import "../styles/SendItem.css";
import TagSelection from "./TagSelection";
import editItem from "../modules/send";
+import ListSelection from "./ListSelection";
-const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => {
- const [name, setName] = useState(item.name);
- const [tag, setTag] = useState(item.tag);
+const EditItem = ({ tags, lists, item, onExit, SetLoader, reFetch, lightMode }) => {
+ const [name, setName] = useState(item.name),
+ [tag, setTag] = useState(item.tag),
+ [list, setList] = useState(item.list);
function EditItem() {
SetLoader(true);
@@ -14,6 +16,7 @@ const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => {
name,
item.link,
tag,
+ list,
reFetch,
onExit,
SetLoader,
@@ -33,10 +36,13 @@ const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => {
}
function SetTags(value) {
- setTag(value);
setTag(value.map((e) => e.value.toLowerCase()));
}
+ function SetList(value) {
+ setList(value.value);
+ }
+
function abort(e) {
if (e.target.className === "add-overlay") {
onExit();
@@ -89,6 +95,15 @@ const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => {
tag={tag}
lightMode={lightMode}
/>
+
+ List: (Optional)
+
+
diff --git a/src/componets/List.js b/src/componets/List.js
index ee8d87c..8497492 100644
--- a/src/componets/List.js
+++ b/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, reFetch, SetLoader, lightMode }) => {
+const List = ({ data, tags, lists, reFetch, SetLoader, lightMode }) => {
const [editBox, setEditBox] = useState(false);
const [editIndex, setEditIndex] = useState(0);
@@ -24,6 +24,7 @@ const List = ({ data, tags, reFetch, SetLoader, lightMode }) => {
tags}
+ lists={() => lists}
onExit={exitEditing}
SetLoader={SetLoader}
reFetch={reFetch}
diff --git a/src/componets/ListSelection.js b/src/componets/ListSelection.js
new file mode 100644
index 0000000..1282cd1
--- /dev/null
+++ b/src/componets/ListSelection.js
@@ -0,0 +1,63 @@
+import CreatableSelect from "react-select/creatable";
+
+export default function ListSelection({ setList, lists, list = 'Unsorted', lightMode }) {
+ const customStyles = {
+ container: (provided) => ({
+ ...provided,
+ textShadow: "none",
+ }),
+
+ placeholder: (provided) => ({
+ ...provided,
+ color: "#a9a9a9",
+ }),
+
+ menu: (provided) => ({
+ ...provided,
+ border: "solid",
+ borderWidth: "1px",
+ borderRadius: "0px",
+ borderColor: "rgb(141, 141, 141)",
+ opacity: "90%",
+ color: "gray",
+ background: lightMode ? "lightyellow" : "#273949",
+ boxShadow:
+ "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
+ }),
+
+ input: (provided) => ({
+ ...provided,
+ color: lightMode ? "rgb(64, 64, 64)" : "white",
+ }),
+
+ singleValue: (provided) => ({
+ ...provided,
+ color: lightMode ? "rgb(64, 64, 64)" : "white",
+ }),
+
+ control: (provided, state) => ({
+ ...provided,
+ background: lightMode ? "lightyellow" : "#273949",
+ border: "none",
+ borderRadius: "0px",
+ boxShadow: state.isFocused
+ ? "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px"
+ : "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",
+ }),
+ };
+
+ const data = lists().map((e) => {
+ return { value: e, label: e };
+ });
+
+ const defaultList = { value: list, label: list };
+
+ return (
+
+ );
+}
diff --git a/src/componets/TagSelection.js b/src/componets/TagSelection.js
index 3f36e76..30f44b1 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) => ({
@@ -18,11 +17,6 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) {
color: "gray",
}),
- indicatorSeparator: (provided) => ({
- ...provided,
- display: "none",
- }),
-
menu: (provided) => ({
...provided,
border: "solid",
diff --git a/src/modules/concatLists.js b/src/modules/concatLists.js
new file mode 100644
index 0000000..31b496d
--- /dev/null
+++ b/src/modules/concatLists.js
@@ -0,0 +1,13 @@
+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;
diff --git a/src/modules/send.js b/src/modules/send.js
index 4b22bec..72c6b41 100644
--- a/src/modules/send.js
+++ b/src/modules/send.js
@@ -5,6 +5,7 @@ const addItem = async (
name,
link,
tag,
+ list,
reFetch,
onExit,
SetLoader,
@@ -36,6 +37,7 @@ const addItem = async (
title: title,
link: link,
tag: tag,
+ list: list,
date: dateCreated,
}),
headers: {