TodoList.vue

<template>
  <v-container fluid>
    <amplify-connect
      :query="listTodosQuery"
      :subscription="updateOrDeleteTodo"
      :onSubscriptionMsg="onUpdateOrDeleteTodo"
    >
      <template slot-scope="{ loading, data, errors }">
      
        <div v-if="loading">LOADING DATA...</div>

        <v-layout row wrap v-if="errors.length">
          <v-flex xs12>
            <!-- SHOW ERRORS -->
          </v-flex>
        </v-layout>
        <div v-else-if="data && data.hasOwnProperty('listTodos')">
          <v-layout row wrap mt-4>
            <v-flex xs12 sm8 offset-sm2>
              <v-card>
                <v-list two-line subheader>
                  <v-layout row wrap v-if="!data.listTodos.items.length">
                    <v-flex xs12 pa-2>
                      <!-- NO DATA -->
                    </v-flex>
                  </v-layout>
                  <v-flex xs12 v-else>
                    <todo-item
                      :todo="todo"
                      v-for="todo in data.listTodos.items"
                      :key="todo.id"
                    ></todo-item>
                  </v-flex>
                </v-list>
              </v-card>
            </v-flex>
          </v-layout>
        </div>
      </template>
    </amplify-connect>
  </v-container>
</template>

<script>
import { API, graphqlOperation } from "aws-amplify";
export default {
  name: "TodoList",
  computed: {
    listTodosQuery() {
      return graphqlOperation(this.queryListTodos, { filter: {} });
    },
    updateOrDeleteTodo() {
      const OnUpdateOrDeleteTodo = `subscription OnUpdateOrDeleteTodo {
        onUpdateTodo {
          id
          text
          status
        }
        onDeleteTodo {
          id
          text
        }
      }`;
      return graphqlOperation(OnUpdateOrDeleteTodo);
    }
  },
  methods: {
    canDeleteTodo(todo) {
      //TODO check permissions
    },
    async deleteTodo(todo) {
      // Vuetify Confirm!
      let res = await this.$confirm(
        this.$t("removeTodo", { todo: todo.text }),
        {
          title: this.$t("confirm"),
          buttonTrueText: this.$t("remove"),
          buttonTrueColor: "red",
          color: "red"
        }
      );
      if (res) {
        try {
          await API.graphql(
            graphqlOperation(this.mutationDeleteTodo, {
              input: { id: todo.id }
            })
          );
        } catch (e) {
          // manage errors
        }
      }
    },
    // Subscription on updateOrDeleteTodo fired!
    onUpdateOrDeleteTodo(prevData, newData) {
      if (newData.onUpdateTodo) {
        return this._onUpdateTodo(prevData, newData);
      }
      if (newData.onDeleteTodo) {
        return this._onDeleteTodo(prevData, newData);
      }
    },
    _onUpdateTodo(prevData, newData) {
      const updatedTodo = newData.onUpdateTodo;
      prevData.data.listTodos.items.forEach((todo, index) => {
        if (todo.id === updatedTodo.id) {
          prevData.data.listTodos.items[index].status = updatedTodo.status;
        }
      });
      return prevData.data;
    },
    _onDeleteTodo(prevData, newData) {
      const removedTodo = newData.onDeleteTodo;
      prevData.data.listTodos.items = prevData.data.listTodos.items.filter(
        function(todo) {
          return todo.id !== removedTodo.id;
        }
      );
      return prevData.data;
    }
  }
};
</script>