diff --git a/client/modules/IDE/components/QuickAddList/QuickAddList.jsx b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
index 3011fd51ad..3ab1ecb593 100644
--- a/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
+++ b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
@@ -10,8 +10,21 @@ const Item = ({ isAdded, onSelect, name, url }) => {
const buttonLabel = isAdded
? t('QuickAddList.ButtonRemoveARIA')
: t('QuickAddList.ButtonAddToCollectionARIA');
+
+ const handleKeyDown = (event) => {
+ if (event.key === 'Enter' || event.key === ' ') {
+ onSelect(event);
+ }
+ };
+
return (
-
{ /* eslint-disable-line */ }
+
);
};
diff --git a/client/modules/IDE/components/Searchbar/Collection.jsx b/client/modules/IDE/components/Searchbar/Collection.jsx
index e36c4bf174..92d55ebe3f 100644
--- a/client/modules/IDE/components/Searchbar/Collection.jsx
+++ b/client/modules/IDE/components/Searchbar/Collection.jsx
@@ -1,5 +1,5 @@
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
import i18next from 'i18next';
import * as SortingActions from '../../actions/sorting';
@@ -7,19 +7,27 @@ import Searchbar from './Searchbar';
const scope = 'collection';
-function mapStateToProps(state) {
- return {
- searchLabel: i18next.t('Searchbar.SearchCollection'),
- searchTerm: state.search[`${scope}SearchTerm`]
+const SearchbarContainer = () => {
+ const dispatch = useDispatch();
+ const searchLabel = i18next.t('Searchbar.SearchCollection');
+ const searchTerm = useSelector((state) => state.search[`${scope}SearchTerm`]);
+
+ const setSearchTerm = (term) => {
+ dispatch(SortingActions.setSearchTerm(scope, term));
};
-}
-function mapDispatchToProps(dispatch) {
- const actions = {
- setSearchTerm: (term) => SortingActions.setSearchTerm(scope, term),
- resetSearchTerm: () => SortingActions.resetSearchTerm(scope)
+ const resetSearchTerm = () => {
+ dispatch(SortingActions.resetSearchTerm(scope));
};
- return bindActionCreators(Object.assign({}, actions), dispatch);
-}
-export default connect(mapStateToProps, mapDispatchToProps)(Searchbar);
+ return (
+
+ );
+};
+
+export default SearchbarContainer;
diff --git a/client/modules/IDE/components/Searchbar/Searchbar.jsx b/client/modules/IDE/components/Searchbar/Searchbar.jsx
index 1c2217fd7a..68344950b1 100644
--- a/client/modules/IDE/components/Searchbar/Searchbar.jsx
+++ b/client/modules/IDE/components/Searchbar/Searchbar.jsx
@@ -1,7 +1,7 @@
import React, { useState, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { throttle } from 'lodash';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
import i18next from 'i18next';
import SearchIcon from '../../../../images/magnifyingglass.svg';
@@ -9,16 +9,16 @@ const Searchbar = ({
searchTerm,
setSearchTerm,
resetSearchTerm,
- searchLabel,
- t
+ searchLabel
}) => {
+ const { t } = useTranslation();
const [searchValue, setSearchValue] = useState(searchTerm);
const throttledSearchChange = useCallback(
throttle((value) => {
setSearchTerm(value.trim());
}, 500),
- []
+ [setSearchTerm]
);
const handleResetSearch = () => {
@@ -65,12 +65,11 @@ Searchbar.propTypes = {
searchTerm: PropTypes.string.isRequired,
setSearchTerm: PropTypes.func.isRequired,
resetSearchTerm: PropTypes.func.isRequired,
- searchLabel: PropTypes.string,
- t: PropTypes.func.isRequired
+ searchLabel: PropTypes.string
};
Searchbar.defaultProps = {
searchLabel: i18next.t('Searchbar.SearchSketch')
};
-export default withTranslation()(Searchbar);
+export default Searchbar;
diff --git a/client/modules/IDE/components/Searchbar/Sketch.jsx b/client/modules/IDE/components/Searchbar/Sketch.jsx
index 5d4f840bb0..921c33a6c9 100644
--- a/client/modules/IDE/components/Searchbar/Sketch.jsx
+++ b/client/modules/IDE/components/Searchbar/Sketch.jsx
@@ -1,25 +1,32 @@
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
import i18next from 'i18next';
import * as SortingActions from '../../actions/sorting';
-
import Searchbar from './Searchbar';
const scope = 'sketch';
-function mapStateToProps(state) {
- return {
- searchLabel: i18next.t('Searchbar.SearchSketch'),
- searchTerm: state.search[`${scope}SearchTerm`]
+const SearchbarContainer = () => {
+ const dispatch = useDispatch();
+ const searchLabel = i18next.t('Searchbar.SearchSketch');
+ const searchTerm = useSelector((state) => state.search[`${scope}SearchTerm`]);
+
+ const setSearchTerm = (term) => {
+ dispatch(SortingActions.setSearchTerm(scope, term));
};
-}
-function mapDispatchToProps(dispatch) {
- const actions = {
- setSearchTerm: (term) => SortingActions.setSearchTerm(scope, term),
- resetSearchTerm: () => SortingActions.resetSearchTerm(scope)
+ const resetSearchTerm = () => {
+ dispatch(SortingActions.resetSearchTerm(scope));
};
- return bindActionCreators(Object.assign({}, actions), dispatch);
-}
-export default connect(mapStateToProps, mapDispatchToProps)(Searchbar);
+ return (
+
+ );
+};
+
+export default SearchbarContainer;