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

added recent links to dashboard

Browse Source
This commit is contained in:
daniel31x13
2023-10-23 10:45:48 -04:00
parent 697b139493
commit 4252b79586
19 changed files with 461 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/api/v1/dashboard/index.ts
+27
View File
@@ -0,0 +1,27 @@
import type { NextApiRequest, NextApiResponse } from "next";
import { getServerSession } from "next-auth/next";
import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
import { LinkRequestQuery } from "@/types/global";
import getDashboardData from "@/lib/api/controllers/dashboard/getDashboardData";
export default async function links(req: NextApiRequest, res: NextApiResponse) {
const session = await getServerSession(req, res, authOptions);
if (!session?.user?.id) {
return res.status(401).json({ response: "You must be logged in." });
} else if (session?.user?.isSubscriber === false)
res.status(401).json({
response:
"You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
});
if (req.method === "GET") {
const convertedData: LinkRequestQuery = {
sort: Number(req.query.sort as string),
cursor: req.query.cursor ? Number(req.query.cursor as string) : undefined,
};
const links = await getDashboardData(session.user.id, convertedData);
return res.status(links.status).json({ response: links.response });
}
}
pages/api/v1/links/index.ts
+23 -1
View File
@@ -3,6 +3,7 @@ import { getServerSession } from "next-auth/next";
import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
import getLinks from "@/lib/api/controllers/links/getLinks";
import postLink from "@/lib/api/controllers/links/postLink";
import { LinkRequestQuery } from "@/types/global";
export default async function links(req: NextApiRequest, res: NextApiResponse) {
const session = await getServerSession(req, res, authOptions);
@@ -16,7 +17,28 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
});
if (req.method === "GET") {
const links = await getLinks(session.user.id, req?.query?.body as string);
// Convert the type of the request query to "LinkRequestQuery"
const convertedData: LinkRequestQuery = {
sort: Number(req.query.sort as string),
cursor: req.query.cursor ? Number(req.query.cursor as string) : undefined,
collectionId: req.query.collectionId
? Number(req.query.collectionId as string)
: undefined,
tagId: req.query.tagId ? Number(req.query.tagId as string) : undefined,
pinnedOnly: req.query.pinnedOnly
? req.query.pinnedOnly === "true"
: undefined,
searchQueryString: req.query.searchQueryString
? (req.query.searchQueryString as string)
: undefined,
searchByName: req.query.searchByName === "true" ? true : undefined,
searchByUrl: req.query.searchByUrl === "true" ? true : undefined,
searchByDescription:
req.query.searchByDescription === "true" ? true : undefined,
searchByTags: req.query.searchByTags === "true" ? true : undefined,
};
const links = await getLinks(session.user.id, convertedData);
return res.status(links.status).json({ response: links.response });
} else if (req.method === "POST") {
const newlink = await postLink(req.body, session.user.id);
pages/collections/[id].tsx
+1 -1
View File
@@ -52,7 +52,7 @@ export default function Index() {
return (
<MainLayout>
<div className="p-5 flex flex-col gap-5 w-full">
<div className="p-5 flex flex-col gap-5 w-full h-full">
<div
style={{
backgroundImage: `linear-gradient(-45deg, ${
pages/dashboard.tsx
+211 -1
View File
@@ -2,6 +2,9 @@ import useCollectionStore from "@/store/collections";
import {
faChartSimple,
faChevronDown,
faChevronRight,
faClockRotateLeft,
faFileImport,
faThumbTack,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -11,14 +14,26 @@ import useTagStore from "@/store/tags";
import LinkCard from "@/components/LinkCard";
import { useEffect, useState } from "react";
import useLinks from "@/hooks/useLinks";
import Link from "next/link";
import useWindowDimensions from "@/hooks/useWindowDimensions";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import React from "react";
import useModalStore from "@/store/modals";
import { toast } from "react-hot-toast";
import { MigrationFormat, MigrationRequest } from "@/types/global";
import ClickAwayHandler from "@/components/ClickAwayHandler";
export default function Dashboard() {
const { collections } = useCollectionStore();
const { links } = useLinkStore();
const { tags } = useTagStore();
const { setModal } = useModalStore();
const [numberOfLinks, setNumberOfLinks] = useState(0);
const [showRecents, setShowRecents] = useState(3);
const [linkPinDisclosure, setLinkPinDisclosure] = useState<boolean>(() => {
const storedValue =
typeof window !== "undefined" &&
@@ -45,6 +60,61 @@ export default function Dashboard() {
);
}, [linkPinDisclosure]);
const handleNumberOfRecents = () => {
if (window.innerWidth > 1550) {
setShowRecents(6);
} else if (window.innerWidth > 1295) {
setShowRecents(4);
} else setShowRecents(3);
};
const { width } = useWindowDimensions();
useEffect(() => {
handleNumberOfRecents();
}, [width]);
const [importDropdown, setImportDropdown] = useState(false);
const importBookmarks = async (e: any, format: MigrationFormat) => {
const file: File = e.target.files[0];
if (file) {
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = async function (e) {
const load = toast.loading("Importing...");
const request: string = e.target?.result as string;
const body: MigrationRequest = {
format,
data: request,
};
const response = await fetch("/api/v1/migration", {
method: "POST",
body: JSON.stringify(body),
});
const data = await response.json();
toast.dismiss(load);
toast.success("Imported the Bookmarks! Reloading the page...");
setImportDropdown(false);
setTimeout(() => {
location.reload();
}, 2000);
};
reader.onerror = function (e) {
console.log("Error:", e);
};
}
};
return (
<MainLayout>
<div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
@@ -89,6 +159,146 @@ export default function Dashboard() {
</div>
</div>
<div className="flex justify-between items-center">
<div className="flex gap-2 items-center">
<FontAwesomeIcon
icon={faClockRotateLeft}
className="w-5 h-5 text-sky-500 dark:text-sky-500 drop-shadow"
/>
<p className="text-2xl text-black dark:text-white">
Recently Added Links
</p>
</div>
<Link
href="/links"
className="text-black dark:text-white flex items-center gap-2 cursor-pointer"
>
View All
<FontAwesomeIcon
icon={faChevronRight}
className={`w-4 h-4 text-black dark:text-white`}
/>
</Link>
</div>
<div
style={{ flex: "0 1 auto" }}
className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
>
{links[0] ? (
<div className="w-full">
<div
className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
>
{links.slice(0, showRecents).map((e, i) => (
<LinkCard key={i} link={e} count={i} />
))}
</div>
</div>
) : (
<div
style={{ flex: "1 1 auto" }}
className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
>
<p className="text-center text-2xl text-black dark:text-white">
View Your Recently Added Links Here!
</p>
<p className="text-center mx-auto max-w-96 w-fit text-gray-500 dark:text-gray-300 text-sm mt-2">
This section will view your latest added Links across every
Collections you have access to.
</p>
<div className="text-center text-black dark:text-white w-full mt-4 flex flex-wrap gap-4 justify-center">
<div
onClick={() => {
setModal({
modal: "LINK",
state: true,
method: "CREATE",
});
}}
className="inline-flex gap-1 relative w-[11.4rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-md dark:hover:bg-sky-600 text-white bg-sky-700 hover:bg-sky-600 duration-100 group"
>
<FontAwesomeIcon
icon={faPlus}
className="w-5 h-5 group-hover:ml-[4.325rem] absolute duration-100"
/>
<span className="group-hover:opacity-0 text-right w-full duration-100">
Create New Link
</span>
</div>
<div className="relative">
<div
onClick={() => setImportDropdown(!importDropdown)}
id="import-dropdown"
className="flex gap-2 select-none text-sm cursor-pointer p-2 px-3 rounded-md border dark:hover:border-sky-600 text-black border-black dark:text-white dark:border-white hover:border-sky-500 hover:dark:border-sky-500 hover:text-sky-500 hover:dark:text-sky-500 duration-100 group"
>
<FontAwesomeIcon
icon={faFileImport}
className="w-5 h-5 duration-100"
id="import-dropdown"
/>
<span
className="text-right w-full duration-100"
id="import-dropdown"
>
Import Your Bookmarks
</span>
</div>
{importDropdown ? (
<ClickAwayHandler
onClickOutside={(e: Event) => {
const target = e.target as HTMLInputElement;
if (target.id !== "import-dropdown")
setImportDropdown(false);
}}
className={`absolute text-black dark:text-white top-10 left-0 w-52 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
>
<div className="cursor-pointer rounded-md">
<label
htmlFor="import-linkwarden-file"
title="JSON File"
className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 cursor-pointer"
>
Linkwarden...
<input
type="file"
name="photo"
id="import-linkwarden-file"
accept=".json"
className="hidden"
onChange={(e) =>
importBookmarks(e, MigrationFormat.linkwarden)
}
/>
</label>
<label
htmlFor="import-html-file"
title="HTML File"
className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 cursor-pointer"
>
Bookmarks HTML file...
<input
type="file"
name="photo"
id="import-html-file"
accept=".html"
className="hidden"
onChange={(e) =>
importBookmarks(e, MigrationFormat.htmlFile)
}
/>
</label>
</div>
</ClickAwayHandler>
) : null}
</div>
</div>
</div>
)}
</div>
<div className="flex justify-between items-center">
<div className="flex gap-2 items-center">
<FontAwesomeIcon
@@ -121,7 +331,7 @@ export default function Dashboard() {
<div className="w-full">
<div
className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full ${
linkPinDisclosure ? "h-full" : "h-44"
linkPinDisclosure ? "h-full" : "h-[22rem]"
}`}
>
{links
pages/links.tsx
+2 -2
View File
@@ -19,7 +19,7 @@ export default function Links() {
return (
<MainLayout>
<div className="p-5 flex flex-col gap-5 w-full">
<div className="p-5 flex flex-col gap-5 w-full h-full">
<div className="flex gap-3 justify-between items-center">
<div className="flex gap-2">
<FontAwesomeIcon
@@ -60,7 +60,7 @@ export default function Links() {
})}
</div>
) : (
<NoLinksFound />
<NoLinksFound text="You Haven't Created Any Links Yet" />
)}
</div>
</MainLayout>
pages/search/[query].tsx
+7 -4
View File
@@ -4,7 +4,7 @@ import SortDropdown from "@/components/SortDropdown";
import useLinks from "@/hooks/useLinks";
import MainLayout from "@/layouts/MainLayout";
import useLinkStore from "@/store/links";
import { LinkSearchFilter, Sort } from "@/types/global";
import { Sort } from "@/types/global";
import { faFilter, faSearch, faSort } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useRouter } from "next/router";
@@ -15,7 +15,7 @@ export default function Links() {
const router = useRouter();
const [searchFilter, setSearchFilter] = useState<LinkSearchFilter>({
const [searchFilter, setSearchFilter] = useState({
name: true,
url: true,
description: true,
@@ -27,9 +27,12 @@ export default function Links() {
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
useLinks({
searchFilter: searchFilter,
searchQuery: router.query.query as string,
sort: sortBy,
searchQueryString: router.query.query as string,
searchByName: searchFilter.name,
searchByUrl: searchFilter.url,
searchByDescription: searchFilter.description,
searchByTags: searchFilter.tags,
});
return (
pages/settings/account.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { useState, useEffect } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClose, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
import { faClose } from "@fortawesome/free-solid-svg-icons";
import useAccountStore from "@/store/account";
import { AccountSettings } from "@/types/global";
import { toast } from "react-hot-toast";
@@ -269,7 +269,7 @@ export default function Account() {
Import your data from other platforms.
</p>
<div
onClick={() => setImportDropdown(true)}
onClick={() => setImportDropdown(!importDropdown)}
className="w-fit relative"
id="import-dropdown"
>
@@ -286,7 +286,7 @@ export default function Account() {
if (target.id !== "import-dropdown")
setImportDropdown(false);
}}
className={`absolute top-7 left-0 w-48 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
className={`absolute top-7 left-0 w-52 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
>
<div className="cursor-pointer rounded-md">
<label