Fetch user before pass it to the restricted function

It may not be in the Redux store yet when we try to pass it in. So we
dispatch if it's not in the store.

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);
 

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) => {

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';

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;