@things-factory/integration-fulfillment 10.1.255 → 10.1.257

package/client/pages/fulfillment-center-operato.ts

@@ -1,6 +1,7 @@
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { client, PageView, store } from '@things-factory/shell'
+import { MutationController, QueryController } from '@operato/graphql'
 
 import LOGO from '../../assets/images/operato-logo.jpeg'
 
@@ -99,12 +100,70 @@ class FulfillmentCenterOperato extends PageView {
   static get properties() {
     return {
       id: String,
-      fulfillmentCenter: Object,
       code: String,
       centerId: String
     }
   }
 
+  /* The center the address names (ADR-0190). */
+  read = new QueryController(
+    this,
+    gql`
+      query fulfillmentCenter($id: String!) {
+        fulfillmentCenter(id: $id) {
+          name
+          platform
+          centerId
+          countryCode
+          accessInfo
+          status
+        }
+      }
+    `,
+    { variables: () => (this.id ? { id: this.id } : undefined) }
+  )
+
+  get fulfillmentCenter() {
+    return this.read.data?.fulfillmentCenter
+  }
+
+  connecting = new MutationController(
+    this,
+    gql`
+      mutation generateOperatoAccessToken($id: String!, $code: String!) {
+        generateOperatoAccessToken(id: $id, code: $code) {
+          name
+          status
+        }
+      }
+    `,
+    { refetch: () => [this.read] }
+  )
+
+  deactivating = new MutationController(
+    this,
+    gql`
+      mutation deactivateOperatoCenter($name: String!) {
+        deactivateOperatoCenter(name: $name) {
+          status
+        }
+      }
+    `,
+    { refetch: () => [this.read] }
+  )
+
+  refreshing = new MutationController(
+    this,
+    gql`
+      mutation refreshOperatoAccessToken($id: String!) {
+        refreshOperatoAccessToken(id: $id) {
+          name
+        }
+      }
+    `,
+    { refetch: () => [this.read] }
+  )
+
   get context() {
     return {
       title: 'center operato'
@@ -163,26 +222,6 @@ class FulfillmentCenterOperato extends PageView {
         return
       }
 
-      const response = await client.query({
-        query: gql`
-          query fulfillmentCenter($id: String!) {
-            fulfillmentCenter(id: $id) {
-              name
-              platform
-              centerId
-              countryCode
-              accessInfo
-              status
-            }
-          }
-        `,
-        variables: {
-          id: this.id
-        }
-      })
-
-      this.fulfillmentCenter = response.data.fulfillmentCenter
-
       if (location.pathname.endsWith('connect-callback')) {
         let { code } = changes.params
         this.code = code
@@ -208,28 +247,9 @@ class FulfillmentCenterOperato extends PageView {
   }
 
   async handleConnectCallback() {
-    const response = await client.mutate({
-      mutation: gql`
-        mutation generateOperatoAccessToken($id: String!, $code: String!) {
-          generateOperatoAccessToken(id: $id, code: $code) {
-            name
-            platform
-            centerId
-            countryCode
-            accessInfo
-            status
-          }
-        }
-      `,
-      variables: {
-        id: this.id,
-        code: this.code
-      }
-    })
-
-    this.fulfillmentCenter = response.data.generateOperatoAccessToken
-    console.log('fulfillment center', this.fulfillmentCenter)
-    var { status, name } = this.fulfillmentCenter
+    const connected = await this.connecting.run({ id: this.id, code: this.code })
+    if (!connected) return
+    const { status, name } = connected.generateOperatoAccessToken
 
     document.dispatchEvent(
       new CustomEvent('notify', {
@@ -246,28 +266,11 @@ class FulfillmentCenterOperato extends PageView {
   }
 
   async deactivate() {
-    var { name } = this.fulfillmentCenter
-
-    var response = await client.mutate({
-      mutation: gql`
-        mutation deactivateOperatoCenter($name: String!) {
-          deactivateOperatoCenter(name: $name) {
-            name
-            platform
-            centerId
-            countryCode
-            accessInfo
-            status
-          }
-        }
-      `,
-      variables: {
-        name
-      }
-    })
+    const { name } = this.fulfillmentCenter
 
-    this.fulfillmentCenter = response.data.deactivateOperatoCenter
-    var { status } = this.fulfillmentCenter
+    const deactivated = await this.deactivating.run({ name })
+    if (!deactivated) return
+    const { status } = deactivated.deactivateOperatoCenter
     this.code = ''
 
     document.dispatchEvent(
@@ -283,33 +286,14 @@ class FulfillmentCenterOperato extends PageView {
   async refreshToken() {
     const { name } = this.fulfillmentCenter
 
-    var response = await client.mutate({
-      mutation: gql`
-        mutation refreshOperatoAccessToken($id: String!) {
-          refreshOperatoAccessToken(id: $id) {
-            name
-            platform
-            centerId
-            countryCode
-            accessInfo
-            status
-          }
-        }
-      `,
-      variables: {
-        id: this.id
-      }
-    })
-
-    if (!response.errors) {
-      this.fulfillmentCenter = response.data.refreshOperatoAccessToken
-    }
+    /* A failure is reported by the client. */
+    if (!(await this.refreshing.run({ id: this.id }))) return
 
     document.dispatchEvent(
       new CustomEvent('notify', {
         detail: {
           level: 'info',
-          message: `${response.errors ? 'fail' : 'success'} to refresh : ${name}`
+          message: `success to refresh : ${name}`
         }
       })
     )