refactor(cc-email-list)!: rework properties to avoid impossible states

BREAKING CHANGE: the properties have changed
- `emails` property has been renamed to `emailListState`,
- `emails.state` property has been renamed to `emailListState.type`,
- `emails.value` property has been renamed to
  `emailListState.emailList`,
- same logic applies to `secondaryAddressState` where `state` has been
  renamed to `type`.

Fixes #1163

Author: florian-sanders-cc

src/components/cc-email-list/cc-email-list.js

@@ -29,7 +29,7 @@ import '../cc-notice/cc-notice.js';
 
 /** @type {PrimaryAddressState} */
 const SKELETON_PRIMARY_EMAIL = {
-  state: 'idle',
+  type: 'idle',
   address: fakeString(35),
   verified: false,
 };
@@ -88,7 +88,7 @@ export class CcEmailList extends LitElement {
   static get properties() {
     return {
       addEmailFormState: { type: Object, attribute: false },
-      emails: { type: Object },
+      emailListState: { type: Object, attribute: false },
     };
   }
 
@@ -99,7 +99,7 @@ export class CcEmailList extends LitElement {
     this.addEmailFormState = { type: 'idle' };
 
     /** @type {EmailListState} State of the component. */
-    this.emails = { state: 'loading' };
+    this.emailListState = { type: 'loading' };
 
     /** @type {CcInputTextRef} */
     this._addressInputRef = createRef();
@@ -133,8 +133,8 @@ export class CcEmailList extends LitElement {
   }
 
   _onSendConfirmationEmail() {
-    if (this.emails.state === 'loaded') {
-      dispatchCustomEvent(this, 'send-confirmation-email', this.emails.value.primaryAddress.address);
+    if (this.emailListState.type === 'loaded') {
+      dispatchCustomEvent(this, 'send-confirmation-email', this.emailListState.emailList.primaryAddress.address);
     }
   }
 
@@ -181,19 +181,19 @@ export class CcEmailList extends LitElement {
       <cc-block>
         <div slot="header-title">${i18n('cc-email-list.title')}</div>
 
-        ${this.emails.state === 'loading'
+        ${this.emailListState.type === 'loading'
           ? html`
               ${this._renderPrimarySection(SKELETON_PRIMARY_EMAIL, true)}
               ${this._renderSecondarySection(SKELETON_SECONDARY_EMAILS)}
             `
           : ''}
-        ${this.emails.state === 'loaded'
+        ${this.emailListState.type === 'loaded'
           ? html`
-              ${this._renderPrimarySection(this.emails.value.primaryAddress)}
-              ${this._renderSecondarySection(this.emails.value.secondaryAddresses)}
+              ${this._renderPrimarySection(this.emailListState.emailList.primaryAddress)}
+              ${this._renderSecondarySection(this.emailListState.emailList.secondaryAddresses)}
             `
           : ''}
-        ${this.emails.state === 'error'
+        ${this.emailListState.type === 'error'
           ? html`
               <cc-notice slot="content" intent="warning" message="${i18n('cc-email-list.loading.error')}"></cc-notice>
             `
@@ -233,7 +233,7 @@ export class CcEmailList extends LitElement {
           ? html`
               <cc-button
                 @cc-button:click=${this._onSendConfirmationEmail}
-                ?waiting=${primaryAddressState.state === 'sending-confirmation-email'}
+                ?waiting=${primaryAddressState.type === 'sending-confirmation-email'}
                 link
               >
                 ${i18n('cc-email-list.primary.action.resend-confirmation-email')}
@@ -250,7 +250,7 @@ export class CcEmailList extends LitElement {
    */
   _renderSecondarySection(secondaryAddressStates) {
     const addresses = [...secondaryAddressStates].sort(sortBy('address'));
-    const isOneRowMarkingPrimary = addresses.some((item) => item.state === 'marking-as-primary');
+    const isOneRowMarkingPrimary = addresses.some((item) => item.type === 'marking-as-primary');
 
     return html`
       <cc-block-section slot="content-body">
@@ -259,8 +259,8 @@ export class CcEmailList extends LitElement {
 
         <ul class="secondary-addresses">
           ${addresses.map((secondaryAddress) => {
-            const isBusy = secondaryAddress.state === 'marking-as-primary' || secondaryAddress.state === 'deleting';
-            const isDisabled = (isOneRowMarkingPrimary || isBusy) && secondaryAddress.state !== 'marking-as-primary';
+            const isBusy = secondaryAddress.type === 'marking-as-primary' || secondaryAddress.type === 'deleting';
+            const isDisabled = (isOneRowMarkingPrimary || isBusy) && secondaryAddress.type !== 'marking-as-primary';
 
             return html`
               <li class="address-line secondary">
@@ -271,7 +271,7 @@ export class CcEmailList extends LitElement {
                 <div class="buttons">
                   <cc-button
                     @cc-button:click=${() => this._onMarkAsPrimary(secondaryAddress.address)}
-                    ?waiting="${secondaryAddress.state === 'marking-as-primary'}"
+                    ?waiting="${secondaryAddress.type === 'marking-as-primary'}"
                     ?disabled="${isDisabled}"
                     a11y-name="${i18n('cc-email-list.secondary.action.mark-as-primary.accessible-name', {
                       address: secondaryAddress.address,
@@ -285,8 +285,8 @@ export class CcEmailList extends LitElement {
                     outlined
                     .icon=${iconDelete}
                     @cc-button:click=${() => this._onDelete(secondaryAddress.address)}
-                    ?waiting="${secondaryAddress.state === 'deleting'}"
-                    ?disabled="${isBusy && secondaryAddress.state !== 'deleting'}"
+                    ?waiting="${secondaryAddress.type === 'deleting'}"
+                    ?disabled="${isBusy && secondaryAddress.type !== 'deleting'}"
                     a11y-name="${i18n('cc-email-list.secondary.action.delete.accessible-name', {
                       address: secondaryAddress.address,
                     })}"

src/components/cc-email-list/cc-email-list.smart.js

@@ -27,22 +27,22 @@ defineSmartComponent({
    * @param {OnContextUpdateArgs} args
    */
   onContextUpdate({ component, context, onEvent, updateComponent, signal }) {
-    updateComponent('emails', { state: 'loading' });
+    updateComponent('emailListState', { type: 'loading' });
     updateComponent('addEmailFormState', { type: 'idle' });
     component.resetAddEmailForm();
 
     const api = getApi(context.apiConfig, signal);
 
     /**
      * @param {string} address
-     * @param {(state: SecondaryAddressState) => void}callback
+     * @param {(emailListState: SecondaryAddressState) => void} callback
      */
     function updateSecondary(address, callback) {
       updateComponent(
-        'emails',
-        /** @param {EmailListStateLoaded} emails */
-        (emails) => {
-          const secondaryState = emails.value.secondaryAddresses.find((a) => a.address === address);
+        'emailListState',
+        /** @param {EmailListStateLoaded} emailListState */
+        (emailListState) => {
+          const secondaryState = emailListState.emailList.secondaryAddresses.find((a) => a.address === address);
           if (secondaryState != null) {
             callback(secondaryState);
           }
@@ -53,16 +53,16 @@ defineSmartComponent({
     api
       .fetchEmailAddresses()
       .then(({ self, secondary }) => {
-        updateComponent('emails', {
-          state: 'loaded',
-          value: {
+        updateComponent('emailListState', {
+          type: 'loaded',
+          emailList: {
             primaryAddress: {
-              state: 'idle',
+              type: 'idle',
               address: self.email,
               verified: self.emailValidated,
             },
             secondaryAddresses: secondary.map((secondaryAddress) => ({
-              state: 'idle',
+              type: 'idle',
               address: secondaryAddress,
               verified: true,
             })),
@@ -71,15 +71,15 @@ defineSmartComponent({
       })
       .catch((error) => {
         console.error(error);
-        updateComponent('emails', { state: 'error' });
+        updateComponent('emailListState', { type: 'error' });
       });
 
     onEvent('cc-email-list:send-confirmation-email', (address) => {
       updateComponent(
-        'emails',
-        /** @param {EmailListStateLoaded} emails */
-        (emails) => {
-          emails.value.primaryAddress.state = 'sending-confirmation-email';
+        'emailListState',
+        /** @param {EmailListStateLoaded} emailListState */
+        (emailListState) => {
+          emailListState.emailList.primaryAddress.type = 'sending-confirmation-email';
         },
       );
 
@@ -105,10 +105,10 @@ defineSmartComponent({
         )
         .finally(() => {
           updateComponent(
-            'emails',
-            /** @param {EmailListStateLoaded} emails */
-            (emails) => {
-              emails.value.primaryAddress.state = 'idle';
+            'emailListState',
+            /** @param {EmailListStateLoaded} emailListState */
+            (emailListState) => {
+              emailListState.emailList.primaryAddress.type = 'idle';
             },
           );
         });
@@ -117,9 +117,9 @@ defineSmartComponent({
     onEvent('cc-email-list:add', (address) => {
       updateComponent(
         'addEmailFormState',
-        /** @param {AddEmailFormState} state */
-        (state) => {
-          state.type = 'adding';
+        /** @param {AddEmailFormState} emailListState */
+        (emailListState) => {
+          emailListState.type = 'adding';
         },
       );
 
@@ -149,9 +149,9 @@ defineSmartComponent({
             } else {
               updateComponent(
                 'addEmailFormState',
-                /** @param {AddEmailFormState} state */
-                (state) => {
-                  state.errors = {
+                /** @param {AddEmailFormState} emailListState */
+                (emailListState) => {
+                  emailListState.errors = {
                     email: errorCode,
                   };
                 },
@@ -162,17 +162,17 @@ defineSmartComponent({
         .finally(() => {
           updateComponent(
             'addEmailFormState',
-            /** @param {AddEmailFormState} state */
-            (state) => {
-              state.type = 'idle';
+            /** @param {AddEmailFormState} emailListState */
+            (emailListState) => {
+              emailListState.type = 'idle';
             },
           );
         });
     });
 
     onEvent('cc-email-list:delete', (address) => {
       updateSecondary(address, (secondaryAddressState) => {
-        secondaryAddressState.state = 'deleting';
+        secondaryAddressState.type = 'deleting';
       });
 
       api
@@ -181,10 +181,12 @@ defineSmartComponent({
           notifySuccess(i18n('cc-email-list.secondary.action.delete.success', { address }));
 
           updateComponent(
-            'emails',
-            /** @param {EmailListStateLoaded} emails */
-            (emails) => {
-              emails.value.secondaryAddresses = emails.value.secondaryAddresses.filter((a) => a.address !== address);
+            'emailListState',
+            /** @param {EmailListStateLoaded} emailListState */
+            (emailListState) => {
+              emailListState.emailList.secondaryAddresses = emailListState.emailList.secondaryAddresses.filter(
+                (a) => a.address !== address,
+              );
             },
           );
         })
@@ -194,34 +196,34 @@ defineSmartComponent({
             console.error(error);
             notifyError(i18n('cc-email-list.secondary.action.delete.error', { address }));
             updateSecondary(address, (secondaryAddressState) => {
-              secondaryAddressState.state = 'idle';
+              secondaryAddressState.type = 'idle';
             });
           },
         );
     });
 
     onEvent('cc-email-list:mark-as-primary', (address) => {
       updateSecondary(address, (secondaryAddressState) => {
-        secondaryAddressState.state = 'marking-as-primary';
+        secondaryAddressState.type = 'marking-as-primary';
       });
 
       api
         .markSecondaryEmailAddressAsPrimary(address)
         .then(() => {
           notifySuccess(i18n('cc-email-list.secondary.action.mark-as-primary.success', { address }));
 
-          if (component.emails.state === 'loaded') {
-            const primaryAddress = component.emails.value.primaryAddress.address;
+          if (component.emailListState.type === 'loaded') {
+            const primaryAddress = component.emailListState.emailList.primaryAddress.address;
 
             updateComponent(
-              'emails',
-              /** @param {EmailListStateLoaded} emails */
-              (emails) => {
-                emails.value.primaryAddress.address = address;
+              'emailListState',
+              /** @param {EmailListStateLoaded} emailListState */
+              (emailListState) => {
+                emailListState.emailList.primaryAddress.address = address;
               },
             );
             updateSecondary(address, (secondaryAddressState) => {
-              secondaryAddressState.state = 'idle';
+              secondaryAddressState.type = 'idle';
               secondaryAddressState.address = primaryAddress;
             });
           }
@@ -232,7 +234,7 @@ defineSmartComponent({
             console.error(error);
             notifyError(i18n('cc-email-list.secondary.action.mark-as-primary.error', { address }));
             updateSecondary(address, (secondaryAddressState) => {
-              secondaryAddressState.state = 'idle';
+              secondaryAddressState.type = 'idle';
             });
           },
         );