Make sure tags are fetched properly on public facing pages

app/[subdomain]/Web.tsx

@@ -12,7 +12,7 @@ import MainList from '@components/main-list'
 import AlertBanner from '@components/alert-banner'
 import { removeNonAlphaNumeric, sortStringsFunc } from '@helpers/utils'
 import useCategoriesPublic from '@hooks/categories/useCategoriesPublic'
-import { useTags } from '@hooks/tags'
+import { useTagsPublic } from '@hooks/tags'
 import { Category } from '@prisma/client'
 
 const NetworkComponent = dynamic(() => import('@components/network'), {
@@ -78,7 +78,7 @@ export default function Web({
   const [_network, setNetwork] = useState<INetwork>()
 
   const { categories: fetchedCategories } = useCategoriesPublic()
-  const { tags: fetchedTags } = useTags()
+  const { tags: fetchedTags } = useTagsPublic()
 
   useEffect(() => {
     if (!fetchedCategories) return

hooks/tags/index.ts

@@ -1,4 +1,5 @@
 export { default as useTags } from './useTags'
+export { default as useTagsPublic } from './useTagsPublic'
 export { default as useCreateTag } from './useCreateTag'
 export { default as useUpdateTag } from './useUpdateTag'
 export { default as useDeleteTag } from './useDeleteTag'

hooks/tags/useTags.tsx

@@ -1,20 +1,8 @@
 import { useQuery } from '@tanstack/react-query'
 import { useAppContext } from '@store/hooks'
 import { Tag } from '@prisma/client'
-import { REMOTE_URL } from '@helpers/config'
 import { useIsAdminMode } from '@hooks/application'
 
-export async function fetchTagsHydrate({ webSlug }) {
-  const BASE_URL =
-    process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview'
-      ? 'https://resilienceweb.org.uk'
-      : REMOTE_URL
-
-  const response = await fetch(`${BASE_URL}/api/tags?web=${webSlug}`)
-  const { data: tags } = await response.json()
-  return tags
-}
-
 async function fetchTagsRequest({ queryKey }) {
   const [_key, { webSlug, all }] = queryKey
   const response = await fetch(`/api/tags?web=${webSlug}`)

hooks/tags/useTagsPublic.tsx

@@ -0,0 +1,33 @@
+import { useQuery } from '@tanstack/react-query'
+import { Tag } from '@prisma/client'
+import { useIsAdminMode } from '@hooks/application'
+import useSelectedWebSlug from '@hooks/application/useSelectedWebSlug'
+
+async function fetchTagsRequest({ queryKey }) {
+  const [_key, { webSlug, all }] = queryKey
+  const response = await fetch(`/api/tags?web=${webSlug}`)
+  const { data: tags } = await response.json()
+
+  return all ? tags : tags.filter((tag) => tag.listings.length > 0)
+}
+
+export default function useTags() {
+  const isAdminMode = useIsAdminMode()
+  const selectedWebSlug = useSelectedWebSlug()
+  const {
+    data: tags,
+    isPending,
+    isError,
+  } = useQuery<Tag[]>({
+    queryKey: ['tags', { webSlug: selectedWebSlug, all: isAdminMode }],
+    queryFn: fetchTagsRequest,
+    refetchOnWindowFocus: false,
+    enabled: selectedWebSlug !== undefined,
+  })
+
+  return {
+    tags,
+    isPending,
+    isError,
+  }
+}