fix: update user state from server (freeCodeCamp#37374)

* fix: return updates from server
* fix: make store consistant and adjust form validation

api-server/server/boot/settings.js

@@ -246,5 +246,5 @@ const updatePrivacyTerms = (req, res, next) => {
 
 function updateUserFlag(req, res, next) {
   const { user, body: update } = req;
-  user.updateAttributes(update, createStandardHandler(req, res, next));
+  return user.updateAttributes(update, createStandardHandler(req, res, next));
 }

client/src/components/settings/Internet.js

@@ -25,7 +25,6 @@ const propTypes = {
 class InternetSettings extends Component {
   constructor(props) {
     super(props);
-
     const {
       githubProfile = '',
       linkedin = '',
@@ -39,6 +38,30 @@ class InternetSettings extends Component {
     };
   }
 
+  componentDidUpdate() {
+    const {
+      githubProfile = '',
+      linkedin = '',
+      twitter = '',
+      website = ''
+    } = this.props;
+
+    const { originalValues } = this.state;
+
+    if (
+      githubProfile !== originalValues.githubProfile ||
+      linkedin !== originalValues.linkedin ||
+      twitter !== originalValues.twitter ||
+      website !== originalValues.website
+    ) {
+      /* eslint-disable-next-line react/no-did-update-set-state */
+      return this.setState({
+        originalValues: { githubProfile, linkedin, twitter, website }
+      });
+    }
+    return null;
+  }
+
   getValidationStateFor(maybeURl = '') {
     if (!maybeURl || !maybeUrlRE.test(maybeURl)) {
       return {
@@ -78,7 +101,20 @@ class InternetSettings extends Component {
   };
 
   isFormValid = () => {
-    const { formValues } = this.state;
+    const { formValues, originalValues } = this.state;
+    const valueReducer = obj => {
+      return Object.values(obj).reduce(
+        (acc, cur) => (acc ? acc : cur !== ''),
+        false
+      );
+    };
+
+    let formHasValues = valueReducer(formValues);
+    let OriginalHasValues = valueReducer(originalValues);
+
+    // check if user had values but wants to delete them all
+    if (OriginalHasValues && !formHasValues) return true;
+
     return Object.keys(formValues).reduce((bool, key) => {
       const maybeUrl = formValues[key];
       return maybeUrl ? isURL(maybeUrl) : bool;
@@ -88,10 +124,17 @@ class InternetSettings extends Component {
   handleSubmit = e => {
     e.preventDefault();
     if (!this.isFormPristine() && this.isFormValid()) {
-      // Only submit the form if is has changed, and if it is valid
+      // // Only submit the form if is has changed, and if it is valid
       const { formValues } = this.state;
+      const isSocial = {
+        isGithub: !!formValues.githubProfile,
+        isLinkedIn: !!formValues.linkedin,
+        isTwitter: !!formValues.twitter,
+        isWebsite: !!formValues.website
+      };
+
       const { updateInternetSettings } = this.props;
-      return updateInternetSettings(formValues);
+      return updateInternetSettings({ ...isSocial, ...formValues });
     }
     return null;
   };
@@ -183,10 +226,7 @@ class InternetSettings extends Component {
               ) : null}
             </FormGroup>
             <BlockSaveButton
-              disabled={
-                this.isFormPristine() ||
-                (!this.isFormPristine() && !this.isFormValid())
-              }
+              disabled={this.isFormPristine() || !this.isFormValid()}
             />
           </form>
         </FullWidthRow>