From abffa9050680c1e83db916bc109392746f73aed8 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 22 Jun 2022 17:35:58 +0430 Subject: [PATCH] Added list feature. --- docker-compose.yml | 2 ++ src/App.js | 5 +++ src/componets/AddItem.js | 25 ++++++++++---- src/componets/EditItem.js | 23 ++++++++++--- src/componets/List.js | 3 +- src/componets/ListSelection.js | 63 ++++++++++++++++++++++++++++++++++ src/componets/TagSelection.js | 6 ---- src/modules/concatLists.js | 13 +++++++ src/modules/send.js | 2 ++ 9 files changed, 125 insertions(+), 17 deletions(-) create mode 100644 src/componets/ListSelection.js create mode 100644 src/modules/concatLists.js 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: {