Trigger loaders when using filters

alianza · Jun 1, 2024 · e78f6f0 · e78f6f0
1 parent bf9cf6f
commit e78f6f0
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 3 deletions.
diff --git a/lib/clientUtils.js b/lib/clientUtils.js
@@ -185,3 +185,10 @@ export const directionSelectOptions = (
     <option value="none">No direction</option>
   </>
 );
+
+/**
+ * Trigger a shallow router reload in order to trigger the Nprogress loader
+ * @param router {Object} - The Next.js router object
+ * @returns {*}
+ */
+export const triggerLoader = (router) => router.push({ pathname: router.asPath }, undefined, { shallow: true });
diff --git a/pages/combos/index.jsx b/pages/combos/index.jsx
@@ -8,20 +8,24 @@ import {
   hiddenStyle,
   landedAtCol,
   stanceSelectOptions,
+  triggerLoader,
 } from '../../lib/clientUtils';
 import { stringifyValues } from '../../lib/commonUtils';
 import GenericTable from '../../components/common/genericTable/GenericTable';
 import TransitionScroll from 'react-transition-scroll';
 import Filters from '../../components/common/Filters';
+import { useRouter } from 'next/router';
 
 const defaultFilters = { grind: false, manual: false, stance: 'all', landed: 'any' };
 
 export default function CombosPage() {
   const [combos, setCombos] = useState(null);
   const [filters, setFilters] = useState(defaultFilters);
+  const router = useRouter();
 
   useAsyncEffect(async () => {
     try {
+      triggerLoader(router);
       const params = new URLSearchParams(stringifyValues(filters));
       const { data } = await apiCall(`combos?${params}`, { method: 'GET' });
       setCombos(data);

diff --git a/pages/flatgroundtricks/index.jsx b/pages/flatgroundtricks/index.jsx
@@ -1,20 +1,31 @@
 import { useState } from 'react';
 import { useAsyncEffect } from '../../lib/customHooks';
 import { toast } from 'react-toastify';
-import { apiCall, baseStyle, getCommonActions, hiddenStyle, landedAtCol, trickCol } from '../../lib/clientUtils';
+import {
+  apiCall,
+  baseStyle,
+  getCommonActions,
+  hiddenStyle,
+  landedAtCol,
+  trickCol,
+  triggerLoader,
+} from '../../lib/clientUtils';
 import GenericTable from '../../components/common/genericTable/GenericTable';
 import TransitionScroll from 'react-transition-scroll';
 import Filters from '../../components/common/Filters';
 import { stringifyValues } from '../../lib/commonUtils';
+import { useRouter } from 'next/router';
 
 const defaultFilters = { landed: 'any' };
 
 export default function FlatgroundTricksPage() {
   const [flatgroundTricks, setFlatgroundTricks] = useState(null);
   const [filters, setFilters] = useState(defaultFilters);
+  const router = useRouter();
 
   useAsyncEffect(async () => {
     try {
+      triggerLoader(router);
       const searchParams = new URLSearchParams(stringifyValues(filters));
       const { data } = await apiCall(`flatgroundtricks`, { method: 'GET', searchParams });
       setFlatgroundTricks(data);

diff --git a/pages/grinds/index.jsx b/pages/grinds/index.jsx
@@ -1,20 +1,31 @@
 import { useState } from 'react';
 import { useAsyncEffect } from '../../lib/customHooks';
 import { toast } from 'react-toastify';
-import { apiCall, baseStyle, getCommonActions, hiddenStyle, landedAtCol, trickCol } from '../../lib/clientUtils';
+import {
+  apiCall,
+  baseStyle,
+  getCommonActions,
+  hiddenStyle,
+  landedAtCol,
+  trickCol,
+  triggerLoader,
+} from '../../lib/clientUtils';
 import GenericTable from '../../components/common/genericTable/GenericTable';
 import TransitionScroll from 'react-transition-scroll';
 import Filters from '../../components/common/Filters';
 import { stringifyValues } from '../../lib/commonUtils';
+import { useRouter } from 'next/router';
 
 const defaultFilters = { landed: 'any' };
 
 export default function GrindsPage() {
   const [grinds, setGrinds] = useState(null);
   const [filters, setFilters] = useState(defaultFilters);
+  const router = useRouter();
 
   useAsyncEffect(async () => {
     try {
+      triggerLoader(router);
       const searchParams = new URLSearchParams(stringifyValues(filters));
       const { data } = await apiCall('grinds', { method: 'GET', searchParams });
       setGrinds(data);

diff --git a/pages/manuals/index.jsx b/pages/manuals/index.jsx
@@ -1,20 +1,23 @@
 import { useState } from 'react';
 import { useAsyncEffect } from '../../lib/customHooks';
 import { toast } from 'react-toastify';
-import { apiCall, baseStyle, getCommonActions, hiddenStyle, landedAtCol } from '../../lib/clientUtils';
+import { apiCall, baseStyle, getCommonActions, hiddenStyle, landedAtCol, triggerLoader } from '../../lib/clientUtils';
 import GenericTable from '../../components/common/genericTable/GenericTable';
 import TransitionScroll from 'react-transition-scroll';
 import Filters from '../../components/common/Filters';
 import { stringifyValues } from '../../lib/commonUtils';
+import { useRouter } from 'next/router';
 
 const defaultFilters = { landed: 'any' };
 
 export default function ManualsPage() {
   const [manuals, setManuals] = useState(null);
   const [filters, setFilters] = useState(defaultFilters);
+  const router = useRouter();
 
   useAsyncEffect(async () => {
     try {
+      triggerLoader(router);
       const searchParams = new URLSearchParams(stringifyValues(filters));
       const { data } = await apiCall('manuals', { method: 'GET', searchParams });
       setManuals(data);