Fetch user before pass it to the restricted function (#6293)

packages/volto-slate/news/6293.bugfix

@@ -0,0 +1 @@
+Fetch `user` before pass it to the `restricted` function of the block settings. @wesleybl

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 { useUser } 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 = useUser();
 
   const [slashMenuSelected, setSlashMenuSelected] = React.useState(0);
 

packages/volto/news/6293.bugfix

@@ -0,0 +1 @@
+Fetch `user` before pass it to the `restricted` function of the block settings. @wesleybl

packages/volto/src/components/manage/BlockChooser/BlockChooser.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useUser } 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 = useUser();
   const hasAllowedBlocks = !isEmpty(allowedBlocks);
 
   const filteredBlocksConfig = filter(blocksConfig, (item) => {

packages/volto/src/components/manage/BlockChooser/BlockChooser.test.jsx

@@ -4,6 +4,7 @@ import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import BlockChooser from './BlockChooser';
 import config from '@plone/volto/registry';
+import jwt from 'jsonwebtoken';
 
 const blockSVG = {};
 
@@ -121,6 +122,9 @@ const store = mockStore({
     locale: 'en',
     messages: {},
   },
+  userSession: {
+    token: jwt.sign({ fullname: 'John Doe' }, 'secret'),
+  },
 });
 
 describe('BlocksChooser', () => {

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 useUser } from '@plone/volto/hooks/user/useUser';

packages/volto/src/hooks/user/useUser.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import jwtDecode from 'jwt-decode';
+import { getUser } from '@plone/volto/actions';
+
+const useUser = () => {
+  const users = useSelector((state) => state.users);
+  const user = users?.user;
+  const userId = useSelector((state) =>
+    state.userSession.token ? jwtDecode(state.userSession.token).sub : '',
+  );
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!user?.id && users?.get.loading === false) {
+      dispatch(getUser(userId));
+    }
+  }, [dispatch, userId, user, users?.get.loading]);
+
+  return user;
+};
+
+export default useUser;