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,14 +42,7 @@ const CreateReservation = React.memo(({ createReservation }: CreateReservationPr
 
   const onSubmit = React.useCallback((e) => {
     e.preventDefault();
-    createReservation({
-      variables: {
-        reservationProducts: Object.keys(reservationProducts).map(productId => ({
-          productId,
-          quantity: reservationProducts[productId]
-        }))
-      }
-    });
+    
   }, [reservationProducts]);
 
   return (
@@ -62,8 +55,4 @@ const CreateReservation = React.memo(({ createReservation }: CreateReservationPr
   );
 });
 
-
-export default compose(
-  graphql(mutations.createReservation, { name: 'createReservation' })
-)(CreateReservation);
-
+export default CreateReservation;

src/mutations.graphql

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

src/productTable.tsx

@@ -46,32 +46,7 @@ interface ProductTableProps {
 
 const ProductTable = React.memo(({ onChangeQuantity, storeId }: ProductTableProps) => {
   return (
-    <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 >
+    <div>Product table</div>
   );
 });
 

src/queries.graphql

@@ -1,18 +0,0 @@
-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,17 +25,7 @@ const StoreSelect = React.memo(({ value, onChange }: StoreSelectProps) => {
   }, []);
 
   return (
-    <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>
+    <div>Store select</div>
   );
 });