Merge pull request #74 from linkwarden/dev

Dev
This commit is contained in:
Daniel 2023-07-24 23:33:26 -04:00 committed by GitHub
commit 1f0a952a63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 77 additions and 46 deletions

View File

@ -2,7 +2,11 @@ import {
CollectionIncludingMembersAndLinkCount,
LinkIncludingShortenedCollectionAndTags,
} from "@/types/global";
import { faFolder, faEllipsis } from "@fortawesome/free-solid-svg-icons";
import {
faFolder,
faEllipsis,
faLink,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useEffect, useState } from "react";
import Image from "next/image";
@ -31,8 +35,18 @@ export default function LinkCard({ link, count, className }: Props) {
const { collections } = useCollectionStore();
const { links } = useLinkStore();
const { account } = useAccountStore();
let shortendURL;
try {
shortendURL = new URL(link.url).host.toLowerCase();
} catch (error) {
console.log(error);
}
const [collection, setCollection] =
useState<CollectionIncludingMembersAndLinkCount>(
collections.find(
@ -46,7 +60,7 @@ export default function LinkCard({ link, count, className }: Props) {
(e) => e.id === link.collection.id
) as CollectionIncludingMembersAndLinkCount
);
}, [collections]);
}, [collections, links]);
const { removeLink, updateLink } = useLinkStore();
@ -144,7 +158,7 @@ export default function LinkCard({ link, count, className }: Props) {
<div className="flex items-baseline gap-1">
<p className="text-sm text-sky-500 font-bold">{count + 1}.</p>
<p className="text-lg text-sky-700 font-bold truncate capitalize w-full pr-8">
{link.name}
{link.name || link.description}
</p>
</div>
<div className="flex gap-3 items-center my-3">
@ -159,6 +173,10 @@ export default function LinkCard({ link, count, className }: Props) {
</p>
</div>
</div>
<div className="flex items-center gap-1 w-full pr-20 text-gray-500">
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
<p className="truncate w-full">{shortendURL}</p>
</div>
<div className="flex items-center gap-1 text-gray-500">
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
<p>{formattedDate}</p>

View File

@ -11,6 +11,7 @@ import useCollectionStore from "@/store/collections";
import { useRouter } from "next/router";
import SubmitButton from "../../SubmitButton";
import { toast } from "react-hot-toast";
import Link from "next/link";
type Props =
| {
@ -70,8 +71,6 @@ export default function AddOrEditLink({
}
}, []);
// const shortendURL = method === "UPDATE" ? new URL(link.url).host.toLowerCase() : undefined;
const setTags = (e: any) => {
const tagNames = e.map((e: any) => {
return { name: e.label };
@ -119,29 +118,16 @@ export default function AddOrEditLink({
className="text-gray-500 my-2 text-center truncate w-full"
title={link.url}
>
Edit <span className="underline">{link.url}</span>
<Link href={link.url} target="_blank" className=" font-bold">
{link.url}
</Link>
</p>
) : null}
<div className="grid sm:grid-cols-2 gap-3">
<div>
<p className="text-sm text-sky-700 mb-2">
Name
<RequiredBadge />
</p>
<input
value={link.name}
onChange={(e) => setLink({ ...link, name: e.target.value })}
type="text"
placeholder="e.g. Example Link"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
{method === "CREATE" ? (
<div>
<p className="text-sm text-sky-700 mb-2">
URL
<p className="text-sm text-sky-700 mb-2 font-bold">
Address (URL)
<RequiredBadge />
</p>
<input
@ -153,7 +139,8 @@ export default function AddOrEditLink({
/>
</div>
) : null}
<hr />
<div className="grid sm:grid-cols-2 gap-3">
<div>
<p className="text-sm text-sky-700 mb-2">Collection</p>
<CollectionSelection
@ -173,7 +160,7 @@ export default function AddOrEditLink({
/>
</div>
<div className={method === "UPDATE" ? "sm:col-span-2" : ""}>
<div>
<p className="text-sm text-sky-700 mb-2">Tags</p>
<TagSelection
onChange={setTags}
@ -182,6 +169,18 @@ export default function AddOrEditLink({
})}
/>
</div>
<div className="sm:col-span-2">
<p className="text-sm text-sky-700 mb-2">Name</p>
<input
value={link.name}
onChange={(e) => setLink({ ...link, name: e.target.value })}
type="text"
placeholder="e.g. Example Link"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
<div className="sm:col-span-2">
<p className="text-sm text-sky-700 mb-2">Description</p>
<textarea

View File

@ -150,7 +150,7 @@ export default function LinkDetails({ link }: Props) {
}}
/>
)}
<div className="flex flex-col gap- justify-end drop-shadow">
<div className="flex flex-col min-h-[3rem] justify-end drop-shadow">
<p className="text-2xl text-sky-700 capitalize break-words hyphens-auto">
{link.name}
</p>

View File

@ -12,7 +12,7 @@ export default async function archive(
const page = await context.newPage();
try {
await page.goto(url, { waitUntil: "domcontentloaded", timeout: 300000 });
await page.goto(url, { waitUntil: "domcontentloaded" });
await autoScroll(page);
@ -53,7 +53,13 @@ export default async function archive(
const autoScroll = async (page: Page) => {
await page.evaluate(async () => {
await new Promise<void>((resolve, reject) => {
const timeoutPromise = new Promise<void>((_, reject) => {
setTimeout(() => {
reject(new Error("Auto scroll took too long (more than 20 seconds)."));
}, 20000);
});
const scrollingPromise = new Promise<void>((resolve) => {
let totalHeight = 0;
let distance = 100;
let scrollDown = setInterval(() => {
@ -68,6 +74,6 @@ const autoScroll = async (page: Page) => {
}, 100);
});
await new Promise((r) => setTimeout(r, 2000));
await Promise.race([scrollingPromise, timeoutPromise]);
});
};

View File

@ -37,7 +37,7 @@ export default async function postCollection(
id: userId,
},
},
name: collection.name,
name: collection.name.trim(),
description: collection.description,
color: collection.color,
members: {

View File

@ -37,7 +37,7 @@ export default async function updateCollection(
},
data: {
name: collection.name,
name: collection.name.trim(),
description: collection.description,
color: collection.color,
isPublic: collection.isPublic,

View File

@ -10,11 +10,19 @@ export default async function postLink(
link: LinkIncludingShortenedCollectionAndTags,
userId: number
) {
try {
new URL(link.url);
} catch (error) {
return {
response:
"Please enter a valid Address for the Link. (It should start with http/https)",
status: 400,
};
}
link.collection.name = link.collection.name.trim();
if (!link.name) {
return { response: "Please enter a valid name for the link.", status: 400 };
} else if (!link.collection.name) {
if (!link.collection.name) {
link.collection.name = "Unnamed Collection";
}
@ -45,8 +53,8 @@ export default async function postLink(
const newLink: Link = await prisma.link.create({
data: {
name: link.name,
url: link.url,
name: link.name,
description,
collection: {
connectOrCreate: {
@ -57,7 +65,7 @@ export default async function postLink(
},
},
create: {
name: link.collection.name,
name: link.collection.name.trim(),
ownerId: userId,
},
},
@ -66,12 +74,12 @@ export default async function postLink(
connectOrCreate: link.tags.map((tag) => ({
where: {
name_ownerId: {
name: tag.name,
name: tag.name.trim(),
ownerId: link.collection.ownerId,
},
},
create: {
name: tag.name,
name: tag.name.trim(),
owner: {
connect: {
id: link.collection.ownerId,

View File

@ -5,7 +5,7 @@ export default async function getTitle(url: string) {
// regular expression to find the <title> tag
let match = text.match(/<title.*>([^<]*)<\/title>/);
if (match) return match[1] + " [AUTO GENERATED]";
if (match) return match[1];
else return "";
} catch (err) {
console.log(err);

View File

@ -236,7 +236,7 @@ export default function Index() {
</div>
</div>
{links[0] ? (
<div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
<div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
{links
.filter((e) => e.collectionId === Number(router.query.id))
.map((e, i) => {

View File

@ -66,7 +66,7 @@ export default function Index() {
) : null}
</div>
</div>
<div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
<div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
{links
.filter((e) => e.tags.some((e) => e.id === Number(router.query.id)))
.map((e, i) => {