From 449f0816baf0afc1bc97aca1cc24b3d9aa1a736d Mon Sep 17 00:00:00 2001 From: asmn Date: Thu, 27 Sep 2018 00:11:45 +0800 Subject: [PATCH] issue 1355 fixed: Error displayed when user quickly deletes items from the list --- .../Settings/Tools/Devices/List/index.jsx | 8 +++++++- .../Settings/Tools/Devices/List/styles.scss | 6 ++++++ .../components/Settings/Tools/Devices/index.jsx | 13 ++++++++++++- .../Settings/Tools/ServiceProviders/List/index.jsx | 8 +++++++- .../Tools/ServiceProviders/List/styles.scss | 6 ++++++ .../Settings/Tools/ServiceProviders/index.jsx | 6 ++++++ .../Settings/Tools/Software/List/index.jsx | 8 +++++++- .../Settings/Tools/Software/List/styles.scss | 6 ++++++ .../components/Settings/Tools/Software/index.jsx | 6 ++++++ .../Settings/Tools/Subscriptions/List/index.jsx | 8 +++++++- .../Settings/Tools/Subscriptions/List/styles.scss | 6 ++++++ .../Settings/Tools/Subscriptions/index.jsx | 6 ++++++ src/shared/containers/Settings.jsx | 4 ++++ 13 files changed, 86 insertions(+), 5 deletions(-) diff --git a/src/shared/components/Settings/Tools/Devices/List/index.jsx b/src/shared/components/Settings/Tools/Devices/List/index.jsx index 60bff15695..b46f06b7d7 100644 --- a/src/shared/components/Settings/Tools/Devices/List/index.jsx +++ b/src/shared/components/Settings/Tools/Devices/List/index.jsx @@ -11,10 +11,11 @@ export default function DeviceList(props) { const { deviceList, onDeleteItem, + disabled, } = props; return ( -
0 ? 'active' : ''}`}> +
0 ? 'active' : ''} ${disabled ? 'disabled' : ''}`}>
    { 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, }; diff --git a/src/shared/components/Settings/Tools/Devices/List/styles.scss b/src/shared/components/Settings/Tools/Devices/List/styles.scss index c7e24fd6ca..1ac94a9d67 100644 --- a/src/shared/components/Settings/Tools/Devices/List/styles.scss +++ b/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; + } } diff --git a/src/shared/components/Settings/Tools/Devices/index.jsx b/src/shared/components/Settings/Tools/Devices/index.jsx index 30947803eb..c6a07706e9 100644 --- a/src/shared/components/Settings/Tools/Devices/index.jsx +++ b/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 (
    @@ -290,7 +291,13 @@ export default class Devices extends ConsentComponent {
    { !isMobileView && deviceItems.length > 0 - && () + && ( + + ) }
    0 ? 'second' : 'first'}`}> Add a new device @@ -377,6 +384,7 @@ export default class Devices extends ConsentComponent { Add device to your list @@ -445,6 +453,7 @@ export default class Devices extends ConsentComponent { Add Device @@ -456,6 +465,7 @@ export default class Devices extends ConsentComponent { ) } @@ -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, diff --git a/src/shared/components/Settings/Tools/ServiceProviders/List/index.jsx b/src/shared/components/Settings/Tools/ServiceProviders/List/index.jsx index 5d4c56a279..37acab7fdf 100644 --- a/src/shared/components/Settings/Tools/ServiceProviders/List/index.jsx +++ b/src/shared/components/Settings/Tools/ServiceProviders/List/index.jsx @@ -11,10 +11,11 @@ export default function ServiceProviderList(props) { const { serviceProviderList, onDeleteItem, + disabled, } = props; return ( -
    0 ? 'active' : ''}`}> +
    0 ? 'active' : ''} ${disabled ? 'disabled' : ''}`}>
      { 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, }; diff --git a/src/shared/components/Settings/Tools/ServiceProviders/List/styles.scss b/src/shared/components/Settings/Tools/ServiceProviders/List/styles.scss index c7e24fd6ca..1ac94a9d67 100644 --- a/src/shared/components/Settings/Tools/ServiceProviders/List/styles.scss +++ b/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; + } } diff --git a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx index 32989810c1..c5ca39c129 100644 --- a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx +++ b/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 (
      @@ -261,6 +262,7 @@ export default class ServiceProviders extends ConsentComponent { ) } @@ -305,6 +307,7 @@ export default class ServiceProviders extends ConsentComponent { Add service provider to your list @@ -345,6 +348,7 @@ export default class ServiceProviders extends ConsentComponent { Add Provider @@ -356,6 +360,7 @@ export default class ServiceProviders extends ConsentComponent { ) } @@ -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, diff --git a/src/shared/components/Settings/Tools/Software/List/index.jsx b/src/shared/components/Settings/Tools/Software/List/index.jsx index 2e69e78871..fe0a520f46 100644 --- a/src/shared/components/Settings/Tools/Software/List/index.jsx +++ b/src/shared/components/Settings/Tools/Software/List/index.jsx @@ -11,10 +11,11 @@ export default function SoftwareList(props) { const { softwareList, onDeleteItem, + disabled, } = props; return ( -
      0 ? 'active' : ''}`}> +
      0 ? 'active' : ''} ${disabled ? 'disabled' : ''}`}>
        { 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, }; diff --git a/src/shared/components/Settings/Tools/Software/List/styles.scss b/src/shared/components/Settings/Tools/Software/List/styles.scss index c7e24fd6ca..1ac94a9d67 100644 --- a/src/shared/components/Settings/Tools/Software/List/styles.scss +++ b/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; + } } diff --git a/src/shared/components/Settings/Tools/Software/index.jsx b/src/shared/components/Settings/Tools/Software/index.jsx index 83fee1798a..6d59245ea7 100644 --- a/src/shared/components/Settings/Tools/Software/index.jsx +++ b/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 (
        @@ -261,6 +262,7 @@ export default class Software extends ConsentComponent { ) } @@ -305,6 +307,7 @@ export default class Software extends ConsentComponent { Add software to your list @@ -345,6 +348,7 @@ export default class Software extends ConsentComponent { Add Software @@ -356,6 +360,7 @@ export default class Software extends ConsentComponent { ) } @@ -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, diff --git a/src/shared/components/Settings/Tools/Subscriptions/List/index.jsx b/src/shared/components/Settings/Tools/Subscriptions/List/index.jsx index c161fc3f64..e63fe7acc8 100644 --- a/src/shared/components/Settings/Tools/Subscriptions/List/index.jsx +++ b/src/shared/components/Settings/Tools/Subscriptions/List/index.jsx @@ -11,10 +11,11 @@ export default function SubscriptionList(props) { const { subscriptionList, onDeleteItem, + disabled, } = props; return ( -
        0 ? 'active' : ''}`}> +
        0 ? 'active' : ''} ${disabled ? 'disabled' : ''}`}>
          { 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, }; diff --git a/src/shared/components/Settings/Tools/Subscriptions/List/styles.scss b/src/shared/components/Settings/Tools/Subscriptions/List/styles.scss index c7e24fd6ca..1ac94a9d67 100644 --- a/src/shared/components/Settings/Tools/Subscriptions/List/styles.scss +++ b/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; + } } diff --git a/src/shared/components/Settings/Tools/Subscriptions/index.jsx b/src/shared/components/Settings/Tools/Subscriptions/index.jsx index 411d792c8b..9427f6b33d 100644 --- a/src/shared/components/Settings/Tools/Subscriptions/index.jsx +++ b/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 (
          @@ -251,6 +252,7 @@ export default class Subscription extends ConsentComponent { ) } @@ -275,6 +277,7 @@ export default class Subscription extends ConsentComponent { Add subscription to your list @@ -300,6 +303,7 @@ export default class Subscription extends ConsentComponent { Add Subscription @@ -311,6 +315,7 @@ export default class Subscription extends ConsentComponent { ) } @@ -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, diff --git a/src/shared/containers/Settings.jsx b/src/shared/containers/Settings.jsx index b69a612687..526a2a5514 100644 --- a/src/shared/containers/Settings.jsx +++ b/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,6 +216,7 @@ 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) => { @@ -222,9 +224,11 @@ function mapDispatchToProps(dispatch) { 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) => {