<commit_before>
////////////TEMPLATE

<template>
  <section class="todoapp">
    <!-- header -->
      <!--@keyup.enter="addTodo" is shorthand for v-on:keyup.enter='addTodo'-->
    <header class="header">
      <img src= '../assets/vuedeuxsmall.png'>
      <p id='header'> Vuedeux TodoMVC</p>
      <input class="new-todo"
        autofocus
        autocomplete="off"
        placeholder="What needs to be done?"
        v-on:keyup.enter="addTodo">
    </header>
    <!-- main section -->
     <!-- v-show used for conditional display, if 0 todos wont render -->
          <!-- v-bind:checked runs allChecked returning boolean value of whether all are currented set to done// v-on:change all arent done set all to done and vice versa -->
    <section class="main" v-show="todos.length">
      <input class="toggle-all"
        type="checkbox"
        v-bind:checked="allChecked" 
        v-on:change="toggleAll({ done: !allChecked })">
       <!-- loop through currenly filtered todos and pass todo object as prop -->
      <ul class="todo-list">
        <todo v-for="todo in filteredTodos" :todo="todo"></todo>
      </ul>
    </section>
  
    <!-- footer -->
    <footer class="footer" v-show="todos.length">
      <span class="todo-count">
          <!-- plularizing filter using pipe {{remaining becomes first argument}} -->
        <strong>{{ remaining }}</strong>
        {{ remaining | pluralize('item') }} left
      </span>
      <ul class="filters">
        <li v-for="(val, key) in filters">
       <!-- looping over key and vals from filters obj / creating  -->
       <!-- on click set visibility to filter name  -->
       <!-- v-bind class, setting "selected" class to true if selected-->
          <a v-bind:href="'#/' + key"
            v-bind:class="{ selected: visibility === key }"
            v-on:click="visibility = key">{{ key | capitalize }}</a>
        </li>
      </ul>
   <!-- v-show if number of todos is greater than those not selected-->
          <!-- on click run mutation that filters out all done-->

      <button class="clear-completed"
        v-show="todos.length > remaining"
        @click="clearCompleted">
        Clear completed
      </button>
    </footer>
  </section>
</template>

////////////SCRIPT

<script>
import {reduxStore} from '../store/reduxstore'
import { mapMutations } from 'vuex'
import Todo from './todo.vue'
import { bindActionCreators } from 'redux';
import * as actionCreators from '../store/reduxactions'
import 'todomvc-app-css/index.css'


const filters = {
  all: todos => todos,
  active: todos => todos.filter(todo => !todo.done),
  completed: todos => todos.filter(todo => todo.done)
}

export default {
  components: { Todo },
  name: "Todo-List",
  data () {
    return {
      // reduxStore,
      // reduxActions: bindActionCreators(actionCreators, reduxStore.dispatch),
      // reduxActions: actionCreators,
      visibility: 'all',
      filters: filters,

      // todos: this.$select('todos.todos as todos')
    }
  },
  computed: {
    todos () {
      console.log("THIS from within App.vue", this)
      console.log("Action Creators", actionCreators)
      // console.log("REDUX TODOS", this.$select('todos'))
      console.log("Vue.$store.state.redux: ", this.$store.state.redux)
      // REDUX : COMPUTE NEW TODO ITEMS  // Won't be reactive in this case
      // return this.$select('todos.todos as todos')
     
      // VUEX GLOBAL: COMPUTE NEW TODO ITEMS
      // return this.$store.state.todos
      // VUEX REDUX MODULE: SHOW TODO FROM REDUX MODULE
      return this.$store.state.redux.todos
    },
    allChecked () {
      return this.todos.every(todo => todo.done)
    },
    filteredTodos () {
      return filters[this.visibility](this.todos)
    },
    remaining () {
      return this.todos.filter(todo => !todo.done).length
    }
  },
  methods: {
    addTodo (e) {
      var text = e.target.value
      if (text.trim()) {
        // VUEX: adding todos
        // this.$store.commit('addTodo', { text })
       
       // REDUX : adding todos
       // the arguments resolves to a function definition that dispatches two events
       // uses THUNK middleware for async
        // this.$store.dispatch(this.$store._actions.addTodo[0](text))
        // this.reduxStore.dispatch(this.reduxActions.addTodo(text));
        console.log("1. addTodo method fired")
        this.$store.commit(this.$root.reduxActions.addTodo(text))
      }
      e.target.value = ''
    },

    // map mutations  this.$store.commit('toggleAll') to this.toggleAll
    ...mapMutations({
      toggleAll: 'COMPLETE_ALL',
      clearCompleted: 'CLEAR_COMPLETED'
    })
  },
  filters: {
    pluralize: (n, w) => n === 1 ? w : (w + 's'),
    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
  }
}


</script>

////////////STYLING
<style src="todomvc-app-css/index.css"></style>
<style>
  body{
    background-color: #42B983 !important;
  }
  #header {
    display: inline;
    text-align: center;
    font-size: 3em;
  }
</style><commit_msg>styleupdate<commit_after>
////////////TEMPLATE

