From 4f54ac398e3e701422fc99515e5ad7e06bcf1374 Mon Sep 17 00:00:00 2001
From: bigint <69431456+bigint@users.noreply.github.com>
Date: Wed, 27 Dec 2023 00:07:14 +0530
Subject: [PATCH] feat: add top publications page in staff tools

---
 .../Home/Sidebar/HeyMembershipNft.tsx         |  2 +-
 apps/web/src/components/Staff/Sidebar.tsx     |  6 ++
 .../components/Staff/TopPublications/List.tsx | 88 +++++++++++++++++++
 .../Staff/TopPublications/index.tsx           | 44 ++++++++++
 .../{feature-flags.ts => feature-flags.tsx}   |  0
 .../src/pages/staff/{index.ts => index.tsx}   |  0
 .../src/pages/staff/{tokens.ts => tokens.tsx} |  0
 .../web/src/pages/staff/top-publications..tsx |  3 +
 .../pages/staff/users/{[id].ts => [id].tsx}   |  0
 .../pages/staff/users/{index.ts => index.tsx} |  0
 10 files changed, 142 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/components/Staff/TopPublications/List.tsx
 create mode 100644 apps/web/src/components/Staff/TopPublications/index.tsx
 rename apps/web/src/pages/staff/{feature-flags.ts => feature-flags.tsx} (100%)
 rename apps/web/src/pages/staff/{index.ts => index.tsx} (100%)
 rename apps/web/src/pages/staff/{tokens.ts => tokens.tsx} (100%)
 create mode 100644 apps/web/src/pages/staff/top-publications..tsx
 rename apps/web/src/pages/staff/users/{[id].ts => [id].tsx} (100%)
 rename apps/web/src/pages/staff/users/{index.ts => index.tsx} (100%)

diff --git a/apps/web/src/components/Home/Sidebar/HeyMembershipNft.tsx b/apps/web/src/components/Home/Sidebar/HeyMembershipNft.tsx
index 5270b8f34d68..e46d138ff8cd 100644
--- a/apps/web/src/components/Home/Sidebar/HeyMembershipNft.tsx
+++ b/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
diff --git a/apps/web/src/components/Staff/Sidebar.tsx b/apps/web/src/components/Staff/Sidebar.tsx
index 33fccf6bf07a..8f1a8e076edf 100644
--- a/apps/web/src/components/Staff/Sidebar.tsx
+++ b/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'
   }
 ];
 
diff --git a/apps/web/src/components/Staff/TopPublications/List.tsx b/apps/web/src/components/Staff/TopPublications/List.tsx
new file mode 100644
index 000000000000..4c903a09753f
--- /dev/null
+++ b/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;
diff --git a/apps/web/src/components/Staff/TopPublications/index.tsx b/apps/web/src/components/Staff/TopPublications/index.tsx
new file mode 100644
index 000000000000..baadf98d3655
--- /dev/null
+++ b/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;
diff --git a/apps/web/src/pages/staff/feature-flags.ts b/apps/web/src/pages/staff/feature-flags.tsx
similarity index 100%
rename from apps/web/src/pages/staff/feature-flags.ts
rename to apps/web/src/pages/staff/feature-flags.tsx
diff --git a/apps/web/src/pages/staff/index.ts b/apps/web/src/pages/staff/index.tsx
similarity index 100%
rename from apps/web/src/pages/staff/index.ts
rename to apps/web/src/pages/staff/index.tsx
diff --git a/apps/web/src/pages/staff/tokens.ts b/apps/web/src/pages/staff/tokens.tsx
similarity index 100%
rename from apps/web/src/pages/staff/tokens.ts
rename to apps/web/src/pages/staff/tokens.tsx
diff --git a/apps/web/src/pages/staff/top-publications..tsx b/apps/web/src/pages/staff/top-publications..tsx
new file mode 100644
index 000000000000..84d314515b99
--- /dev/null
+++ b/apps/web/src/pages/staff/top-publications..tsx
@@ -0,0 +1,3 @@
+import TopPublications from '@components/Staff/TopPublications';
+
+export default TopPublications;
diff --git a/apps/web/src/pages/staff/users/[id].ts b/apps/web/src/pages/staff/users/[id].tsx
similarity index 100%
rename from apps/web/src/pages/staff/users/[id].ts
rename to apps/web/src/pages/staff/users/[id].tsx
diff --git a/apps/web/src/pages/staff/users/index.ts b/apps/web/src/pages/staff/users/index.tsx
similarity index 100%
rename from apps/web/src/pages/staff/users/index.ts
rename to apps/web/src/pages/staff/users/index.tsx