From 0aff2e881daab6a1e7d3a083c8f10201d2d48c57 Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Tue, 6 Jun 2023 12:31:42 +0530 Subject: [PATCH 01/13] Refactor Anontools --- src/components/theme/Anontools/Anontools.jsx | 115 +++++++------------ 1 file changed, 43 insertions(+), 72 deletions(-) diff --git a/src/components/theme/Anontools/Anontools.jsx b/src/components/theme/Anontools/Anontools.jsx index 2b9e9fb5b6..d2880b35d3 100644 --- a/src/components/theme/Anontools/Anontools.jsx +++ b/src/components/theme/Anontools/Anontools.jsx @@ -1,83 +1,54 @@ -/** - * Anontools component. - * @module components/theme/Anontools/Anontools - */ - -import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; import { Link } from 'react-router-dom'; import { Menu } from 'semantic-ui-react'; import { FormattedMessage } from 'react-intl'; import config from '@plone/volto/registry'; +import { useToken, useContent } from '@plone/volto/hooks/anontools/anontools'; -/** - * Anontools container class. - */ -export class Anontools extends Component { - /** - * Property types. - * @property {Object} propTypes Property types. - * @static - */ - static propTypes = { - token: PropTypes.string, - content: PropTypes.shape({ - '@id': PropTypes.string, - }), - }; - - /** - * Default properties. - * @property {Object} defaultProps Default properties. - * @static - */ - static defaultProps = { - token: null, - content: { - '@id': null, - }, - }; +const Anontools = () => { + const token = useToken(); + const content = useContent(); - /** - * Render method. - * @method render - * @returns {string} Markup for the component. - */ - render() { - const { settings } = config; - return ( - !this.props.token && ( - + const { settings } = config; + return ( + !token && ( + + + + + + + {settings.showSelfRegistration && ( - - + + - {settings.showSelfRegistration && ( - - - - - - )} - - ) - ); - } -} + )} + + ) + ); +}; + +export default Anontools; + +Anontools.propTypes = { + token: PropTypes.string, + content: PropTypes.shape({ + '@id': PropTypes.string, + }), +}; -export default connect((state) => ({ - token: state.userSession.token, - content: state.content.data, -}))(Anontools); +Anontools.defaultProps = { + token: null, + content: { + '@id': null, + }, +}; From f3f9698a3d2d42bb9ed6a292294130d37bcdaeea Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Tue, 6 Jun 2023 13:16:10 +0530 Subject: [PATCH 02/13] Refactor anontools --- src/hooks/anontools/anontools.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/hooks/anontools/anontools.js diff --git a/src/hooks/anontools/anontools.js b/src/hooks/anontools/anontools.js new file mode 100644 index 0000000000..a2436dcc7f --- /dev/null +++ b/src/hooks/anontools/anontools.js @@ -0,0 +1,9 @@ +import { useSelector} from 'react-redux'; + +export function useToken() { + return useSelector((state) => state.userSession.token); + } + +export function useContent(){ + return useSelector((state) => state.content.data); + } \ No newline at end of file From 2e56ef952896b17d5808db113278e2c097cfbd22 Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Tue, 6 Jun 2023 14:32:52 +0530 Subject: [PATCH 03/13] Refactor anontools --- src/hooks/anontools/anontools.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/hooks/anontools/anontools.js b/src/hooks/anontools/anontools.js index a2436dcc7f..0245a633d7 100644 --- a/src/hooks/anontools/anontools.js +++ b/src/hooks/anontools/anontools.js @@ -1,9 +1,9 @@ -import { useSelector} from 'react-redux'; +import { useSelector } from 'react-redux'; export function useToken() { - return useSelector((state) => state.userSession.token); - } + return useSelector((state) => state.userSession.token); +} -export function useContent(){ - return useSelector((state) => state.content.data); - } \ No newline at end of file +export function useContent() { + return useSelector((state) => state.content.data); +} From 4623bd61d77e5e12f789187e54bc4031a6905fdf Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Tue, 6 Jun 2023 15:09:56 +0530 Subject: [PATCH 04/13] /news --- news/4845.bugfix | 1 + 1 file changed, 1 insertion(+) create mode 100644 news/4845.bugfix diff --git a/news/4845.bugfix b/news/4845.bugfix new file mode 100644 index 0000000000..e8599a0811 --- /dev/null +++ b/news/4845.bugfix @@ -0,0 +1 @@ +Refactored Anontools components. @Tishasoumya-02 From 8f26920725aab1e5df442066f20563c7f0cba4e8 Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Wed, 7 Jun 2023 10:15:40 +0530 Subject: [PATCH 05/13] Refactor Anontools --- src/components/theme/Anontools/Anontools.jsx | 3 ++- src/hooks/content/useContent.js | 5 +++++ 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/hooks/content/useContent.js diff --git a/src/components/theme/Anontools/Anontools.jsx b/src/components/theme/Anontools/Anontools.jsx index d2880b35d3..fdbf2c0d89 100644 --- a/src/components/theme/Anontools/Anontools.jsx +++ b/src/components/theme/Anontools/Anontools.jsx @@ -3,7 +3,8 @@ import { Link } from 'react-router-dom'; import { Menu } from 'semantic-ui-react'; import { FormattedMessage } from 'react-intl'; import config from '@plone/volto/registry'; -import { useToken, useContent } from '@plone/volto/hooks/anontools/anontools'; +import { useToken } from '@plone/volto/hooks/userSession/useToken'; +import { useContent } from '@plone/volto/hooks/content/useContent'; const Anontools = () => { const token = useToken(); diff --git a/src/hooks/content/useContent.js b/src/hooks/content/useContent.js new file mode 100644 index 0000000000..a45d30ab64 --- /dev/null +++ b/src/hooks/content/useContent.js @@ -0,0 +1,5 @@ +import { useSelector, shallowEqual } from 'react-redux'; + +export function useContent() { + return useSelector((state) => state.content.data, shallowEqual); +} From 15bc9ad83cca5c08101fa961e2e384aed80b1848 Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Wed, 7 Jun 2023 10:29:45 +0530 Subject: [PATCH 06/13] Refactor anontools --- src/hooks/anontools/anontools.js | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 src/hooks/anontools/anontools.js diff --git a/src/hooks/anontools/anontools.js b/src/hooks/anontools/anontools.js deleted file mode 100644 index 0245a633d7..0000000000 --- a/src/hooks/anontools/anontools.js +++ /dev/null @@ -1,9 +0,0 @@ -import { useSelector } from 'react-redux'; - -export function useToken() { - return useSelector((state) => state.userSession.token); -} - -export function useContent() { - return useSelector((state) => state.content.data); -} From 384cea5bab7de9c72af66c5e769c02430f6ace28 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Thu, 8 Jun 2023 12:40:26 +0200 Subject: [PATCH 07/13] Refactored useContent --- .../theme/Anontools/Anontools.test.jsx | 18 ++++++++++++++++-- .../__snapshots__/Anontools.test.jsx.snap | 2 +- src/hooks/content/useContent.js | 19 ++++++++++++++++++- 3 files changed, 35 insertions(+), 4 deletions(-) diff --git a/src/components/theme/Anontools/Anontools.test.jsx b/src/components/theme/Anontools/Anontools.test.jsx index 628e214925..28f54f9544 100644 --- a/src/components/theme/Anontools/Anontools.test.jsx +++ b/src/components/theme/Anontools/Anontools.test.jsx @@ -12,7 +12,14 @@ describe('Anontools', () => { it('renders an anontools component when no token is specified', () => { const store = mockStore({ userSession: { token: null }, - content: { data: { '@id': 'myid' } }, + content: { + data: { '@id': 'myid' }, + get: { + loading: false, + loaded: true, + error: null, + }, + }, intl: { locale: 'en', messages: {}, @@ -32,7 +39,14 @@ describe('Anontools', () => { it('should not render an anontools component when a token is specified', () => { const store = mockStore({ userSession: { token: '1234' }, - content: { data: {} }, + content: { + data: {}, + get: { + loading: false, + loaded: true, + error: null, + }, + }, intl: { locale: 'en', messages: {}, diff --git a/src/components/theme/Anontools/__snapshots__/Anontools.test.jsx.snap b/src/components/theme/Anontools/__snapshots__/Anontools.test.jsx.snap index 70b76d32f0..14f8f5367d 100644 --- a/src/components/theme/Anontools/__snapshots__/Anontools.test.jsx.snap +++ b/src/components/theme/Anontools/__snapshots__/Anontools.test.jsx.snap @@ -10,7 +10,7 @@ exports[`Anontools renders an anontools component when no token is specified 1`] > Log in diff --git a/src/hooks/content/useContent.js b/src/hooks/content/useContent.js index a45d30ab64..65c3be13e8 100644 --- a/src/hooks/content/useContent.js +++ b/src/hooks/content/useContent.js @@ -1,5 +1,22 @@ import { useSelector, shallowEqual } from 'react-redux'; export function useContent() { - return useSelector((state) => state.content.data, shallowEqual); + const data = useSelector((state) => state.content.data, shallowEqual); + const loading = useSelector((state) => state.content.get.loading); + const loaded = useSelector((state) => state.content.get.loaded); + const error = useSelector((state) => state.content.get.error, shallowEqual); + + return { data, loading, loaded, error }; } + +// Potential future useQuery version +// export function useGetContent() { +// // the cache will need to know the current location +// const pathname = useLocation(); +// const query = useQuery(getContentQuery({ path })) + +// // This might not be needed if we rename the properties +// const {isLoading: loading, isSuccess: loaded, ...rest} = query; + +// return { loading, loaded, ...rest }; +// } From 039916c009e3bd55aa063b4283d0dc21fa3f0a1c Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Thu, 8 Jun 2023 19:42:27 +0530 Subject: [PATCH 08/13] Renamed /news bugfix->feature. Destructured useContent() --- news/{4845.bugfix => 4845.feature} | 0 src/components/theme/Anontools/Anontools.jsx | 10 +++++----- 2 files changed, 5 insertions(+), 5 deletions(-) rename news/{4845.bugfix => 4845.feature} (100%) diff --git a/news/4845.bugfix b/news/4845.feature similarity index 100% rename from news/4845.bugfix rename to news/4845.feature diff --git a/src/components/theme/Anontools/Anontools.jsx b/src/components/theme/Anontools/Anontools.jsx index fdbf2c0d89..7fee53eb20 100644 --- a/src/components/theme/Anontools/Anontools.jsx +++ b/src/components/theme/Anontools/Anontools.jsx @@ -8,7 +8,7 @@ import { useContent } from '@plone/volto/hooks/content/useContent'; const Anontools = () => { const token = useToken(); - const content = useContent(); + const {data} = useContent(); const { settings } = config; return ( @@ -18,8 +18,8 @@ const Anontools = () => { @@ -42,14 +42,14 @@ export default Anontools; Anontools.propTypes = { token: PropTypes.string, - content: PropTypes.shape({ + data: PropTypes.shape({ '@id': PropTypes.string, }), }; Anontools.defaultProps = { token: null, - content: { + data : { '@id': null, }, }; From 2cd4cd65747a493fc7271cabb4454e1953190469 Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Thu, 8 Jun 2023 19:45:15 +0530 Subject: [PATCH 09/13] Prettier formated --- src/components/theme/Anontools/Anontools.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/theme/Anontools/Anontools.jsx b/src/components/theme/Anontools/Anontools.jsx index 7fee53eb20..842749cdd1 100644 --- a/src/components/theme/Anontools/Anontools.jsx +++ b/src/components/theme/Anontools/Anontools.jsx @@ -8,7 +8,7 @@ import { useContent } from '@plone/volto/hooks/content/useContent'; const Anontools = () => { const token = useToken(); - const {data} = useContent(); + const { data } = useContent(); const { settings } = config; return ( @@ -49,7 +49,7 @@ Anontools.propTypes = { Anontools.defaultProps = { token: null, - data : { + data: { '@id': null, }, }; From 3706d80dce0bc95f8e486e1a829c652280ae7b46 Mon Sep 17 00:00:00 2001 From: Tishasoumya-02 Date: Thu, 8 Jun 2023 20:43:45 +0530 Subject: [PATCH 10/13] Removing destructured data --- src/components/theme/Anontools/Anontools.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/theme/Anontools/Anontools.jsx b/src/components/theme/Anontools/Anontools.jsx index 842749cdd1..fdbf2c0d89 100644 --- a/src/components/theme/Anontools/Anontools.jsx +++ b/src/components/theme/Anontools/Anontools.jsx @@ -8,7 +8,7 @@ import { useContent } from '@plone/volto/hooks/content/useContent'; const Anontools = () => { const token = useToken(); - const { data } = useContent(); + const content = useContent(); const { settings } = config; return ( @@ -18,8 +18,8 @@ const Anontools = () => { @@ -42,14 +42,14 @@ export default Anontools; Anontools.propTypes = { token: PropTypes.string, - data: PropTypes.shape({ + content: PropTypes.shape({ '@id': PropTypes.string, }), }; Anontools.defaultProps = { token: null, - data: { + content: { '@id': null, }, }; From d524a830e2be21f7ca358f979c02746ffba4f12f Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Sun, 18 Jun 2023 16:02:10 +0200 Subject: [PATCH 11/13] Fix tests, bring back the correct destructure --- src/components/theme/Anontools/Anontools.jsx | 2 +- .../theme/Anontools/__snapshots__/Anontools.test.jsx.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/theme/Anontools/Anontools.jsx b/src/components/theme/Anontools/Anontools.jsx index fdbf2c0d89..9ac818ec3e 100644 --- a/src/components/theme/Anontools/Anontools.jsx +++ b/src/components/theme/Anontools/Anontools.jsx @@ -8,7 +8,7 @@ import { useContent } from '@plone/volto/hooks/content/useContent'; const Anontools = () => { const token = useToken(); - const content = useContent(); + const { data: content } = useContent(); const { settings } = config; return ( diff --git a/src/components/theme/Anontools/__snapshots__/Anontools.test.jsx.snap b/src/components/theme/Anontools/__snapshots__/Anontools.test.jsx.snap index 14f8f5367d..70b76d32f0 100644 --- a/src/components/theme/Anontools/__snapshots__/Anontools.test.jsx.snap +++ b/src/components/theme/Anontools/__snapshots__/Anontools.test.jsx.snap @@ -10,7 +10,7 @@ exports[`Anontools renders an anontools component when no token is specified 1`] > Log in From 441dafca9faa03e28a20b079f52cd98b1c0d04b5 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Sun, 18 Jun 2023 16:16:47 +0200 Subject: [PATCH 12/13] Add some documentation to useContent hook --- src/hooks/content/useContent.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/hooks/content/useContent.js b/src/hooks/content/useContent.js index 65c3be13e8..3001c1d7a4 100644 --- a/src/hooks/content/useContent.js +++ b/src/hooks/content/useContent.js @@ -1,5 +1,14 @@ import { useSelector, shallowEqual } from 'react-redux'; +/** + * useContent hook + * + * This hook returns the current content that is stored in the Redux store in the + * `content` reducer, and returns it along with the related state (loading/loaded/error). + * + * @export + * @return {{ data: ContentData, loading: boolean, loaded: boolean, error: Error }} + */ export function useContent() { const data = useSelector((state) => state.content.data, shallowEqual); const loading = useSelector((state) => state.content.get.loading); @@ -9,8 +18,8 @@ export function useContent() { return { data, loading, loaded, error }; } -// Potential future useQuery version -// export function useGetContent() { +// For reference purposes: Potential future useQuery version +// export function useContent() { // // the cache will need to know the current location // const pathname = useLocation(); // const query = useQuery(getContentQuery({ path })) From 80f07acd16e60f11fc39df046cc6b61b3a4b857a Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Sun, 18 Jun 2023 16:19:15 +0200 Subject: [PATCH 13/13] Use flattenToAppURL --- src/components/theme/Anontools/Anontools.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/theme/Anontools/Anontools.jsx b/src/components/theme/Anontools/Anontools.jsx index 9ac818ec3e..ccff3638b0 100644 --- a/src/components/theme/Anontools/Anontools.jsx +++ b/src/components/theme/Anontools/Anontools.jsx @@ -2,9 +2,10 @@ import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { Menu } from 'semantic-ui-react'; import { FormattedMessage } from 'react-intl'; -import config from '@plone/volto/registry'; +import { flattenToAppURL } from '@plone/volto/helpers'; import { useToken } from '@plone/volto/hooks/userSession/useToken'; import { useContent } from '@plone/volto/hooks/content/useContent'; +import config from '@plone/volto/registry'; const Anontools = () => { const token = useToken(); @@ -19,7 +20,7 @@ const Anontools = () => { aria-label="login" to={`/login${ content?.['@id'] - ? `?return_url=${content['@id'].replace(settings.apiPath, '')}` + ? `?return_url=${flattenToAppURL(content['@id'])}` : '' }`} >