issue 1355 fixed: Error displayed when user quickly deletes items fro…

src/shared/components/Settings/Tools/Devices/List/index.jsx

@@ -11,10 +11,11 @@ export default function DeviceList(props) {
   const {
     deviceList,
     onDeleteItem,
+    disabled,
   } = props;
 
   return (
-    <div styleName={`container ${deviceList.items.length > 0 ? 'active' : ''}`}>
+    <div styleName={`container ${deviceList.items.length > 0 ? 'active' : ''} ${disabled ? 'disabled' : ''}`}>
       <ul>
         {
           deviceList.items.map((device, index) => (
@@ -34,4 +35,9 @@ export default function DeviceList(props) {
 DeviceList.propTypes = {
   deviceList: PT.shape().isRequired,
   onDeleteItem: PT.func.isRequired,
+  disabled: PT.bool,
+};
+
+DeviceList.defaultProps = {
+  disabled: false,
 };

src/shared/components/Settings/Tools/Devices/List/styles.scss

@@ -26,4 +26,10 @@
       border-bottom: 1px solid $tc-gray-10;
     }
   }
+
+  &.disabled {
+    opacity: 0.7;
+    pointer-events: none;
+    user-select: none;
+  }
 }

src/shared/components/Settings/Tools/Devices/index.jsx

@@ -273,6 +273,7 @@ export default class Devices extends ConsentComponent {
     const deviceItems = deviceTrait.traits
       ? deviceTrait.traits.data.slice() : [];
     const { newDevice, formInvalid, errorMessage } = this.state;
+    const canModifyTrait = !this.props.traitRequestCount;
 
     return (
       <div styleName="devices-container">
@@ -290,7 +291,13 @@ export default class Devices extends ConsentComponent {
         </div>
         {
           !isMobileView && deviceItems.length > 0
-          && (<DeviceList deviceList={{ items: deviceItems }} onDeleteItem={this.onDeleteDevice} />)
+          && (
+            <DeviceList
+              deviceList={{ items: deviceItems }}
+              onDeleteItem={this.onDeleteDevice}
+              disabled={!canModifyTrait}
+            />
+          )
         }
         <div styleName={`sub-title ${deviceItems.length > 0 ? 'second' : 'first'}`}>
           Add a new device
@@ -377,6 +384,7 @@ export default class Devices extends ConsentComponent {
             <PrimaryButton
               styleName="complete"
               onClick={this.onHandleAddDevice}
+              disabled={!canModifyTrait}
             >
               Add device to your list
             </PrimaryButton>
@@ -445,6 +453,7 @@ export default class Devices extends ConsentComponent {
             <PrimaryButton
               styleName="complete"
               onClick={this.onHandleAddDevice}
+              disabled={!canModifyTrait}
             >
               Add Device
             </PrimaryButton>
@@ -456,6 +465,7 @@ export default class Devices extends ConsentComponent {
             <DeviceList
               deviceList={{ items: deviceItems }}
               onDeleteItem={this.onHandleDeleteDevice}
+              disabled={!canModifyTrait}
             />
           )
         }
@@ -467,6 +477,7 @@ export default class Devices extends ConsentComponent {
 Devices.propTypes = {
   tokenV3: PT.string.isRequired,
   handle: PT.string.isRequired,
+  traitRequestCount: PT.number.isRequired,
   userTraits: PT.array.isRequired,
   addUserTrait: PT.func.isRequired,
   updateUserTrait: PT.func.isRequired,

src/shared/components/Settings/Tools/ServiceProviders/List/index.jsx

@@ -11,10 +11,11 @@ export default function ServiceProviderList(props) {
   const {
     serviceProviderList,
     onDeleteItem,
+    disabled,
   } = props;
 
   return (
-    <div styleName={`container ${serviceProviderList.items.length > 0 ? 'active' : ''}`}>
+    <div styleName={`container ${serviceProviderList.items.length > 0 ? 'active' : ''} ${disabled ? 'disabled' : ''}`}>
       <ul>
         {
           serviceProviderList.items.map((serviceProvider, index) => (
@@ -31,4 +32,9 @@ export default function ServiceProviderList(props) {
 ServiceProviderList.propTypes = {
   serviceProviderList: PT.shape().isRequired,
   onDeleteItem: PT.func.isRequired,
+  disabled: PT.bool,
+};
+
+ServiceProviderList.defaultProps = {
+  disabled: false,
 };

src/shared/components/Settings/Tools/ServiceProviders/List/styles.scss

@@ -26,4 +26,10 @@
       border-bottom: 1px solid $tc-gray-10;
     }
   }
+
+  &.disabled {
+    opacity: 0.7;
+    pointer-events: none;
+    user-select: none;
+  }
 }

src/shared/components/Settings/Tools/ServiceProviders/index.jsx

@@ -240,6 +240,7 @@ export default class ServiceProviders extends ConsentComponent {
     const serviceProviderItems = serviceProviderTrait.traits
       ? serviceProviderTrait.traits.data.slice() : [];
     const { newServiceProvider, formInvalid, errorMessage } = this.state;
+    const canModifyTrait = !this.props.traitRequestCount;
 
     return (
       <div styleName="service-provider-container">
@@ -261,6 +262,7 @@ export default class ServiceProviders extends ConsentComponent {
             <ServiceProviderList
               serviceProviderList={{ items: serviceProviderItems }}
               onDeleteItem={this.onDeleteServiceProvider}
+              disabled={!canModifyTrait}
             />
           )
         }
@@ -305,6 +307,7 @@ export default class ServiceProviders extends ConsentComponent {
             <PrimaryButton
               styleName="complete"
               onClick={this.onHandleAddServiceProvider}
+              disabled={!canModifyTrait}
             >
               Add service provider to your list
             </PrimaryButton>
@@ -345,6 +348,7 @@ export default class ServiceProviders extends ConsentComponent {
             <PrimaryButton
               styleName="complete"
               onClick={this.onHandleAddServiceProvider}
+              disabled={!canModifyTrait}
             >
               Add Provider
             </PrimaryButton>
@@ -356,6 +360,7 @@ export default class ServiceProviders extends ConsentComponent {
             <ServiceProviderList
               serviceProviderList={{ items: serviceProviderItems }}
               onDeleteItem={this.onHandleDeleteServiceProvider}
+              disabled={!canModifyTrait}
             />
           )
         }
@@ -367,6 +372,7 @@ export default class ServiceProviders extends ConsentComponent {
 ServiceProviders.propTypes = {
   tokenV3: PT.string.isRequired,
   handle: PT.string.isRequired,
+  traitRequestCount: PT.number.isRequired,
   userTraits: PT.array.isRequired,
   addUserTrait: PT.func.isRequired,
   updateUserTrait: PT.func.isRequired,

src/shared/components/Settings/Tools/Software/List/index.jsx

@@ -11,10 +11,11 @@ export default function SoftwareList(props) {
   const {
     softwareList,
     onDeleteItem,
+    disabled,
   } = props;
 
   return (
-    <div styleName={`container ${softwareList.items.length > 0 ? 'active' : ''}`}>
+    <div styleName={`container ${softwareList.items.length > 0 ? 'active' : ''} ${disabled ? 'disabled' : ''}`}>
       <ul>
         {
           softwareList.items.map((software, index) => (
@@ -31,4 +32,9 @@ export default function SoftwareList(props) {
 SoftwareList.propTypes = {
   softwareList: PT.shape().isRequired,
   onDeleteItem: PT.func.isRequired,
+  disabled: PT.bool,
+};
+
+SoftwareList.defaultProps = {
+  disabled: false,
 };

src/shared/components/Settings/Tools/Software/List/styles.scss

@@ -26,4 +26,10 @@
       border-bottom: 1px solid $tc-gray-10;
     }
   }
+
+  &.disabled {
+    opacity: 0.7;
+    pointer-events: none;
+    user-select: none;
+  }
 }

src/shared/components/Settings/Tools/Software/index.jsx

@@ -240,6 +240,7 @@ export default class Software extends ConsentComponent {
     const softwareItems = softwareTrait.traits
       ? softwareTrait.traits.data.slice() : [];
     const { newSoftware, formInvalid, errorMessage } = this.state;
+    const canModifyTrait = !this.props.traitRequestCount;
 
     return (
       <div styleName="software-container">
@@ -261,6 +262,7 @@ export default class Software extends ConsentComponent {
             <SoftwareList
               softwareList={{ items: softwareItems }}
               onDeleteItem={this.onDeleteSoftware}
+              disabled={!canModifyTrait}
             />
           )
         }
@@ -305,6 +307,7 @@ export default class Software extends ConsentComponent {
             <PrimaryButton
               styleName="complete"
               onClick={this.onHandleAddSoftware}
+              disabled={!canModifyTrait}
             >
               Add software to your list
             </PrimaryButton>
@@ -345,6 +348,7 @@ export default class Software extends ConsentComponent {
             <PrimaryButton
               styleName="complete"
               onClick={this.onHandleAddSoftware}
+              disabled={!canModifyTrait}
             >
               Add Software
             </PrimaryButton>
@@ -356,6 +360,7 @@ export default class Software extends ConsentComponent {
             <SoftwareList
               softwareList={{ items: softwareItems }}
               onDeleteItem={this.onHandleDeleteSoftware}
+              disabled={!canModifyTrait}
             />
           )
         }
@@ -367,6 +372,7 @@ export default class Software extends ConsentComponent {
 Software.propTypes = {
   tokenV3: PT.string.isRequired,
   handle: PT.string.isRequired,
+  traitRequestCount: PT.number.isRequired,
   userTraits: PT.array.isRequired,
   addUserTrait: PT.func.isRequired,
   updateUserTrait: PT.func.isRequired,

src/shared/components/Settings/Tools/Subscriptions/List/index.jsx

@@ -11,10 +11,11 @@ export default function SubscriptionList(props) {
   const {
     subscriptionList,
     onDeleteItem,
+    disabled,
   } = props;
 
   return (
-    <div styleName={`container ${subscriptionList.items.length > 0 ? 'active' : ''}`}>
+    <div styleName={`container ${subscriptionList.items.length > 0 ? 'active' : ''} ${disabled ? 'disabled' : ''}`}>
       <ul>
         {
           subscriptionList.items.map((subscription, index) => (
@@ -31,4 +32,9 @@ export default function SubscriptionList(props) {
 SubscriptionList.propTypes = {
   subscriptionList: PT.shape().isRequired,
   onDeleteItem: PT.func.isRequired,
+  disabled: PT.bool,
+};
+
+SubscriptionList.defaultProps = {
+  disabled: false,
 };

src/shared/components/Settings/Tools/Subscriptions/List/styles.scss

@@ -26,4 +26,10 @@
       border-bottom: 1px solid $tc-gray-10;
     }
   }
+
+  &.disabled {
+    opacity: 0.7;
+    pointer-events: none;
+    user-select: none;
+  }
 }

src/shared/components/Settings/Tools/Subscriptions/index.jsx

@@ -230,6 +230,7 @@ export default class Subscription extends ConsentComponent {
     const subscriptionItems = subscriptionTrait.traits
       ? subscriptionTrait.traits.data.slice() : [];
     const { newSubscription, formInvalid, errorMessage } = this.state;
+    const canModifyTrait = !this.props.traitRequestCount;
 
     return (
       <div styleName="subscription-container">
@@ -251,6 +252,7 @@ export default class Subscription extends ConsentComponent {
             <SubscriptionList
               subscriptionList={{ items: subscriptionItems }}
               onDeleteItem={this.onDeleteSubscription}
+              disabled={!canModifyTrait}
             />
           )
         }
@@ -275,6 +277,7 @@ export default class Subscription extends ConsentComponent {
             <PrimaryButton
               styleName="complete"
               onClick={this.onHandleAddSubscription}
+              disabled={!canModifyTrait}
             >
               Add subscription to your list
             </PrimaryButton>
@@ -300,6 +303,7 @@ export default class Subscription extends ConsentComponent {
             <PrimaryButton
               styleName="complete"
               onClick={this.onHandleAddSubscription}
+              disabled={!canModifyTrait}
             >
               Add Subscription
             </PrimaryButton>
@@ -311,6 +315,7 @@ export default class Subscription extends ConsentComponent {
             <SubscriptionList
               subscriptionList={{ items: subscriptionItems }}
               onDeleteItem={this.onHandleDeleteSubscription}
+              disabled={!canModifyTrait}
             />
           )
         }
@@ -322,6 +327,7 @@ export default class Subscription extends ConsentComponent {
 Subscription.propTypes = {
   tokenV3: PT.string.isRequired,
   handle: PT.string.isRequired,
+  traitRequestCount: PT.number.isRequired,
   userTraits: PT.array.isRequired,
   addUserTrait: PT.func.isRequired,
   updateUserTrait: PT.func.isRequired,

src/shared/containers/Settings.jsx

@@ -130,6 +130,7 @@ function mapStateToProps(state) {
     loadingError: state.profile.loadingError,
     settingsUI: state.page.ui.settings,
     settings: state.settings,
+    traitRequestCount: state.settings.traitRequestCount,
     userTraits: state.settings.userTraits,
     skills: state.profile.skills,
   };
@@ -215,16 +216,19 @@ function mapDispatchToProps(dispatch) {
       dispatch(actions.settings.getAllUserTraits(handle, tokenV3));
     },
     addUserTrait: (handle, traitId, data, tokenV3) => {
+      dispatch(actions.settings.modifyUserTraitInit());
       dispatch(actions.settings.addUserTrait(handle, traitId, data, tokenV3));
     },
     addUserSkill: (handle, skill, tokenV3) => {
       dispatch(actions.profile.addSkillInit());
       dispatch(actions.profile.addSkillDone(handle, tokenV3, _.assign(skill, { tagId: skill.id })));
     },
     updateUserTrait: (handle, traitId, data, tokenV3) => {
+      dispatch(actions.settings.modifyUserTraitInit());
       dispatch(actions.settings.updateUserTrait(handle, traitId, data, tokenV3));
     },
     deleteUserTrait: (handle, traitId, tokenV3) => {
+      dispatch(actions.settings.modifyUserTraitInit());
       dispatch(actions.settings.deleteUserTrait(handle, traitId, tokenV3));
     },
     deleteUserSkill: (handle, skill, tokenV3) => {