improved performance
This commit is contained in:
daniel31x13
parent
a57c3114d8
commit
bda0dc6c87
|
|
@ -34,6 +34,12 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
|||
|
||||
const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore();
|
||||
|
||||
useEffect(() => {
|
||||
if (!editMode) {
|
||||
setSelectedLinks([]);
|
||||
}
|
||||
}, [editMode]);
|
||||
|
||||
const handleCheckboxClick = (
|
||||
link: LinkIncludingShortenedCollectionAndTags
|
||||
) => {
|
||||
|
|
@ -103,6 +109,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
|||
editMode &&
|
||||
(permissions === true || permissions?.canCreate || permissions?.canDelete);
|
||||
|
||||
// window.open ('www.yourdomain.com', '_ blank');
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
|
|
@ -117,12 +124,11 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
|||
: undefined
|
||||
}
|
||||
>
|
||||
{!editMode ? (
|
||||
<>
|
||||
<Link
|
||||
href={generateLinkHref(link, account)}
|
||||
target="_blank"
|
||||
<div
|
||||
className="rounded-2xl cursor-pointer"
|
||||
onClick={() =>
|
||||
!editMode && window.open(generateLinkHref(link, account), "_blank")
|
||||
}
|
||||
>
|
||||
<div className="relative rounded-t-2xl h-40 overflow-hidden">
|
||||
{previewAvailable(link) ? (
|
||||
|
|
@ -166,119 +172,6 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
|||
|
||||
<hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
|
||||
<div className="flex justify-between text-xs text-neutral px-3 pb-1">
|
||||
<div className="cursor-pointer w-fit">
|
||||
{collection && (
|
||||
<LinkCollection link={link} collection={collection} />
|
||||
)}
|
||||
</div>
|
||||
<LinkDate link={link} />
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{showInfo && (
|
||||
<div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
|
||||
<div
|
||||
onClick={() => setShowInfo(!showInfo)}
|
||||
className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
|
||||
>
|
||||
<i className="bi-x text-neutral text-2xl"></i>
|
||||
</div>
|
||||
<p className="text-neutral text-lg font-semibold">Description</p>
|
||||
|
||||
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
<p>
|
||||
{link.description ? (
|
||||
unescapeString(link.description)
|
||||
) : (
|
||||
<span className="text-neutral text-sm">
|
||||
No description provided.
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{link.tags[0] && (
|
||||
<>
|
||||
<p className="text-neutral text-lg mt-3 font-semibold">
|
||||
Tags
|
||||
</p>
|
||||
|
||||
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
|
||||
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
|
||||
<div className="flex gap-1 items-center flex-wrap">
|
||||
{link.tags.map((e, i) => (
|
||||
<Link
|
||||
href={"/tags/" + e.id}
|
||||
key={i}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className="btn btn-xs btn-ghost truncate max-w-[19rem]"
|
||||
>
|
||||
#{e.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<LinkActions
|
||||
link={link}
|
||||
collection={collection}
|
||||
position="top-[10.75rem] right-3"
|
||||
toggleShowInfo={() => setShowInfo(!showInfo)}
|
||||
linkInfo={showInfo}
|
||||
flipDropdown={flipDropdown}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="rounded-2xl cursor-pointer">
|
||||
<div className="relative rounded-t-2xl h-40 overflow-hidden">
|
||||
{previewAvailable(link) ? (
|
||||
<Image
|
||||
src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
|
||||
width={1280}
|
||||
height={720}
|
||||
alt=""
|
||||
className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
|
||||
style={{ filter: "blur(2px)" }}
|
||||
draggable="false"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
target.style.display = "none";
|
||||
}}
|
||||
/>
|
||||
) : link.preview === "unavailable" ? (
|
||||
<div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
|
||||
) : (
|
||||
<div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
|
||||
)}
|
||||
<div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
|
||||
<LinkIcon link={link} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
|
||||
<div className="p-3 mt-1">
|
||||
<p className="truncate w-full pr-8 text-primary">
|
||||
{unescapeString(link.name || link.description) || link.url}
|
||||
</p>
|
||||
|
||||
<div title={link.url || ""} className="w-fit">
|
||||
<div className="flex gap-1 item-center select-none text-neutral mt-1">
|
||||
<i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
|
||||
<p className="text-sm truncate">{shortendURL}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
|
||||
<div className="flex justify-between text-xs text-neutral px-3 pb-1">
|
||||
<div className="cursor-pointer w-fit">
|
||||
{collection && (
|
||||
|
|
@ -311,9 +204,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
|||
</p>
|
||||
{link.tags[0] && (
|
||||
<>
|
||||
<p className="text-neutral text-lg mt-3 font-semibold">
|
||||
Tags
|
||||
</p>
|
||||
<p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
|
||||
|
||||
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
|
||||
|
|
@ -346,8 +237,6 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
|||
linkInfo={showInfo}
|
||||
flipDropdown={flipDropdown}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,12 @@ export default function LinkCardCompact({
|
|||
const { account } = useAccountStore();
|
||||
const { links, setSelectedLinks, selectedLinks } = useLinkStore();
|
||||
|
||||
useEffect(() => {
|
||||
if (!editMode) {
|
||||
setSelectedLinks([]);
|
||||
}
|
||||
}, [editMode]);
|
||||
|
||||
const handleCheckboxClick = (
|
||||
link: LinkIncludingShortenedCollectionAndTags
|
||||
) => {
|
||||
|
|
@ -117,104 +123,16 @@ export default function LinkCardCompact({
|
|||
onChange={() => handleCheckboxClick(link)}
|
||||
/>
|
||||
)} */}
|
||||
{!editMode ? (
|
||||
<>
|
||||
<Link
|
||||
href={generateLinkHref(link, account)}
|
||||
target="_blank"
|
||||
<div
|
||||
className="flex items-center cursor-pointer"
|
||||
onClick={() =>
|
||||
!editMode && window.open(generateLinkHref(link, account), "_blank")
|
||||
}
|
||||
>
|
||||
<div className="shrink-0">
|
||||
<LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
|
||||
</div>
|
||||
|
||||
<div className="w-[calc(100%-56px)] ml-2">
|
||||
<p className="line-clamp-1 mr-8 text-primary">
|
||||
{unescapeString(link.name || link.description) || link.url}
|
||||
</p>
|
||||
|
||||
<div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
|
||||
<div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
|
||||
{collection && (
|
||||
<LinkCollection link={link} collection={collection} />
|
||||
)}
|
||||
{link.url ? (
|
||||
<div className="flex items-center gap-1 w-fit text-neutral truncate">
|
||||
<i className="bi-link-45deg text-lg" />
|
||||
<p className="truncate w-full">{shortendURL}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="badge badge-primary badge-sm my-1">
|
||||
{link.type}
|
||||
</div>
|
||||
)}
|
||||
<LinkDate link={link} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<LinkActions
|
||||
link={link}
|
||||
collection={collection}
|
||||
position="top-3 right-3"
|
||||
flipDropdown={flipDropdown}
|
||||
// toggleShowInfo={() => setShowInfo(!showInfo)}
|
||||
// linkInfo={showInfo}
|
||||
/>
|
||||
{showInfo && (
|
||||
<div>
|
||||
<div className="pb-3 mt-1 px-3">
|
||||
<p className="text-neutral text-lg font-semibold">
|
||||
Description
|
||||
</p>
|
||||
|
||||
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
<p>
|
||||
{link.description ? (
|
||||
unescapeString(link.description)
|
||||
) : (
|
||||
<span className="text-neutral text-sm">
|
||||
No description provided.
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{link.tags[0] && (
|
||||
<>
|
||||
<p className="text-neutral text-lg mt-3 font-semibold">
|
||||
Tags
|
||||
</p>
|
||||
|
||||
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
|
||||
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
|
||||
<div className="flex gap-1 items-center flex-wrap">
|
||||
{link.tags.map((e, i) => (
|
||||
<Link
|
||||
href={"/tags/" + e.id}
|
||||
key={i}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className="btn btn-xs btn-ghost truncate max-w-[19rem]"
|
||||
>
|
||||
#{e.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center cursor-pointer">
|
||||
<div className="shrink-0">
|
||||
<LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
|
||||
</div>
|
||||
|
||||
<div className="w-[calc(100%-56px)] ml-2">
|
||||
<p className="line-clamp-1 mr-8 text-primary select-none">
|
||||
{unescapeString(link.name || link.description) || link.url}
|
||||
|
|
@ -228,9 +146,7 @@ export default function LinkCardCompact({
|
|||
{link.url ? (
|
||||
<div className="flex items-center gap-1 w-fit text-neutral truncate">
|
||||
<i className="bi-link-45deg text-lg" />
|
||||
<p className="truncate w-full select-none">
|
||||
{shortendURL}
|
||||
</p>
|
||||
<p className="truncate w-full select-none">{shortendURL}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="badge badge-primary badge-sm my-1 select-none">
|
||||
|
|
@ -250,8 +166,6 @@ export default function LinkCardCompact({
|
|||
// toggleShowInfo={() => setShowInfo(!showInfo)}
|
||||
// linkInfo={showInfo}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="divider my-0 last:hidden h-[1px]"></div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -97,10 +97,9 @@ export default function Index() {
|
|||
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
|
||||
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setEditMode(false);
|
||||
};
|
||||
if (editMode) return setEditMode(false);
|
||||
}, [router]);
|
||||
|
||||
const [viewMode, setViewMode] = useState<string>(
|
||||
|
|
|
|||
|
|
@ -30,10 +30,9 @@ export default function Links() {
|
|||
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
|
||||
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setEditMode(false);
|
||||
};
|
||||
if (editMode) return setEditMode(false);
|
||||
}, [router]);
|
||||
|
||||
const collectivePermissions = useCollectivePermissions(
|
||||
|
|
|
|||
|
|
@ -30,10 +30,9 @@ export default function PinnedLinks() {
|
|||
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
|
||||
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setEditMode(false);
|
||||
};
|
||||
if (editMode) return setEditMode(false);
|
||||
}, [router]);
|
||||
|
||||
const collectivePermissions = useCollectivePermissions(
|
||||
|
|
|
|||
|
|
@ -33,10 +33,9 @@ export default function Index() {
|
|||
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
|
||||
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setEditMode(false);
|
||||
};
|
||||
if (editMode) return setEditMode(false);
|
||||
}, [router]);
|
||||
|
||||
const collectivePermissions = useCollectivePermissions(
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue