From 5e67677d948d55314680c3d337c01d6a54118ed6 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Wed, 11 Aug 2021 02:17:41 +0000 Subject: Functional paradigm shift Signed-off-by: Christopher Ng --- .../DisplayNameSection/DisplayName.vue | 33 ++++---- .../components/PersonalInfo/EmailSection/Email.vue | 87 ++++++++++++++-------- .../PersonalInfo/shared/FederationControl.vue | 60 +++++++-------- 3 files changed, 102 insertions(+), 78 deletions(-) (limited to 'apps/settings/src') diff --git a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue index 1f32f55dcf7..3b15f1ea335 100644 --- a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue +++ b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue @@ -76,30 +76,35 @@ export default { methods: { onDisplayNameChange(e) { - this.$emit('update:display-name', e.target.value.trim()) - // $nextTick() ensures that references to this.dipslayName further down the chain give the correct non-outdated value - this.$nextTick(() => this.debounceDisplayNameChange()) + this.$emit('update:display-name', e.target.value) + this.debounceDisplayNameChange(e.target.value.trim()) }, - debounceDisplayNameChange: debounce(async function() { - if (this.$refs.displayName?.checkValidity() && this.isValid()) { - await this.updatePrimaryDisplayName() + debounceDisplayNameChange: debounce(async function(displayName) { + if (this.$refs.displayName?.checkValidity() && this.isValid(displayName)) { + await this.updatePrimaryDisplayName(displayName) } }, 500), - async updatePrimaryDisplayName() { + async updatePrimaryDisplayName(displayName) { try { - const responseData = await savePrimaryDisplayName(this.displayName) - this.handleResponse(responseData.ocs?.meta?.status) + const responseData = await savePrimaryDisplayName(displayName) + this.handleResponse({ + displayName, + status: responseData.ocs?.meta?.status, + }) } catch (e) { - this.handleResponse('error', 'Unable to update full name', e) + this.handleResponse({ + errorMessage: 'Unable to update full name', + error: e, + }) } }, - handleResponse(status, errorMessage, error) { + handleResponse({ displayName, status, errorMessage, error }) { if (status === 'ok') { // Ensure that local initialDiplayName state reflects server state - this.initialDisplayName = this.displayName + this.initialDisplayName = displayName this.showCheckmarkIcon = true setTimeout(() => { this.showCheckmarkIcon = false }, 2000) } else { @@ -110,8 +115,8 @@ export default { } }, - isValid() { - return this.displayName !== '' + isValid(displayName) { + return displayName !== '' }, onScopeChange(scope) { diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue index 6c0a98d26f9..6b839ccdb55 100644 --- a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue +++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue @@ -128,7 +128,7 @@ export default { if (this.primary) { return this.email === '' } - return this.email !== '' && !this.isValid() + return this.email !== '' && !this.isValid(this.email) }, deleteEmailLabel() { @@ -165,21 +165,20 @@ export default { methods: { onEmailChange(e) { - this.$emit('update:email', e.target.value.trim()) - // $nextTick() ensures that references to this.email further down the chain give the correct non-outdated value - this.$nextTick(() => this.debounceEmailChange()) + this.$emit('update:email', e.target.value) + this.debounceEmailChange(e.target.value.trim()) }, - debounceEmailChange: debounce(async function() { - if (this.$refs.email?.checkValidity() || this.email === '') { + debounceEmailChange: debounce(async function(email) { + if (this.$refs.email?.checkValidity() || email === '') { if (this.primary) { - await this.updatePrimaryEmail() + await this.updatePrimaryEmail(email) } else { - if (this.email) { + if (email) { if (this.initialEmail === '') { - await this.addAdditionalEmail() + await this.addAdditionalEmail(email) } else { - await this.updateAdditionalEmail() + await this.updateAdditionalEmail(email) } } } @@ -189,40 +188,61 @@ export default { async deleteEmail() { if (this.primary) { this.$emit('update:email', '') - this.$nextTick(async() => await this.updatePrimaryEmail()) + await this.updatePrimaryEmail('') } else { await this.deleteAdditionalEmail() } }, - async updatePrimaryEmail() { + async updatePrimaryEmail(email) { try { - const responseData = await savePrimaryEmail(this.email) - this.handleResponse(responseData.ocs?.meta?.status) + const responseData = await savePrimaryEmail(email) + this.handleResponse({ + email, + status: responseData.ocs?.meta?.status, + }) } catch (e) { - if (this.email === '') { - this.handleResponse('error', 'Unable to delete primary email address', e) + if (email === '') { + this.handleResponse({ + errorMessage: 'Unable to delete primary email address', + error: e, + }) } else { - this.handleResponse('error', 'Unable to update primary email address', e) + this.handleResponse({ + errorMessage: 'Unable to update primary email address', + error: e, + }) } } }, - async addAdditionalEmail() { + async addAdditionalEmail(email) { try { - const responseData = await saveAdditionalEmail(this.email) - this.handleResponse(responseData.ocs?.meta?.status) + const responseData = await saveAdditionalEmail(email) + this.handleResponse({ + email, + status: responseData.ocs?.meta?.status, + }) } catch (e) { - this.handleResponse('error', 'Unable to add additional email address', e) + this.handleResponse({ + errorMessage: 'Unable to add additional email address', + error: e, + }) } }, - async updateAdditionalEmail() { + async updateAdditionalEmail(email) { try { - const responseData = await updateAdditionalEmail(this.initialEmail, this.email) - this.handleResponse(responseData.ocs?.meta?.status) + const responseData = await updateAdditionalEmail(this.initialEmail, email) + this.handleResponse({ + email, + status: responseData.ocs?.meta?.status, + }) } catch (e) { - this.handleResponse('error', 'Unable to update additional email address', e) + this.handleResponse({ + errorMessage: 'Unable to update additional email address', + error: e, + }) } }, @@ -231,7 +251,10 @@ export default { const responseData = await removeAdditionalEmail(this.initialEmail) this.handleDeleteAdditionalEmail(responseData.ocs?.meta?.status) } catch (e) { - this.handleResponse('error', 'Unable to delete additional email address', e) + this.handleResponse({ + errorMessage: 'Unable to delete additional email address', + error: e, + }) } }, @@ -239,14 +262,16 @@ export default { if (status === 'ok') { this.$emit('delete-additional-email') } else { - this.handleResponse('error', 'Unable to delete additional email address', {}) + this.handleResponse({ + errorMessage: 'Unable to delete additional email address', + }) } }, - handleResponse(status, errorMessage, error) { + handleResponse({ email, status, errorMessage, error }) { if (status === 'ok') { // Ensure that local initialEmail state reflects server state - this.initialEmail = this.email + this.initialEmail = email this.showCheckmarkIcon = true setTimeout(() => { this.showCheckmarkIcon = false }, 2000) } else { @@ -257,8 +282,8 @@ export default { } }, - isValid() { - return /^\S+$/.test(this.email) + isValid(email) { + return /^\S+$/.test(email) }, onScopeChange(scope) { diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue index 550f1710ab1..a48e5b62969 100644 --- a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue +++ b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue @@ -122,52 +122,46 @@ export default { async changeScope(scope) { this.$emit('update:scope', scope) - this.$nextTick(async() => { - if (!this.additional) { - await this.updatePrimaryScope() - } else { - await this.updateAdditionalScope() - } - }) + if (!this.additional) { + await this.updatePrimaryScope(scope) + } else { + await this.updateAdditionalScope(scope) + } }, - async updatePrimaryScope() { + async updatePrimaryScope(scope) { try { - const responseData = await this.handleScopeChange(this.scope) - this.handleResponse(responseData.ocs?.meta?.status) + const responseData = await this.handleScopeChange(scope) + this.handleResponse({ + scope, + status: responseData.ocs?.meta?.status, + }) } catch (e) { - this.handleResponse( - 'error', - t( - 'settings', - 'Unable to update federation scope of the primary {accountProperty}', - { accountProperty: this.accountPropertyLowerCase } - ), - e, - ) + this.handleResponse({ + errorMessage: t('settings', 'Unable to update federation scope of the primary {accountProperty}', { accountProperty: this.accountPropertyLowerCase }), + error: e, + }) } }, - async updateAdditionalScope() { + async updateAdditionalScope(scope) { try { - const responseData = await this.handleScopeChange(this.additionalValue, this.scope) - this.handleResponse(responseData.ocs?.meta?.status) + const responseData = await this.handleScopeChange(this.additionalValue, scope) + this.handleResponse({ + scope, + status: responseData.ocs?.meta?.status, + }) } catch (e) { - this.handleResponse( - 'error', - t( - 'settings', - 'Unable to update federation scope of additional {accountProperty}', - { accountProperty: this.accountPropertyLowerCase } - ), - e, - ) + this.handleResponse({ + errorMessage: t('settings', 'Unable to update federation scope of additional {accountProperty}', { accountProperty: this.accountPropertyLowerCase }), + error: e, + }) } }, - handleResponse(status, errorMessage, error) { + handleResponse({ scope, status, errorMessage, error }) { if (status === 'ok') { - this.initialScope = this.scope + this.initialScope = scope } else { this.$emit('update:scope', this.initialScope) showError(errorMessage) -- cgit v1.2.3