apply PR review

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

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

@@ -1,4 +1,4 @@
-import React, { useReducer, useState, useEffect } from 'react';
+import React, { useReducer, useState, useEffect, useRef } from 'react';
 import { includes } from 'lodash';
 import { useHistory, useLocation } from 'react-router-dom';
 import { Header } from '@buffetjs/custom';
@@ -35,6 +35,7 @@ const HomePage = () => {
   const [searchValue, setSearchValue] = useState(query.get('_q') || '');
   const { push } = useHistory();
   const { search } = useLocation();
+  const isMounted = useRef();
 
   const { data, dataToDelete } = reducerState.toJS();
   const pluginName = formatMessage({ id: getTrad('plugin.name') });
@@ -47,7 +48,12 @@ const HomePage = () => {
   }, [debouncedSearch]);
 
   useEffect(() => {
+    isMounted.current = true;
     fetchData();
+
+    return () => {
+      isMounted.current = false;
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [search]);
 
@@ -59,8 +65,10 @@ const HomePage = () => {
         method: 'DELETE',
       });
     } catch (err) {
+      if (isMounted.current) {
         strapi.notification.error('notification.error');
       }
+    }
   };
 
   const fetchData = async () => {
@@ -71,13 +79,17 @@ const HomePage = () => {
         method: 'GET',
       });
 
+      if (isMounted.current) {
         dispatch({
           type: 'GET_DATA_SUCCEEDED',
           data,
         });
+      }
     } catch (err) {
+      if (isMounted.current) {
         strapi.notification.error('notification.error');
       }
+    }
   };
 
   const getSearchParams = () => {

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

@@ -1,4 +1,4 @@
-import { List, fromJS } from 'immutable';
+import { fromJS } from 'immutable';
 
 const initialState = fromJS({
   data: [],
@@ -8,7 +8,7 @@ const initialState = fromJS({
 const reducer = (state, action) => {
   switch (action.type) {
     case 'GET_DATA_SUCCEEDED':
-      return state.update('data', () => action.data);
+      return state.update('data', () => fromJS(action.data));
     case 'ON_CHANGE_DATA_TO_DELETE': {
       const { value, id } = action;
 
@@ -17,18 +17,19 @@ const reducer = (state, action) => {
           return dataToDelete.push(id);
         });
       }
+
       const index = state.get('dataToDelete').findIndex(item => item === id);
 
       return state.removeIn(['dataToDelete', index]);
     }
     case 'TOGGLE_SELECT_ALL': {
-      const isSelected = List(state.get('data')).size === List(state.get('dataToDelete')).size;
+      const isSelected = state.get('data').size === state.get('dataToDelete').size;
 
       if (isSelected) {
-        return state.update('dataToDelete', () => List([]));
+        return state.update('dataToDelete', () => fromJS([]));
       }
 
-      return state.update('dataToDelete', () => List(state.get('data').map(item => item.id)));
+      return state.update('dataToDelete', () => state.get('data').map(item => item.get('id')));
     }
     default:
       return state;

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

@@ -1,11 +1,11 @@
-import { List, fromJS } from 'immutable';
+import { fromJS } from 'immutable';
 import reducer, { initialState } from '../reducer';
 
 describe('Upload | containers | HomePage | reducer', () => {
   it('should update data with received data', () => {
     const state = initialState;
 
-    const receivedData = [
+    const receivedData = fromJS([
       {
         id: 1,
         name: 'Capture d’écran 2020-02-25 à 15.43.44.png',
@@ -26,7 +26,7 @@ describe('Upload | containers | HomePage | reducer', () => {
         created_at: '2020-03-04T14:16:35.148Z',
         updated_at: '2020-03-04T14:16:35.148Z',
       },
-    ];
+    ]);
 
     const action = {
       type: 'GET_DATA_SUCCEEDED',
@@ -53,7 +53,7 @@ describe('Upload | containers | HomePage | reducer', () => {
   });
 
   it('should remove a media to dataToDelete if value is false', () => {
-    const data = [
+    const data = fromJS([
       {
         id: 1,
         name: 'Capture d’écran 2020-02-25 à 15.43.44.png',
@@ -74,21 +74,23 @@ describe('Upload | containers | HomePage | reducer', () => {
         created_at: '2020-03-04T14:16:35.148Z',
         updated_at: '2020-03-04T14:16:35.148Z',
       },
-    ];
+    ]);
-    const state = initialState.set('data', data).set('dataToDelete', List([1, 2]));
+    const dataToDelete = fromJS([1, 2]);
+
+    const state = initialState.set('data', data).set('dataToDelete', dataToDelete);
 
     const action = {
       type: 'ON_CHANGE_DATA_TO_DELETE',
       id: 2,
     };
 
-    const expectedState = state.set('dataToDelete', List([1]));
+    const expectedState = state.set('dataToDelete', fromJS([1]));
 
     expect(reducer(state, action)).toEqual(expectedState);
   });
 
   it('should empty dataToDelete if all items are selected', () => {
-    const data = [
+    const data = fromJS([
       {
         id: 1,
         name: 'Capture d’écran 2020-02-25 à 15.43.44.png',
@@ -109,20 +111,22 @@ describe('Upload | containers | HomePage | reducer', () => {
         created_at: '2020-03-04T14:16:35.148Z',
         updated_at: '2020-03-04T14:16:35.148Z',
       },
-    ];
+    ]);
-    const state = initialState.set('data', data).set('dataToDelete', List([1, 2]));
+    const dataToDelete = fromJS([1, 2]);
+
+    const state = initialState.set('data', data).set('dataToDelete', dataToDelete);
 
     const action = {
       type: 'TOGGLE_SELECT_ALL',
     };
 
-    const expectedState = state.set('dataToDelete', List([]));
+    const expectedState = state.set('dataToDelete', fromJS([]));
 
     expect(reducer(state, action)).toEqual(expectedState);
   });
 
   it('should fill dataToDelete if all items are not selected', () => {
-    const data = [
+    const data = fromJS([
       {
         id: 1,
         name: 'Capture d’écran 2020-02-25 à 15.43.44.png',
@@ -143,14 +147,16 @@ describe('Upload | containers | HomePage | reducer', () => {
         created_at: '2020-03-04T14:16:35.148Z',
         updated_at: '2020-03-04T14:16:35.148Z',
       },
-    ];
+    ]);
-    const state = initialState.set('data', data).set('dataToDelete', List([1]));
+    const dataToDelete = fromJS([]);
+
+    const state = initialState.set('data', data).set('dataToDelete', dataToDelete);
 
     const action = {
       type: 'TOGGLE_SELECT_ALL',
     };
 
-    const expectedState = state.set('dataToDelete', List([1, 2]));
+    const expectedState = state.set('dataToDelete', fromJS([1, 2]));
 
     expect(reducer(state, action)).toEqual(expectedState);
   });