From 7a90f04a06cc09d59ab02e9b954dbc7d1cc223ca Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Wed, 7 Oct 2020 11:09:19 +1000
Subject: [PATCH] interface: fix stateless async clickables

---
 pkg/interface/src/views/apps/launch/app.js    |  1 -
 .../src/views/apps/launch/css/custom.css      |  1 +
 .../views/components/StatelessAsyncAction.tsx | 30 +++++--------------
 .../views/components/StatelessAsyncButton.tsx | 30 +++++--------------
 4 files changed, 17 insertions(+), 45 deletions(-)

diff --git a/pkg/interface/src/views/apps/launch/app.js b/pkg/interface/src/views/apps/launch/app.js
index c96574272..6f1980aff 100644
--- a/pkg/interface/src/views/apps/launch/app.js
+++ b/pkg/interface/src/views/apps/launch/app.js
@@ -64,7 +64,6 @@ export default class LaunchApp extends React.Component {
             <Tile
               bg={sigilColor}
               to="/~profile"
-              borderRadius="3"
             >
               <Center height="100%">
                 <Sigil ship={`~${window.ship}`} size={80} color={sigilColor} />
diff --git a/pkg/interface/src/views/apps/launch/css/custom.css b/pkg/interface/src/views/apps/launch/css/custom.css
index c132c4539..10b658e09 100644
--- a/pkg/interface/src/views/apps/launch/css/custom.css
+++ b/pkg/interface/src/views/apps/launch/css/custom.css
@@ -30,6 +30,7 @@ textarea, select, input, button { outline: none; }
 
 button {
   background-color: transparent;
+  cursor: pointer;
 }
 
 
diff --git a/pkg/interface/src/views/components/StatelessAsyncAction.tsx b/pkg/interface/src/views/components/StatelessAsyncAction.tsx
index 998a3c846..818410cfc 100644
--- a/pkg/interface/src/views/components/StatelessAsyncAction.tsx
+++ b/pkg/interface/src/views/components/StatelessAsyncAction.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode, useState, useEffect, useCallback } from "react";
+import { useStatelessAsyncClickable } from '~/logic/lib/useStatelessAsyncClickable';
 
 import { Button, LoadingSpinner, Action } from "@tlon/indigo-react";
 
@@ -6,35 +7,20 @@ import { useFormikContext } from "formik";
 
 interface AsyncActionProps {
   children: ReactNode;
+  name: string;
   onClick: (e: React.MouseEvent) => Promise<void>;
 }
 
-type ButtonState = "waiting" | "error" | "loading" | "success";
-
 export function StatelessAsyncAction({
-  loadingText,
   children,
   onClick,
+  name = '',
   ...rest
 }: AsyncActionProps & Parameters<typeof Action>[0]) {
-  const [state, setState] = useState<ButtonState>("waiting");
-  const handleClick = useCallback(
-    async (e: React.MouseEvent) => {
-      try {
-        setState("loading");
-        await onClick(e);
-        setState("success");
-      } catch (e) {
-        console.error(e);
-        setState("error");
-      } finally {
-        setTimeout(() => {
-          setState("waiting");
-        }, 3000);
-      }
-    },
-    [onClick, setState]
-  );
+  const {
+    onClick: handleClick,
+    buttonState: state,
+  } = useStatelessAsyncClickable(onClick, name);
 
   return (
     <Action onClick={handleClick} {...rest}>
@@ -42,7 +28,7 @@ export function StatelessAsyncAction({
         "Error"
       ) : state === "loading" ? (
         <LoadingSpinner
-          foreground={rest.primary ? "white" : "black"}
+          foreground={rest.destructive ? "red" : "black"}
           background="transparent"
         />
       ) : state === "success" ? (
diff --git a/pkg/interface/src/views/components/StatelessAsyncButton.tsx b/pkg/interface/src/views/components/StatelessAsyncButton.tsx
index 6089f86a7..d3f19777b 100644
--- a/pkg/interface/src/views/components/StatelessAsyncButton.tsx
+++ b/pkg/interface/src/views/components/StatelessAsyncButton.tsx
@@ -1,40 +1,26 @@
 import React, { ReactNode, useState, useEffect, useCallback } from "react";
 
 import { Button, LoadingSpinner } from "@tlon/indigo-react";
-
 import { useFormikContext } from "formik";
 
+import { useStatelessAsyncClickable } from "~/logic/lib/useStatelessAsyncClickable";
+
 interface AsyncButtonProps {
   children: ReactNode;
+  name: string;
   onClick: (e: React.MouseEvent) => Promise<void>;
 }
 
-type ButtonState = "waiting" | "error" | "loading" | "success";
-
 export function StatelessAsyncButton({
-  loadingText,
   children,
   onClick,
+  name = "",
   ...rest
 }: AsyncButtonProps & Parameters<typeof Button>[0]) {
-  const [state, setState] = useState<ButtonState>("waiting");
-  const handleClick = useCallback(
-    async (e: React.MouseEvent) => {
-      try {
-        setState("loading");
-        await onClick(e);
-        setState("success");
-      } catch (e) {
-        console.error(e);
-        setState("error");
-      } finally {
-        setTimeout(() => {
-          setState("waiting");
-        }, 3000);
-      }
-    },
-    [onClick, setState]
-  );
+  const {
+    onClick: handleClick,
+    buttonState: state,
+  } = useStatelessAsyncClickable(onClick, name);
 
   return (
     <Button onClick={handleClick} {...rest}>