From 4e307e071e974d709257d243dc42152f1ba8965b Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Fri, 20 May 2022 16:06:28 +0300
Subject: [PATCH] fix: infinite query hook reset

---
 src/features/Posts/pages/FeedPage/FeedPage.tsx         |  8 ++++++--
 .../PopularTopicsFilter/PopularTopicsFilter.tsx        |  9 ++++-----
 src/features/Posts/pages/FeedPage/SortBy/SortBy.tsx    | 10 +++++-----
 src/utils/hooks/useInfiniteQuery.ts                    |  8 +++++++-
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/features/Posts/pages/FeedPage/FeedPage.tsx b/src/features/Posts/pages/FeedPage/FeedPage.tsx
index e905a94..14d006c 100644
--- a/src/features/Posts/pages/FeedPage/FeedPage.tsx
+++ b/src/features/Posts/pages/FeedPage/FeedPage.tsx
@@ -1,5 +1,7 @@
 
+import { useUpdateEffect } from '@react-hookz/web'
 import { useReducer, useState } from 'react'
+import { Nullable } from 'remirror'
 import { useFeedQuery } from 'src/graphql'
 import { useAppSelector, useInfiniteQuery } from 'src/utils/hooks'
 import PostsList from '../../Components/PostsList/PostsList'
@@ -11,7 +13,7 @@ import styles from './styles.module.scss'
 
 export default function FeedPage() {
 
-    const [sortByFilter, setSortByFilter] = useState('all')
+    const [sortByFilter, setSortByFilter] = useState<string | null>(null)
     const [topicFilter, setTopicFilter] = useState<number | null>(null)
 
 
@@ -23,7 +25,9 @@ export default function FeedPage() {
             topic: topicFilter
         },
     })
-    const { fetchMore, isFetchingMore } = useInfiniteQuery(feedQuery, 'getFeed')
+    const { fetchMore, isFetchingMore, variablesChanged } = useInfiniteQuery(feedQuery, 'getFeed')
+    useUpdateEffect(variablesChanged, [sortByFilter, topicFilter]);
+
     const { navHeight } = useAppSelector((state) => ({
         navHeight: state.ui.navHeight
     }));
diff --git a/src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.tsx b/src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.tsx
index 9989772..3716c8c 100644
--- a/src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.tsx
+++ b/src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.tsx
@@ -25,19 +25,18 @@ const filters = [
 ]
 
 interface Props {
-    filterChanged?: (newFilter: number) => void
+    filterChanged?: (newFilter: number | null) => void
 }
 
 export default function PopularTopicsFilter({ filterChanged }: Props) {
 
-    const [selected, setSelected] = useState(filters[0].value);
+    const [selected, setSelected] = useState<number | null>(filters[0].value);
 
     const topicsQuery = usePopularTopicsQuery();
 
 
-    const filterClicked = (newValue: number) => {
-        if (selected === newValue)
-            return
+    const filterClicked = (_newValue: number) => {
+        const newValue = selected !== _newValue ? _newValue : null;
         setSelected(newValue);
         filterChanged?.(newValue);
     }
diff --git a/src/features/Posts/pages/FeedPage/SortBy/SortBy.tsx b/src/features/Posts/pages/FeedPage/SortBy/SortBy.tsx
index d4746fe..de1405f 100644
--- a/src/features/Posts/pages/FeedPage/SortBy/SortBy.tsx
+++ b/src/features/Posts/pages/FeedPage/SortBy/SortBy.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { Nullable } from 'remirror';
 
 const filters = [
     {
@@ -14,16 +15,15 @@ const filters = [
 ]
 
 interface Props {
-    filterChanged?: (newFilter: string) => void
+    filterChanged?: (newFilter: string | null) => void
 }
 
 export default function SortBy({ filterChanged }: Props) {
 
-    const [selected, setSelected] = useState(filters[0].value);
+    const [selected, setSelected] = useState<Nullable<string>>(filters[0].value);
 
-    const filterClicked = (newValue: string) => {
-        if (selected === newValue)
-            return
+    const filterClicked = (_newValue: string) => {
+        const newValue = selected !== _newValue ? _newValue : null;
         setSelected(newValue);
         filterChanged?.(newValue);
     }
diff --git a/src/utils/hooks/useInfiniteQuery.ts b/src/utils/hooks/useInfiniteQuery.ts
index 5a1f0ba..bd56178 100644
--- a/src/utils/hooks/useInfiniteQuery.ts
+++ b/src/utils/hooks/useInfiniteQuery.ts
@@ -1,4 +1,5 @@
 import { QueryResult } from "@apollo/client";
+import { useUpdateEffect } from "@react-hookz/web";
 import { useCallback, useState } from "react";
 
 export const useInfiniteQuery = (query: QueryResult, dataField: string) => {
@@ -6,6 +7,10 @@ export const useInfiniteQuery = (query: QueryResult, dataField: string) => {
     const [reachedLastPage, setReachedLastPage] = useState(false)
 
 
+    const variablesChanged = () => {
+        setReachedLastPage(false);
+    }
+
     const fetchMore = useCallback(
         () => {
             if (!fetchingMore && !reachedLastPage) {
@@ -28,6 +33,7 @@ export const useInfiniteQuery = (query: QueryResult, dataField: string) => {
 
     return {
         isFetchingMore: fetchingMore,
-        fetchMore: fetchMore
+        fetchMore: fetchMore,
+        variablesChanged // Call this function whenever other query vars beside take/skip changes.
     }
 }