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

major bug fixed + error handling

Browse Source
This commit is contained in:
Daniel
2023-06-27 03:05:12 +03:30
parent f1bd48be83
commit 92f6ee3942
10 changed files with 122 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/LinkCard.tsx
+17 -13
View File
@@ -14,6 +14,7 @@ import useModalStore from "@/store/modals";
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
import usePermissions from "@/hooks/usePermissions";
import { toast } from "react-hot-toast";
import isValidUrl from "@/lib/client/isValidUrl";
type Props = {
link: LinkIncludingShortenedCollectionAndTags;
@@ -78,7 +79,8 @@ export default function LinkCard({ link, count, className }: Props) {
setExpandDropdown(false);
};
const url = new URL(link.url);
const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
const formattedDate = new Date(link.createdAt as string).toLocaleString(
"en-US",
{
@@ -122,18 +124,20 @@ export default function LinkCard({ link, count, className }: Props) {
}}
className="flex items-start gap-5 sm:gap-10 h-full w-full p-5"
>
<Image
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
width={64}
height={64}
alt=""
className="blur-sm absolute w-16 group-hover:opacity-80 duration-100 rounded-md bottom-5 right-5 opacity-60 select-none"
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
target.style.opacity = "0";
}}
/>
{url && (
<Image
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
width={64}
height={64}
alt=""
className="blur-sm absolute w-16 group-hover:opacity-80 duration-100 rounded-md bottom-5 right-5 opacity-60 select-none"
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
target.style.display = "none";
}}
/>
)}
<div className="flex justify-between gap-5 w-full h-full z-0">
<div className="flex flex-col justify-between w-full">
components/Modal/Link/EditLink.tsx → components/Modal/Link/AddOrEditLink.tsx
+2 -3
View File
@@ -24,7 +24,7 @@ type Props =
activeLink: LinkIncludingShortenedCollectionAndTags;
};
export default function EditLink({
export default function AddOrEditLink({
toggleLinkModal,
method,
activeLink,
@@ -70,8 +70,7 @@ export default function EditLink({
}
}, []);
const shortendURL =
method === "UPDATE" ? new URL(link.url).host.toLowerCase() : undefined;
// const shortendURL = method === "UPDATE" ? new URL(link.url).host.toLowerCase() : undefined;
const setTags = (e: any) => {
const tagNames = e.map((e: any) => {
components/Modal/Link/LinkDetails.tsx
+4 -3
View File
@@ -19,6 +19,7 @@ import {
faFileImage,
faFilePdf,
} from "@fortawesome/free-regular-svg-icons";
import isValidUrl from "@/lib/client/isValidUrl";
type Props = {
link: LinkIncludingShortenedCollectionAndTags;
@@ -56,7 +57,7 @@ export default function LinkDetails({ link }: Props) {
const colorThief = new ColorThief();
const url = new URL(link.url);
const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
const rgbToHex = (r: number, g: number, b: number): string =>
"#" +
@@ -123,7 +124,7 @@ export default function LinkDetails({ link }: Props) {
<div
className={`relative flex gap-5 items-start ${!imageError && "-mt-24"}`}
>
{!imageError && (
{!imageError && url && (
<Image
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
width={42}
@@ -160,7 +161,7 @@ export default function LinkDetails({ link }: Props) {
rel="noreferrer"
className="text-sm text-gray-500 break-all hover:underline cursor-pointer w-fit"
>
{url.host}
{url ? url.host : link.url}
</Link>
</div>
</div>
components/Modal/Link/index.tsx
+6 -3
View File
@@ -1,6 +1,6 @@
import { Tab } from "@headlessui/react";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
import EditLink from "./EditLink";
import AddOrEditLink from "./AddOrEditLink";
import LinkDetails from "./LinkDetails";
type Props =
@@ -72,13 +72,16 @@ export default function LinkModal({
<Tab.Panel>
{activeLink && method === "UPDATE" ? (
<EditLink
<AddOrEditLink
toggleLinkModal={toggleLinkModal}
method="UPDATE"
activeLink={activeLink}
/>
) : (
<EditLink toggleLinkModal={toggleLinkModal} method="CREATE" />
<AddOrEditLink
toggleLinkModal={toggleLinkModal}
method="CREATE"
/>
)}
</Tab.Panel>
</Tab.Panels>
components/PublicPage/LinkCard.tsx
+32 -26
View File
@@ -2,6 +2,7 @@ import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Image from "next/image";
import { Link as LinkType, Tag } from "@prisma/client";
import isValidUrl from "@/lib/client/isValidUrl";
interface LinksIncludingTags extends LinkType {
tags: Tag[];
@@ -13,7 +14,8 @@ type Props = {
};
export default function LinkCard({ link, count }: Props) {
const url = new URL(link.url);
const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
const formattedDate = new Date(
link.createdAt as unknown as string
).toLocaleString("en-US", {
@@ -25,30 +27,34 @@ export default function LinkCard({ link, count }: Props) {
return (
<a href={link.url} target="_blank" rel="noreferrer" className="rounded-3xl">
<div className="bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-md sm:hover:shadow-none duration-100 rounded-3xl cursor-pointer p-5 flex items-start relative gap-5 sm:gap-10 group/item">
<Image
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
width={42}
height={42}
alt=""
className="select-none mt-3 z-10 rounded-full shadow border-[3px] border-white bg-white"
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
target.style.opacity = "0";
}}
/>
<Image
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
width={80}
height={80}
alt=""
className="blur-sm absolute left-2 opacity-40 select-none hidden sm:block"
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
target.style.opacity = "0";
}}
/>
{url && (
<>
<Image
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
width={42}
height={42}
alt=""
className="select-none mt-3 z-10 rounded-full shadow border-[3px] border-white bg-white"
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
target.style.display = "none";
}}
/>
<Image
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
width={80}
height={80}
alt=""
className="blur-sm absolute left-2 opacity-40 select-none hidden sm:block"
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
target.style.display = "none";
}}
/>
</>
)}
<div className="flex justify-between items-center gap-5 w-full h-full z-0">
<div className="flex flex-col justify-between">
<div className="flex items-baseline gap-1">
@@ -74,7 +80,7 @@ export default function LinkCard({ link, count }: Props) {
<div className="flex gap-2 items-center flex-wrap mt-2">
<p className="text-gray-500">{formattedDate}</p>
<div className="text-sky-400 font-bold flex items-center gap-1">
<p>{url.host}</p>
<p>{url ? url.host : link.url}</p>
</div>
</div>
</div>