Apply some PR review

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

packages/strapi-plugin-content-manager/admin/src/components/CustomTable/styledComponents.js

@@ -95,7 +95,7 @@ const TableRow = styled.tr`
   }
 `;
 
-const Arrow = styled(props => <Carret {...props} />)`
+const Arrow = styled(({ isUp, ...rest }) => <Carret {...rest} />)`
   margin-left: 5px;
   ${({ isUp }) =>
     isUp &&

packages/strapi-plugin-upload/admin/src/components/FiltersCard/InputWrapper.js

@@ -2,6 +2,9 @@ import styled from 'styled-components';
 
 const InputWrapper = styled.div`
   margin-bottom: 11px;
+  #datetime {
+    max-width: 130px;
+  }
 `;
 
 export default InputWrapper;

packages/strapi-plugin-upload/admin/src/components/FiltersCard/index.js

@@ -19,7 +19,6 @@ const FiltersCard = ({ filters, onChange }) => {
 
   const name = state.get('name');
   const type = filters[name].type;
-
   const defaultValue = filters[name].defaultValue;
 
   const filtersOptions = getFilterType(type);
@@ -48,12 +47,9 @@ const FiltersCard = ({ filters, onChange }) => {
             // Change the attribute
             handleChange(e);
             // Change other inputs so it reset values
-            const {
-              target: { value },
-            } = e;
             handleChange({ target: { name: 'filter', value: '=' } });
             handleChange({
-              target: { name: 'value', value: filters[value].defaultValue },
+              target: { name: 'value', value: defaultValue },
             });
           }}
           name="name"

packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js

@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { isObject } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 import { FilterIcon } from 'strapi-helper-plugin';
 
+import useOutsideClick from '../../hooks/useOutsideClick';
+
 import DropdownButton from '../DropdownButton';
 import DropdownSection from '../DropdownSection';
 
@@ -13,16 +15,20 @@ import FiltersCard from '../FiltersCard';
 
 const FiltersPicker = ({ filters, onChange }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef();
+
+  useOutsideClick(dropdownRef, () => {
+    if (isOpen) {
+      setIsOpen(false);
+    }
+  });
 
   const handleChange = ({ target: { value } }) => {
     if (value.value) {
       let formattedValue = value;
 
       if (value.value._isAMomentObject === true) {
-        formattedValue.value = moment(
-          value.value,
-          'YYYY-MM-DD HH:mm:ss'
-        ).format();
+        formattedValue.value = moment(value.value).format();
       } else if (isObject(value)) {
         formattedValue.value = Object.values(value.value).join('');
       }
@@ -43,7 +49,7 @@ const FiltersPicker = ({ filters, onChange }) => {
         <FilterIcon />
         <FormattedMessage id="app.utils.filters" />
       </DropdownButton>
-      <DropdownSection isOpen={isOpen}>
+      <DropdownSection isOpen={isOpen} ref={dropdownRef}>
         <FiltersCard onChange={handleChange} filters={filters} />
       </DropdownSection>
     </Wrapper>

packages/strapi-plugin-upload/admin/src/components/SortPicker/index.js

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
 import { Carret } from '@buffetjs/icons';
 import getTrad from '../../utils/getTrad';
+import useOutsideClick from '../../hooks/useOutsideClick';
 
 import DropdownButton from '../DropdownButton';
 import DropdownSection from '../DropdownSection';
@@ -12,6 +13,13 @@ import Wrapper from './Wrapper';
 
 const SortPicker = ({ onChange, value }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef();
+
+  useOutsideClick(dropdownRef, () => {
+    if (isOpen) {
+      setIsOpen(false);
+    }
+  });
 
   const orders = {
     created_at_asc: 'created_at:ASC',
@@ -38,7 +46,7 @@ const SortPicker = ({ onChange, value }) => {
         <FormattedMessage id={getTrad('sort.label')} />
         <Carret fill={isOpen ? '#007EFF' : '#292b2c'} />
       </DropdownButton>
-      <DropdownSection isOpen={isOpen}>
+      <DropdownSection isOpen={isOpen} ref={dropdownRef}>
         <SortList
           isShown={isOpen}
           list={orders}

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

@@ -50,6 +50,7 @@ const HomePage = () => {
 
   const getSearchParams = () => {
     const params = {};
+
     query.forEach((value, key) => {
       if (includes(paramsKeys, key)) {
         params[key] = value;
@@ -59,7 +60,7 @@ const HomePage = () => {
     return params;
   };
 
-  const getUpdatedSearchParams = updatedParams => {
+  const getUpdatedQueryParams = updatedParams => {
     return {
       ...getSearchParams(),
       filters: generateFiltersFromSearch(search),
@@ -68,17 +69,15 @@ const HomePage = () => {
   };
 
   const handleChangeFilters = ({ target: { value } }) => {
-    if (value) {
-      const updatedFilters = generateFiltersFromSearch(search);
+    const updatedFilters = generateFiltersFromSearch(search);
 
-      // Add filter if it doesn't exist yet
-      if (!some(updatedFilters, value)) {
-        updatedFilters.push(value);
+    // Add filter if it doesn't exist yet
+    if (!some(updatedFilters, value)) {
+      updatedFilters.push(value);
 
-        handleChangeParams({
-          target: { name: 'filters', value: updatedFilters },
-        });
-      }
+      handleChangeParams({
+        target: { name: 'filters', value: updatedFilters },
+      });
     }
   };
 
@@ -109,8 +108,8 @@ const HomePage = () => {
   };
 
   const handleChangeParams = ({ target: { name, value } }) => {
-    const updatedSearch = getUpdatedSearchParams({ [name]: value });
-    const newSearch = generateSearchFromFilters(updatedSearch);
+    const updatedQueryParams = getUpdatedQueryParams({ [name]: value });
+    const newSearch = generateSearchFromFilters(updatedQueryParams);
 
     push({ search: encodeURI(newSearch) });
   };

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

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+const useOutsideClick = (ref, callback) => {
+  const handleClick = e => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  });
+};
+
+export default useOutsideClick;