egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Renamed list to collection.

Browse Source
This commit is contained in:
Daniel
2022-06-23 16:24:08 +04:30
parent 27ddf1c54e
commit ceeb44901b
11 changed files with 88 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -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
+9 -9
View File
@@ -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
+17 -10
View File
@@ -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/ListSelection.js → src/componets/CollectionSelection.js
+10 -5
View File
@@ -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
+20 -12
View File
@@ -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
+2 -2
View File
@@ -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
+9 -6
View File
@@ -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>
src/modules/concatCollections.js
+13
View File
@@ -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
-13
View File
@@ -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
+2 -2
View File
@@ -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/Lists.js → src/routes/Collections.js
+5 -5
View File
@@ -1,10 +1,10 @@
import { useParams } from "react-router-dom";
import List from "../componets/List";
const Lists = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => {
const { listId } = useParams();
const Collections = ({ data, tags, collections, SetLoader, lightMode, reFetch }) => {
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;