diff --git a/packages/volto-slate/src/blocks/Text/SlashMenu.jsx b/packages/volto-slate/src/blocks/Text/SlashMenu.jsx index 2a26c39cfe3..8e00979caf9 100644 --- a/packages/volto-slate/src/blocks/Text/SlashMenu.jsx +++ b/packages/volto-slate/src/blocks/Text/SlashMenu.jsx @@ -4,7 +4,7 @@ import { filter, isEmpty } from 'lodash'; import { Menu } from 'semantic-ui-react'; import { useIntl, FormattedMessage } from 'react-intl'; import { Icon } from '@plone/volto/components'; -import { useSelector } from 'react-redux'; +import { useFetchUser } from '@plone/volto/hooks'; const emptySlateBlock = () => ({ value: [ @@ -111,7 +111,7 @@ const PersistentSlashMenu = ({ editor }) => { } = props; const disableNewBlocks = data?.disableNewBlocks || detached; - const user = useSelector((state) => state.users?.user); + const user = useFetchUser(); const [slashMenuSelected, setSlashMenuSelected] = React.useState(0); diff --git a/packages/volto/src/components/manage/BlockChooser/BlockChooser.jsx b/packages/volto/src/components/manage/BlockChooser/BlockChooser.jsx index 80c5142e81b..b47514c0271 100644 --- a/packages/volto/src/components/manage/BlockChooser/BlockChooser.jsx +++ b/packages/volto/src/components/manage/BlockChooser/BlockChooser.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useSelector } from 'react-redux'; +import { useFetchUser } from '@plone/volto/hooks'; import PropTypes from 'prop-types'; import { filter, map, groupBy, isEmpty } from 'lodash'; import { Accordion, Button } from 'semantic-ui-react'; @@ -36,7 +36,7 @@ const BlockChooser = ({ contentType, }) => { const intl = useIntl(); - const user = useSelector((state) => state.users?.user); + const user = useFetchUser(); const hasAllowedBlocks = !isEmpty(allowedBlocks); const filteredBlocksConfig = filter(blocksConfig, (item) => { diff --git a/packages/volto/src/hooks/index.js b/packages/volto/src/hooks/index.js index a955aa82858..0a55ce56705 100644 --- a/packages/volto/src/hooks/index.js +++ b/packages/volto/src/hooks/index.js @@ -1,2 +1,3 @@ export { default as useClipboard } from '@plone/volto/hooks/clipboard/useClipboard'; export { useClient } from '@plone/volto/hooks/client/useClient'; +export { default as useFetchUser } from '@plone/volto/hooks/user/useFetchUser'; diff --git a/packages/volto/src/hooks/user/useFetchUser.js b/packages/volto/src/hooks/user/useFetchUser.js new file mode 100644 index 00000000000..36c94638f6e --- /dev/null +++ b/packages/volto/src/hooks/user/useFetchUser.js @@ -0,0 +1,22 @@ +import { useEffect } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import jwtDecode from 'jwt-decode'; +import { getUser } from '@plone/volto/actions'; + +const useFetchUser = () => { + const user = useSelector((state) => state.users?.user); + const userId = useSelector((state) => + state.userSession.token ? jwtDecode(state.userSession.token).sub : '', + ); + const dispatch = useDispatch(); + + useEffect(() => { + if (!user?.id) { + dispatch(getUser(userId)); + } + }, [dispatch, userId, user]); + + return user; +}; + +export default useFetchUser;