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

Many improvements.

Browse Source
This commit is contained in:
Daniel
2023-03-06 00:33:20 +03:30
parent f3e104aafe
commit cff10fa9b6
19 changed files with 314 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AddLinkModal.tsx
+12 -17
View File
@@ -3,26 +3,22 @@ import CollectionSelection from "./InputSelect/CollectionSelection";
import TagSelection from "./InputSelect/TagSelection";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
interface NewLink {
name: string;
url: string;
tags: string[];
collectionId:
| {
id: string | number;
isNew: boolean | undefined;
}
| object;
}
import { useRouter } from "next/router";
import { NewLink } from "@/types/global";
import useLinkSlice from "@/store/links";
export default function () {
const router = useRouter();
const [newLink, setNewLink] = useState<NewLink>({
name: "",
url: "",
tags: [],
collectionId: {},
collectionId: { id: Number(router.query.id) },
});
const { addLink } = useLinkSlice();
const setTags = (e: any) => {
const tagNames = e.map((e: any) => {
return e.label;
@@ -54,7 +50,7 @@ export default function () {
};
return (
<div className="border-sky-100 border-solid border rounded-md shadow-lg p-5 bg-white flex flex-col gap-3">
<div className="slide-up border-sky-100 border-solid border rounded-md shadow-lg p-5 bg-white flex flex-col gap-3">
<p className="font-bold text-sky-300 mb-2 text-center">New Link</p>
<div className="flex gap-5 items-center justify-between">
@@ -64,8 +60,7 @@ export default function () {
onChange={(e) => setNewLink({ ...newLink, name: e.target.value })}
type="text"
placeholder="e.g. Example Link"
className="w-60 rounded p-2 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
autoFocus
className="w-60 rounded p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
/>
</div>
@@ -76,7 +71,7 @@ export default function () {
onChange={(e) => setNewLink({ ...newLink, url: e.target.value })}
type="text"
placeholder="e.g. http://example.com/"
className="w-60 rounded p-2 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
className="w-60 rounded p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
/>
</div>
@@ -92,7 +87,7 @@ export default function () {
<div
className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
onClick={() => postLink()}
onClick={() => addLink(newLink)}
>
<FontAwesomeIcon icon={faPlus} className="h-5" />
Add Link
components/ClickAwayHandler.tsx
-2
View File
@@ -19,10 +19,8 @@ function useOutsideAlerter(
onClickOutside();
}
}
// Bind the event listener
document.addEventListener("mouseup", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mouseup", handleClickOutside);
};
}, [ref, onClickOutside]);
components/CollectionCard.tsx
+9 -6
View File
@@ -1,6 +1,7 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
import { Collection } from "@prisma/client";
import Link from "next/link";
export default function ({ collection }: { collection: Collection }) {
const formattedDate = new Date(collection.createdAt).toLocaleString("en-US", {
@@ -10,12 +11,14 @@ export default function ({ collection }: { collection: Collection }) {
});
return (
<div className="p-5 bg-gray-100 m-2 h-40 w-60 rounded border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:bg-gray-50 duration-100">
<div className="flex justify-between text-sky-900 items-center">
<p className="text-lg w-max">{collection.name}</p>
<FontAwesomeIcon icon={faChevronRight} className="w-3" />
<Link href={`/collections/${collection.id}`}>
<div className="p-5 bg-gray-100 m-2 h-40 w-60 rounded border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:bg-gray-50 duration-100">
<div className="flex justify-between text-sky-900 items-center">
<p className="text-lg w-max">{collection.name}</p>
<FontAwesomeIcon icon={faChevronRight} className="w-3" />
</div>
<p className="text-sm text-sky-300 font-bold">{formattedDate}</p>
</div>
<p className="text-sm text-sky-300 font-bold">{formattedDate}</p>
</div>
</Link>
);
}
components/InputSelect/CollectionSelection.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import useCollectionSlice from "@/store/collection";
import useCollectionSlice from "@/store/collections";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import CreatableSelect from "react-select/creatable";
components/LinkList.tsx
+23
View File
@@ -0,0 +1,23 @@
import { LinkAndTags } from "@/types/global";
export default function ({
link,
count,
}: {
link: LinkAndTags;
count: number;
}) {
return (
<div className="border border-sky-100 mb-5 bg-gray-100 p-5 rounded">
<div className="flex items-baseline gap-1">
<p className="text-sm text-sky-600">{count + 1}.</p>
<p className="text-lg text-sky-500">{link.name}</p>
</div>
<div className="flex gap-1 items-baseline">
{link.tags.map((e, i) => (
<p key={i}>{e.name}</p>
))}
</div>
</div>
);
}
components/Navbar.tsx
+56 -10
View File
@@ -1,22 +1,63 @@
import { signOut } from "next-auth/react";
import { useRouter } from "next/router";
import useCollectionSlice from "@/store/collection";
import { Collection } from "@prisma/client";
import useCollectionSlice from "@/store/collections";
import { Collection, Tag } from "@prisma/client";
import ClickAwayHandler from "./ClickAwayHandler";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
import { useState } from "react";
import {
faPlus,
faFolder,
faBox,
faTag,
faBookmark,
faMagnifyingGlass,
IconDefinition,
} from "@fortawesome/free-solid-svg-icons";
import { useEffect, useState } from "react";
import AddLinkModal from "./AddLinkModal";
import useTagSlice from "@/store/tags";
export default function () {
const router = useRouter();
const collectionId = router.query.id;
const [pageName, setPageName] = useState<string | null>("");
const [pageIcon, setPageIcon] = useState<IconDefinition | null>(null);
const { collections } = useCollectionSlice();
const { tags } = useTagSlice();
const activeCollection: Collection | undefined = collections.find(
(e) => e.id.toString() == collectionId
);
useEffect(() => {
if (router.route === "/collections/[id]") {
const collectionId = router.query.id;
const activeCollection: Collection | undefined = collections.find(
(e) => e.id.toString() == collectionId
);
if (activeCollection) {
setPageName(activeCollection?.name);
}
setPageIcon(faFolder);
} else if (router.route === "/tags/[id]") {
const tagId = router.query.id;
const activeTag: Tag | undefined = tags.find(
(e) => e.id.toString() == tagId
);
if (activeTag) {
setPageName(activeTag?.name);
}
setPageIcon(faTag);
} else if (router.route === "/collections") {
setPageName("All Collections");
setPageIcon(faBox);
} else if (router.route === "/links") {
setPageName("All Links");
setPageIcon(faBookmark);
}
}, [router, collections, tags]);
const [collectionInput, setCollectionInput] = useState(false);
@@ -26,7 +67,12 @@ export default function () {
return (
<div className="flex justify-between items-center p-5 border-solid border-b-sky-100 border border-l-white">
<p>{activeCollection?.name}</p>
<div className="text-sky-900 rounded my-1 flex items-center gap-2 font-bold">
{pageIcon ? (
<FontAwesomeIcon icon={pageIcon} className="w-4 text-sky-300" />
) : null}
<p>{pageName}</p>
</div>
<div className="flex items-center gap-3">
<FontAwesomeIcon
icon={faPlus}
@@ -45,7 +91,7 @@ export default function () {
</div>
{collectionInput ? (
<div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center">
<div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in">
<ClickAwayHandler
onClickOutside={toggleCollectionInput}
className="w-fit mx-auto"
components/Sidebar/SidebarItem.tsx
+10 -15
View File
@@ -1,26 +1,21 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Collection } from "@prisma/client";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { MouseEventHandler } from "react";
interface TextObject {
name: string;
}
import Link from "next/link";
interface SidebarItemProps {
item: Collection | TextObject;
text: string;
icon: IconProp;
onClick?: MouseEventHandler;
path: string;
}
export default function ({ item, icon, onClick }: SidebarItemProps) {
export default function ({ text, icon, path }: SidebarItemProps) {
return (
<div
onClick={onClick}
className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2"
>
<FontAwesomeIcon icon={icon} className="w-4 text-sky-300" />
<p>{item.name}</p>
</div>
<Link href={path}>
<div className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
<FontAwesomeIcon icon={icon} className="w-4 text-sky-300" />
<p>{text}</p>
</div>
</Link>
);
}
components/Sidebar/index.tsx
+32 -7
View File
@@ -1,19 +1,20 @@
import { useSession } from "next-auth/react";
import ClickAwayHandler from "@/components/ClickAwayHandler";
import { useState } from "react";
import useCollectionSlice from "@/store/collection";
import useCollectionSlice from "@/store/collections";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUserCircle } from "@fortawesome/free-regular-svg-icons";
import {
faPlus,
faChevronDown,
faFolder,
faBoxesStacked,
faHashtag,
faBox,
faTag,
faBookmark,
} from "@fortawesome/free-solid-svg-icons";
import SidebarItem from "./SidebarItem";
import useTagSlice from "@/store/tags";
import Link from "next/link";
export default function () {
const { data: session } = useSession();
@@ -51,9 +52,19 @@ export default function () {
</div>
</div>
<SidebarItem item={{ name: "All Links" }} icon={faBookmark} />
<Link href="links">
<div className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
<FontAwesomeIcon icon={faBookmark} className="w-4 text-sky-300" />
<p>All Links</p>
</div>
</Link>
<SidebarItem item={{ name: "All Collections" }} icon={faBoxesStacked} />
<Link href="/collections">
<div className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
<FontAwesomeIcon icon={faBox} className="w-4 text-sky-300" />
<p>All Collections</p>
</div>
</Link>
<div className="text-gray-500 flex items-center justify-between mt-5">
<p className="text-sm p-3">Collections</p>
@@ -80,7 +91,14 @@ export default function () {
</div>
<div>
{collections.map((e, i) => {
return <SidebarItem key={i} item={e} icon={faFolder} />;
return (
<SidebarItem
key={i}
text={e.name}
icon={faFolder}
path={`/collections/${e.id}`}
/>
);
})}
</div>
<div className="text-gray-500 flex items-center justify-between mt-5">
@@ -88,7 +106,14 @@ export default function () {
</div>
<div>
{tags.map((e, i) => {
return <SidebarItem key={i} item={e} icon={faHashtag} />;
return (
<SidebarItem
key={i}
text={e.name}
icon={faTag}
path={`/tags/${e.id}`}
/>
);
})}
</div>
</div>