InputSearch as a func component

packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/index.js

@@ -10,14 +10,7 @@ import PropTypes from 'prop-types';
 import { Label, Wrapper } from './Components';
 
 function InputCheckboxPlugin(
-  {
-    inputSelected,
-    label,
-    name,
-    setNewInputSelected,
-    setShouldDisplayPolicieshint,
-    value,
-  },
+  { inputSelected, label, name, setNewInputSelected, value },
   context
 ) {
   const isSelected = inputSelected === name;
@@ -48,7 +41,7 @@ function InputCheckboxPlugin(
     if (isSelected) {
       context.resetShouldDisplayPoliciesHint();
     } else {
-      setShouldDisplayPolicieshint();
+      context.setShouldDisplayPolicieshint();
     }
   };
 

packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/index.js

@@ -7,7 +7,15 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import { findIndex, has, includes, isEmpty, map, toLower } from 'lodash';
+import {
+  difference,
+  findIndex,
+  has,
+  includes,
+  isEmpty,
+  map,
+  toLower,
+} from 'lodash';
 
 import { Label } from 'strapi-helper-plugin';
 import InputSearchLi from '../InputSearchLi';
@@ -37,13 +45,15 @@ function InputSearchContainer({
       setFilteredUsers(values);
       setCurrUsers(values);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [didDeleteUser]);
 
   useEffect(() => {
-    if (currUsers !== filteredUsers) {
-      setIsAdding(true);
+    if (!isEmpty(difference(users, filteredUsers))) {
       setFilteredUsers(users);
+      setIsAdding(true);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [didFetchUsers]);
 
   const handleBlur = () => setIsFocused(prev => !prev);

packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/index_old.js

@@ -1,168 +0,0 @@
-/**
- *
- * InputSearchContainer
- *
- */
-
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { findIndex, has, includes, isEmpty, map, toLower } from 'lodash';
-import PropTypes from 'prop-types';
-
-import { Label } from 'strapi-helper-plugin';
-import InputSearchLi from '../InputSearchLi';
-
-import { Addon, List, Wrapper } from './Components';
-
-class InputSearchContainer extends React.Component {
-  // eslint-disable-line react/prefer-stateless-function
-  state = {
-    errors: [],
-    filteredUsers: this.props.values,
-    isAdding: false,
-    isFocused: false,
-    users: this.props.values,
-    value: '',
-  };
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.didDeleteUser !== this.props.didDeleteUser) {
-      this.setState({
-        users: nextProps.values,
-        filteredUsers: nextProps.values,
-      });
-    }
-
-    if (nextProps.didGetUsers !== this.props.didGetUsers) {
-      this.setState({
-        users: nextProps.values,
-        filteredUsers: nextProps.values,
-      });
-    }
-
-    if (nextProps.didFetchUsers !== this.props.didFetchUsers) {
-      this.setState({ filteredUsers: nextProps.users, isAdding: true });
-    }
-  }
-
-  handleBlur = () => this.setState({ isFocused: !this.state.isFocused });
-
-  handleChange = ({ target }) => {
-    const filteredUsers = isEmpty(target.value)
-      ? this.state.users
-      : this.state.users.filter(user =>
-          includes(toLower(user.name), toLower(target.value))
-        );
-
-    if (isEmpty(filteredUsers) && !isEmpty(target.value)) {
-      this.props.getUser(target.value);
-    }
-
-    if (isEmpty(target.value)) {
-      return this.setState({
-        value: target.value,
-        isAdding: false,
-        users: this.props.values,
-        filteredUsers: this.props.values,
-      });
-    }
-
-    this.setState({ value: target.value, filteredUsers });
-  };
-
-  handleFocus = () => this.setState({ isFocused: !this.state.isFocused });
-
-  handleClick = item => {
-    if (this.state.isAdding) {
-      const id = has(item, '_id') ? '_id' : 'id';
-      const users = this.props.values;
-      // Check if user is already associated with this role
-      if (findIndex(users, [id, item[id]]) === -1) {
-        this.props.onClickAdd(item);
-        users.push(item);
-      }
-
-      // Reset the input focus
-      this.searchInput.focus();
-      // Empty the input and display users
-      this.setState({
-        value: '',
-        isAdding: false,
-        users,
-        filteredUsers: users,
-      });
-    } else {
-      this.props.onClickDelete(item);
-    }
-  };
-
-  render() {
-    return (
-      <Wrapper className="col-md-6">
-        <Label htmlFor={this.props.name} message={this.props.label} />
-        <div className="input-group">
-          <Addon
-            className={`input-group-addon ${this.state.isFocused && 'focus'}`}
-          >
-            <i className="fas fa-search"></i>
-          </Addon>
-          <FormattedMessage id="users-permissions.InputSearch.placeholder">
-            {message => (
-              <input
-                className={`form-control ${
-                  !isEmpty(this.state.errors) ? 'is-invalid' : ''
-                }`}
-                id={this.props.name}
-                name={this.props.name}
-                onBlur={this.handleBlur}
-                onChange={this.handleChange}
-                onFocus={this.handleFocus}
-                value={this.state.value}
-                placeholder={message}
-                type="text"
-                ref={input => {
-                  this.searchInput = input;
-                }}
-              />
-            )}
-          </FormattedMessage>
-        </div>
-        <List className={this.state.isFocused && 'focused'}>
-          <ul>
-            {map(this.state.filteredUsers, user => (
-              <InputSearchLi
-                key={user.id || user._id}
-                item={user}
-                isAdding={this.state.isAdding}
-                onClick={this.handleClick}
-              />
-            ))}
-          </ul>
-        </List>
-      </Wrapper>
-    );
-  }
-}
-
-InputSearchContainer.defaultProps = {
-  users: [],
-  values: [],
-};
-
-InputSearchContainer.propTypes = {
-  didDeleteUser: PropTypes.bool.isRequired,
-  didFetchUsers: PropTypes.bool.isRequired,
-  didGetUsers: PropTypes.bool.isRequired,
-  getUser: PropTypes.func.isRequired,
-  label: PropTypes.shape({
-    id: PropTypes.string,
-    params: PropTypes.object,
-  }).isRequired,
-  name: PropTypes.string.isRequired,
-  onClickAdd: PropTypes.func.isRequired,
-  onClickDelete: PropTypes.func.isRequired,
-  users: PropTypes.array,
-  values: PropTypes.array,
-};
-
-export default InputSearchContainer;