From 51c2cbf4f1f92587e048b6f4d65276d56eab1c04 Mon Sep 17 00:00:00 2001
From: Kristof Van Miegem <kristof@codifly.be>
Date: Sun, 10 Feb 2019 16:01:18 +0100
Subject: [PATCH] wip

---
 package.json              |  6 +++++-
 src/app.tsx               | 31 +++++++++++++++++++++++++------
 src/createReservation.tsx | 23 +++++++++++++++++++++++
 src/queries.ts            | 15 +++++++++++++++
 4 files changed, 68 insertions(+), 7 deletions(-)
 create mode 100644 src/createReservation.tsx
 create mode 100644 src/queries.ts

diff --git a/package.json b/package.json
index c514231..bf3aa16 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,9 @@
   "private": true,
   "dependencies": {
     "apollo-boost": "^0.1.27",
+    "graphql": "^14.1.1",
+    "graphql-tag": "^2.10.1",
+    "graphql.macro": "^1.3.3",
     "react": "^16.7.0",
     "react-apollo": "^2.4.0",
     "react-dom": "^16.7.0",
@@ -13,7 +16,8 @@
   },
   "devDependencies": {
     "@types/react": "^16.7.20",
-    "@types/react-dom": "^16.0.11"
+    "@types/react-dom": "^16.0.11",
+    "ts-transform-graphql-tag": "^0.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/app.tsx b/src/app.tsx
index 23f85b1..0b65080 100755
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,14 +1,33 @@
 import React from 'react';
+import ApolloClient from 'apollo-boost';
+import { ApolloProvider } from 'react-apollo';
+import CreateReservation from './createReservation';
+
+const apolloClient = new ApolloClient({
+  uri: "http://localhost:4000"
+});
+
+// ⚽️  Goal
+// --------
+
+// We want to create a webapp to reserve products (food).
+// Some ingredients we need: a store, products and reservations.
+// First of all we want a list of stores. After we have chosen
+// a store, we get a list of products (query) of that store.
+// We pick some products, pick a quantity, and we make a reservation (mutation)
+
+// 🏪  Exercise 1
+// --------------
+
+// 1) First we need to create a query to get all the stores.
+// 
 
 class App extends React.PureComponent {
   render() {
     return (
-      <div>
-        <h1>Hello everyone! This will become our foodies reservation webapp!</h1>
-        <br />
-        <br />
-        <img src="https://sayingimages.com/wp-content/uploads/im-on-a-seafood-diet-food-memes.jpg" />
-      </div>
+      <ApolloProvider client={apolloClient}>
+        <CreateReservation />
+      </ApolloProvider>
     );
   }
 }
diff --git a/src/createReservation.tsx b/src/createReservation.tsx
new file mode 100644
index 0000000..f2c8939
--- /dev/null
+++ b/src/createReservation.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { compose } from 'react-apollo';
+import { getStoresQuery } from './queries';
+
+interface CreateReservationProps {
+  storesData: object;
+}
+
+class CreateReservation extends React.PureComponent<CreateReservationProps> {
+  render() {
+    const { storesData } = this.props;
+    console.warn('stores data', storesData);
+    return (
+      <form>
+        <select>
+          <option value="volvo">Volvo</option>
+        </select>
+      </form>
+    );
+  }
+}
+
+export default compose(getStoresQuery)(CreateReservation);
diff --git a/src/queries.ts b/src/queries.ts
new file mode 100644
index 0000000..d3f2992
--- /dev/null
+++ b/src/queries.ts
@@ -0,0 +1,15 @@
+import { gql } from 'graphql.macro';
+import { graphql } from 'react-apollo';
+
+export const GET_STORES = gql`
+  query getStores {
+    stores() {
+      id
+      name
+    }
+  }
+`;
+
+export const getStoresQuery = graphql(GET_STORES, {
+  name: 'storesData',
+});
\ No newline at end of file