Merge commit 'fa3f31133a183f8442c77416af14160ebe60f82d'

src/createReservation.tsx

@@ -6,7 +6,7 @@ import StoreSelect from './storeSelect';
 import ProductTable from './productTable';
 
 interface CreateReservationProps {
-  // createReservation: Function
+  createReservation: Function
 }
 
 const Form = styled.form`
@@ -30,7 +30,7 @@ const Button = styled.button`
   width: 200px;
 `;
 
-const CreateReservation = React.memo(({ /* createReservation */ }: CreateReservationProps) => {
+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) => {
@@ -42,7 +42,14 @@ const CreateReservation = React.memo(({ /* createReservation */ }: CreateReserva
 
   const onSubmit = React.useCallback((e) => {
     e.preventDefault();
-    
+    createReservation({
+      variables: {
+        reservationProducts: Object.keys(reservationProducts).map(productId => ({
+          productId,
+          quantity: reservationProducts[productId]
+        }))
+      }
+    });
   }, [reservationProducts]);
 
   return (
@@ -55,4 +62,8 @@ const CreateReservation = React.memo(({ /* createReservation */ }: CreateReserva
   );
 });
 
-export default CreateReservation;
+
+export default compose(
+  graphql(mutations.createReservation, { name: 'createReservation' })
+)(CreateReservation);
+

src/mutations.graphql

@@ -0,0 +1,11 @@
+input ReservationProductInput {
+  productId: ID
+  quantity: Int
+}
+
+mutation createReservation($reservationProducts: [ReservationProductInput]) {
+  createReservation(input: { reservationProducts: $reservationProducts }) {
+    date
+    id
+  }
+}

src/productTable.tsx

@@ -46,7 +46,32 @@ interface ProductTableProps {
 
 const ProductTable = React.memo(({ onChangeQuantity, storeId }: ProductTableProps) => {
   return (
-    <div>Product table</div>
+    <Query query={queries.getStore} skip={!storeId} variables={{ "storeId": storeId }}>
+      {({ data }: any) => {
+        //const products = data && data.store && data.store.products;
+        //console.table(products);
+        return (<Table>
+          <tbody>
+            {
+              data && data.store && data.store.products.map(({ description, id, name, price }: Product) => {
+                return <Tr key={id}>
+                  <td>
+                    <div>{name}</div>
+                    <Description>{description}</Description>
+                  </td>
+                  <PriceTd>€ {price.toFixed(2)}</PriceTd>
+                  <QuantityTd>
+                    <QuantitySelect id={id} onChange={onChangeQuantity} />
+                  </QuantityTd>
+                </Tr>
+              })
+            }
+          </tbody>
+        </Table>)
+      }
+
+      }
+    </Query >
   );
 });
 

src/queries.graphql

@@ -0,0 +1,18 @@
+query getStores{
+  stores{
+    id,
+    name
+  }
+}
+
+query getStore($storeId: String!){
+  store (id:$storeId){
+    id,
+    name,
+    city,
+    number,
+    postalCode,
+    street,
+    products {id,description,name,price}
+  }
+}

src/storeSelect.tsx

@@ -25,7 +25,17 @@ const StoreSelect = React.memo(({ value, onChange }: StoreSelectProps) => {
   }, []);
 
   return (
-    <div>Store select</div>
+    <Query query={queries.getStores}>
+      {({ data: { stores = [] } = {} }) => (
+        <Select value={value} onChange={onChangeStore}>
+          <option key="default" value="">Select a store</option>
+          {stores.map(({ id, name }: Store) => {
+            return (<option key={id} value={id}>{name}</option>)
+          })}
+        </Select>
+      )}
+
+    </Query>
   );
 });