feat: add top publications page in staff tools

apps/web/src/components/Home/Sidebar/HeyMembershipNft.tsx

@@ -64,7 +64,7 @@ const HeyMembershipNft: FC = () => {
       />
       <div className="p-5">
         <div className="mb-1 font-bold">
-          Hey Buddy! Grab your special Hey NFT Here.
+          Hey! Grab your special Hey NFT here.
         </div>
         <div className="text-brand-400 mb-4">
           New or OG, this NFT's for our epic times together. Let's keep the vibe

apps/web/src/components/Staff/Sidebar.tsx

@@ -5,6 +5,7 @@ import {
   AdjustmentsHorizontalIcon,
   ClipboardIcon,
   CurrencyDollarIcon,
+  PencilSquareIcon,
   UserIcon
 } from '@heroicons/react/24/outline';
 
@@ -28,6 +29,11 @@ const settingsSidebarItems = [
     icon: <AdjustmentsHorizontalIcon className="size-4" />,
     title: 'Feature flags',
     url: '/staff/feature-flags'
+  },
+  {
+    icon: <PencilSquareIcon className="size-4" />,
+    title: 'Top Publications',
+    url: '/staff/top-publications'
   }
 ];
 

apps/web/src/components/Staff/TopPublications/List.tsx

@@ -0,0 +1,88 @@
+import type { AnyPublication } from '@hey/lens';
+import type { FC } from 'react';
+
+import SinglePublication from '@components/Publication/SinglePublication';
+import Loader from '@components/Shared/Loader';
+import { PencilIcon } from '@heroicons/react/24/outline';
+import { HEY_API_URL } from '@hey/data/constants';
+import { usePublicationsQuery } from '@hey/lens';
+import { Card, EmptyState, ErrorMessage } from '@hey/ui';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { useImpressionsStore } from 'src/store/non-persisted/useImpressionsStore';
+
+const List: FC = () => {
+  const fetchAndStoreViews = useImpressionsStore(
+    (state) => state.fetchAndStoreViews
+  );
+
+  const getTop50Publications = async (): Promise<
+    [] | [{ count: number; id: string }]
+  > => {
+    try {
+      const response = await axios.get(
+        `${HEY_API_URL}/internal/leafwatch/top50Publications`
+      );
+
+      return response.data.result;
+    } catch {
+      return [];
+    }
+  };
+
+  const { data: top50Publications } = useQuery({
+    queryFn: () => getTop50Publications(),
+    queryKey: ['getTop50Publications']
+  });
+
+  const publicationIds = top50Publications?.map((p) => p.id) || [];
+
+  const { data, error, loading } = usePublicationsQuery({
+    onCompleted: async ({ publications }) => {
+      const ids = publications?.items?.map((p) => p.id) || [];
+      await fetchAndStoreViews(ids);
+    },
+    skip: publicationIds.length === 0,
+    variables: { request: { where: { publicationIds } } }
+  });
+
+  const publications = data?.publications.items || [];
+
+  return (
+    <Card>
+      <div className="space-x-5 p-5">
+        <div className="text-lg font-bold">
+          Top Publications in the last 24h
+        </div>
+      </div>
+      <div className="divider" />
+      <div className="p-5">
+        {loading ? (
+          <Loader message="Loading top publications..." />
+        ) : error ? (
+          <ErrorMessage error={error} title="Failed to load top publications" />
+        ) : !publications.length ? (
+          <EmptyState
+            hideCard
+            icon={<PencilIcon className="text-brand-500 size-8" />}
+            message={<span>No top publications found</span>}
+          />
+        ) : (
+          <div className="space-y-5 -p-5">
+            {publications?.map((publication) => (
+              <Card forceRounded key={publication.id}>
+                <SinglePublication
+                  isFirst
+                  isLast
+                  publication={publication as AnyPublication}
+                />
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+};
+
+export default List;

apps/web/src/components/Staff/TopPublications/index.tsx

@@ -0,0 +1,44 @@
+import type { NextPage } from 'next';
+
+import MetaTags from '@components/Common/MetaTags';
+import { APP_NAME } from '@hey/data/constants';
+import { PAGEVIEW } from '@hey/data/tracking';
+import { GridItemEight, GridItemFour, GridLayout } from '@hey/ui';
+import { Leafwatch } from '@lib/leafwatch';
+import Custom404 from 'src/pages/404';
+import { useFeatureFlagsStore } from 'src/store/persisted/useFeatureFlagsStore';
+import useProfileStore from 'src/store/persisted/useProfileStore';
+import { useEffectOnce } from 'usehooks-ts';
+
+import StaffSidebar from '../Sidebar';
+import List from './List';
+
+const TopPublications: NextPage = () => {
+  const currentProfile = useProfileStore((state) => state.currentProfile);
+  const staffMode = useFeatureFlagsStore((state) => state.staffMode);
+
+  useEffectOnce(() => {
+    Leafwatch.track(PAGEVIEW, {
+      page: 'staff-tools',
+      subpage: 'feature-flags'
+    });
+  });
+
+  if (!currentProfile || !staffMode) {
+    return <Custom404 />;
+  }
+
+  return (
+    <GridLayout>
+      <MetaTags title={`Staff Tools • Feature Flags • ${APP_NAME}`} />
+      <GridItemFour>
+        <StaffSidebar />
+      </GridItemFour>
+      <GridItemEight className="space-y-5">
+        <List />
+      </GridItemEight>
+    </GridLayout>
+  );
+};
+
+export default TopPublications;

apps/web/src/pages/staff/top-publications..tsx

@@ -0,0 +1,3 @@
+import TopPublications from '@components/Staff/TopPublications';
+
+export default TopPublications;