fix jamtrack autocomplete component

add debouncing technique to fetch data when fetching the data
move the FingerprintJS initialization to the appDataContext so it is not
instantiate eveytime

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

@@ -1,9 +1,8 @@
-import React, { useEffect, useCallback, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Row, Col, FormGroup, Input, InputGroup, InputGroupText, ListGroup, ListGroupItem } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useTranslation } from 'react-i18next';
-import { autocompleteJamTracks } from '../../helpers/rest';
 import PropTypes from 'prop-types';
+import useDebouncedValue from '../../hooks/useDebounceValue';
 
 const JKJamTracksAutoComplete = ({
   fetchFunc,
@@ -19,14 +18,15 @@ const JKJamTracksAutoComplete = ({
   const [songs, setSongs] = useState([]);
   const [loading, setLoading] = useState(false);
   const inputRef = useRef(null);
-  const { t } = useTranslation();
-  const MIN_FILTER_SIZE = 3;
   const MIN_FETCH_LIMIT = 5;
+  const DELAY = 400;
 
-  const fetchAutoCompleteResults = useCallback(() => {
+  const debouncedValue = useDebouncedValue(inputValue, DELAY);
+
+  const fetchAutoCompleteResults = () => {
     // fetch tracks
     setLoading(true);
-    fetchFunc(inputValue, MIN_FETCH_LIMIT)
+    fetchFunc(debouncedValue, MIN_FETCH_LIMIT)
     .then(resp => {
       return resp.json();
     })
@@ -58,15 +58,14 @@ const JKJamTracksAutoComplete = ({
     .finally(() => {
       setLoading(false);
     });
-  }, [inputValue]);
+  }
 
   useEffect(() => {
-    if (inputValue && inputValue.length >= MIN_FILTER_SIZE) {
+    console.log('debounced value', debouncedValue)
-      fetchAutoCompleteResults();
+    if(debouncedValue && debouncedValue.length > 0){
-    } else {
+      fetchAutoCompleteResults()
-      setShowDropdown(false);
     }
-  }, [inputValue]);
+  }, [debouncedValue]);
 
   const handleInputChange = e => {
     const val = e.target.value;

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

@@ -82,6 +82,7 @@ const JKJamTracksFilter = () => {
   const handleOnSelect = async selected => {
     page.current = 1;
     setJamTracks([]);
+    setNextOffset(null)
     setSearchTerm('');
     setSelected(selected);
     const params = queryOptions(selected);
@@ -91,6 +92,7 @@ const JKJamTracksFilter = () => {
   const handleOnEnter = async queryStr => {
     page.current = 1;
     setJamTracks([]);
+    setNextOffset(null);
     setSelected(x => null);
     setSearchTerm(queryStr);
     const params = queryOptions(queryStr);

jam-ui/src/context/AppDataContext.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import useUserProfile from '../hooks/useUserProfile';
 import { useAuth } from './UserAuth';
-//import { useShoppingCart } from '../hooks/useShoppingCart';
+import FingerprintJS from '@fingerprintjs/fingerprintjs';
 
 // AppDataContext.js
 // this context is used to store app data that is shared across the app
@@ -11,16 +11,13 @@ export const AppDataProvider = ({ children }) => {
   const [appData, setAppData] = React.useState({});
   const { currentUser } = useAuth();
   const { userProfile, photoUrl } = useUserProfile({ user: currentUser, useCache: false });
-  //const { shoppingCart, getCartItems } = useShoppingCart();
+  const fpPromise = FingerprintJS.load();
-
-  // React.useEffect(() => {
-  //   getCartItems();
-  // }, [currentUser]);
 
   React.useEffect(() => {
     setAppData({
       userProfile, currentUserPhotoUrl:
       photoUrl,
+      fpPromise
     });
   }, [currentUser, userProfile, photoUrl]);
 

jam-ui/src/hooks/useDebounceValue.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+const DEFAULT_DELAY = 500;
+
+const useDebouncedValue = (
+  value = "",
+  delay = DEFAULT_DELAY
+) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
+export default useDebouncedValue;

jam-ui/src/hooks/useJamTrack.js

@@ -10,7 +10,7 @@ import {
 import { SAMPLE_RATE } from '../helpers/jamTracks';
 import { createAlert } from '../helpers/rest';
 import { useAuth } from '../context/UserAuth';
-import FingerprintJS from '@fingerprintjs/fingerprintjs';
+import { useAppData } from '../context/AppDataContext';
 
 export const useJamTrack = () => {
 
@@ -26,7 +26,7 @@ export const useJamTrack = () => {
   const watchedMixdowns = useSelector(state => state.jamTrack.watchedMixdowns);
 
   const { currentUser } = useAuth();
-  const fpPromise = FingerprintJS.load();
+  const { fpPromise } = useAppData();
   const dispatch = useDispatch();
 
   const [showQueueTime, setShowQueueTime] = useState(false);