feat: use updateAccount

src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { withClient, Client } from 'cozy-client'
 import { translate } from 'cozy-ui/react/I18n'
 
@@ -8,7 +8,7 @@ import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import StyledButton from 'components/CommonKit/Button/StyledButton'
 import TrailingIcon from 'assets/icons/ico/trailing-icon.svg'
 import { ConnectionService } from 'services/connectionService'
-import updateAccount from 'services/accountService'
+import { AccountService } from 'services/accountService'
 import { Account, Trigger } from 'doctypes'
 
 interface KonnectorLoginFormProps {
@@ -72,7 +72,7 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({
       password: password,
     }
     account.auth = auth
-    const updatedAccount = updateAccount(client, account)
+    const updatedAccount = await AccountService.updateAccount(client, account)
     onSuccess(updatedAccount, trigger)
   }
 
@@ -96,6 +96,10 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({
     }
   }
 
+  useEffect(() => {
+    console.log(fluidConfig.konnectorConfig.slug, account)
+  }, [])
+
   // TODO - if received account from props = display error login failed
   return (
     <form

src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx

@@ -50,6 +50,8 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
 
   const [jobState, setJobState] = useState<string>('')
 
+  const [isLoading, setLoading] = useState<boolean>(true)
+
   const content: React.MutableRefObject<null> = useRef<null>(null)
   const type: string = fluidConfig.konnectorConfig.type
   const fluid: FluidType = getFuildType(type)
@@ -108,6 +110,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
   useEffect(() => {
     let subscribed = true
     async function getData() {
+      setLoading(true)
       if (konnector) {
         const _account = await AccountService.getAccountByType(
           client,
@@ -125,6 +128,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
           }
         }
       }
+      setLoading(false)
     }
     getData()
     return () => {
@@ -134,59 +138,63 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
 
   return (
     <>
-      <div className={`accordion ${setActive}`}>
-        <div>
-          <div
-            className={`accordion-header ${setActive}`}
-            onClick={toggleAccordion}
-          >
-            <div className="accordion-icon">
-              {account && !loginFailed ? (
-                <StyledIcon className="icon" icon={iconType} size={49} />
-              ) : (
-                <StyledIcon className="icon" icon={iconAddType} size={49} />
-              )}
-            </div>
-            <div className="state-picto">{getKonnectorStateMarkup()}</div>
-            <div className="accordion-info">
-              <div className="accordion-title text-16-normal">
-                {account && !loginFailed
-                  ? t('FLUID.' + FluidType[fluid] + '.LABEL')
-                  : t('KONNECTORCONFIG.LABEL_CONNECTTO_' + FluidType[fluid])}
+      {isLoading ? null : (
+        <div className={`accordion ${setActive}`}>
+          <div>
+            <div
+              className={`accordion-header ${setActive}`}
+              onClick={toggleAccordion}
+            >
+              <div className="accordion-icon">
+                {account && !loginFailed ? (
+                  <StyledIcon className="icon" icon={iconType} size={49} />
+                ) : (
+                  <StyledIcon className="icon" icon={iconAddType} size={49} />
+                )}
+              </div>
+              <div className="state-picto">{getKonnectorStateMarkup()}</div>
+              <div className="accordion-info">
+                <div className="accordion-title text-16-normal">
+                  {account && !loginFailed
+                    ? t('FLUID.' + FluidType[fluid] + '.LABEL')
+                    : t('KONNECTORCONFIG.LABEL_CONNECTTO_' + FluidType[fluid])}
+                </div>
               </div>
+              <StyledIconButton icon={setActive ? chevronUp : chevronDown} />
             </div>
-            <StyledIconButton icon={setActive ? chevronUp : chevronDown} />
-          </div>
 
-          <div
-            ref={content}
-            style={{ maxHeight: `${setHeight}` }}
-            className={`accordion-content ${setActive}`}
-          >
-            {!konnector ? (
-              <KonnectorNotFound
-                konnectorSlug={fluidConfig.konnectorConfig.slug}
-              />
-            ) : shouldLaunch && trigger ? (
-              <KonnectorLaunch
-                trigger={trigger}
-                handleKonnectorLaunch={handleKonnectorLaunch}
-              />
-            ) : account && !loginFailed ? (
-              <KonnectorResult
-                account={account}
-                handleJobState={handleJobState}
-              />
-            ) : (
-              <KonnectorForm
-                fluidConfig={fluidConfig}
-                konnector={konnector}
-                handleSuccessForm={handleSuccessForm}
-              />
-            )}
+            <div
+              ref={content}
+              style={{ maxHeight: `${setHeight}` }}
+              className={`accordion-content ${setActive}`}
+            >
+              {!konnector ? (
+                <KonnectorNotFound
+                  konnectorSlug={fluidConfig.konnectorConfig.slug}
+                />
+              ) : shouldLaunch && trigger ? (
+                <KonnectorLaunch
+                  trigger={trigger}
+                  handleKonnectorLaunch={handleKonnectorLaunch}
+                />
+              ) : account && !loginFailed ? (
+                <KonnectorResult
+                  account={account}
+                  handleJobState={handleJobState}
+                />
+              ) : (
+                <KonnectorForm
+                  fluidConfig={fluidConfig}
+                  konnector={konnector}
+                  account={account}
+                  trigger={trigger}
+                  handleSuccessForm={handleSuccessForm}
+                />
+              )}
+            </div>
           </div>
         </div>
-      </div>
+      )}
     </>
   )
 }