fix my jam track filtering

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

@@ -6,7 +6,7 @@ import { useResponsive } from '@farfetch/react-context-responsive';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import useOnScreen from '../../hooks/useOnScreen';
 import { Link } from 'react-router-dom';
-import { fetchMyJamTracks } from '../../store/features/myJamTracksSlice';
+import { fetchMyJamTracks, filterJamTracks } from '../../store/features/myJamTracksSlice';
 import { useDispatch, useSelector } from 'react-redux';
 
 const JKMyJamTracks = () => {
@@ -29,14 +29,19 @@ const JKMyJamTracks = () => {
     setInputValue(val);
   };
 
+  useEffect(() => {
+    dispatch(fetchMyJamTracks());
+  }, []);
+
   useEffect(() => {
     const getMyJamTracks = setTimeout(async () => {
-      await fetchJamTracks({ page: 1, search: inputValue});
+      await fetchJamTracks({ page: 1, search: inputValue });
+      //dispatch(filterJamTracks(inputValue));
     }, 1000);
     return () => clearTimeout(getMyJamTracks);
   }, [inputValue]);
 
-  const fetchJamTracks = async (params) => {
+  const fetchJamTracks = async params => {
     const { page } = params;
     try {
       dispatch(fetchMyJamTracks(params));
@@ -50,7 +55,7 @@ const JKMyJamTracks = () => {
   useEffect(() => {
     if (isIntersecting) {
       if (nextPage && loadingStatus !== 'loading' && nextPage !== 1) {
-        const params = { page: nextPage };
+        const params = { page: nextPage, search: inputValue };
         fetchJamTracks(params);
       }
     }
@@ -90,25 +95,23 @@ const JKMyJamTracks = () => {
           </div>
         </FormGroup>
         <div style={containerStyle} ref={containerRef}>
-        { loadingStatus === 'loading' ? (
-          <div className="d-flex justify-content-center"> Loading... </div>
-        ) : loadingStatus === 'failed' ? (
-          <div className="d-flex justify-content-center"> Error loading jam tracks </div>
-        ) : loadingStatus === 'succeeded' ? (
-          <ListGroup className="mt-1" data-testid="myJamTrackList">
-          {jamTracks && jamTracks.map((jamTrack, index) => (
-            <div key={jamTrack.id} ref={ref => (jamTracks.length - 1  === index ? setLastJamTrackRef(ref) : null)}>
-              <ListGroupItem >
-              <Link to={`/jamtracks/${jamTrack.id}`}>{jamTrack.name}</Link>
-              {jamTrack.original_artist && ` by ${jamTrack.original_artist}`}
-            </ListGroupItem>
-            </div>
-            
-          ))}
-        </ListGroup>
-        ) : null }
-          
-         
+          {loadingStatus === 'loading' ? (
+            <div className="d-flex justify-content-center"> Loading... </div>
+          ) : loadingStatus === 'failed' ? (
+            <div className="d-flex justify-content-center"> Error loading jam tracks </div>
+          ) : loadingStatus === 'succeeded' ? (
+            <ListGroup className="mt-1" data-testid="myJamTrackList">
+              {jamTracks &&
+                jamTracks.map((jamTrack, index) => (
+                  <div key={jamTrack.id} ref={ref => (jamTracks.length - 1 === index ? setLastJamTrackRef(ref) : null)}>
+                    <ListGroupItem>
+                      <Link to={`/jamtracks/${jamTrack.id}`}>{jamTrack.name}</Link>
+                      {jamTrack.original_artist && ` by ${jamTrack.original_artist}`}
+                    </ListGroupItem>
+                  </div>
+                ))}
+            </ListGroup>
+          ) : null}
         </div>
       </CardBody>
     </Card>

jam-ui/src/store/features/myJamTracksSlice.js

@@ -32,6 +32,9 @@ export const myJamTracksSlice = createSlice({
     deleteJamTrack: (state, action) => {
       const { id } = action.payload;
       state.jamTracks = state.jamTracks.filter(jamTrack => jamTrack.id !== id);
+    },
+    filterJamTracks: (state, action) => {
+      state.jamTracks = state.jamTracks.filter(jamTrack => jamTrack.name.toLowerCase().includes(action.payload.toLowerCase()));
     }
   },
   extraReducers: builder => {
@@ -40,16 +43,16 @@ export const myJamTracksSlice = createSlice({
         state.status = 'loading';
       })
       .addCase(fetchMyJamTracks.fulfilled, (state, action) => {
-        state.status = 'succeeded';
-        state.jamTracks = action.payload.jamtracks;
-        state.next = action.payload.next; 
-        //--- amend the state to include only unique jamTracks
-        // const records = new Set([...state.jamTracks, ...action.payload.jamtracks]);
-        // const unique = [];
-        // records.map(x => (unique.filter(a => a.id === x.id).length > 0 ? null : unique.push(x)));
-        // state.jamTracks = unique;
-        // state.next = action.payload.next;
         // state.status = 'succeeded';
+        // state.jamTracks = action.payload.jamtracks;
+        // state.next = action.payload.next; 
+        //--- amend the state to include only unique jamTracks
+        const records = new Set([...state.jamTracks, ...action.payload.jamtracks]);
+        const unique = [];
+        records.map(x => (unique.filter(a => a.id === x.id).length > 0 ? null : unique.push(x)));
+        state.jamTracks = unique;
+        state.next = action.payload.next;
+        state.status = 'succeeded';
         //---
       })
       .addCase(fetchMyJamTracks.rejected, (state, action) => {
@@ -59,5 +62,5 @@ export const myJamTracksSlice = createSlice({
   }
 });
 
-export const { addJamTrack, deleteJamTrack } = myJamTracksSlice.actions;
+export const { addJamTrack, deleteJamTrack, filterJamTracks } = myJamTracksSlice.actions;
 export default myJamTracksSlice.reducer;