"use client"; import getPublicCollectionData from "@/lib/client/getPublicCollectionData"; import { AccountSettings, CollectionIncludingMembersAndLinkCount, Sort, ViewMode, } from "@/types/global"; import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; import Head from "next/head"; import ProfilePhoto from "@/components/ProfilePhoto"; import ToggleDarkMode from "@/components/ToggleDarkMode"; import getPublicUserData from "@/lib/client/getPublicUserData"; import Image from "next/image"; import Link from "next/link"; import useLocalSettingsStore from "@/store/localSettings"; import SearchBar from "@/components/SearchBar"; import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal"; import { useTranslation } from "next-i18next"; import getServerSideProps from "@/lib/client/getServerSideProps"; import LinkListOptions from "@/components/LinkListOptions"; import { usePublicLinks } from "@/hooks/store/publicLinks"; import Links from "@/components/LinkViews/Links"; import { usePublicTags } from "@/hooks/store/publicTags"; export default function PublicCollections() { const { t } = useTranslation(); const { settings } = useLocalSettingsStore(); const router = useRouter(); const [collectionOwner, setCollectionOwner] = useState< Partial >({}); 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; return router.push( "/public/collections/" + router.query.id + "?q=" + encodeURIComponent(tag || "") ); } else { return router.push("/public/collections/" + router.query.id); } }; const [searchFilter, setSearchFilter] = useState({ name: true, url: true, description: true, tags: true, textContent: false, }); const [sortBy, setSortBy] = useState( Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst ); const { data: tags } = usePublicTags(); const { links, data } = usePublicLinks({ sort: sortBy, searchQueryString: router.query.q ? decodeURIComponent(router.query.q as string) : undefined, searchByName: searchFilter.name, searchByUrl: searchFilter.url, searchByDescription: searchFilter.description, searchByTextContent: searchFilter.textContent, searchByTags: searchFilter.tags, }); const [collection, setCollection] = useState(); useEffect(() => { if (router.query.id) { getPublicCollectionData(Number(router.query.id)).then((res) => { if (res.status === 400) { router.push("/dashboard"); } else { setCollection(res.response); } }); } }, []); useEffect(() => { if (collection) { getPublicUserData(collection.ownerId as number).then((owner) => setCollectionOwner(owner) ); } }, [collection]); const [editCollectionSharingModal, setEditCollectionSharingModal] = useState(false); const [viewMode, setViewMode] = useState( (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card ); if (!collection) return <>; else return (
{collection && ( {collection.name} | Linkwarden )}

{collection.name}

Linkwarden
setEditCollectionSharingModal(true)} > {collectionOwner.id && ( )} {collection.members .sort((a, b) => (a.userId as number) - (b.userId as number)) .map((e, i) => { return ( ); }) .slice(0, 3)} {collection.members.length - 3 > 0 && (
+{collection.members.length - 3}
)}

{collection.members.length > 0 && collection.members.length === 1 ? t("by_author_and_other", { author: collectionOwner.name, count: collection.members.length, }) : collection.members.length > 0 && collection.members.length !== 1 ? t("by_author_and_others", { author: collectionOwner.name, count: collection.members.length, }) : t("by_author", { author: collectionOwner.name, })}

{collection.description}

{tags && tags[0] && (
{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 ( ); })}
)} { const linkWithCollectionData = { ...e, collection: collection, // Append collection data }; return linkWithCollectionData; }) as any } layout={viewMode} placeholderCount={1} useData={data} /> {!data.isLoading && links && !links[0] && (

{t("nothing_found")}

)} {/*

List created with Linkwarden.

*/}
{editCollectionSharingModal && ( setEditCollectionSharingModal(false)} activeCollection={collection} /> )}
); } export { getServerSideProps };