adding appsync and logger

Author: Dustin Noyes

.graphqlconfig.yml

@@ -0,0 +1,16 @@
+projects:
+ vuesample1:
+ schemaPath: src/graphql/schema.json
+ includes:
+ - src/graphql/**/*.js
+ excludes:
+ - ./amplify/**
+ extensions:
+ amplify:
+ codeGenTarget: typescript
+ generatedFileName: src/API.ts
+ docsFilePath: src/graphql
+ graphQLApiId: uo2zimgv7zcalm5aw3i7oi26ry
+ endpoints:
+ prod: >-
+ https://6pe4kvx2dzghrfjye5pmfbnu7a.appsync-api.us-west-2.amazonaws.com/graphql

src/App.vue

@@ -24,6 +24,8 @@ import Menu from '@/components/Menu';
 
 Vue.component('v-menu', Menu)
 
+window.LOG_LEVEL = 'VERBOSE';
+
 export default {
  name: 'app'
 }

src/notes/components/Note.vue

@@ -32,7 +32,7 @@
  />
  </svg>
  </div>
- <div :style="itemStyle.title">{{note.title}}</div>
+ <div :style="itemStyle.title">{{todo.note}}</div>
  <div :style="itemStyle.remove" v-on:click="remove">x</div>
  </li>
 </template>
@@ -42,22 +42,22 @@ import { JS } from 'fsts'
 
 export default {
  name: 'Note',
- props: ['note', 'theme'],
+ props: ['todo', 'theme'],
  computed: {
- toggleOpacity: function() { return this.note.done? 1 : 0 },
+ toggleOpacity: function() { return this.todo.done? 1 : 0 },
  itemStyle: function () {
- return this.note.done
+ return this.todo.done
  ? JS.deepAssign({}, this.theme.item, this.theme.item.done)
  : this.theme.item
  }
  },
  methods: {
  toggle() {
- this.$emit('toggle', this.note.id)
+ this.$emit('toggle', this.todo)
  },
  remove() {
- if (this.note.done) {
- this.$emit('remove', this.note.id)
+ if (this.todo.done) {
+ this.$emit('remove', this.todo.id)
  }
  }
  }

src/notes/components/Notes.vue

@@ -17,14 +17,14 @@
  <input
  :style="theme.input"
  autofocus
- v-model="title"
+ v-model="note"
  v-on:keyup.enter="create"
  />
  <ul :style="theme.list">
  <a-note
- v-for="note in notes"
- :key="note.id"
- :note="note"
+ v-for="todo in todos"
+ :key="todo.id"
+ :todo="todo"
  :theme="theme"
  v-on:toggle="toggle"
  v-on:remove="remove"
@@ -47,53 +47,72 @@ import { JS } from 'fsts'
 
 import AmplifyStore from '../../store/store'
 
-import NotesStore from './persist'
+import { CreateTodo, ListTodos, UpdateTodo, DeleteTodo } from './persist/graphqlActions';
+
 import NotesTheme from '../NotesTheme'
 import Note from './Note'
 
 Vue.component('a-note', Note)
 
-const logger = new Logger('NotesComp')
-
 export default {
  name: 'Notes',
  data () {
  return {
  theme: NotesTheme || {},
- title: '',
+ note: '',
+ todos: [],
  filter: 'all',
- ts: 0 // for force refresh notes after actions
+ logger: {},
+ actions: {
+ create: CreateTodo,
+ list: ListTodos,
+ update: UpdateTodo,
+ delete: DeleteTodo, 
+ },
  }
  },
+ created() {
+ this.logger = new this.$Amplify.Logger('NOTES_component')
+ this.$Amplify.API.graphql(this.$Amplify.graphqlOperation(this.actions.list, {}))
+ .then((res) => {
+ this.todos = res.data.listTodos.items;
+ this.logger.info(`Todos successfully listed`, res)
+ })
+ .catch((e) => {
+ this.logger.error(`Error listing Todos`, e)
+ });
+ },
  computed: {
- userId: function() { return AmplifyStore.state.userId },
- notesStore: function() { return new NotesStore(this.userId) },
- notes() {
- if (this.filter === 'active') {
- return this.notesStore.findAll({ done: true }, this.ts)
- }
- if (this.filter === 'completed') {
- return this.notesStore.findAll({ done: false }, this.ts)
- }
- return this.notesStore.findAll({}, this.ts)
- }
+ userId: function() { return AmplifyStore.state.userId }
  },
  methods: {
- toggle(id) {
- logger.debug('toggle ' + id)
- this.notesStore.toggle(id)
- this.ts = new Date().getTime()
+ toggle(todo) {
+ this.$Amplify.API.graphql(this.$Amplify.graphqlOperation(this.actions.update, {id: todo.id, note: todo.note, done: !todo.done}))
+ .then((res) => {
+ todo.done = !todo.done
+ this.logger.info(`Todo ${todo.id} done status toggled`, res)
+ })
+ .catch((e) => {
+ this.logger.error(`Error toggling Todo ${todo.id} done status`, e)
+ })
  },
  remove(id) {
- logger.debug('remove ' + id)
- this.notesStore.remove(id)
- this.ts = new Date().getTime()
+ this.$Amplify.API.graphql(this.$Amplify.graphqlOperation(this.actions.delete, {id}))
+ .then((res) => {
+ this.logger.info(`Todo ${id} removed`, res)
+ })
+ .catch((e) => {
+ this.logger.error(`Error removing Todo ${id}`, e)
+ })
  },
  create() {
- logger.debug('create ' + this.title)
- this.notesStore.create(this.title)
- this.ts = new Date().getTime()
- this.title = ''
+ this.$Amplify.API.graphql(this.$Amplify.graphqlOperation(this.actions.create, {note: this.note}))
+ .then((res) => {
+ this.logger.info(`Todo created`, res)
+ })
+ .catch((e) => {
+ this.logger.error(`Error creating Todo`, e)
+ })
  }
  }
 }

src/notes/components/persist/CacheStore.js

@@ -0,0 +1,38 @@
+const CreateTodo = `mutation createTodo($note: String!) {
+ createTodo(input: {note: $note}) {
+ id
+ note
+ }
+}`;
+
+const ListTodos = `query {
+ listTodos {
+ items {
+ id
+ note
+ done
+ }
+ }
+}`;
+
+const UpdateTodo = `mutation updateTodo($id: ID!, $note: String, $done: Boolean) {
+ updateTodo(input: {id: $id, note: $note, done: $done}) {
+ id
+ note
+ done
+ }
+}`;
+
+const DeleteTodo = `mutation DeleteTodo($id: ID!) {
+ deleteTodo(input: {id: $id}) {
+ id
+ }
+}
+`
+
+export {
+ CreateTodo,
+ ListTodos,
+ UpdateTodo,
+ DeleteTodo
+}