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

remove fontawesome package

Browse Source
This commit is contained in:
Yee Jia Wei
2023-12-18 06:28:42 +08:00
parent e1f036adb2
commit e9acb548bf
16 changed files with 19 additions and 612 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/LinkPreview.tsx
-110
View File
@@ -1,110 +0,0 @@
import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Image from "next/image";
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
import isValidUrl from "@/lib/shared/isValidUrl";
import A from "next/link";
import unescapeString from "@/lib/client/unescapeString";
import { Link } from "@prisma/client";
type Props = {
link?: Partial<Link>;
className?: string;
settings: {
blurredFavicons: boolean;
displayLinkIcons: boolean;
};
};
export default function LinkPreview({ link, className, settings }: Props) {
if (!link) {
link = {
name: "Linkwarden",
url: "https://linkwarden.app",
createdAt: Date.now() as unknown as Date,
};
}
let shortendURL;
try {
shortendURL = new URL(link.url as string).host.toLowerCase();
} catch (error) {
console.log(error);
}
const url = isValidUrl(link.url as string)
? new URL(link.url as string)
: undefined;
const formattedDate = new Date(link.createdAt as Date).toLocaleString(
"en-US",
{
year: "numeric",
month: "short",
day: "numeric",
}
);
return (
<>
<div
className={`h-fit border border-solid border-neutral-content bg-base-200 shadow hover:shadow-none duration-100 rounded-2xl relative group ${
className || ""
}`}
>
<div className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5">
{url && settings?.displayLinkIcons && (
<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={`${
settings.blurredFavicons ? "blur-sm " : ""
}absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl 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">
<div className="flex items-baseline gap-1">
<p className="text-sm text-neutral">{1}</p>
<p className="text-lg truncate capitalize w-full pr-8">
{unescapeString(link.name as string)}
</p>
</div>
<div className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100">
<FontAwesomeIcon
icon={faFolder}
className="w-4 h-4 mt-1 drop-shadow text-primary"
/>
<p className="truncate capitalize w-full">Landing Pages ⚡️</p>
</div>
<A
href={link.url as string}
target="_blank"
onClick={(e) => {
e.stopPropagation();
}}
className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
>
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
<p className="truncate w-full">{shortendURL}</p>
</A>
<div className="flex items-center gap-1 text-neutral">
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
<p>{formattedDate}</p>
</div>
</div>
</div>
</div>
</div>
</>
);
}
components/LinkSidebar.tsx
-129
View File
@@ -1,129 +0,0 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faPen,
faBoxesStacked,
faTrashCan,
} from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import useModalStore from "@/store/modals";
import useLinkStore from "@/store/links";
import {
CollectionIncludingMembersAndLinkCount,
LinkIncludingShortenedCollectionAndTags,
} from "@/types/global";
import { useSession } from "next-auth/react";
import useCollectionStore from "@/store/collections";
type Props = {
className?: string;
onClick?: Function;
};
export default function LinkSidebar({ className, onClick }: Props) {
const session = useSession();
const userId = session.data?.user.id;
const { setModal } = useModalStore();
const { links, removeLink } = useLinkStore();
const { collections } = useCollectionStore();
const [linkCollection, setLinkCollection] =
useState<CollectionIncludingMembersAndLinkCount>();
const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
const router = useRouter();
useEffect(() => {
if (links) setLink(links.find((e) => e.id === Number(router.query.id)));
}, [links]);
useEffect(() => {
if (link)
setLinkCollection(collections.find((e) => e.id === link?.collection?.id));
}, [link]);
return (
<div
className={`bg-base-100 h-full w-64 overflow-y-auto border-solid border border-base-100 border-r-neutral-content p-5 z-20 flex flex-col gap-5 justify-between ${
className || ""
}`}
>
<div className="flex flex-col gap-5">
{link?.collection.ownerId === userId ||
linkCollection?.members.some(
(e) => e.userId === userId && e.canUpdate
) ? (
<div
title="Edit"
onClick={() => {
link
? setModal({
modal: "LINK",
state: true,
active: link,
method: "UPDATE",
})
: undefined;
onClick && onClick();
}}
className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
>
<FontAwesomeIcon icon={faPen} className="w-6 h-6 text-neutral" />
<p className="truncate w-full lg:hidden">Edit</p>
</div>
) : undefined}
<div
onClick={() => {
link
? setModal({
modal: "LINK",
state: true,
active: link,
method: "FORMATS",
})
: undefined;
onClick && onClick();
}}
title="Preserved Formats"
className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
>
<FontAwesomeIcon
icon={faBoxesStacked}
className="w-6 h-6 text-neutral"
/>
<p className="truncate w-full lg:hidden">Preserved Formats</p>
</div>
{link?.collection.ownerId === userId ||
linkCollection?.members.some(
(e) => e.userId === userId && e.canDelete
) ? (
<div
onClick={() => {
if (link?.id) {
removeLink(link.id);
router.back();
onClick && onClick();
}
}}
title="Delete"
className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
>
<FontAwesomeIcon
icon={faTrashCan}
className="w-6 h-6 text-neutral"
/>
<p className="truncate w-full lg:hidden">Delete</p>
</div>
) : undefined}
</div>
</div>
);
}
components/Modal/Collection/CollectionInfo.tsx
+1 -11
View File
@@ -1,14 +1,8 @@
import { Dispatch, SetStateAction, useState } from "react"; import { Dispatch, SetStateAction, useState } from "react";
import {
faFolder,
faPenToSquare,
faPlus,
} from "@fortawesome/free-solid-svg-icons";
import useCollectionStore from "@/store/collections"; import useCollectionStore from "@/store/collections";
import { CollectionIncludingMembersAndLinkCount } from "@/types/global"; import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import SubmitButton from "@/components/SubmitButton"; import SubmitButton from "@/components/SubmitButton";
import { HexColorPicker } from "react-colorful"; import { HexColorPicker } from "react-colorful";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import TextInput from "@/components/TextInput"; import TextInput from "@/components/TextInput";
@@ -73,10 +67,7 @@ export default function CollectionInfo({
<div className="flex flex-col justify-between items-center w-32"> <div className="flex flex-col justify-between items-center w-32">
<p className="w-full mb-2">Color</p> <p className="w-full mb-2">Color</p>
<div style={{ color: collection.color }}> <div style={{ color: collection.color }}>
<FontAwesomeIcon <i className={"bi-folder2"}></i>
icon={faFolder}
className="w-12 h-12 drop-shadow"
/>
</div> </div>
<div <div
className="btn btn-ghost btn-xs" className="btn btn-ghost btn-xs"
@@ -115,7 +106,6 @@ export default function CollectionInfo({
onClick={submit} onClick={submit}
loading={submitLoader} loading={submitLoader}
label={method === "CREATE" ? "Add" : "Save"} label={method === "CREATE" ? "Add" : "Save"}
icon={method === "CREATE" ? faPlus : faPenToSquare}
className="mx-auto mt-2" className="mx-auto mt-2"
/> />
</div> </div>
components/Modal/Collection/DeleteCollection.tsx
+1 -9
View File
@@ -1,9 +1,4 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faRightFromBracket,
faTrashCan,
} from "@fortawesome/free-solid-svg-icons";
import { CollectionIncludingMembersAndLinkCount } from "@/types/global"; import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import useCollectionStore from "@/store/collections"; import useCollectionStore from "@/store/collections";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@@ -111,10 +106,7 @@ export default function DeleteCollection({
}`} }`}
onClick={submit} onClick={submit}
> >
<FontAwesomeIcon <i className={`${ permissions === true ? 'bi-trash' : 'bi-arrow-right'}`}></i>
icon={permissions === true ? faTrashCan : faRightFromBracket}
className="h-5"
/>
{permissions === true ? "Delete" : "Leave"} Collection {permissions === true ? "Delete" : "Leave"} Collection
</div> </div>
</div> </div>
components/Modal/Collection/TeamManagement.tsx
+4 -18
View File
@@ -1,12 +1,4 @@
import { Dispatch, SetStateAction, useEffect, useState } from "react"; import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faClose,
faCrown,
faPenToSquare,
faPlus,
faUserPlus,
} from "@fortawesome/free-solid-svg-icons";
import useCollectionStore from "@/store/collections"; import useCollectionStore from "@/store/collections";
import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global"; import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
import addMemberToCollection from "@/lib/client/addMemberToCollection"; import addMemberToCollection from "@/lib/client/addMemberToCollection";
@@ -173,7 +165,7 @@ export default function TeamManagement({
} }
className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-10 h-10 p-2 rounded-md cursor-pointer" className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-10 h-10 p-2 rounded-md cursor-pointer"
> >
<FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" /> <i className="bi-person-add text-xl"></i>
</div> </div>
</div> </div>
</> </>
@@ -194,9 +186,8 @@ export default function TeamManagement({
className="relative border p-2 rounded-md border-neutral flex flex-col sm:flex-row sm:items-center gap-2 justify-between" className="relative border p-2 rounded-md border-neutral flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
> >
{permissions === true && ( {permissions === true && (
<FontAwesomeIcon <i
icon={faClose} className={"bi-x text-xl absolute right-1 top-1 text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"}
className="absolute right-2 top-2 text-neutral h-4 hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
title="Remove Member" title="Remove Member"
onClick={() => { onClick={() => {
const updatedMembers = collection.members.filter( const updatedMembers = collection.members.filter(
@@ -402,10 +393,6 @@ export default function TeamManagement({
<div> <div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<p className="text-sm font-bold">{collectionOwner.name}</p> <p className="text-sm font-bold">{collectionOwner.name}</p>
<FontAwesomeIcon
icon={faCrown}
className="w-3 h-3 text-yellow-500"
/>
</div> </div>
<p className="text-neutral">@{collectionOwner.username}</p> <p className="text-neutral">@{collectionOwner.username}</p>
</div> </div>
@@ -422,7 +409,6 @@ export default function TeamManagement({
onClick={submit} onClick={submit}
loading={submitLoader} loading={submitLoader}
label={method === "CREATE" ? "Add" : "Save"} label={method === "CREATE" ? "Add" : "Save"}
icon={method === "CREATE" ? faPlus : faPenToSquare}
className="mx-auto mt-2" className="mx-auto mt-2"
/> />
)} )}
components/Modal/Collection/ViewTeam.tsx
-6
View File
@@ -1,6 +1,4 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCrown } from "@fortawesome/free-solid-svg-icons";
import { CollectionIncludingMembersAndLinkCount } from "@/types/global"; import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import ProfilePhoto from "@/components/ProfilePhoto"; import ProfilePhoto from "@/components/ProfilePhoto";
import getPublicUserData from "@/lib/client/getPublicUserData"; import getPublicUserData from "@/lib/client/getPublicUserData";
@@ -45,10 +43,6 @@ export default function ViewTeam({ collection }: Props) {
<div className="flex items-center gap-1 w-full justify-between"> <div className="flex items-center gap-1 w-full justify-between">
<p className="text-sm font-bold">{collectionOwner.name}</p> <p className="text-sm font-bold">{collectionOwner.name}</p>
<div className="flex text-xs gap-1 items-center"> <div className="flex text-xs gap-1 items-center">
<FontAwesomeIcon
icon={faCrown}
className="w-3 h-3 text-yellow-500"
/>
Admin Admin
</div> </div>
</div> </div>
components/Modal/Link/AddOrEditLink.tsx
+1 -5
View File
@@ -2,9 +2,7 @@ import React, { useEffect, useState } from "react";
import CollectionSelection from "@/components/InputSelect/CollectionSelection"; import CollectionSelection from "@/components/InputSelect/CollectionSelection";
import TagSelection from "@/components/InputSelect/TagSelection"; import TagSelection from "@/components/InputSelect/TagSelection";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
import useLinkStore from "@/store/links"; import useLinkStore from "@/store/links";
import { faLink, faPlus } from "@fortawesome/free-solid-svg-icons";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import useCollectionStore from "@/store/collections"; import useCollectionStore from "@/store/collections";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@@ -13,7 +11,6 @@ import { toast } from "react-hot-toast";
import Link from "next/link"; import Link from "next/link";
import TextInput from "@/components/TextInput"; import TextInput from "@/components/TextInput";
import unescapeString from "@/lib/client/unescapeString"; import unescapeString from "@/lib/client/unescapeString";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
type Props = type Props =
| { | {
@@ -142,7 +139,7 @@ export default function AddOrEditLink({
className="text-neutral break-all w-full flex gap-2" className="text-neutral break-all w-full flex gap-2"
title={link.url || ""} title={link.url || ""}
> >
<FontAwesomeIcon icon={faLink} className="w-6 h-6" /> <i className={"bi-link-45deg"}></i>
<Link href={link.url || ""} target="_blank" className="w-full"> <Link href={link.url || ""} target="_blank" className="w-full">
{link.url} {link.url}
</Link> </Link>
@@ -264,7 +261,6 @@ export default function AddOrEditLink({
<SubmitButton <SubmitButton
onClick={submit} onClick={submit}
label={method === "CREATE" ? "Add" : "Save"} label={method === "CREATE" ? "Add" : "Save"}
icon={method === "CREATE" ? faPlus : faPenToSquare}
loading={submitLoader} loading={submitLoader}
className={`${method === "CREATE" ? "" : "mx-auto"}`} className={`${method === "CREATE" ? "" : "mx-auto"}`}
/> />
components/Modal/Link/PreservedFormats.tsx
-28
View File
@@ -4,12 +4,6 @@ import {
} from "@/types/global"; } from "@/types/global";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faArrowUpRightFromSquare,
faCloudArrowDown,
} from "@fortawesome/free-solid-svg-icons";
import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
import useLinkStore from "@/store/links"; import useLinkStore from "@/store/links";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@@ -97,7 +91,6 @@ export default function PreservedFormats() {
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md"> <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<div className="bg-primary text-primary-content p-2 rounded-l-md"> <div className="bg-primary text-primary-content p-2 rounded-l-md">
<FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
</div> </div>
<p>Screenshot</p> <p>Screenshot</p>
@@ -108,10 +101,6 @@ export default function PreservedFormats() {
onClick={() => handleDownload(ArchivedFormat.png)} onClick={() => handleDownload(ArchivedFormat.png)}
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md" className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
> >
<FontAwesomeIcon
icon={faCloudArrowDown}
className="w-5 h-5 cursor-pointer text-neutral"
/>
</div> </div>
<Link <Link
@@ -123,10 +112,6 @@ export default function PreservedFormats() {
target="_blank" target="_blank"
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md" className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
> >
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="w-5 h-5 text-neutral"
/>
</Link> </Link>
</div> </div>
</div> </div>
@@ -136,7 +121,6 @@ export default function PreservedFormats() {
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md"> <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<div className="bg-primary text-primary-content p-2 rounded-l-md"> <div className="bg-primary text-primary-content p-2 rounded-l-md">
<FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
</div> </div>
<p>PDF</p> <p>PDF</p>
@@ -147,10 +131,6 @@ export default function PreservedFormats() {
onClick={() => handleDownload(ArchivedFormat.pdf)} onClick={() => handleDownload(ArchivedFormat.pdf)}
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md" className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
> >
<FontAwesomeIcon
icon={faCloudArrowDown}
className="w-5 h-5 cursor-pointer text-neutral"
/>
</div> </div>
<Link <Link
@@ -158,10 +138,6 @@ export default function PreservedFormats() {
target="_blank" target="_blank"
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md" className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
> >
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="w-5 h-5 text-neutral"
/>
</Link> </Link>
</div> </div>
</div> </div>
@@ -191,10 +167,6 @@ export default function PreservedFormats() {
screenshotAvailable(link) && pdfAvailable(link) ? "sm:mt-3" : "" screenshotAvailable(link) && pdfAvailable(link) ? "sm:mt-3" : ""
}`} }`}
> >
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="w-4 h-4"
/>
<p className="whitespace-nowrap"> <p className="whitespace-nowrap">
View Latest Snapshot on archive.org View Latest Snapshot on archive.org
</p> </p>
components/ModalContent/NewCollectionModal.tsx
+1 -7
View File
@@ -1,11 +1,9 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import TextInput from "@/components/TextInput"; import TextInput from "@/components/TextInput";
import useCollectionStore from "@/store/collections"; import useCollectionStore from "@/store/collections";
import toast, { Toaster } from "react-hot-toast"; import toast from "react-hot-toast";
import { faFolder } from "@fortawesome/free-solid-svg-icons";
import { HexColorPicker } from "react-colorful"; import { HexColorPicker } from "react-colorful";
import { Collection } from "@prisma/client"; import { Collection } from "@prisma/client";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Modal from "../Modal"; import Modal from "../Modal";
type Props = { type Props = {
@@ -76,10 +74,6 @@ export default function NewCollectionModal({ onClose }: Props) {
<div className="color-picker flex justify-between"> <div className="color-picker flex justify-between">
<div className="flex flex-col gap-2 items-center w-32"> <div className="flex flex-col gap-2 items-center w-32">
<div style={{ color: collection.color }}> <div style={{ color: collection.color }}>
<FontAwesomeIcon
icon={faFolder}
className="w-12 h-12 drop-shadow"
/>
</div> </div>
<div <div
className="btn btn-ghost btn-xs" className="btn btn-ghost btn-xs"
components/ModalContent/UploadFileModal.tsx
-4
View File
@@ -1,5 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Toaster } from "react-hot-toast";
import CollectionSelection from "@/components/InputSelect/CollectionSelection"; import CollectionSelection from "@/components/InputSelect/CollectionSelection";
import TagSelection from "@/components/InputSelect/TagSelection"; import TagSelection from "@/components/InputSelect/TagSelection";
import TextInput from "@/components/TextInput"; import TextInput from "@/components/TextInput";
@@ -14,9 +13,6 @@ import { useSession } from "next-auth/react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import Modal from "../Modal"; import Modal from "../Modal";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faQuestion } from "@fortawesome/free-solid-svg-icons";
import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
type Props = { type Props = {
onClose: Function; onClose: Function;
components/RadioButton.tsx
+8 -10
View File
@@ -1,5 +1,3 @@
import { faCircle, faCircleCheck } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ChangeEventHandler } from "react"; import { ChangeEventHandler } from "react";
type Props = { type Props = {
@@ -18,14 +16,14 @@ export default function RadioButton({ label, state, onClick }: Props) {
checked={state} checked={state}
onChange={onClick} onChange={onClick}
/> />
<FontAwesomeIcon {/*<FontAwesomeIcon*/}
icon={faCircleCheck} {/* icon={faCircleCheck}*/}
className="w-5 h-5 text-primary peer-checked:block hidden" {/* className="w-5 h-5 text-primary peer-checked:block hidden"*/}
/> {/*/>*/}
<FontAwesomeIcon {/*<FontAwesomeIcon*/}
icon={faCircle} {/* icon={faCircle}*/}
className="w-5 h-5 text-primary peer-checked:hidden block" {/* className="w-5 h-5 text-primary peer-checked:hidden block"*/}
/> {/*/>*/}
<span className="rounded select-none">{label}</span> <span className="rounded select-none">{label}</span>
</label> </label>
); );
components/SubmitButton.tsx
-6
View File
@@ -1,9 +1,5 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
type Props = { type Props = {
onClick?: Function; onClick?: Function;
icon?: IconProp;
label: string; label: string;
loading: boolean; loading: boolean;
className?: string; className?: string;
@@ -12,7 +8,6 @@ type Props = {
export default function SubmitButton({ export default function SubmitButton({
onClick, onClick,
icon,
label, label,
loading, loading,
className, className,
@@ -28,7 +23,6 @@ export default function SubmitButton({
if (!loading && onClick) onClick(); if (!loading && onClick) onClick();
}} }}
> >
{icon && <FontAwesomeIcon icon={icon} className="h-5" />}
<p>{label}</p> <p>{label}</p>
</button> </button>
); );
layouts/LinkLayout.tsx
-216
View File
@@ -1,216 +0,0 @@
import LinkSidebar from "@/components/LinkSidebar";
import { ReactNode, useEffect, useState } from "react";
import ModalManagement from "@/components/ModalManagement";
import useModalStore from "@/store/modals";
import { useRouter } from "next/router";
import ClickAwayHandler from "@/components/ClickAwayHandler";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
import useWindowDimensions from "@/hooks/useWindowDimensions";
import {
faPen,
faBoxesStacked,
faTrashCan,
} from "@fortawesome/free-solid-svg-icons";
import useLinkStore from "@/store/links";
import {
CollectionIncludingMembersAndLinkCount,
LinkIncludingShortenedCollectionAndTags,
} from "@/types/global";
import { useSession } from "next-auth/react";
import useCollectionStore from "@/store/collections";
import EditLinkModal from "@/components/ModalContent/EditLinkModal";
import Link from "next/link";
import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
import toast from "react-hot-toast";
import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
interface Props {
children: ReactNode;
}
export default function LinkLayout({ children }: Props) {
const { modal } = useModalStore();
const router = useRouter();
useEffect(() => {
modal
? (document.body.style.overflow = "hidden")
: (document.body.style.overflow = "auto");
}, [modal]);
const [sidebar, setSidebar] = useState(false);
const { width } = useWindowDimensions();
useEffect(() => {
setSidebar(false);
}, [width]);
useEffect(() => {
setSidebar(false);
}, [router]);
const toggleSidebar = () => {
setSidebar(!sidebar);
};
const session = useSession();
const userId = session.data?.user.id;
const { setModal } = useModalStore();
const { links, removeLink } = useLinkStore();
const { collections } = useCollectionStore();
const [linkCollection, setLinkCollection] =
useState<CollectionIncludingMembersAndLinkCount>();
const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
useEffect(() => {
if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
}, [links]);
useEffect(() => {
if (link)
setLinkCollection(collections.find((e) => e.id === link?.collection?.id));
}, [link, collections]);
const deleteLink = async () => {
const load = toast.loading("Deleting...");
const response = await removeLink(link?.id as number);
toast.dismiss(load);
response.ok && toast.success(`Link Deleted.`);
router.push("/dashboard");
};
const [editLinkModal, setEditLinkModal] = useState(false);
const [deleteLinkModal, setDeleteLinkModal] = useState(false);
const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
return (
<>
<div className="flex mx-auto">
{/* <div className="hidden lg:block fixed left-5 h-screen">
<LinkSidebar />
</div> */}
<div className="w-full flex flex-col min-h-screen max-w-screen-md mx-auto p-5">
<div className="flex gap-3 mb-3 duration-100 items-center justify-between">
{/* <div
onClick={toggleSidebar}
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-neutral-content"
>
<FontAwesomeIcon icon={faBars} className="w-5 h-5" />
</div> */}
<Link
href={
router.pathname.startsWith("/public")
? `/public/collections/${
linkCollection?.id || link?.collection?.id
}`
: `/dashboard`
}
className="inline-flex gap-1 btn btn-ghost btn-sm text-neutral px-2"
>
<FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
<span className="capitalize">
{router.pathname.startsWith("/public")
? linkCollection?.name || link?.collection?.name
: "Dashboard"}
</span>
</Link>
<div className="flex gap-3">
{link?.collection?.ownerId === userId ||
linkCollection?.members.some(
(e) => e.userId === userId && e.canUpdate
) ? (
<div
title="Edit"
onClick={() => setEditLinkModal(true)}
className={`btn btn-ghost btn-square btn-sm`}
>
<FontAwesomeIcon
icon={faPen}
className="w-4 h-4 text-neutral"
/>
</div>
) : undefined}
<div
onClick={() => setPreservedFormatsModal(true)}
title="Preserved Formats"
className={`btn btn-ghost btn-square btn-sm`}
>
<FontAwesomeIcon
icon={faBoxesStacked}
className="w-4 h-4 text-neutral"
/>
</div>
{link?.collection?.ownerId === userId ||
linkCollection?.members.some(
(e) => e.userId === userId && e.canDelete
) ? (
<div
onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur();
e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
}}
title="Delete"
className={`btn btn-ghost btn-square btn-sm`}
>
<FontAwesomeIcon
icon={faTrashCan}
className="w-4 h-4 text-neutral"
/>
</div>
) : undefined}
</div>
</div>
{children}
{sidebar ? (
<div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
<ClickAwayHandler
className="h-full"
onClickOutside={toggleSidebar}
>
<div className="slide-right h-full shadow-lg">
<LinkSidebar onClick={() => setSidebar(false)} />
</div>
</ClickAwayHandler>
</div>
) : null}
</div>
{link && editLinkModal ? (
<EditLinkModal
onClose={() => setEditLinkModal(false)}
activeLink={link}
/>
) : undefined}
{link && deleteLinkModal ? (
<DeleteLinkModal
onClose={() => setDeleteLinkModal(false)}
activeLink={link}
/>
) : undefined}
{link && preservedFormatsModal ? (
<PreservedFormatsModal
onClose={() => setPreservedFormatsModal(false)}
activeLink={link}
/>
) : undefined}
</div>
</>
);
}
package.json
-5
View File
@@ -16,11 +16,6 @@
"dependencies": { "dependencies": {
"@auth/prisma-adapter": "^1.0.1", "@auth/prisma-adapter": "^1.0.1",
"@aws-sdk/client-s3": "^3.379.1", "@aws-sdk/client-s3": "^3.379.1",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui/react": "^1.7.15", "@headlessui/react": "^1.7.15",
"@mozilla/readability": "^0.4.4", "@mozilla/readability": "^0.4.4",
"@prisma/client": "^4.16.2", "@prisma/client": "^4.16.2",
pages/api/v1/links/[id]/archive/index.ts
+3 -3
View File
@@ -1,5 +1,5 @@
import type { NextApiRequest, NextApiResponse } from "next"; import type { NextApiRequest, NextApiResponse } from "next";
import urlHandler from "@/lib/api/archiveHandler"; import archiveHandler from "@/lib/api/archiveHandler";
import { prisma } from "@/lib/api/db"; import { prisma } from "@/lib/api/db";
import verifyUser from "@/lib/api/verifyUser"; import verifyUser from "@/lib/api/verifyUser";
import isValidUrl from "@/lib/shared/isValidUrl"; import isValidUrl from "@/lib/shared/isValidUrl";
@@ -14,7 +14,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
where: { where: {
id: Number(req.query.id), id: Number(req.query.id),
}, },
include: { collection: true }, include: { collection: { include: { owner: true } } },
}); });
if (!link) if (!link)
@@ -43,7 +43,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
}); });
if (link.url && isValidUrl(link.url)) { if (link.url && isValidUrl(link.url)) {
urlHandler(link.id, link.url, user.id); archiveHandler(link);
return res.status(200).json({ return res.status(200).json({
response: "Link is not a webpage to be archived.", response: "Link is not a webpage to be archived.",
}); });
yarn.lock
-45
View File
@@ -781,51 +781,6 @@
dependencies: dependencies:
"@floating-ui/core" "^1.2.1" "@floating-ui/core" "^1.2.1"
"@fortawesome/fontawesome-common-types@6.4.0":
version "6.4.0"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"
integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
"@fortawesome/fontawesome-common-types@6.4.2":
version "6.4.2"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz#1766039cad33f8ad87f9467b98e0d18fbc8f01c5"
integrity sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==
"@fortawesome/fontawesome-svg-core@^6.4.0":
version "6.4.0"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz#3727552eff9179506e9203d72feb5b1063c11a21"
integrity sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==
dependencies:
"@fortawesome/fontawesome-common-types" "6.4.0"
"@fortawesome/free-brands-svg-icons@^6.4.2":
version "6.4.2"
resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz#9b8e78066ea6dd563da5dfa686615791d0f7cc71"
integrity sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==
dependencies:
"@fortawesome/fontawesome-common-types" "6.4.2"
"@fortawesome/free-regular-svg-icons@^6.4.0":
version "6.4.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz#cacc53bd8d832d46feead412d9ea9ce80a55e13a"
integrity sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==
dependencies:
"@fortawesome/fontawesome-common-types" "6.4.0"
"@fortawesome/free-solid-svg-icons@^6.4.0":
version "6.4.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119"
integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==
dependencies:
"@fortawesome/fontawesome-common-types" "6.4.0"
"@fortawesome/react-fontawesome@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
dependencies:
prop-types "^15.8.1"
"@headlessui/react@^1.7.15": "@headlessui/react@^1.7.15":
version "1.7.15" version "1.7.15"
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.15.tgz#53ef6ae132af81b8f188414767b6e79ebf8dc73f" resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.15.tgz#53ef6ae132af81b8f188414767b6e79ebf8dc73f"