Fix useAsync

src/api/edition.ts

@@ -30,14 +30,10 @@ export async function join(key: string): Promise<boolean> {
 }
 
 export async function get(key: string): Promise<Edition | null> {
-    try {
-        const response = await axios.get<EditionDTO>(prepare(EDITION_INFO_ENDPOINT, { key }));
-        const dto = response.data;
+    const response = await axios.get<EditionDTO>(prepare(EDITION_INFO_ENDPOINT, { key }));
+    const dto = response.data;
 
-        return editionDtoTransformer.transform(dto);
-    } catch (error) {
-        return null;
-    }
+    return editionDtoTransformer.transform(dto);
 }
 
 export async function current(): Promise<Edition> {

src/hooks/useAsync.ts

@@ -40,8 +40,10 @@ export function useAsync<T, TError = any>(supplier: Promise<T> | (() => Promise<
     useEffect(() => {
         if (typeof supplier === "function") {
             setPromise(supplier());
+        } else {
+            setPromise(supplier);
         }
-    }, [])
+    }, [ supplier ])
 
     return {
         isLoading,

src/pages/edition/pick.tsx

@@ -1,5 +1,5 @@
 import { Page } from "@/pages/base";
-import React from "react";
+import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Box, Button, CircularProgress, Container, Typography } from "@material-ui/core";
 import { Actions } from "@/components";
@@ -15,7 +15,7 @@ import { EditionActions, useDispatch, UserActions } from "@/state/actions";
 
 export const PickEditionPage = () => {
     const { t } = useTranslation();
-    const { value: editions, isLoading } = useAsync(() => api.edition.available());
+    const { value: editions, isLoading } = useAsync(useCallback(() => api.edition.available(), []));
 
     const dispatch = useDispatch();
     const history = useHistory();