fix: make profile update after server response (#37154)

The Privacy component has been simplified and made to rely on the user
prop rather than its own state.  The submitProfileUIComplete reducer was
missing so has been added.

client/src/components/settings/Privacy.js

@@ -4,7 +4,6 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Button, Form } from '@freecodecamp/react-bootstrap';
-import { isEqual } from 'lodash';
 
 import { userSelector } from '../../redux';
 import { submitProfileUI } from '../../redux/settings';
@@ -17,7 +16,6 @@ import SectionHeader from './SectionHeader';
 const mapStateToProps = createSelector(
   userSelector,
   user => ({
-    ...user.profileUI,
     user
   })
 );
@@ -26,6 +24,9 @@ const mapDispatchToProps = dispatch =>
   bindActionCreators({ submitProfileUI }, dispatch);
 
 const propTypes = {
+  submitProfileUI: PropTypes.func.isRequired,
+  user: PropTypes.shape({
+    profileUI: PropTypes.shape({
       isLocked: PropTypes.bool,
       showAbout: PropTypes.bool,
       showCerts: PropTypes.bool,
@@ -35,55 +36,24 @@ const propTypes = {
       showName: PropTypes.bool,
       showPoints: PropTypes.bool,
       showPortfolio: PropTypes.bool,
-  showTimeLine: PropTypes.bool,
+      showTimeLine: PropTypes.bool
-  submitProfileUI: PropTypes.func.isRequired,
+    }),
-  user: PropTypes.object
+    username: PropTypes.String
+  })
 };
 
 class PrivacySettings extends Component {
-  constructor(props) {
-    super(props);
-
-    const originalProfileUI = { ...props.user.profileUI };
-
-    this.state = {
-      privacyValues: {
-        ...originalProfileUI
-      },
-      originalProfileUI: { ...originalProfileUI }
-    };
-  }
-
-  componentDidUpdate() {
-    const { profileUI: currentPropsProfileUI } = this.props.user;
-    const { originalProfileUI } = this.state;
-    if (!isEqual(originalProfileUI, currentPropsProfileUI)) {
-      /* eslint-disable-next-line react/no-did-update-set-state */
-      return this.setState(state => ({
-        ...state,
-        originalProfileUI: { ...currentPropsProfileUI },
-        privacyValues: { ...currentPropsProfileUI }
-      }));
-    }
-    return null;
-  }
-
   handleSubmit = e => e.preventDefault();
 
-  toggleFlag = flag => () =>
+  toggleFlag = flag => () => {
-    this.setState(
+    const privacyValues = { ...this.props.user.profileUI };
-      state => ({
+    privacyValues[flag] = !privacyValues[flag];
-        privacyValues: {
+    this.props.submitProfileUI(privacyValues);
-          ...state.privacyValues,
+  };
-          [flag]: !state.privacyValues[flag]
-        }
-      }),
-      () => this.props.submitProfileUI(this.state.privacyValues)
-    );
 
   render() {
+    const { user } = this.props;
     const {
-      privacyValues: {
       isLocked = true,
       showAbout = false,
       showCerts = false,
@@ -94,9 +64,7 @@ class PrivacySettings extends Component {
       showPoints = false,
       showPortfolio = false,
       showTimeLine = false
-      }
+    } = user.profileUI;
-    } = this.state;
-    const { user } = this.props;
 
     return (
       <div className='privacy-settings'>

client/src/redux/index.js

@@ -375,7 +375,20 @@ export const reducer = handleActions(
     [settingsTypes.updateUserFlagComplete]: (state, { payload }) =>
       payload ? spreadThePayloadOnUser(state, payload) : state,
     [settingsTypes.verifyCertComplete]: (state, { payload }) =>
-      payload ? spreadThePayloadOnUser(state, payload) : state
+      payload ? spreadThePayloadOnUser(state, payload) : state,
+    [settingsTypes.submitProfileUIComplete]: (state, { payload }) =>
+      payload
+        ? {
+            ...state,
+            user: {
+              ...state.user,
+              [state.appUsername]: {
+                ...state.user[state.appUsername],
+                profileUI: { ...payload }
+              }
+            }
+          }
+        : state
   },
   initialState
 );