From 36865401a4586af239e69928eb05021e78484f4d Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Fri, 9 Jun 2023 20:57:00 +0530 Subject: [PATCH 01/12] Refactor SearchWidget --- .../theme/SearchWidget/SearchWidget.jsx | 137 ++++++------------ 1 file changed, 43 insertions(+), 94 deletions(-) diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx index 5dc5e40513..b00cc3bbca 100644 --- a/src/components/theme/SearchWidget/SearchWidget.jsx +++ b/src/components/theme/SearchWidget/SearchWidget.jsx @@ -1,14 +1,9 @@ -/** - * Search widget component. - * @module components/theme/SearchWidget/SearchWidget - */ - -import React, { Component } from 'react'; +import { useCallback, useState } from 'react'; import { withRouter } from 'react-router-dom'; import { Form, Input } from 'semantic-ui-react'; import { compose } from 'redux'; import { PropTypes } from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; +import { defineMessages, useIntl } from 'react-intl'; import { Icon } from '@plone/volto/components'; import zoomSVG from '@plone/volto/icons/zoom.svg'; @@ -24,96 +19,50 @@ const messages = defineMessages({ }, }); -/** - * SearchWidget component class. - * @class SearchWidget - * @extends Component - */ -class SearchWidget extends Component { - /** - * Property types. - * @property {Object} propTypes Property types. - * @static - */ - static propTypes = { - pathname: PropTypes.string, +const SearchWidget = ({ pathname, history }) => { + const intl = useIntl(); + const [text, setText] = useState(''); + + const onChangeText = ({ value }) => { + setText(value); }; - /** - * Constructor - * @method constructor - * @param {Object} props Component properties - * @constructs WysiwygEditor - */ - constructor(props) { - super(props); - this.onChangeText = this.onChangeText.bind(this); - this.onSubmit = this.onSubmit.bind(this); - this.state = { - text: '', - }; - } + const onSubmit = useCallback( + (event) => { + const path = + pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : ''; - /** - * On change text - * @method onChangeText - * @param {object} event Event object. - * @param {string} value Text value. - * @returns {undefined} - */ - onChangeText(event, { value }) { - this.setState({ - text: value, - }); - } + history.push(`/search?SearchableText=${encodeURIComponent(text)}${path}`); + // reset input value + setText(''); + event.preventDefault(); + }, + [pathname, history, text], + ); - /** - * Submit handler - * @method onSubmit - * @param {event} event Event object. - * @returns {undefined} - */ - onSubmit(event) { - const path = - this.props.pathname?.length > 0 - ? `&path=${encodeURIComponent(this.props.pathname)}` - : ''; - this.props.history.push( - `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`, - ); - // reset input value - this.setState({ - text: '', - }); - event.preventDefault(); - } + return ( +
+ + + + +
+ ); +}; - /** - * Render method. - * @method render - * @returns {string} Markup for the component. - */ - render() { - return ( -
- - - - -
- ); - } -} +SearchWidget.propTypes = { + pathname: PropTypes.string, +}; -export default compose(withRouter, injectIntl)(SearchWidget); +export default compose(withRouter)(SearchWidget); From f61b576197662f1f5a764538e9d324c6191cf806 Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Fri, 9 Jun 2023 21:13:27 +0530 Subject: [PATCH 02/12] Prettier SearchWidget --- .../theme/SearchWidget/SearchWidget.jsx | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx index b00cc3bbca..06036910d4 100644 --- a/src/components/theme/SearchWidget/SearchWidget.jsx +++ b/src/components/theme/SearchWidget/SearchWidget.jsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from 'react'; +import { useState } from 'react'; import { withRouter } from 'react-router-dom'; import { Form, Input } from 'semantic-ui-react'; import { compose } from 'redux'; @@ -27,18 +27,15 @@ const SearchWidget = ({ pathname, history }) => { setText(value); }; - const onSubmit = useCallback( - (event) => { - const path = - pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : ''; + const onSubmit = (event) => { + const path = + pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : ''; - history.push(`/search?SearchableText=${encodeURIComponent(text)}${path}`); - // reset input value - setText(''); - event.preventDefault(); - }, - [pathname, history, text], - ); + history.push(`/search?SearchableText=${encodeURIComponent(text)}${path}`); + // reset input value + setText(''); + event.preventDefault(); + }; return (
From b7cd8df010b41a31fdc1754c43427106b633790a Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Mon, 12 Jun 2023 12:27:19 +0530 Subject: [PATCH 03/12] restored --- .../theme/SearchWidget/SearchWidget.jsx | 132 ++++++++++++------ 1 file changed, 93 insertions(+), 39 deletions(-) diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx index 06036910d4..2ecbe3130b 100644 --- a/src/components/theme/SearchWidget/SearchWidget.jsx +++ b/src/components/theme/SearchWidget/SearchWidget.jsx @@ -1,9 +1,14 @@ -import { useState } from 'react'; +/** + * Search widget component. + * @module components/theme/SearchWidget/SearchWidget + */ + +import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; import { Form, Input } from 'semantic-ui-react'; import { compose } from 'redux'; import { PropTypes } from 'prop-types'; -import { defineMessages, useIntl } from 'react-intl'; +import { defineMessages, injectIntl } from 'react-intl'; import { Icon } from '@plone/volto/components'; import zoomSVG from '@plone/volto/icons/zoom.svg'; @@ -19,47 +24,96 @@ const messages = defineMessages({ }, }); -const SearchWidget = ({ pathname, history }) => { - const intl = useIntl(); - const [text, setText] = useState(''); - - const onChangeText = ({ value }) => { - setText(value); +/** + * SearchWidget component class. + * @class SearchWidget + * @extends Component + */ +class SearchWidget extends Component { + /** + * Property types. + * @property {Object} propTypes Property types. + * @static + */ + static propTypes = { + pathname: PropTypes.string, }; - const onSubmit = (event) => { - const path = - pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : ''; + /** + * Constructor + * @method constructor + * @param {Object} props Component properties + * @constructs WysiwygEditor + */ + constructor(props) { + super(props); + this.onChangeText = this.onChangeText.bind(this); + this.onSubmit = this.onSubmit.bind(this); + this.state = { + text: '', + }; + } + + /** + * On change text + * @method onChangeText + * @param {object} event Event object. + * @param {string} value Text value. + * @returns {undefined} + */ + onChangeText(event, { value }) { + this.setState({ + text: value, + }); + } - history.push(`/search?SearchableText=${encodeURIComponent(text)}${path}`); + /** + * Submit handler + * @method onSubmit + * @param {event} event Event object. + * @returns {undefined} + */ + onSubmit(event) { + const path = + this.props.pathname?.length > 0 + ? `&path=${encodeURIComponent(this.props.pathname)}` + : ''; + this.props.history.push( + `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`, + ); // reset input value - setText(''); + this.setState({ + text: '', + }); event.preventDefault(); - }; - - return ( - - - - - - - ); -}; + } -SearchWidget.propTypes = { - pathname: PropTypes.string, -}; + /** + * Render method. + * @method render + * @returns {string} Markup for the component. + */ + render() { + return ( +
+ + + + +
+ ); + } +} -export default compose(withRouter)(SearchWidget); +export default compose(withRouter, injectIntl)(SearchWidget); \ No newline at end of file From a578a352b3c5df16b5e4553e8f405b26844504d4 Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Mon, 12 Jun 2023 12:38:17 +0530 Subject: [PATCH 04/12] refactored --- .../theme/SearchWidget/SearchWidget.jsx | 132 ++++++------------ 1 file changed, 39 insertions(+), 93 deletions(-) diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx index 2ecbe3130b..7eccfa4c1c 100644 --- a/src/components/theme/SearchWidget/SearchWidget.jsx +++ b/src/components/theme/SearchWidget/SearchWidget.jsx @@ -1,14 +1,9 @@ -/** - * Search widget component. - * @module components/theme/SearchWidget/SearchWidget - */ - -import React, { Component } from 'react'; +import { useState } from 'react'; import { withRouter } from 'react-router-dom'; import { Form, Input } from 'semantic-ui-react'; import { compose } from 'redux'; import { PropTypes } from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; +import { defineMessages, useIntl } from 'react-intl'; import { Icon } from '@plone/volto/components'; import zoomSVG from '@plone/volto/icons/zoom.svg'; @@ -24,96 +19,47 @@ const messages = defineMessages({ }, }); -/** - * SearchWidget component class. - * @class SearchWidget - * @extends Component - */ -class SearchWidget extends Component { - /** - * Property types. - * @property {Object} propTypes Property types. - * @static - */ - static propTypes = { - pathname: PropTypes.string, - }; - - /** - * Constructor - * @method constructor - * @param {Object} props Component properties - * @constructs WysiwygEditor - */ - constructor(props) { - super(props); - this.onChangeText = this.onChangeText.bind(this); - this.onSubmit = this.onSubmit.bind(this); - this.state = { - text: '', - }; - } +const SearchWidget = ({ pathname, history }) => { + const intl = useIntl(); + const [text, setText] = useState(''); - /** - * On change text - * @method onChangeText - * @param {object} event Event object. - * @param {string} value Text value. - * @returns {undefined} - */ - onChangeText(event, { value }) { - this.setState({ - text: value, - }); - } + const onChangeText = (event,{ value }) => { + setText(value); + }; - /** - * Submit handler - * @method onSubmit - * @param {event} event Event object. - * @returns {undefined} - */ - onSubmit(event) { + const onSubmit = (event) => { const path = - this.props.pathname?.length > 0 - ? `&path=${encodeURIComponent(this.props.pathname)}` - : ''; - this.props.history.push( - `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`, - ); + pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : ''; + + history.push(`/search?SearchableText=${encodeURIComponent(text)}${path}`); // reset input value - this.setState({ - text: '', - }); + setText(''); event.preventDefault(); - } + }; + + return ( +
+ + + + +
+ ); +}; - /** - * Render method. - * @method render - * @returns {string} Markup for the component. - */ - render() { - return ( -
- - - - -
- ); - } -} +SearchWidget.propTypes = { + pathname: PropTypes.string, +}; -export default compose(withRouter, injectIntl)(SearchWidget); \ No newline at end of file +export default compose(withRouter)(SearchWidget); From bef020af04c64b8c668201b8581d3f197df8e35d Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Mon, 12 Jun 2023 12:43:31 +0530 Subject: [PATCH 05/12] prettier --- src/components/theme/SearchWidget/SearchWidget.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx index 7eccfa4c1c..198cb614e1 100644 --- a/src/components/theme/SearchWidget/SearchWidget.jsx +++ b/src/components/theme/SearchWidget/SearchWidget.jsx @@ -23,7 +23,7 @@ const SearchWidget = ({ pathname, history }) => { const intl = useIntl(); const [text, setText] = useState(''); - const onChangeText = (event,{ value }) => { + const onChangeText = (event, { value }) => { setText(value); }; From 91655a6b3609c4e044158273c170e1104bf3d88b Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Tue, 13 Jun 2023 10:44:06 +0530 Subject: [PATCH 06/12] /news --- news/4864.feature | 1 + 1 file changed, 1 insertion(+) create mode 100644 news/4864.feature diff --git a/news/4864.feature b/news/4864.feature new file mode 100644 index 0000000000..9601b56feb --- /dev/null +++ b/news/4864.feature @@ -0,0 +1 @@ +Refactor SearchWidget @Tishasoumya-02 \ No newline at end of file From 229e818803fe6bbe516d4d1376252885100356ff Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Mon, 19 Jun 2023 17:31:47 +0530 Subject: [PATCH 07/12] add react-router-dom Hooks --- src/components/theme/SearchWidget/SearchWidget.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx index 198cb614e1..90bea445e0 100644 --- a/src/components/theme/SearchWidget/SearchWidget.jsx +++ b/src/components/theme/SearchWidget/SearchWidget.jsx @@ -1,7 +1,6 @@ import { useState } from 'react'; -import { withRouter } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; import { Form, Input } from 'semantic-ui-react'; -import { compose } from 'redux'; import { PropTypes } from 'prop-types'; import { defineMessages, useIntl } from 'react-intl'; @@ -19,11 +18,11 @@ const messages = defineMessages({ }, }); -const SearchWidget = ({ pathname, history }) => { +const SearchWidget = ({ pathname }) => { const intl = useIntl(); const [text, setText] = useState(''); - - const onChangeText = (event, { value }) => { + const history=useHistory(); + const onChangeText = ({ value }) => { setText(value); }; @@ -62,4 +61,4 @@ SearchWidget.propTypes = { pathname: PropTypes.string, }; -export default compose(withRouter)(SearchWidget); +export default SearchWidget; From c562b9674e81a13a2d1d1fe36c459a144c66f28e Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Mon, 19 Jun 2023 17:33:09 +0530 Subject: [PATCH 08/12] prettier --- src/components/theme/SearchWidget/SearchWidget.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx index 90bea445e0..5fb9d32534 100644 --- a/src/components/theme/SearchWidget/SearchWidget.jsx +++ b/src/components/theme/SearchWidget/SearchWidget.jsx @@ -21,7 +21,7 @@ const messages = defineMessages({ const SearchWidget = ({ pathname }) => { const intl = useIntl(); const [text, setText] = useState(''); - const history=useHistory(); + const history = useHistory(); const onChangeText = ({ value }) => { setText(value); }; From 5077a6c40ac912185213af45d816a2b7e386a9c4 Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Mon, 19 Jun 2023 17:50:19 +0530 Subject: [PATCH 09/12] prettier --- src/components/theme/SearchWidget/SearchWidget.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx index 5fb9d32534..012719fb28 100644 --- a/src/components/theme/SearchWidget/SearchWidget.jsx +++ b/src/components/theme/SearchWidget/SearchWidget.jsx @@ -22,7 +22,7 @@ const SearchWidget = ({ pathname }) => { const intl = useIntl(); const [text, setText] = useState(''); const history = useHistory(); - const onChangeText = ({ value }) => { + const onChangeText = (event, { value }) => { setText(value); }; From 0ea1b5fbe9c075229039ef70754e99aeca655cae Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Tue, 20 Jun 2023 11:19:10 +0530 Subject: [PATCH 10/12] FIx proptypes --- src/components/theme/SearchWidget/SearchWidget.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx index 012719fb28..b96eb9405b 100644 --- a/src/components/theme/SearchWidget/SearchWidget.jsx +++ b/src/components/theme/SearchWidget/SearchWidget.jsx @@ -58,7 +58,7 @@ const SearchWidget = ({ pathname }) => { }; SearchWidget.propTypes = { - pathname: PropTypes.string, + pathname: PropTypes.string.isRequired, }; export default SearchWidget; From 000cb10c957bc0fdabb825776e16bf5ecae61156 Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Mon, 26 Jun 2023 12:38:34 +0530 Subject: [PATCH 11/12] Remove pathname from proptypes --- src/components/theme/SearchWidget/SearchWidget.jsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx index b96eb9405b..50bf162e2b 100644 --- a/src/components/theme/SearchWidget/SearchWidget.jsx +++ b/src/components/theme/SearchWidget/SearchWidget.jsx @@ -1,7 +1,6 @@ import { useState } from 'react'; -import { useHistory } from 'react-router-dom'; +import { useHistory, useLocation } from 'react-router-dom'; import { Form, Input } from 'semantic-ui-react'; -import { PropTypes } from 'prop-types'; import { defineMessages, useIntl } from 'react-intl'; import { Icon } from '@plone/volto/components'; @@ -18,14 +17,14 @@ const messages = defineMessages({ }, }); -const SearchWidget = ({ pathname }) => { +const SearchWidget = () => { const intl = useIntl(); const [text, setText] = useState(''); const history = useHistory(); const onChangeText = (event, { value }) => { setText(value); }; - + const pathname = useLocation(); const onSubmit = (event) => { const path = pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : ''; @@ -57,8 +56,4 @@ const SearchWidget = ({ pathname }) => { ); }; -SearchWidget.propTypes = { - pathname: PropTypes.string.isRequired, -}; - export default SearchWidget; From 507c4e2cc78ec5ca5740324d45dc9472f0278959 Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Mon, 10 Jul 2023 17:28:52 +0530 Subject: [PATCH 12/12] useLocation removed --- src/components/theme/SearchWidget/SearchWidget.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx index 50bf162e2b..b8f2008813 100644 --- a/src/components/theme/SearchWidget/SearchWidget.jsx +++ b/src/components/theme/SearchWidget/SearchWidget.jsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; import { Form, Input } from 'semantic-ui-react'; import { defineMessages, useIntl } from 'react-intl'; @@ -17,14 +17,14 @@ const messages = defineMessages({ }, }); -const SearchWidget = () => { +const SearchWidget = (props) => { const intl = useIntl(); const [text, setText] = useState(''); const history = useHistory(); const onChangeText = (event, { value }) => { setText(value); }; - const pathname = useLocation(); + const pathname = props.pathname; const onSubmit = (event) => { const path = pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : '';