From a5af15b27860c53c453592142046358532bfee30 Mon Sep 17 00:00:00 2001 From: mrdrogdrog Date: Sun, 24 May 2020 22:55:06 +0200 Subject: [PATCH] use async and await (#62) Use async and await instead of promise chains --- src/api/config.ts | 12 +++--- src/api/user.ts | 23 ++++++----- .../application-loader/application-loader.tsx | 19 ++++++---- .../landing/pages/login/auth/via-email.tsx | 29 +++++++------- .../landing/pages/login/auth/via-ldap.tsx | 30 +++++++++------ .../landing/pages/login/auth/via-open id.tsx | 21 ++++++---- src/utils/apiUtils.ts | 38 ++++++++----------- 7 files changed, 92 insertions(+), 80 deletions(-) diff --git a/src/api/config.ts b/src/api/config.ts index cfe0c4bb3..9ba43ec03 100644 --- a/src/api/config.ts +++ b/src/api/config.ts @@ -3,13 +3,13 @@ import {BackendConfigState} from "../redux/backend-config/types"; import {expectResponseCode, getBackendUrl} from "../utils/apiUtils"; export const getBackendConfig = async () => { - return fetch(getBackendUrl() + '/backend-config.json') - .then(expectResponseCode()) - .then(response => response.json() as Promise); + const response = await fetch(getBackendUrl() + '/backend-config.json'); + expectResponseCode(response); + return await response.json() as Promise; } export const getFrontendConfig = async () => { - return fetch('config.json') - .then(expectResponseCode()) - .then(response => response.json() as Promise); + const response = await fetch('config.json'); + expectResponseCode(response) + return await response.json() as Promise; } \ No newline at end of file diff --git a/src/api/user.ts b/src/api/user.ts index 48c6a9c1c..f1f2fa77c 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -5,7 +5,7 @@ export const getMe = async () => { } export const postEmailLogin = async (email: string, password: string) => { - return fetch(getBackendUrl() + "/login", { + const response = await fetch(getBackendUrl() + "/login", { method: 'POST', mode: 'cors', cache: 'no-cache', @@ -19,13 +19,14 @@ export const postEmailLogin = async (email: string, password: string) => { email: email, password: password, }) - }) - .then(expectResponseCode()) - .then(response => response.json()); + }); + + expectResponseCode(response); + return await response.json(); } export const postLdapLogin = async (username: string, password: string) => { - return fetch(getBackendUrl() + "/auth/ldap", { + const response = await fetch(getBackendUrl() + "/auth/ldap", { method: 'POST', mode: 'cors', cache: 'no-cache', @@ -40,12 +41,13 @@ export const postLdapLogin = async (username: string, password: string) => { password: password, }) }) - .then(expectResponseCode()) - .then(response => response.json()); + + expectResponseCode(response) + return await response.json(); } export const postOpenIdLogin = async (openId: string) => { - return fetch(getBackendUrl() + "/auth/openid", { + const response = await fetch(getBackendUrl() + "/auth/openid", { method: 'POST', mode: 'cors', cache: 'no-cache', @@ -59,6 +61,7 @@ export const postOpenIdLogin = async (openId: string) => { openId: openId }) }) - .then(expectResponseCode()) - .then(response => response.json()); + + expectResponseCode(response) + return await response.json(); } diff --git a/src/components/application-loader/application-loader.tsx b/src/components/application-loader/application-loader.tsx index ba5dace2f..184d1bc8e 100644 --- a/src/components/application-loader/application-loader.tsx +++ b/src/components/application-loader/application-loader.tsx @@ -13,16 +13,19 @@ export const ApplicationLoader: React.FC = ({children, i useEffect(() => { setDoneTasks(0); - initTasks.map(task => - task.then(() => - setDoneTasks(prevDoneTasks => { - return prevDoneTasks + 1; - })) - .catch((reason) => { + initTasks.forEach(task => { + (async () => { + try { + await task; + setDoneTasks(prevDoneTasks => { + return prevDoneTasks + 1; + }) + } catch (reason) { setFailed(true); console.error(reason); - }) - ) + } + })(); + }) }, [initTasks]); return ({ diff --git a/src/components/landing/pages/login/auth/via-email.tsx b/src/components/landing/pages/login/auth/via-email.tsx index f7246e151..40a2e5dbb 100644 --- a/src/components/landing/pages/login/auth/via-email.tsx +++ b/src/components/landing/pages/login/auth/via-email.tsx @@ -4,29 +4,34 @@ import React, {Fragment, useState} from "react"; import {postEmailLogin} from "../../../../../api/user"; import {getAndSetUser} from "../../../../../utils/apiUtils"; -const ViaEMail: React.FC = () => { +export const ViaEMail: React.FC = () => { const {t} = useTranslation(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(false); - const login = (event: any) => { - postEmailLogin(email, password) - .then(loginJson => { - console.log(loginJson) - getAndSetUser(); - }).catch(_reason => { + + const doAsyncLogin = () => { + (async () => { + try { + await postEmailLogin(email, password); + await getAndSetUser(); + } catch { setError(true); } - ) - event.preventDefault(); + })(); } + const onFormSubmit = (event: any) => { + doAsyncLogin(); + event.preventDefault(); + }; + return (
-
+ {
); -} - -export {ViaEMail} +} \ No newline at end of file diff --git a/src/components/landing/pages/login/auth/via-ldap.tsx b/src/components/landing/pages/login/auth/via-ldap.tsx index 991ed00d5..5e5346313 100644 --- a/src/components/landing/pages/login/auth/via-ldap.tsx +++ b/src/components/landing/pages/login/auth/via-ldap.tsx @@ -9,29 +9,35 @@ import {ApplicationState} from "../../../../../redux"; const ViaLdap: React.FC = () => { const {t} = useTranslation(); const ldapCustomName = useSelector((state: ApplicationState) => state.backendConfig.customAuthNames.ldap); + const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(false); - const login = (event: any) => { - postLdapLogin(username, password) - .then(loginJson => { - console.log(loginJson) - getAndSetUser(); - }).catch(_reason => { - setError(true); - } - ) - event.preventDefault(); - } const name = ldapCustomName ? `${ldapCustomName} (LDAP)` : "LDAP"; + const doAsyncLogin = () => { + (async () => { + try { + await postLdapLogin(username, password); + await getAndSetUser(); + } catch { + setError(true); + } + })(); + } + + const onFormSubmit = (event: any) => { + doAsyncLogin(); + event.preventDefault(); + } + return (
-
+ { useTranslation(); const [openId, setOpenId] = useState(""); const [error, setError] = useState(false); - const login = (event: any) => { - postOpenIdLogin(openId) - .then(loginJson => { - console.log(loginJson) - getAndSetUser(); - }).catch(_reason => { + + const doAsyncLogin = () => { + (async () => { + try { + await postOpenIdLogin(openId); + await getAndSetUser(); + } catch { setError(true); } - ) + })(); + } + + const onFormSubmit = (event: any) => { + doAsyncLogin(); event.preventDefault(); } @@ -25,7 +30,7 @@ const ViaOpenId: React.FC = () => {
- + { - getMe() - .then(expectResponseCode()) - .then(response => response.json()) - .then(user => { - if (!user) { - return; - } - setUser({ - status: LoginStatus.ok, - id: user.id, - name: user.name, - photo: user.photo, - }); - }); +export const getAndSetUser = async () => { + const meResponse = await getMe(); + expectResponseCode(meResponse); + const me = await meResponse.json(); + if (!me) { + return; + } + setUser({ + status: LoginStatus.ok, + id: me.id, + name: me.name, + photo: me.photo, + }); } export const getBackendUrl = () => { return store.getState().frontendConfig.backendUrl; } -export const expectResponseCode = (code: number = 200): ((response: Response) => Promise) => { - return (response: Response) => { - if (response.status !== code) { - return Promise.reject(`Response code not ${code}`); - } else { - return Promise.resolve(response); - } - } +export const expectResponseCode = (response: Response, code: number = 200) => { + return (response.status !== code); } \ No newline at end of file