✨ Add basic deposit functionality
This commit is contained in:
nikolark committed
1 parent
40b3cb119f
commit
3d93a645ad
9 files changed
+254
-8
No files matched your search
@@ -0,0 +1,13 @@
|
||||
.userList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 100px);
|
||||
row-gap: 16px;
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.amountSection {
|
||||
margin-top: 32px;
|
||||
}
|
||||
.checkout {
|
||||
margin-top: 32px;
|
||||
}
|
||||
@@ -1,5 +1,86 @@
|
||||
import React from "react";
|
||||
import { useMutation, useQuery } from "@apollo/client";
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { useToast } from "../../components/ToastProvider";
|
||||
import { UserCard } from "../../components/UserCard";
|
||||
import { AllUsersDocument, CreateDepositDocument, User } from "../../types";
|
||||
import styles from "./Deposit.module.css";
|
||||
|
||||
export const Deposit: React.FC = () => {
|
||||
return <div>Hi from deposit</div>;
|
||||
const { data, loading } = useQuery(AllUsersDocument);
|
||||
const [createDeposit] = useMutation(CreateDepositDocument);
|
||||
const [selectedUser, setSelectedUser] = useState("");
|
||||
const [amount, setAmount] = useState("");
|
||||
const allUsers = data?.allUsers || [];
|
||||
const { showToast } = useToast();
|
||||
|
||||
const onSubmit = async () => {
|
||||
const amountInt = parseInt(amount, 10) || 0;
|
||||
const variables = { userId: selectedUser, amount: amountInt };
|
||||
let res;
|
||||
try {
|
||||
res = await createDeposit({ variables });
|
||||
} catch (e) {
|
||||
console.log("woops", e);
|
||||
showToast("Kunne ikke sette inn penger", "danger");
|
||||
return;
|
||||
}
|
||||
|
||||
if (res.data?.createDeposit?.__typename === "CreateDepositSuccess") {
|
||||
const { transaction } = res.data?.createDeposit;
|
||||
showToast(
|
||||
`${transaction.user.firstName} har satt inn${transaction.amount}. Ny saldo er ${transaction.user.profile?.balance}.`
|
||||
);
|
||||
reset();
|
||||
return;
|
||||
}
|
||||
if (res.data?.createDeposit?.__typename === "FormErrors") {
|
||||
showToast(res.data?.createDeposit.message, "danger");
|
||||
return;
|
||||
}
|
||||
if (res.data?.createDeposit?.__typename === "AboveMaxSaldo") {
|
||||
showToast(
|
||||
`${res.data.createDeposit.message}. Ny saldo ville vært ${res.data.createDeposit.above} mer enn maksimalt ${res.data.createDeposit.maxSaldo}.`,
|
||||
"danger"
|
||||
);
|
||||
}
|
||||
};
|
||||
const reset = () => {
|
||||
setSelectedUser("");
|
||||
setAmount("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<section>
|
||||
<h2>Hvem skal sette inn penger?</h2>
|
||||
{/* TODO: search as you type */}
|
||||
<input name="userQuery" />
|
||||
<div className={styles.userList}>
|
||||
{allUsers.map((user: User) => (
|
||||
<UserCard
|
||||
key={user.id}
|
||||
active={selectedUser === user.id}
|
||||
onUser={() => {
|
||||
setSelectedUser(user.id);
|
||||
}}
|
||||
user={user}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className={styles.amountSection}>
|
||||
<h2>Hvor mye?</h2>
|
||||
<input name="amount" value={amount} onChange={(event) => setAmount(event.target.value)} />
|
||||
</section>
|
||||
<section className={styles.checkout}>
|
||||
<button type="button" className="btn btn-primary btn-lg" onClick={onSubmit}>
|
||||
Sett inn
|
||||
</button>{" "}
|
||||
<button type="button" className="btn btn-outline-secondary btn-lg" onClick={reset}>
|
||||
Start på nytt
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
mutation CreateDeposit($userId: ID!, $amount: Int!) {
|
||||
createDeposit(userId: $userId, amount:$amount) {
|
||||
... on CreateDepositSuccess {
|
||||
transaction {
|
||||
id
|
||||
amount
|
||||
user {
|
||||
id
|
||||
firstName
|
||||
lastName
|
||||
profile {
|
||||
balance
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
... on AboveMaxSaldo {
|
||||
error
|
||||
message
|
||||
maxSaldo
|
||||
above
|
||||
}
|
||||
... on FormErrors {
|
||||
error
|
||||
message
|
||||
fields {
|
||||
field
|
||||
message
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -131,7 +131,7 @@ export const Register: React.FC = () => {
|
||||
<button type="button" className="btn btn-primary btn-lg" onClick={onSubmit}>
|
||||
Kjøp
|
||||
</button>{" "}
|
||||
<button type="button" className="btn btn-outline-secondary" onClick={reset}>
|
||||
<button type="button" className="btn btn-outline-secondary btn-lg" onClick={reset}>
|
||||
Start på nytt
|
||||
</button>
|
||||
</section>
|
||||
|
||||
@@ -14,6 +14,21 @@ export type Scalars = {
|
||||
DateTime: any;
|
||||
};
|
||||
|
||||
export type AboveMaxSaldo = Error & {
|
||||
__typename?: 'AboveMaxSaldo';
|
||||
above: Scalars['Float'];
|
||||
error: Scalars['Boolean'];
|
||||
maxSaldo: Scalars['Float'];
|
||||
message: Scalars['String'];
|
||||
};
|
||||
|
||||
export type CreateDepositResponse = AboveMaxSaldo | CreateDepositSuccess | FormErrors;
|
||||
|
||||
export type CreateDepositSuccess = {
|
||||
__typename?: 'CreateDepositSuccess';
|
||||
transaction: Transaction;
|
||||
};
|
||||
|
||||
export type CreateOrderResponse = CreateOrderSuccess | FormErrors | InsufficientFunds;
|
||||
|
||||
export type CreateOrderSuccess = {
|
||||
@@ -49,10 +64,17 @@ export type InsufficientFunds = Error & {
|
||||
|
||||
export type Mutation = {
|
||||
__typename?: 'Mutation';
|
||||
createDeposit: CreateDepositResponse;
|
||||
createOrder: CreateOrderResponse;
|
||||
};
|
||||
|
||||
|
||||
export type MutationCreateDepositArgs = {
|
||||
amount: Scalars['Int'];
|
||||
userId: Scalars['ID'];
|
||||
};
|
||||
|
||||
|
||||
export type MutationCreateOrderArgs = {
|
||||
customerId: Scalars['ID'];
|
||||
isExternal?: Scalars['Boolean'];
|
||||
@@ -98,6 +120,14 @@ export type QueryAllProductsArgs = {
|
||||
filters?: Maybe<ProductFilter>;
|
||||
};
|
||||
|
||||
export type Transaction = {
|
||||
__typename?: 'Transaction';
|
||||
amount: Scalars['Float'];
|
||||
created: Scalars['DateTime'];
|
||||
id: Scalars['ID'];
|
||||
user: User;
|
||||
};
|
||||
|
||||
export type User = {
|
||||
__typename?: 'User';
|
||||
firstName: Scalars['String'];
|
||||
@@ -114,6 +144,14 @@ export type UserProfile = {
|
||||
lastPurchaseDate: Scalars['DateTime'];
|
||||
};
|
||||
|
||||
export type CreateDepositMutationVariables = Exact<{
|
||||
userId: Scalars['ID'];
|
||||
amount: Scalars['Int'];
|
||||
}>;
|
||||
|
||||
|
||||
export type CreateDepositMutation = { __typename?: 'Mutation', createDeposit: { __typename?: 'AboveMaxSaldo', error: boolean, message: string, maxSaldo: number, above: number } | { __typename?: 'CreateDepositSuccess', transaction: { __typename?: 'Transaction', id: string, amount: number, user: { __typename?: 'User', id: string, firstName: string, lastName: string, profile?: { __typename?: 'UserProfile', balance: number } | null | undefined } } } | { __typename?: 'FormErrors', error: boolean, message: string, fields: Array<{ __typename?: 'FieldError', field: string, message: string }> } };
|
||||
|
||||
export type AllProductsQueryVariables = Exact<{
|
||||
active: Scalars['Boolean'];
|
||||
}>;
|
||||
@@ -136,6 +174,7 @@ export type CreateOrderMutationVariables = Exact<{
|
||||
export type CreateOrderMutation = { __typename?: 'Mutation', createOrder: { __typename?: 'CreateOrderSuccess', order: { __typename?: 'Order', id: string, orderSum: number, customer?: { __typename?: 'User', id: string } | null | undefined } } | { __typename?: 'FormErrors', error: boolean, message: string, fields: Array<{ __typename?: 'FieldError', field: string, message: string }> } | { __typename?: 'InsufficientFunds', error: boolean, message: string, amountLacking: number } };
|
||||
|
||||
|
||||
export const CreateDepositDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateDeposit"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"userId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"amount"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createDeposit"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"userId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"userId"}}},{"kind":"Argument","name":{"kind":"Name","value":"amount"},"value":{"kind":"Variable","name":{"kind":"Name","value":"amount"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CreateDepositSuccess"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"transaction"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"amount"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"lastName"}},{"kind":"Field","name":{"kind":"Name","value":"profile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"balance"}}]}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AboveMaxSaldo"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"maxSaldo"}},{"kind":"Field","name":{"kind":"Name","value":"above"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FormErrors"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"field"}},{"kind":"Field","name":{"kind":"Name","value":"message"}}]}}]}}]}}]}}]} as unknown as DocumentNode<CreateDepositMutation, CreateDepositMutationVariables>;
|
||||
export const AllProductsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"allProducts"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"active"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"allProducts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"active"},"value":{"kind":"Variable","name":{"kind":"Name","value":"active"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"salePriceExt"}},{"kind":"Field","name":{"kind":"Name","value":"salePriceInt"}}]}}]}}]} as unknown as DocumentNode<AllProductsQuery, AllProductsQueryVariables>;
|
||||
export const AllUsersDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"allUsers"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"allUsers"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"lastName"}},{"kind":"Field","name":{"kind":"Name","value":"profile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"balance"}},{"kind":"Field","name":{"kind":"Name","value":"image"}},{"kind":"Field","name":{"kind":"Name","value":"lastPurchaseDate"}}]}}]}}]}}]} as unknown as DocumentNode<AllUsersQuery, AllUsersQueryVariables>;
|
||||
export const CreateOrderDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateOrder"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"customerId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"orderLines"}},"type":{"kind":"NonNullType","type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"OrderLineInput"}}}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"isExternal"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createOrder"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"customerId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"customerId"}}},{"kind":"Argument","name":{"kind":"Name","value":"orderLines"},"value":{"kind":"Variable","name":{"kind":"Name","value":"orderLines"}}},{"kind":"Argument","name":{"kind":"Name","value":"isExternal"},"value":{"kind":"Variable","name":{"kind":"Name","value":"isExternal"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CreateOrderSuccess"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"order"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"customer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"orderSum"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InsufficientFunds"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"amountLacking"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FormErrors"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"field"}},{"kind":"Field","name":{"kind":"Name","value":"message"}}]}}]}}]}}]}}]} as unknown as DocumentNode<CreateOrderMutation, CreateOrderMutationVariables>;
|
||||
Reference in new issue
Block a user