fix: new activity indicator persists across refresh

geyserfund · May 5, 2023 · 10d64b5 · 10d64b5
1 parent e379331
commit 10d64b5
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 9 deletions.
diff --git a/src/context/activitySubscription.tsx b/src/context/activitySubscription.tsx
@@ -1,6 +1,12 @@
 import { useSubscription } from '@apollo/client'
 import { DateTime } from 'luxon'
-import { createContext, useCallback, useContext, useState } from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 
 import { ACTIVITY_CREATION_SUBSCRIPTION } from '../graphql/subscriptions'
 import {
@@ -14,14 +20,17 @@ import { useAuthContext } from './auth'
 export interface ActivitySubscriptionState {
   activities: ActivityForLandingPageFragment[]
   clearActivity: () => void
+  hasNewActivity: boolean
 }
 
 const defaultActivitySubscriptionContext = {
   activities: [],
-  addActivitiy() {},
   clearActivity() {},
+  hasNewActivity: false,
 }
 
+export const NEW_ACTIVITY_FLAG = 'NEW_ACTIVITY_FLAG'
+
 export const ActivitySubscriptionContext =
   createContext<ActivitySubscriptionState>(defaultActivitySubscriptionContext)
 
@@ -30,6 +39,8 @@ export const ActivitySubscriptionProvider = ({
 }: {
   children: React.ReactNode
 }) => {
+  const [hasNewActivity, setHasNewActivity] = useState(false)
+
   const [activities, setActivities] = useState<
     ActivityForLandingPageFragment[]
   >([])
@@ -56,17 +67,31 @@ export const ActivitySubscriptionProvider = ({
       } as ActivityForLandingPageFragment
 
       if (activityCreated) {
+        localStorage.setItem(NEW_ACTIVITY_FLAG, 'true')
+        setHasNewActivity(true)
         setActivities((current) => [...current, newActivity])
       }
     },
   })
 
   const clearActivity = useCallback(() => {
+    localStorage.removeItem(NEW_ACTIVITY_FLAG)
+    setHasNewActivity(false)
     setActivities([])
   }, [])
 
+  useEffect(() => {
+    const isNewActivity = localStorage.getItem(NEW_ACTIVITY_FLAG)
+
+    if (isNewActivity) {
+      setHasNewActivity(true)
+    }
+  }, [])
+
   return (
-    <ActivitySubscriptionContext.Provider value={{ activities, clearActivity }}>
+    <ActivitySubscriptionContext.Provider
+      value={{ hasNewActivity, activities, clearActivity }}
+    >
       {children}
     </ActivitySubscriptionContext.Provider>
   )

diff --git a/src/pages/entry/EntryPage.tsx b/src/pages/entry/EntryPage.tsx
@@ -59,6 +59,7 @@ export const EntryPage = () => {
 
   const [getEntry, { loading: loadingPosts, error, data: entryData }] =
     useLazyQuery(QUERY_ENTRY, {
+      fetchPolicy: 'network-only',
       onCompleted(data) {
         const { entry } = data
         if (!entry) {

diff --git a/src/pages/landing/components/TabBar.tsx b/src/pages/landing/components/TabBar.tsx
@@ -16,7 +16,7 @@ export const TabBar = (props: TabBarProps) => {
   const { clearFilter } = useFilterContext()
   const navigate = useNavigate()
   const { user } = useAuthContext()
-  const { activities } = useActivitySubsciptionContext()
+  const { hasNewActivity } = useActivitySubsciptionContext()
 
   const isCurrentTabActivity = useMatch(getPath('landingFeed'))
 
@@ -61,7 +61,7 @@ export const TabBar = (props: TabBarProps) => {
           alignItems="center"
         >
           <Text fontSize="16px">Activity</Text>
-          {activities.length > 0 && (
+          {hasNewActivity && (
             <Box
               height="10px"
               width="10px"

diff --git a/src/pages/landing/feed/ActivityFeed.tsx b/src/pages/landing/feed/ActivityFeed.tsx
@@ -103,7 +103,10 @@ export const ActivityFeed = () => {
         {!isMobile && <FilterTopBar noSort paddingBottom="20px" />}
 
         {subscriptionActivities.length > 0 && (
-          <ViewUpdates onClick={handleClick} />
+          <ViewUpdates
+            length={subscriptionActivities.length}
+            onClick={handleClick}
+          />
         )}
 
         <ActivityList activities={aggregatedActivites} />
@@ -142,11 +145,27 @@ export const ContributionsSkeleton = () => {
   )
 }
 
-export const ViewUpdates = ({ onClick }: { onClick: () => void }) => {
+const ViewUpdates = ({
+  onClick,
+  length,
+}: {
+  length: number
+  onClick: () => void
+}) => {
+  const displayText =
+    length > 1 ? `Show ${length} new items` : `Show ${length} new item`
   return (
     <>
-      <Button size="sm" variant="outlined" onClick={onClick}>
-        view updates
+      <Button
+        size="sm"
+        variant="transparent"
+        onClick={onClick}
+        _hover={{}}
+        _focus={{ color: 'primary.700' }}
+        _active={{ color: 'primary.700' }}
+        color="primary.500"
+      >
+        {displayText}
       </Button>
       <Divider borderBottomWidth="2px" maxWidth="500px" color="brand.200" />
     </>