fix jamTrack query params: page

jam-ui/src/components/jamtracks/JKJamTracksFilter.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { useBrowserQuery } from '../../context/BrowserQuery';
 import { Card, CardBody, Row, Col } from 'reactstrap';
@@ -21,7 +21,7 @@ const JKJamTracksFilter = () => {
   const [nextOffset, setNextOffset] = useState(null);
   const [totalJamTracks, setTotalJamTracks] = useState(0);
   const [autoCompleteInputValue, setAutoCompleteInputValue] = useState('');
-  const [page, setPage] = useState(1);
+  const page = useRef(1);
   const PER_PAGE = 10;
   const { shoppingCart } = useShoppingCart();
   const { greaterThan } = useResponsive();
@@ -37,11 +37,9 @@ const JKJamTracksFilter = () => {
 
   useEffect(() => {
     if(query && !artist) {
-      //setAutoCompleteInputValue(query);
       handleOnEnter(query);
     }
     if(artist && !query) {
-      //setAutoCompleteInputValue(artist);
       handleOnEnter(artist);
     }
   }, [query]);
@@ -49,7 +47,7 @@ const JKJamTracksFilter = () => {
   const queryOptions = selected => {
     const options = {
       per_page: PER_PAGE,
-      page: page
+      page: page.current,
     };
 
     if (typeof selected === 'string') {
@@ -67,7 +65,7 @@ const JKJamTracksFilter = () => {
   };
 
   const handleOnSelect = async selected => {
-    setPage(1);
+    page.current = 1;
     setJamTracks([]);
     setSearchTerm('');
     setSelected(selected);
@@ -76,7 +74,7 @@ const JKJamTracksFilter = () => {
   };
 
   const handleOnEnter = async queryStr => {
-    setPage(1);
+    page.current = 1;
     setJamTracks([]);
     setSelected(x => null);
     setSearchTerm(queryStr);
@@ -98,7 +96,7 @@ const JKJamTracksFilter = () => {
       setJamTracks(prev => [...prev, ...data.jamtracks]);
       setNextOffset(data.next);
       setTotalJamTracks(data.count);
-      setPage(page + 1);
+      page.current = page.current + 1;
     } catch (error) {
       console.error('error', error);
     }

jam-ui/src/components/page/JKPeopleSwiper.js

@@ -59,7 +59,9 @@ const JKPeopleSwiper = ({ people, goNextPage }) => {
         ))}
       </Swiper>
       <div className="py-4 px-6 bg-white border-top w-100 fixed-bottom">
-        <div className="swiper-pagination" />
+        <div className="swiper-pagination">
+          <div></div>
+        </div>
         <div className="swiper-button-prev" />
         <div className="swiper-button-next" />
       </div>