feat: add profiles tab to mod page

apps/web/src/components/Mod/FeedType.tsx

@@ -1,6 +1,6 @@
 import type { Dispatch, FC, SetStateAction } from 'react';
 
-import { ClockIcon, FlagIcon } from '@heroicons/react/24/outline';
+import { ClockIcon, FlagIcon, UsersIcon } from '@heroicons/react/24/outline';
 import { ModFeedType } from '@hey/data/enums';
 import { TabButton } from '@hey/ui';
 
@@ -16,17 +16,19 @@ const FeedType: FC<FeedTypeProps> = ({ feedType, setFeedType }) => {
         active={feedType === ModFeedType.LATEST}
         icon={<ClockIcon className="size-4" />}
         name="Latest"
-        onClick={() => {
-          setFeedType(ModFeedType.LATEST);
-        }}
+        onClick={() => setFeedType(ModFeedType.LATEST)}
       />
       <TabButton
         active={feedType === ModFeedType.REPORTS}
         icon={<FlagIcon className="size-4" />}
         name="Reports"
-        onClick={() => {
-          setFeedType(ModFeedType.REPORTS);
-        }}
+        onClick={() => setFeedType(ModFeedType.REPORTS)}
+      />
+      <TabButton
+        active={feedType === ModFeedType.PROFILES}
+        icon={<UsersIcon className="size-4" />}
+        name="Profiles"
+        onClick={() => setFeedType(ModFeedType.PROFILES)}
       />
     </div>
   );

apps/web/src/components/Mod/index.tsx

@@ -2,6 +2,7 @@ import type { NextPage } from 'next';
 
 import MetaTags from '@components/Common/MetaTags';
 import Footer from '@components/Shared/Footer';
+import List from '@components/Staff/Users/List';
 import { apps as knownApps } from '@hey/data/apps';
 import { APP_NAME } from '@hey/data/constants';
 import { ModFeedType } from '@hey/data/enums';
@@ -104,6 +105,7 @@ const Mod: NextPage = () => {
           />
         )}
         {feedType === ModFeedType.REPORTS && <ReportFeed />}
+        {feedType === ModFeedType.PROFILES && <List />}
       </GridItemEight>
       <GridItemFour>
         <Card className="p-5">
@@ -255,6 +257,7 @@ const Mod: NextPage = () => {
           {feedType === ModFeedType.REPORTS && (
             <div>Take action on reports</div>
           )}
+          {feedType === ModFeedType.PROFILES && <div>All the profiles</div>}
         </Card>
         <Footer />
       </GridItemFour>

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

@@ -12,18 +12,20 @@ import {
 } from '@hey/lens';
 import getProfile from '@hey/lib/getProfile';
 import { Card, EmptyState, ErrorMessage, Select } from '@hey/ui';
+import cn from '@hey/ui/cn';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 const List: FC = () => {
-  const { push } = useRouter();
+  const { pathname, push } = useRouter();
   const [orderBy, setOrderBy] = useState<ExploreProfilesOrderByType>(
     ExploreProfilesOrderByType.LatestCreated
   );
   const [value, setValue] = useState('');
+  const [refetching, setRefetching] = useState(false);
 
   // Variables
   const request: ExploreProfilesRequest = {
@@ -49,12 +51,24 @@ const List: FC = () => {
     });
   };
 
+  const onRefetch = async () => {
+    setRefetching(true);
+    await refetch();
+    setRefetching(false);
+  };
+
   return (
     <Card>
       <div className="flex items-center justify-between space-x-5 p-5">
         <SearchProfiles
           onChange={(event) => setValue(event.target.value)}
-          onProfileSelected={(profile) => push(getProfile(profile).staffLink)}
+          onProfileSelected={(profile) =>
+            push(
+              pathname === '/mod'
+                ? getProfile(profile).link
+                : getProfile(profile).staffLink
+            )
+          }
           placeholder="Search profiles..."
           skipGardeners
           value={value}
@@ -70,8 +84,10 @@ const List: FC = () => {
             value: orderBy
           }))}
         />
-        <button onClick={() => refetch()} type="button">
-          <ArrowPathIcon className="size-5" />
+        <button onClick={onRefetch} type="button">
+          <ArrowPathIcon
+            className={cn(refetching && 'animate-spin', 'size-5')}
+          />
         </button>
       </div>
       <div className="divider" />
@@ -98,7 +114,13 @@ const List: FC = () => {
                   exit={{ opacity: 0 }}
                   initial={{ opacity: 0 }}
                 >
-                  <Link href={getProfile(profile as Profile).staffLink}>
+                  <Link
+                    href={
+                      pathname === '/mod'
+                        ? getProfile(profile as Profile).link
+                        : getProfile(profile as Profile).staffLink
+                    }
+                  >
                     <UserProfile
                       isBig
                       linkToProfile={false}

packages/data/constants.ts

@@ -12,7 +12,7 @@ export const LENS_NETWORK = process.env.NEXT_PUBLIC_LENS_NETWORK || 'mainnet';
 export const LENS_API_URL = getEnvConfig().lensApiEndpoint;
 export const HEY_API_URL = IS_PRODUCTION
   ? getEnvConfig().heyApiEndpoint
-  : 'http://localhost:4784';
+  : 'http://192.168.0.104:4784';
 export const LENSHUB_PROXY = getEnvConfig().lensHubProxyAddress;
 export const TOKEN_HANDLE_REGISTRY = getEnvConfig().tokenHandleRegistry;
 export const PUBLICACT_PROXY = getEnvConfig().publicActProxyAddress;

packages/data/enums.ts

@@ -13,6 +13,7 @@ export enum HomeFeedType {
 }
 export enum ModFeedType {
   LATEST = 'LATEST',
+  PROFILES = 'PROFILES',
   REPORTS = 'REPORTS'
 }