Add loading message when creating order
@@ -25,10 +25,12 @@ export const TicketsPage: React.SFC<RouteComponentProps> = () => {
const language = useCurrentLanguage();
// TODO: error handling
- const [createOrder, { data: orderData }] = useMutation<
- CreateOrderMutation,
- CreateOrderMutationVariables
- >(CREATE_ORDER_MUTATION, {
+ const [
+ createOrder,
+ { data: orderData, loading: creatingOrder },
+ ] = useMutation<CreateOrderMutation, CreateOrderMutationVariables>(
+ CREATE_ORDER_MUTATION,
+ {
onCompleted(result) {
if (result.createOrder.__typename !== "CreateOrderResult") {
return;
@@ -40,7 +42,10 @@ export const TicketsPage: React.SFC<RouteComponentProps> = () => {
window.location.origin,
)}/${language}/profile`;
},
- });
+ },
+ );
+
+ const hasOrder = orderData?.createOrder.__typename === "CreateOrderResult";
const { loading, error, data } = useQuery<
TicketsQuery,
@@ -130,6 +135,10 @@ export const TicketsPage: React.SFC<RouteComponentProps> = () => {
/>
)}
+ {creatingOrder || hasOrder ? (
+ <Box>Creating order...</Box>
+ ) : (
+ <React.Fragment>
<Button
sx={{ mr: 2 }}
onClick={() => createOrderCallback("stripe")}
@@ -142,6 +151,8 @@ export const TicketsPage: React.SFC<RouteComponentProps> = () => {
</Button>
</React.Fragment>
)}
+ </React.Fragment>
+ )}
</Box>
</Box>
);
