"use client"; import PublicLinkCard from "@/components/PublicPage/PublicLinkCard"; import getPublicCollectionData from "@/lib/client/getPublicCollectionData"; import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global"; import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; import { motion, Variants } from "framer-motion"; import Head from "next/head"; import useLinks from "@/hooks/useLinks"; import useLinkStore from "@/store/links"; import ProfilePhoto from "@/components/ProfilePhoto"; import useModalStore from "@/store/modals"; import ModalManagement from "@/components/ModalManagement"; import ToggleDarkMode from "@/components/ToggleDarkMode"; import getPublicUserData from "@/lib/client/getPublicUserData"; import Image from "next/image"; import Link from "next/link"; import PublicSearchBar from "@/components/PublicPage/PublicSearchBar"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faFilter, faSort } from "@fortawesome/free-solid-svg-icons"; import FilterSearchDropdown from "@/components/FilterSearchDropdown"; import SortDropdown from "@/components/SortDropdown"; import useLocalSettingsStore from "@/store/localSettings"; const cardVariants: Variants = { offscreen: { y: 50, opacity: 0, }, onscreen: { y: 0, opacity: 1, transition: { duration: 0.4, }, }, }; export default function PublicCollections() { const { links } = useLinkStore(); const { modal, setModal } = useModalStore(); const { settings } = useLocalSettingsStore(); useEffect(() => { modal ? (document.body.style.overflow = "hidden") : (document.body.style.overflow = "auto"); }, [modal]); const router = useRouter(); const [collectionOwner, setCollectionOwner] = useState({ id: null, name: "", username: "", image: "", }); const [searchFilter, setSearchFilter] = useState({ name: true, url: true, description: true, textContent: true, tags: true, }); const [filterDropdown, setFilterDropdown] = useState(false); const [sortDropdown, setSortDropdown] = useState(false); const [sortBy, setSortBy] = useState(Sort.DateNewestFirst); useLinks({ 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), setCollection); } }, []); useEffect(() => { const fetchOwner = async () => { if (collection) { const owner = await getPublicUserData(collection.ownerId as number); setCollectionOwner(owner); } }; fetchOwner(); }, [collection]); return collection ? (
{collection ? ( {collection.name} | Linkwarden ) : undefined}

{collection.name}

Linkwarden
setModal({ modal: "COLLECTION", state: true, method: "VIEW_TEAM", isOwner: false, active: collection, defaultIndex: 0, }) } className="hover:opacity-80 duration-100 flex justify-center sm:justify-end items-start w-fit cursor-pointer" > {collectionOwner.id ? ( ) : undefined} {collection.members .sort((a, b) => (a.userId as number) - (b.userId as number)) .map((e, i) => { return ( ); }) .slice(0, 3)} {collection?.members.length && collection.members.length - 3 > 0 ? (
+{collection?.members?.length - 3}
) : null}

By {collectionOwner.name} {collection.members.length > 0 ? ` and ${collection.members.length} others` : undefined} .

{collection.description}

setFilterDropdown(!filterDropdown)} id="filter-dropdown" className="btn btn-ghost btn-square btn-sm" >
{filterDropdown ? ( ) : null}
setSortDropdown(!sortDropdown)} id="sort-dropdown" className="btn btn-ghost btn-square btn-sm" >
{sortDropdown ? ( setSortDropdown(!sortDropdown)} /> ) : null}
{links ?.filter((e) => e.collectionId === Number(router.query.id)) .map((e, i) => { return ( ); })}
{/*

List created with Linkwarden.

*/}
) : ( <> ); }