From 6da381331873c9e0563e4cc8c893f4bbdc0a753e Mon Sep 17 00:00:00 2001
From: Yoan Vallet <yoan.vallet@gmail.com>
Date: Thu, 4 Jun 2020 02:04:50 +0200
Subject: [PATCH] feat: use updateAccount
---
.../Konnector/KonnectorLoginForm.tsx | 10 +-
.../KonnectorViewer/KonnectorViewerCard.tsx | 104 ++++++++++--------
2 files changed, 63 insertions(+), 51 deletions(-)
diff --git a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx b/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
index 68eab69e2..eaf733c32 100644
--- a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
+++ b/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
@@ -1,4 +1,4 @@
-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
diff --git a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx b/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx
index 7d1c8c84c..8ea145a2b 100644
--- a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx
+++ b/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>
+ )}
</>
)
}
--
GitLab