Improve notifications and analytics pages (#505)

pages/analytics/index.tsx

@@ -28,9 +28,11 @@ import { UTCDate } from '@date-fns/utc';
 import { getPlanLimitsForPlan } from '@/config/planLimits';
 import { isPaidUser } from '@/stores/useUserStore';
 import UpgradeFreePlanCard from '@/common/components/UpgradeFreePlanCard';
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
 
 type FidToAnalyticsData = Record<string, AnalyticsData>;
 const intervals = [Interval.d7, Interval.d30, Interval.d90];
+const LANDING_PAGE_DEFAULT_FID = '3';
 
 function timeUntilNextUTCHour(hour: number): string {
  const now = new Date();
@@ -126,22 +128,33 @@ export default function AnalyticsPage() {
  }
  }, [fid, user]);
 
+ const fetchAndAddUserProfile = async ({ username, fid }: { username?: string; fid: string }) => {
+ getUserDataForFidOrUsername({
+ username,
+ fid,
+ viewerFid: process.env.NEXT_PUBLIC_APP_FID!,
+ }).then((users) => {
+ if (users.length) {
+ setSelectedProfile(users[0]);
+ }
+ setIsLoading(false);
+ });
+ };
+
  useEffect(() => {
  const fidFromQuery = query.fid as string;
  const usernameFromQuery = query.username as string;
  if (fidFromQuery || usernameFromQuery) {
- getUserDataForFidOrUsername({
+ fetchAndAddUserProfile({
  username: usernameFromQuery,
  fid: fidFromQuery,
- viewerFid: process.env.NEXT_PUBLIC_APP_FID!,
- }).then((users) => {
- if (users.length) {
- setSelectedProfile(users[0]);
- }
- setIsLoading(false);
  });
  } else if (selectedAccountInApp && selectedAccountInApp?.user) {
  setSelectedProfile(selectedAccountInApp.user);
+ } else {
+ fetchAndAddUserProfile({
+ fid: LANDING_PAGE_DEFAULT_FID,
+ });
  }
  }, [query, selectedAccountInApp]);
 
@@ -158,8 +171,8 @@ export default function AnalyticsPage() {
  />
  {!isLoading && !user && (
  <Link href="/login">
- <Button variant="default" size="sm">
- Login to see more insights <ChartBarIcon className="h-4 w-4 ml-2" />
+ <Button variant="default">
+ See your own Farcaster analytics <ArrowRightIcon className="h-4 w-4 ml-2" />
  </Button>
  </Link>
  )}

pages/feeds/index.tsx

@@ -27,7 +27,6 @@ import includes from 'lodash.includes';
 import { useListStore } from '@/stores/useListStore';
 import { getCastsFromSearch, SearchFilters } from '@/common/helpers/search';
 import { Interval } from '@/common/types/types';
-import sortBy from 'lodash.sortby';
 import { orderBy } from 'lodash';
 
 type Feed = {

pages/notifications/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
 import { castTextStyle } from '@/common/helpers/css';
 import { useAccountStore } from '../../src/stores/useAccountStore';
@@ -94,6 +94,14 @@ const Notifications = () => {
  const [showReactionsLimit, setShowReactionsLimit] = useState<number>(DEFAULT_SHOW_REACTIONS_LIMIT);
  const viewerFid = useAccountStore((state) => state.accounts[state.selectedAccountIdx]?.platformAccountId);
  const notifications = filterNotificationsByActiveTab(allNotifications, activeTab);
+ const lastUpdateTimeRef = useRef<number>(Date.now());
+
+ const changeTab = (tab: NotificationTab) => {
+ setActiveTab(tab);
+ setSelectedNotificationIdx(0);
+ setParentCastHash(undefined);
+ setParentCast(undefined);
+ };
 
  useEffect(() => {
  // if navigating away, reset the selected cast
@@ -102,9 +110,9 @@ const Notifications = () => {
  };
  }, []);
 
- const loadData = async ({ reset }: { reset?: boolean }) => {
+ const fetchNotifications = async ({ reset }: { reset?: boolean }) => {
  if (!viewerFid) return;
- console.log('Notifications Page -> loadData | loadMoreCursor', loadMoreCursor);
+ console.log('Notifications Page -> fetchNotifications. reset', reset);
  setIsLoading(true);
  if (reset) {
  setNotifications([]);
@@ -126,19 +134,35 @@ const Notifications = () => {
  setLoadMoreCursor(resp.next.cursor);
  }
  setIsLoading(false);
+ lastUpdateTimeRef.current = Date.now();
  };
 
  useEffect(() => {
  if (!viewerFid) return;
 
  setLoadMoreCursor(undefined);
- loadData({ reset: true });
+ fetchNotifications({ reset: true });
 
  closeNewCastModal();
  setIsLeftColumnSelected(true);
  setSelectedNotificationIdx(0);
  }, [viewerFid]);
 
+ useEffect(() => {
+ const checkAndUpdateNotifications = () => {
+ const currentTime = Date.now();
+ if (currentTime - lastUpdateTimeRef.current > 5 * 60 * 1000) {
+ // 5 minutes
+ fetchNotifications({ reset: true });
+ lastUpdateTimeRef.current = currentTime;
+ }
+ };
+
+ const intervalId = setInterval(checkAndUpdateNotifications, 60 * 1000); // Check every minute
+
+ return () => clearInterval(intervalId);
+ }, [viewerFid]);
+
  useEffect(() => {
  setSelectedNotificationIdx(0);
  }, [activeTab]);
@@ -191,12 +215,12 @@ const Notifications = () => {
  }
  );
 
- useHotkeys('shift+1', () => setActiveTab(NotificationTab.all), [], {});
- useHotkeys('shift+2', () => setActiveTab(NotificationTab.replies), [], {});
- useHotkeys('shift+3', () => setActiveTab(NotificationTab.mentions), [], {});
- useHotkeys('shift+4', () => setActiveTab(NotificationTab.likes), [], {});
- useHotkeys('shift+5', () => setActiveTab(NotificationTab.recasts), [], {});
- useHotkeys('shift+6', () => setActiveTab(NotificationTab.follows), [], {});
+ useHotkeys('shift+1', () => changeTab(NotificationTab.all), [], {});
+ useHotkeys('shift+2', () => changeTab(NotificationTab.replies), [], {});
+ useHotkeys('shift+3', () => changeTab(NotificationTab.mentions), [], {});
+ useHotkeys('shift+4', () => changeTab(NotificationTab.likes), [], {});
+ useHotkeys('shift+5', () => changeTab(NotificationTab.recasts), [], {});
+ useHotkeys('shift+6', () => changeTab(NotificationTab.follows), [], {});
 
  useHotkeys(
  ['l', 'o', Key.Enter, Key.ArrowRight],
@@ -285,7 +309,7 @@ const Notifications = () => {
 
  const renderLoadNotificationsButton = () => (
  <div className="flex justify-center my-8">
- <Button variant="outline" size="lg" disabled={isLoading} onClick={() => loadData({ reset: false })}>
+ <Button variant="outline" size="lg" disabled={isLoading} onClick={() => fetchNotifications({ reset: false })}>
  {isLoading ? <Loading /> : `Load ${notifications.length === 0 ? '' : 'more'}`}
  </Button>
  </div>
@@ -389,7 +413,8 @@ const Notifications = () => {
  <div className="min-h-full h-full">
  {(notificationType === NotificationTypeEnum.Reply || notificationType === NotificationTypeEnum.Mention) && (
  <div className="border-b border-foreground/20 relative flex items-center space-x-4 max-w-full">
- {parentCast ? <CastRow cast={parentCast} showChannel /> : <SkeletonCastRow />}
+ {parentCast && <CastRow cast={parentCast} showChannel />}
+ {!parentCast && parentCastHash && <SkeletonCastRow />}
  </div>
  )}
  <div className="border-b border-foreground/20 relative flex items-center space-x-4 max-w-full">
@@ -456,7 +481,7 @@ const Notifications = () => {
  <Tabs
  defaultValue={NotificationTab.all}
  value={activeTab}
- onValueChange={(value: string) => setActiveTab(value as NotificationTab)}
+ onValueChange={(value: string) => changeTab(value as NotificationTab)}
  >
  <div className="w-full md:max-w-xl md:mx-4">
  <TabsList className="grid grid-cols-3 md:grid-cols-6">

src/common/components/UpgradeFreePlanCard.tsx

@@ -21,7 +21,7 @@ const UpgradeFreePlanCard = ({ limitKey, size = 'sm' }: UpgradeFreePlanCardProps
  const { accounts } = useAccountStore();
  const { drafts } = useDraftStore();
 
- // if (isPaidUser()) return null;
+ if (isPaidUser()) return null;
 
  const getValueForLimit = () => {
  switch (limitKey) {