<template>
  <section class="todoapp">
    <!-- header -->
      <!--@keyup.enter="addTodo" is shorthand for v-on:keyup.enter='addTodo'-->
    <header class="header">
      <img style='margin: 10px' src= '../assets/vuedeuxsmall.png'>
      <p id='header' style='padding-left: 50px; margin-top: -75px; margin-left: 30px'> Vuedeux TodoMVC</p>
      <input class="new-todo"
        autofocus
        autocomplete="off"
        placeholder="What needs to be done?"
        v-on:keyup.enter="addTodo">
    </header>
    <!-- main section -->
     <!-- v-show used for conditional display, if 0 todos wont render -->
          <!-- v-bind:checked runs allChecked returning boolean value of whether all are currented set to done// v-on:change all arent done set all to done and vice versa -->
    <section class="main" v-show="todos.length">
      <input class="toggle-all"
        type="checkbox"
        v-bind:checked="allChecked" 
        v-on:change="toggleAll({ done: !allChecked })">
       <!-- loop through currenly filtered todos and pass todo object as prop -->
      <ul class="todo-list">
        <todo v-for="todo in filteredTodos" :todo="todo"></todo>
      </ul>
    </section>
  
    <!-- footer -->
    <footer class="footer" v-show="todos.length">
      <span class="todo-count">
          <!-- plularizing filter using pipe {{remaining becomes first argument}} -->
        <strong>{{ remaining }}</strong>
        {{ remaining | pluralize('item') }} left
      </span>
      <ul class="filters">
        <li v-for="(val, key) in filters">
       <!-- looping over key and vals from filters obj / creating  -->
       <!-- on click set visibility to filter name  -->
       <!-- v-bind class, setting "selected" class to true if selected-->
          <a v-bind:href="'#/' + key"
            v-bind:class="{ selected: visibility === key }"
            v-on:click="visibility = key">{{ key | capitalize }}</a>
        </li>
      </ul>
   <!-- v-show if number of todos is greater than those not selected-->
          <!-- on click run mutation that filters out all done-->

      <button class="clear-completed"
        v-show="todos.length > remaining"
        @click="clearCompleted">
        Clear completed
      </button>
    </footer>
  </section>
</template>

////////////SCRIPT

<script>
import {reduxStore} from '../store/reduxstore'
import { mapMutations } from 'vuex'
import Todo from './todo.vue'
import { bindActionCreators } from 'redux';
import * as actionCreators from '../store/reduxactions'
import 'todomvc-app-css/index.css'


const filters = {
  all: todos => todos,
  active: todos => todos.filter(todo => !todo.done),
  completed: todos => todos.filter(todo => todo.done)
}

export default {
  components: { Todo },
  name: "Todo-List",
  data () {
    return {
      // reduxStore,
      // reduxActions: bindActionCreators(actionCreators, reduxStore.dispatch),
      // reduxActions: actionCreators,
      visibility: 'all',
      filters: filters,

      // todos: this.$select('todos.todos as todos')
    }
  },
  computed: {
    todos () {
      console.log("THIS from within App.vue", this)
      console.log("Action Creators", actionCreators)
      // console.log("REDUX TODOS", this.$select('todos'))
      console.log("Vue.$store.state.redux: ", this.$store.state.redux)
      // REDUX : COMPUTE NEW TODO ITEMS  // Won't be reactive in this case
      // return this.$select('todos.todos as todos')
     
      // VUEX GLOBAL: COMPUTE NEW TODO ITEMS
      // return this.$store.state.todos
      // VUEX REDUX MODULE: SHOW TODO FROM REDUX MODULE
      return this.$store.state.redux.todos
    },
    allChecked () {
      return this.todos.every(todo => todo.done)
    },
    filteredTodos () {
      return filters[this.visibility](this.todos)
    },
    remaining () {
      return this.todos.filter(todo => !todo.done).length
    }
  },
  methods: {
    addTodo (e) {
      var text = e.target.value
      if (text.trim()) {
        // VUEX: adding todos
        // this.$store.commit('addTodo', { text })
       
       // REDUX : adding todos
       // the arguments resolves to a function definition that dispatches two events
       // uses THUNK middleware for async
        // this.$store.dispatch(this.$store._actions.addTodo[0](text))
        // this.reduxStore.dispatch(this.reduxActions.addTodo(text));
        console.log("1. addTodo method fired")
        this.$store.commit(this.$root.reduxActions.addTodo(text))
      }
      e.target.value = ''
    },

    // map mutations  this.$store.commit('toggleAll') to this.toggleAll
    ...mapMutations({
      toggleAll: 'COMPLETE_ALL',
      clearCompleted: 'CLEAR_COMPLETED'
    })
  },
  filters: {
    pluralize: (n, w) => n === 1 ? w : (w + 's'),
    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
  }
}


</script>

////////////STYLING
<style src="todomvc-app-css/index.css"></style>
<style>
  body{
    background-color: #42B983 !important;
  }
  #header {
    /*display: inline;*/
    text-align: center;
    font-size: 3em;
  }
</style>
{'fraction_non_alphanumeric': 0.16182572614107885, 'fraction_numerical': 0.0031614305473226635, 'mean_word_length': 2.377711044377711, 'pattern_counts': {'":': 0, '<': 103, '<?xml version=': 0, '>': 123, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3290930', 'n_tokens_mistral': 3269, 'n_tokens_neox': 3209, 'n_words': 797}