fix: add reset function to swr pages

src/types.ts

@@ -108,6 +108,7 @@ export type pagesResponseInterface = {
   isReachingEnd: boolean
   isEmpty: boolean
   loadMore: () => void
+  resetPages: () => void
 }
 
 export type actionType<Data, Error> = {

src/use-swr-pages.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback, useMemo, useState, useRef } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { cache } from './config'
 import {
-  pagesResponseInterface,
-  responseInterface,
   pageComponentType,
-  pageOffsetMapperType
+  pageOffsetMapperType,
+  pagesResponseInterface,
+  responseInterface
 } from './types'
 
 /*
@@ -53,7 +53,8 @@ function App () {
     isLoadingMore,
     isReachingEnd,
     isEmpty,
-    loadMore
+    loadMore,
+    resetPages
   } = useSWRPages(
     'project-page', // key of this page
 
@@ -96,8 +97,8 @@ export function useSWRPages<OffsetType = any, Data = any, Error = any>(
   SWRToOffset: pageOffsetMapperType<OffsetType, Data, Error>,
   deps: any[] = []
 ): pagesResponseInterface {
-  const pageCountKey = `_swr_page_count_` + pageKey
-  const pageOffsetKey = `_swr_page_offset_` + pageKey
+  const pageCountKey = '_swr_page_count_' + pageKey
+  const pageOffsetKey = '_swr_page_offset_' + pageKey
 
   const [pageCount, setPageCount] = useState<number>(
     cache.get(pageCountKey) || 1
@@ -118,26 +119,39 @@ export function useSWRPages<OffsetType = any, Data = any, Error = any>(
 
     // if dataList is [], we can assume this page is empty
     // TODO: this API is not stable
-    if (dataList && !dataList.length) {
-      emptyPageRef.current = true
-    } else {
-      emptyPageRef.current = false
-    }
-
+    emptyPageRef.current = dataList && !dataList.length
     return dataList
   }, [])
 
+  const resetPages = useCallback(() => {
+    setPageSWRs([])
+    setPageCount(() => {
+      cache.set(pageCountKey, 1)
+      return 1
+    })
+    setPageOffsets(() => {
+      cache.set(pageOffsetKey, [null])
+      return [null]
+    })
+    pageCacheMap.set(pageKey, [])
+  }, [pageOffsetKey, pageCountKey])
+
+  // Reset page if the key changes
+  useEffect(() => resetPages(), [resetPages])
+
   // Doesn't have a next page
   const isReachingEnd = pageOffsets[pageCount] === null
-  const isLoadingMore = pageCount === pageOffsets.length
+  const isLoadingMore = pageCount > pageOffsets.length
   const isEmpty = isReachingEnd && pageCount === 1 && emptyPageRef.current
+
   const loadMore = useCallback(() => {
     if (isLoadingMore || isReachingEnd) return
     setPageCount(c => {
       cache.set(pageCountKey, c + 1)
       return c + 1
     })
-  }, [isLoadingMore || isReachingEnd])
+  }, [isLoadingMore, isReachingEnd, pageCountKey])
+
   const _pageFn = useCallback(pageFn, deps)
   pageFnRef.current = _pageFn
 
@@ -205,7 +219,7 @@ export function useSWRPages<OffsetType = any, Data = any, Error = any>(
       p.push(pageCache[i].component)
     }
     return p
-  }, [_pageFn, pageCount, pageSWRs, pageOffsets, pageKey])
+  }, [_pageFn, pageCount, pageSWRs, pageOffsets, pageKey, pageOffsetKey])
 
   return {
     pages,
@@ -214,6 +228,7 @@ export function useSWRPages<OffsetType = any, Data = any, Error = any>(
     isLoadingMore,
     isReachingEnd,
     isEmpty,
-    loadMore
+    loadMore,
+    resetPages
   }
 }