refetch on filter delete

Signed-off-by: Ky <virginie.ky@gmail.com>

packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js

@@ -1,5 +1,5 @@
-import React, { useReducer, useState, useEffect, useRef } from 'react';
+import React, { useReducer, useState, useEffect } from 'react';
-import { isEqual, includes, toString } from 'lodash';
+import { includes, toString } from 'lodash';
 import { useHistory, useLocation } from 'react-router-dom';
 import { Header } from '@buffetjs/custom';
 import { useDebounce, useIsMounted } from '@buffetjs/hooks';
@@ -21,6 +21,7 @@ import {
   generatePageFromStart,
   generateStartFromPage,
 } from '../../utils';
+import useDeepCompareMemoize from '../../hooks/useDeepCompareMemoize';
 import Container from '../../components/Container';
 import ControlsWrapper from '../../components/ControlsWrapper';
 import Padded from '../../components/Padded';
@@ -55,6 +56,7 @@ const HomePage = () => {
 
   useEffect(() => {
     handleChangeParams({ target: { name: '_q', value: searchValue } });
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedSearch]);
 
@@ -65,20 +67,14 @@ const HomePage = () => {
       type: 'SET_PARAMS',
       params,
     });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const useDeepCompareMemoize = value => {
-    const ref = useRef();
-
-    if (!isEqual(value, ref.current)) {
-      ref.current = value;
-    }
-
-    return ref.current;
-  };
-
   useEffect(() => {
     fetchListData();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [useDeepCompareMemoize(searchParams)]);
 
   const deleteMedia = async id => {
@@ -186,24 +182,28 @@ const HomePage = () => {
   };
 
   const handleChangeParams = ({ target: { name, value } }) => {
-    let updatedQueryParams;
+    let updatedQueryParams = generateNewSearch({ [name]: value });
+    let paramsValue = value;
 
     if (name === 'filters') {
       const filters = [...generateFiltersFromSearch(search), value];
 
       updatedQueryParams = generateNewSearch({ [name]: filters });
-    } else {
+      paramsValue = filters;
-      updatedQueryParams = generateNewSearch({ [name]: value });
     }
 
-    const newSearch = generateSearchFromFilters(updatedQueryParams);
+    if (name === '_limit') {
+      updatedQueryParams = generateNewSearch({ [name]: value, _start: 0 });
+    }
 
     dispatch({
       type: 'SET_PARAM',
       name,
-      value,
+      value: paramsValue,
     });
 
+    const newSearch = generateSearchFromFilters(updatedQueryParams);
+
     push({ search: encodeURI(newSearch) });
   };
 
@@ -236,6 +236,13 @@ const HomePage = () => {
     const filters = generateFiltersFromSearch(search).filter(
       (filter, filterIndex) => filterIndex !== index
     );
+
+    dispatch({
+      type: 'SET_PARAM',
+      name: 'filters',
+      value: filters,
+    });
+
     const updatedQueryParams = generateNewSearch({ filters });
 
     const newSearch = generateSearchFromFilters(updatedQueryParams);

packages/strapi-plugin-upload/admin/src/containers/HomePage/reducer.js

@@ -49,13 +49,19 @@ const reducer = (state, action) => {
     case 'SET_PARAM': {
       const { name, value } = action;
 
+      if (name === '_limit') {
+        return state
+          .updateIn(['searchParams', name], () => value)
+          .updateIn(['searchParams', '_start'], () => 0);
+      }
+
       return state.updateIn(['searchParams', name], () => value);
     }
     case 'SET_PARAMS': {
       const { params } = action;
 
       return state.update('searchParams', searchParams => {
-        return searchParams.mergeDeep(params);
+        return searchParams.mergeDeep(fromJS(params));
       });
     }
     case 'TOGGLE_SELECT_ALL': {

packages/strapi-plugin-upload/admin/src/containers/HomePage/utils/generateStringParamsFromQuery.js

@@ -3,10 +3,11 @@ import { isEmpty, toString } from 'lodash';
 const generateStringParamsFromQuery = query => {
   let params = '';
 
-  Object.keys(query).forEach(key => {
+  Object.keys(query)
-    const value = query[key];
+    .filter(key => !isEmpty(toString(query[key])))
+    .forEach(key => {
+      const value = query[key];
 
-    if (!isEmpty(toString(query[key]))) {
       if (key === 'filters') {
         value.forEach(item => {
           if (item.name.includes('mime') && item.value === 'file') {
@@ -24,8 +25,7 @@ const generateStringParamsFromQuery = query => {
       } else {
         params += `&${key}=${value}`;
       }
-    }
+    });
-  });
 
   return params.substring(1);
 };

packages/strapi-plugin-upload/admin/src/hooks/useDeepCompareMemoize.js

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+import { isEqual } from 'lodash';
+
+// Adapted from https://github.com/sandiiarov/use-deep-compare/blob/master/src/useDeepCompareMemoize.ts
+const useDeepCompareMemoize = value => {
+  const ref = useRef();
+
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+
+  return ref.current;
+};
+
+export default useDeepCompareMemoize;