fix readme

README.md

@@ -1,31 +1,5 @@
-<<<<<<< HEAD
-# Introduction 
-TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project. 
-
-# Getting Started
-TODO: Guide users through getting your code up and running on their own system. In this section you can talk about:
-1.	Installation process
-2.	Software dependencies
-3.	Latest releases
-4.	API references
-
-# Build and Test
-TODO: Describe and show how to build your code and run the tests. 
-
-# Contribute
-TODO: Explain how other users and developers can contribute to make your code better. 
-
-If you want to learn more about creating good readme files then refer the following [guidelines](https://docs.microsoft.com/en-us/azure/devops/repos/git/create-a-readme?view=azure-devops). You can also seek inspiration from the below readme files:
-- [ASP.NET Core](https://github.com/aspnet/Home)
-- [Visual Studio Code](https://github.com/Microsoft/vscode)
-- [Chakra Core](https://github.com/Microsoft/ChakraCore)
-=======
 # aws-lunchrun
 
-<<<<<<< HEAD
-LunchRun application built for AWS
->>>>>>> Initial commit
-=======
 > LunchRun app
 
 ## Build Setup
@@ -54,4 +28,3 @@ npm test
 ```
 
 For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
->>>>>>> vue template app

config/AppSync.js

@@ -0,0 +1,6 @@
+export default {
+    "graphqlEndpoint": "https://wggm57lvdfd5jne623gpegt53e.appsync-api.us-east-2.amazonaws.com/graphql",
+    "region": "us-east-2",
+    "authenticationType": "API_KEY",
+    "apiKey": "da2-c24hz3lcdjaefog2hh4owr4bwi"
+}

config/index.js

@@ -50,7 +50,7 @@ module.exports = {
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/lunchrun-public/',
+    assetsPublicPath: '/',
 
     /**
      * Source Maps

frontend/README.md

@@ -0,0 +1,57 @@
+<<<<<<< HEAD
+# Introduction 
+TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project. 
+
+# Getting Started
+TODO: Guide users through getting your code up and running on their own system. In this section you can talk about:
+1.	Installation process
+2.	Software dependencies
+3.	Latest releases
+4.	API references
+
+# Build and Test
+TODO: Describe and show how to build your code and run the tests. 
+
+# Contribute
+TODO: Explain how other users and developers can contribute to make your code better. 
+
+If you want to learn more about creating good readme files then refer the following [guidelines](https://docs.microsoft.com/en-us/azure/devops/repos/git/create-a-readme?view=azure-devops). You can also seek inspiration from the below readme files:
+- [ASP.NET Core](https://github.com/aspnet/Home)
+- [Visual Studio Code](https://github.com/Microsoft/vscode)
+- [Chakra Core](https://github.com/Microsoft/ChakraCore)
+=======
+# aws-lunchrun
+
+<<<<<<< HEAD
+LunchRun application built for AWS
+>>>>>>> Initial commit
+=======
+> LunchRun app
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+
+# run unit tests
+npm run unit
+
+# run e2e tests
+npm run e2e
+
+# run all tests
+npm test
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+>>>>>>> vue template app

package.json

@@ -15,7 +15,15 @@
     "deploy": "aws s3 sync .\\dist\\ s3://lunchrun-public --delete"
   },
   "dependencies": {
+    "apollo-cache-inmemory": "^1.2.1",
+    "apollo-client": "^2.3.1",
+    "apollo-link": "^1.2.2",
+    "apollo-link-http": "^1.5.4",
+    "aws-appsync": "^1.0.22",
+    "graphql": "^0.13.2",
+    "graphql-tag": "^2.9.2",
     "vue": "^2.5.2",
+    "vue-apollo": "^3.0.0-beta.14",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {

src/App.vue

@@ -1,12 +1,17 @@
 <template>
-  <div id="app">
+  <div id="app" v-if="hydrated">
     <router-view/>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  data: () => ({ hydrated: false }),
+  async mounted () {
+    await this.$apollo.provider.defaultClient.hydrated()
+    this.hydrated = true
+  }
 }
 </script>
 

src/components/Start.vue

@@ -1,12 +1,68 @@
 <template>
   <div id="start">
     <a href="#">start a lunch run</a>
+
+    <div v-if="$apollo.queries.runs.loading">Loading...</div>
+    <ul>
+      <li v-for="run in runs" :key="run.id">
+        {{ run.name }}
+      </li>
+    </ul>
+
+    <form v-on:submit.prevent='addRun'>
+      <label for='name'>Name</label>
+      <input type='text' name='name' id='name' v-model='name'/>
+      <input type='submit' value='Add Run'/>
+    </form>
+
   </div>
 </template>
 
 <script>
+import listRuns from '../queries/listRuns'
+import createRun from '../mutations/createRun'
 export default {
-  name: 'Start'
+  name: 'Start',
+  data () {
+    return {
+      name: '',
+      runs: []
+    }
+  },
+  methods: {
+    addRun () {
+      const name = this.name
+      this.$apollo.mutate({
+        mutation: createRun,
+        variables: {
+          name: name
+        },
+        update: (store, { data: { createRun } }) => {
+          const data = store.readQuery({ query: listRuns })
+          data.listRuns.items.push(createRun)
+          store.writeQuery({ query: listRuns, data })
+        },
+        optimisticResponse: {
+          __typename: 'Mutation',
+          createRun: {
+            __typename: 'Run',
+            id: -1,
+            name: name
+          }
+        }
+      }).then((data) => {
+        console.log(data)
+      }).catch((error) => {
+        console.log(error)
+      })
+    }
+  },
+  apollo: {
+    runs: {
+      query: () => listRuns,
+      update: data => data.listRuns.items
+    }
+  }
 }
 </script>
 

src/main.js

@@ -3,13 +3,38 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import VueApollo from 'vue-apollo'
+import AWSAppSyncClient from 'aws-appsync'
+import appSyncConfig from '../config/AppSync.js'
 
+const appSyncClient = new AWSAppSyncClient({
+  url: appSyncConfig.graphqlEndpoint,
+  region: appSyncConfig.region,
+  auth: {
+    type: appSyncConfig.authenticationType,
+    apiKey: appSyncConfig.apiKey
+  }
+},
+{
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'cache-and-network'
+    }
+  }
+})
+
+const apolloProvider = new VueApollo({
+  defaultClient: appSyncClient
+})
+
+Vue.use(VueApollo)
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
+  provide: apolloProvider.provide(),
   components: { App },
   template: '<App/>'
 })

src/mutations/createRun.js

@@ -0,0 +1,6 @@
+import gql from 'graphql-tag'
+export default gql`mutation ($name: String!) {
+    createRun(input: { name: $name }) {
+      id, name
+    }
+  }`

src/queries/listRuns.js

@@ -0,0 +1,11 @@
+import gql from 'graphql-tag'
+export default gql`
+    query {
+        listRuns(first:10,after:"") {
+            items {
+                id,
+                name
+            },
+            nextToken
+        }
+    }`