70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { compose, graphql } from 'react-apollo';
|
|
import styled from 'styled-components';
|
|
import mutations from './mutations.graphql';
|
|
import StoreSelect from './storeSelect';
|
|
import ProductTable from './productTable';
|
|
|
|
interface CreateReservationProps {
|
|
createReservation: Function
|
|
}
|
|
|
|
const Form = styled.form`
|
|
width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 4em;
|
|
`;
|
|
|
|
const H1 = styled.h1`
|
|
`;
|
|
|
|
const Button = styled.button`
|
|
background: none;
|
|
border-radius: 4px;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
width: 200px;
|
|
`;
|
|
|
|
const CreateReservation = React.memo(({ createReservation }: CreateReservationProps) => {
|
|
const [reservationProducts, setReservationProducts] = React.useState<{ [key: string]: number }>({});
|
|
const [storeId, setStoreId] = React.useState<string>('');
|
|
const onChangeQuantity = React.useCallback((productId: string, quantity: string) => {
|
|
setReservationProducts(rps => ({
|
|
...rps,
|
|
[productId]: parseInt(quantity, 10)
|
|
}));
|
|
}, []);
|
|
|
|
const onSubmit = React.useCallback((e) => {
|
|
e.preventDefault();
|
|
createReservation({
|
|
variables: {
|
|
reservationProducts: Object.keys(reservationProducts).map(productId => ({
|
|
productId,
|
|
quantity: reservationProducts[productId]
|
|
}))
|
|
}
|
|
});
|
|
}, [reservationProducts]);
|
|
|
|
return (
|
|
<Form onSubmit={onSubmit}>
|
|
<H1>Create reservation</H1>
|
|
<StoreSelect value={storeId} onChange={setStoreId} />
|
|
<ProductTable storeId={storeId} onChangeQuantity={onChangeQuantity} />
|
|
<Button type="submit">Reserve</Button>
|
|
</Form>
|
|
);
|
|
});
|
|
|
|
|
|
export default compose(
|
|
graphql(mutations.createReservation, { name: 'createReservation' })
|
|
)(CreateReservation);
|
|
|