<template>

  <div>

    <form @submit.prevent="add(task)">

      <input v-model="task" type="text" />

      <input type="submit" value="ADD">

    </form>

    <article class="pa3 pa5-ns">

      <ul class="list pl0 ml0 center mw6 ba b--light-silver br2">

        <li v-for="todo of todos" class="flex items-center ph3 pv3 bb b--light-silver">

          <span v-bind:class="{strike: todo.complete}" class="flex-auto">{{todo.id}} {{todo.task}}</span>

          <button @click="toggle(todo)"><img src="https://icon.now.sh/check" alt="toggle"></button>

          <button @click="remove(todo)"><img src="https://icon.now.sh/trash" alt="delete"></button>

        </li>

      </ul>

    </article>

  </div>

</template>

<script>

  import { mapState, mapActions } from 'vuex'

  import {init} from './shared'

  export default {

    fetch: init,

    computed: {

      ...mapState({

        todos: (state) => state.todos

      })

    },

    data () {

      return {

        task: 'Some data'

      }

    },

    methods: {

      ...mapActions([

        'add',

        'remove',

        'toggle'

      ])

    }

  }

</script>

import Vuex from 'vuex'

import axios from 'axios'

const store = () => new Vuex.Store({

  state: {

    todos: [

    ]

  },

  mutations: {

    init (state, todos) {

      state.todos = todos

    },

    add (state, todo) {

      state.todos = [

        ...state.todos,

        todo

      ]

    },

    remove (state, todo) {

      state.todos = state.todos.filter((t) => {

        return t.id !== todo.id

      })

    },

    toggle (state, todo) {

      state.todos = state.todos.map(t => {

        return t.id === todo.id

            ? todo

            : t

      })

    }

  },

  actions: {

    async add (context, task) {

      const commit = context.commit

      const res = await axios.post('https://todos-cuvsmolowg.now.sh/todos', {

        task,

        complete: false

      })

      commit('add', res.data)

    },

    async remove ({commit}, todo) {

      await axios.delete(`https://todos-cuvsmolowg.now.sh/todos/${todo.id}`)

      commit('remove', todo)

    },

    async toggle ({commit}, todo) {

      const res = await axios.patch(`https://todos-cuvsmolowg.now.sh/todos/${todo.id}`, {complete: !todo.complete})

      commit('toggle', res.data)

    }

  }

})

export default store