retrieve all links for collection

hooks/store/publicLinks.tsx

@@ -32,21 +32,32 @@ const usePublicLinks = (params: LinkRequestQuery = {}) => {
     searchByTags: params.searchByTags,
   } as LinkRequestQuery;
 
+  const queryParamsForAllLinksObject = {
+    sort: params.sort ?? Number(window.localStorage.getItem("sortBy")) ?? 0,
+    collectionId: params.collectionId ?? router.query.id,
+  } as LinkRequestQuery;
+
   const queryString = buildQueryString(queryParamsObject);
-
+  const queryStringForAllLinkObject = buildQueryString(queryParamsForAllLinksObject);
   const { data, ...rest } = useFetchLinks(queryString);
-
+  const allLinks = useFetchLinks(queryStringForAllLinkObject);
   const links = useMemo(() => {
     return data?.pages.reduce((acc, page) => {
       return [...acc, ...page];
     }, []);
   }, [data]);
-
+  const linksForWholeCollection = useMemo(() => {
+    return allLinks.data?.pages.reduce((acc, page) => {
+      return [...acc, ...page];
+    }, []);
+  }, [allLinks.data])
   return {
     links,
+    linksForWholeCollection,
     data: { ...data, ...rest },
   } as {
     links: LinkIncludingShortenedCollectionAndTags[];
+    linksForWholeCollection: LinkIncludingShortenedCollectionAndTags[];
     data: UseInfiniteQueryResult<InfiniteData<any, unknown>, Error>;
   };
 };

pages/public/collections/[id].tsx

@@ -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) => {

public/locales/de/common.json

@@ -371,5 +371,6 @@
   "demo_title": "Nur Demo",
   "demo_desc": "Dies ist nur eine Demo-Instanz von Linkwarden und Uploads sind deaktiviert.",
   "demo_desc_2": "Wenn Du die Vollversion ausprobieren möchtest, kannst Du Dich für eine kostenlose Testversion anmelden unter:",
-  "demo_button": "Login als Demo-Benutzer"
+  "demo_button": "Login als Demo-Benutzer",
+  "browse_by_topic": "Nach Thema suchen"
 }

public/locales/en/common.json

@@ -396,5 +396,6 @@
   "default": "Default",
   "invalid_url_guide":"Please enter a valid Address for the Link. (It should start with http/https)",
   "email_invalid": "Please enter a valid email address.",
-  "username_invalid_guide": "Username has to be at least 3 characters, no spaces and special characters are allowed."
+  "username_invalid_guide": "Username has to be at least 3 characters, no spaces and special characters are allowed.",
+  "browse_by_topic": "Browse by topic"
 }

public/locales/es/common.json

@@ -371,5 +371,6 @@
   "demo_title": "Solo para demostración",
   "demo_desc": "Esta es solo una instancia de demostración de Linkwarden y las cargas están deshabilitadas.",
   "demo_desc_2": "Si deseas probar la versión completa, puedes registrarte para una prueba gratuita en:",
-  "demo_button": "Iniciar sesión como usuario demo"
+  "demo_button": "Iniciar sesión como usuario demo",
+  "browse_by_topic": "Navegar por tema"
 }

public/locales/fr/common.json

@@ -370,5 +370,6 @@
   "demo_title": "Démonstration uniquement",
   "demo_desc": "Il s'agit d'une instance de démonstration de Linkwarden et les téléchargements sont désactivés.",
   "demo_desc_2": "Si vous souhaitez tester la version complète, vous pouvez vous inscrire pour un essai gratuit à l'adresse suivante:",
-  "demo_button": "Se connecter en tant qu'utilisateur de démonstration"
+  "demo_button": "Se connecter en tant qu'utilisateur de démonstration",
+  "browse_by_topic": "Naviguer par sujet"
 }

public/locales/it/common.json

@@ -367,5 +367,6 @@
   "webpage": "Pagina web",
   "server_administration": "Amministrazione Server",
   "all_collections": "Tutte le Collezioni",
-  "dashboard": "Dashboard"
+  "dashboard": "Dashboard",
+  "browse_by_topic": "Sfoglia per argomento"
 }

public/locales/ja/common.json

@@ -393,5 +393,6 @@
   "change_icon": "アイコンを変更",
   "upload_preview_image": "プレビュー画像をアップロード",
   "columns": "列",
-  "default": "デフォルト"
+  "default": "デフォルト",
+  "browse_by_topic": "トピックごとに閲覧する"
 }

public/locales/nl/common.json

@@ -371,5 +371,6 @@
   "demo_title": "Demo Alleen",
   "demo_desc": "Dit is slechts een demo-instantie van Linkwarden en uploads zijn uitgeschakeld.",
   "demo_desc_2": "Als u de volledige versie wilt proberen, kunt u zich aanmelden voor een gratis proefperiode op:",
-  "demo_button": "Inloggen als demo gebruiker"
+  "demo_button": "Inloggen als demo gebruiker",
+  "browse_by_topic": "Blader op onderwerp"
 }

public/locales/pt-BR/common.json

@@ -396,5 +396,6 @@
   "demo_desc": "Esta é apenas uma instância de demonstração do Linkwarden e os uploads estão desativados.",
   "demo_desc_2": "Se você quiser experimentar a versão completa, você pode se inscrever para um teste gratuito em:",
   "demo_button": "Entrar como usuário de demonstração",
-  "notes": "Notas"
+  "notes": "Notas",
+  "browse_by_topic": "Navegue por tópico"
   }

public/locales/tr/common.json

@@ -373,5 +373,6 @@
   "demo_title": "Sadece Demo",
   "demo_desc": "Bu sadece bir Linkwarden demo örneğidir ve yüklemeler devre dışı bırakılmıştır.",
   "demo_desc_2": "Tam sürümü denemek istiyorsanız, ücretsiz deneme için kaydolabilirsiniz:",
-  "demo_button": "Demo kullanıcı olarak giriş yap"
+  "demo_button": "Demo kullanıcı olarak giriş yap",
+  "browse_by_topic": "Konuya göre göz atı"
 }

public/locales/uk/common.json

@@ -393,5 +393,6 @@
   "change_icon": "Змінити піктограму",
   "upload_preview_image": "Завантажте зображення для попереднього перегляду",
   "columns": "Стовпці",
-  "default": "За замовчуванням"
+  "default": "За замовчуванням",
+  "browse_by_topic": "Перегляньте за темою"
 }

public/locales/zh-TW/common.json

@@ -370,5 +370,6 @@
   "demo_title": "僅供展示",
   "demo_desc": "這只是 Linkwarden 的展示實例，禁止上傳檔案。",
   "demo_desc_2": "如果您想嘗試完整版，您可以註冊免費試用：",
-  "demo_button": "以展示用戶登入"
+  "demo_button": "以展示用戶登入",
+  "browse_by_topic": "按主題瀏覽"
 }

public/locales/zh/common.json

@@ -370,5 +370,6 @@
   "demo_title": "仅限演示",
   "demo_desc": "这只是 Linkwarden 的演示实例，禁止上传文件。",
   "demo_desc_2": "如果你想尝试完整版，你可以注册免费试用：",
-  "demo_button": "以演示用户登录"
+  "demo_button": "以演示用户登录",
+  "browse_by_topic": "按主题浏览"
 }