ProfilePage dispatch setUser command in redux when user is updated

assets/js/pages/Profile/ProfilePage.jsx

@@ -1,17 +1,19 @@
 import React, { useEffect, useState } from 'react';
 import { toast } from 'react-hot-toast';
-
+import { useDispatch } from 'react-redux';
 import PageHeader from '@common/PageHeader';
 import { isAdmin } from '@lib/model/users';
 import ProfileForm from '@pages/Profile/ProfileForm';
 import { getUserProfile, editUserProfile } from '@lib/api/users';
+import { setUser as setUserInState } from '@state/user';
 
 function ProfilePage() {
   const [errorsState, setErrors] = useState([]);
   const [passwordModalOpen, setPasswordModalOpen] = useState(false);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [userState, setUser] = useState(null);
+  const dispatch = useDispatch();
 
   useEffect(() => {
     getUserProfile()
@@ -36,6 +38,7 @@ function ProfilePage() {
       .then(({ data: updatedUser }) => {
         toast.success('Profile changes saved!');
         setUser(updatedUser);
+        dispatch(setUserInState(updatedUser));
         setPasswordModalOpen(false);
       })
       .catch(

assets/js/pages/Profile/ProfilePage.test.jsx

@@ -3,11 +3,13 @@ import '@testing-library/jest-dom';
 
 import MockAdapter from 'axios-mock-adapter';
 import { toast } from 'react-hot-toast';
+import { withState } from '@lib/test-utils';
 
 import { networkClient } from '@lib/network';
 import { screen, act, render } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { userFactory, adminUser } from '@lib/test-utils/factories/users';
+import { setUser } from '@state/user';
 
 import ProfilePage from '@pages/Profile';
 
@@ -32,8 +34,9 @@ describe('ProfilePage', () => {
 
     axiosMock.onGet(PROFILE_URL).reply(200, user);
 
+    const [StatefulProfile] = withState(<ProfilePage />);
     await act(async () => {
-      await render(<ProfilePage />);
+      await render(StatefulProfile);
     });
 
     expect(await screen.getByLabelText('email').value).toBe(user.email);
@@ -46,8 +49,9 @@ describe('ProfilePage', () => {
 
     axiosMock.onGet(PROFILE_URL).reply(200, user);
 
+    const [StatefulProfile] = withState(<ProfilePage />);
     await act(async () => {
-      await render(<ProfilePage />);
+      await render(StatefulProfile);
     });
 
     expect(await screen.getByLabelText('email').value).toBe(user.email);
@@ -68,15 +72,20 @@ describe('ProfilePage', () => {
       .onPatch(PROFILE_URL)
       .reply(200, { ...user, fullname: 'New fullname' });
 
+    const [StatefulProfile, store] = withState(<ProfilePage />);
     await act(async () => {
-      await render(<ProfilePage />);
+      await render(StatefulProfile);
     });
 
     const testUser = userEvent.setup();
 
     await testUser.click(screen.getByRole('button', { name: 'Save' }));
 
     expect(toast.success).toHaveBeenCalledWith('Profile changes saved!');
+    const actions = store.getActions();
+    const expectedPayload = [setUser({ ...user, fullname: 'New fullname' })];
+
+    expect(actions).toEqual(expectedPayload);
   });
 
   it('should pass errors to form when patch call fails', async () => {
@@ -96,8 +105,9 @@ describe('ProfilePage', () => {
       .onPatch(PROFILE_URL)
       .reply(422, { errors });
 
+    const [StatefulProfile] = withState(<ProfilePage />);
     await act(async () => {
-      await render(<ProfilePage />);
+      await render(StatefulProfile);
     });
 
     const testUser = userEvent.setup();