feat: implement readPostIdSet for optimized read post management

Author: medyo

src/components/List/ListComponent.tsx

@@ -44,15 +44,20 @@ export function ListComponent<T extends any>(props: ListComponentPropsType<T>) {
     limit = MAX_ITEMS_PER_CARD,
   } = props
 
-  const { readPostIds } = useReadPosts()
   const { showReadPosts } = useUserPreferences()
+  const readPostIdSet = useReadPosts((state) => state.readPostIdSet)
 
   const filteredItems = useMemo(() => {
-    if (!items || items.length === 0) return []
-    if (showReadPosts) return items
-    const readSet = new Set(readPostIds)
-    return items.filter((item: any) => !readSet.has(item.id))
-  }, [items, readPostIds, showReadPosts])
+    if (!items || items.length === 0) {
+      return []
+    }
+
+    if (showReadPosts) {
+      return items
+    }
+
+    return items.filter((item: any) => !readPostIdSet.has(item.id))
+  }, [items, readPostIdSet, showReadPosts])
 
   const sortedData = useMemo(() => {
     if (!filteredItems || filteredItems.length == 0) return []
@@ -71,23 +76,14 @@ export function ListComponent<T extends any>(props: ListComponentPropsType<T>) {
     return result
   }, [sortBy, sortFn, filteredItems])
 
-  const readSet = useMemo(() => new Set(readPostIds), [readPostIds])
-
   const enrichedItems = useMemo(() => {
     if (!sortedData || sortedData.length === 0) {
       return []
     }
 
     try {
       return sortedData.slice(0, limit).map((item, index) => {
-        const isRead = readSet.has((item as any).id)
-        const itemNode = isRead ? (
-          <div key={(item as any).id} className="readPostWrapper" aria-label="Read">
-            {renderItem(item, index)}
-          </div>
-        ) : (
-          renderItem(item, index)
-        )
+        const itemNode = renderItem(item, index)
         let content: ReactNode[] = [itemNode]
         if (header && index === 0) {
           content.unshift(header)
@@ -98,7 +94,7 @@ export function ListComponent<T extends any>(props: ListComponentPropsType<T>) {
     } catch (e) {
       return []
     }
-  }, [sortedData, header, renderItem, limit, readSet])
+  }, [sortedData, header, renderItem, limit])
 
   if (isLoading) {
     return <Placeholders placeholder={placeholder} />
@@ -120,7 +116,9 @@ export function ListComponent<T extends any>(props: ListComponentPropsType<T>) {
       <div className="centerMessageWrapper cardLoading">
         <div className="centerMessage errorMsg">
           <span className="centerMessageIcon">✨</span>
-          <p><b>You're all caught up!</b></p>
+          <p>
+            <b>You're all caught up!</b>
+          </p>
           <p className="centerMessageSubtext">Check back later for fresh content.</p>
         </div>
       </div>

src/stores/readPosts.ts

@@ -5,6 +5,7 @@ const MAX_READ_POST_IDS = 5000
 
 type ReadPostsStore = {
   readPostIds: string[]
+  readPostIdSet: Set<string>
   markAsRead: (postId: string) => void
   markAsUnread: (postId: string) => void
 }
@@ -13,7 +14,7 @@ export const useReadPosts = create<ReadPostsStore>()(
   persist(
     (set) => ({
       readPostIds: [],
-
+      readPostIdSet: new Set(),
       markAsRead: (postId) =>
         set((state) => {
           if (state.readPostIds.includes(postId)) return state
@@ -23,14 +24,31 @@ export const useReadPosts = create<ReadPostsStore>()(
               ? [...state.readPostIds.slice(1), postId]
               : [...state.readPostIds, postId]
 
-          return { readPostIds: next }
+          const nextSet = new Set(state.readPostIdSet)
+          nextSet.add(postId)
+
+          return { readPostIds: next, readPostIdSet: nextSet }
         }),
 
       markAsUnread: (postId) =>
-        set((state) => ({
-          readPostIds: state.readPostIds.filter((id) => id !== postId),
-        })),
+        set((state) => {
+          if (!state.readPostIds.includes(postId)) return state
+
+          const next = state.readPostIds.filter((id) => id !== postId)
+          const nextSet = new Set(state.readPostIdSet)
+          nextSet.delete(postId)
+
+          return { readPostIds: next, readPostIdSet: nextSet }
+        }),
     }),
-    { name: 'read_post_ids' }
+    {
+      name: 'read_post_ids_storage',
+      partialize: (state) => ({ readPostIds: state.readPostIds }),
+      onRehydrateStorage: () => (state) => {
+        if (state) {
+          state.readPostIdSet = new Set(state.readPostIds)
+        }
+      },
+    }
   )
-)
+)