retrieve all links for collection
This commit is contained in:
Oliver Schwamb
@@ -23,9 +23,9 @@ import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import LinkListOptions from "@/components/LinkListOptions";
|
||||
import { usePublicLinks } from "@/hooks/store/publicLinks";
|
||||
import Links from "@/components/LinkViews/Links";
|
||||
import useTagStore from "@/store/tags";
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
|
||||
|
||||
export default function PublicCollections() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
@@ -37,8 +37,7 @@ const { settings } = useLocalSettingsStore();
|
||||
Partial<AccountSettings>
|
||||
>({});
|
||||
|
||||
const { tags, setTags } = useTagStore();
|
||||
const handleTagSelection = (tag: TagIncludingLinkCount | undefined) => {
|
||||
const handleTagSelection = (tag: string | undefined) => {
|
||||
if (tag) {
|
||||
Object.keys(searchFilter).forEach((v) => searchFilter[(v as keyof {name: boolean, url: boolean, description: boolean, tags: boolean, textContent: boolean})] = false)
|
||||
searchFilter.tags = true;
|
||||
@@ -46,7 +45,7 @@ const { settings } = useLocalSettingsStore();
|
||||
"/public/collections/" +
|
||||
router.query.id +
|
||||
"?q=" +
|
||||
encodeURIComponent(tag.name || "")
|
||||
encodeURIComponent(tag || "")
|
||||
);
|
||||
} else {
|
||||
return router.push(
|
||||
@@ -67,7 +66,7 @@ const { settings } = useLocalSettingsStore();
|
||||
Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
|
||||
);
|
||||
|
||||
const { links, data } = usePublicLinks({
|
||||
const { links, linksForWholeCollection, data } = usePublicLinks({
|
||||
sort: sortBy,
|
||||
searchQueryString: router.query.q
|
||||
? decodeURIComponent(router.query.q as string)
|
||||
@@ -78,7 +77,6 @@ const { settings } = useLocalSettingsStore();
|
||||
searchByTextContent: searchFilter.textContent,
|
||||
searchByTags: searchFilter.tags,
|
||||
});
|
||||
|
||||
const [collection, setCollection] =
|
||||
useState<CollectionIncludingMembersAndLinkCount>();
|
||||
useEffect(() => {
|
||||
@@ -88,7 +86,6 @@ const { settings } = useLocalSettingsStore();
|
||||
router.push("/dashboard");
|
||||
} else {
|
||||
setCollection(res.response);
|
||||
setTags(Number(router.query.id))
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -246,78 +243,88 @@ useEffect(() => {
|
||||
}
|
||||
/>
|
||||
</LinkListOptions>
|
||||
{collection.tagsArePublic && tags[0] && (
|
||||
<Disclosure defaultOpen={tagDisclosure}>
|
||||
<Disclosure.Button
|
||||
onClick={() => {
|
||||
setTagDisclosure(!tagDisclosure);
|
||||
}}
|
||||
className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
|
||||
>
|
||||
<p className="text-sm">Browse by topic</p>
|
||||
<i
|
||||
className={`bi-chevron-down ${
|
||||
tagDisclosure ? "rotate-reverse" : "rotate"
|
||||
}`}
|
||||
></i>
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform opacity-0 -translate-y-3"
|
||||
enterTo="transform opacity-100 translate-y-0"
|
||||
leave="transition duration-100 ease-out"
|
||||
leaveFrom="transform opacity-100 translate-y-0"
|
||||
leaveTo="transform opacity-0 -translate-y-3"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="flex gap-2 mt-2 mb-6 flex-wrap">
|
||||
<button
|
||||
className="max-w-full"
|
||||
onClick={() => handleTagSelection(undefined)}
|
||||
>
|
||||
<div
|
||||
className="
|
||||
bg-neutral-content/20 hover:bg-neutral/20 duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 rounded-md h-8"
|
||||
{collection.tagsArePublic &&
|
||||
linksForWholeCollection?.flatMap((l) => l.tags)[0] && (
|
||||
<Disclosure defaultOpen={tagDisclosure}>
|
||||
<Disclosure.Button
|
||||
onClick={() => {
|
||||
setTagDisclosure(!tagDisclosure);
|
||||
}}
|
||||
className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
|
||||
>
|
||||
<p className="text-sm">{t("browse_by_topic")}</p>
|
||||
<i
|
||||
className={`bi-chevron-down ${
|
||||
tagDisclosure ? "rotate-reverse" : "rotate"
|
||||
}`}
|
||||
></i>
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform opacity-0 -translate-y-3"
|
||||
enterTo="transform opacity-100 translate-y-0"
|
||||
leave="transition duration-100 ease-out"
|
||||
leaveFrom="transform opacity-100 translate-y-0"
|
||||
leaveTo="transform opacity-0 -translate-y-3"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="flex gap-2 mt-2 mb-6 flex-wrap">
|
||||
<button
|
||||
className="max-w-full"
|
||||
onClick={() => handleTagSelection(undefined)}
|
||||
>
|
||||
<i className="text-primary bi-hash text-2xl text-primary drop-shadow"></i>
|
||||
<p className="truncate pr-7">All</p>
|
||||
<div className="text-neutral drop-shadow text-neutral text-xs">
|
||||
{collection._count?.links}
|
||||
<div
|
||||
className="
|
||||
bg-neutral-content/20 hover:bg-neutral/20 duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 rounded-md h-8"
|
||||
>
|
||||
<i className="text-primary bi-hash text-2xl text-primary drop-shadow"></i>
|
||||
<p className="truncate pr-7">{t("all_links")}</p>
|
||||
<div className="text-neutral drop-shadow text-neutral text-xs">
|
||||
{collection._count?.links}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{tags
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((e, i) => {
|
||||
const active = router.query.q === e.name;
|
||||
return (
|
||||
<button
|
||||
className="max-w-full"
|
||||
key={i}
|
||||
onClick={() => handleTagSelection(e)}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
</button>
|
||||
{linksForWholeCollection
|
||||
.flatMap((l) => l.tags)
|
||||
.map((t) => t.name)
|
||||
.filter(
|
||||
(item, pos, self) => self.indexOf(item) === pos
|
||||
)
|
||||
.sort((a, b) => a.localeCompare(b))
|
||||
.map((e, i) => {
|
||||
const active = router.query.q === e;
|
||||
return (
|
||||
<button
|
||||
className="max-w-full"
|
||||
key={i}
|
||||
onClick={() => handleTagSelection(e)}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
${
|
||||
active
|
||||
? "bg-primary/20"
|
||||
: "bg-neutral-content/20 hover:bg-neutral/20"
|
||||
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 rounded-md h-8`}
|
||||
>
|
||||
<i className="bi-hash text-2xl text-primary drop-shadow"></i>
|
||||
<p className="truncate pr-7">{e.name}</p>
|
||||
<div className="drop-shadow text-neutral text-xs">
|
||||
{e._count?.links}
|
||||
>
|
||||
<i className="bi-hash text-2xl text-primary drop-shadow"></i>
|
||||
<p className="truncate pr-7">{e}</p>
|
||||
<div className="drop-shadow text-neutral text-xs">
|
||||
{
|
||||
linksForWholeCollection.filter((l) =>
|
||||
l.tags.map((t) => t.name).includes(e)
|
||||
).length
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</Disclosure>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</Disclosure>
|
||||
)}
|
||||
<Links
|
||||
links={
|
||||
links?.map((e, i) => {
|
||||
|
||||
Reference in New Issue
Block a user