use async and await (#62)

Use async and await instead of promise chains

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')
+    const response = await fetch(getBackendUrl() + '/backend-config.json');
-        .then(expectResponseCode())
+    expectResponseCode(response);
-        .then(response => response.json() as Promise<BackendConfigState>);
+    return await response.json() as Promise<BackendConfigState>;
 }
 
 export const getFrontendConfig = async () => {
-    return fetch('config.json')
+    const response = await fetch('config.json');
-        .then(expectResponseCode())
+    expectResponseCode(response)
-        .then(response => response.json() as Promise<FrontendConfigState>);
+    return await response.json() as Promise<FrontendConfigState>;
 }

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();
 }

src/components/application-loader/application-loader.tsx

@@ -13,16 +13,19 @@ export const ApplicationLoader: React.FC<ApplicationLoaderProps> = ({children, i
 
     useEffect(() => {
         setDoneTasks(0);
-        initTasks.map(task =>
+        initTasks.forEach(task => {
-            task.then(() =>
+            (async () => {
-                setDoneTasks(prevDoneTasks => {
+                try {
-                    return prevDoneTasks + 1;
+                    await task;
-                }))
+                    setDoneTasks(prevDoneTasks => {
-                .catch((reason) => {
+                        return prevDoneTasks + 1;
+                    })
+                } catch (reason) {
                     setFailed(true);
                     console.error(reason);
-                })
+                }
-        )
+            })();
+        })
     }, [initTasks]);
 
     return (<Fragment>{

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)
+    const doAsyncLogin = () => {
-            .then(loginJson => {
+        (async () => {
-                console.log(loginJson)
+            try {
-                getAndSetUser();
+                await postEmailLogin(email, password);
-            }).catch(_reason => {
+                await getAndSetUser();
+            } catch {
                 setError(true);
             }
-        )
+        })();
-        event.preventDefault();
     }
 
+    const onFormSubmit = (event: any) => {
+        doAsyncLogin();
+        event.preventDefault();
+    };
+
     return (
         <Fragment>
             <h5 className="center">
                 <Trans i18nKey="signInVia" values={{service: "E-Mail"}}/>
             </h5>
-            <Form onSubmit={login}>
+            <Form onSubmit={onFormSubmit}>
                 <Form.Group controlId="email">
                     <Form.Control
                         isInvalid={error}
@@ -60,6 +65,4 @@ const ViaEMail: React.FC = () => {
             </Form>
         </Fragment>
     );
-}
+}
-
-export {ViaEMail}

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 (
         <Fragment>
             <h5 className="center">
                 <Trans i18nKey="signInVia" values={{service: name}}/>
             </h5>
-            <Form onSubmit={login}>
+            <Form onSubmit={onFormSubmit}>
                 <Form.Group controlId="username">
                     <Form.Control
                         isInvalid={error}

src/components/landing/pages/login/auth/via-open id.tsx

@@ -8,15 +8,20 @@ const ViaOpenId: React.FC = () => {
     useTranslation();
     const [openId, setOpenId] = useState("");
     const [error, setError] = useState(false);
-    const login = (event: any) => {
+
-        postOpenIdLogin(openId)
+    const doAsyncLogin = () => {
-            .then(loginJson => {
+        (async () => {
-                console.log(loginJson)
+            try {
-                getAndSetUser();
+                await postOpenIdLogin(openId);
-            }).catch(_reason => {
+                await getAndSetUser();
+            } catch {
                 setError(true);
             }
-        )
+        })();
+    }
+
+    const onFormSubmit = (event: any) => {
+        doAsyncLogin();
         event.preventDefault();
     }
 
@@ -25,7 +30,7 @@ const ViaOpenId: React.FC = () => {
             <h5 className="center">
                 <Trans i18nKey="signInVia" values={{service: "OpenID"}}/>
             </h5>
-            <Form onSubmit={login}>
+            <Form onSubmit={onFormSubmit}>
                 <Form.Group controlId="openid">
                     <Form.Control
                         isInvalid={error}

src/utils/apiUtils.ts

@@ -3,33 +3,25 @@ import {LoginStatus} from "../redux/user/types";
 import {setUser} from "../redux/user/methods";
 import {store} from "./store";
 
-export const getAndSetUser = () => {
+export const getAndSetUser = async () => {
-    getMe()
+    const meResponse = await getMe();
-        .then(expectResponseCode())
+    expectResponseCode(meResponse);
-        .then(response => response.json())
+    const me = await meResponse.json();
-        .then(user => {
+    if (!me) {
-            if (!user) {
+        return;
-                return;
+    }
-            }
+    setUser({
-            setUser({
+        status: LoginStatus.ok,
-                status: LoginStatus.ok,
+        id: me.id,
-                id: user.id,
+        name: me.name,
-                name: user.name,
+        photo: me.photo,
-                photo: user.photo,
+    });
-            });
-        });
 }
 
 export const getBackendUrl = () => {
     return store.getState().frontendConfig.backendUrl;
 }
 
-export const expectResponseCode = (code: number = 200): ((response: Response) => Promise<any>) => {
+export const expectResponseCode = (response: Response, code: number = 200) => {
-    return (response: Response) => {
+    return (response.status !== code);
-        if (response.status !== code) {
-            return Promise.reject(`Response code not ${code}`);
-        } else {
-            return Promise.resolve(response);
-        }
-    }
 }