From 4ebaffe38c4d0cef20055e9a60ca476ff8b5180f Mon Sep 17 00:00:00 2001
From: Ben Richter <bri@move-elevator.de>
Date: Wed, 11 Apr 2018 16:26:43 +0200
Subject: [PATCH] Rename to recommended pattern, no single-name

---
 .../ListView/{Todo.vue => TodoItem.vue}       |  1 -
 .../{TodoCreate.vue => TodoItemAdd.vue}       |  2 +-
 src/components/ListView/_ListView.vue         | 24 +++++++++++++------
 3 files changed, 18 insertions(+), 9 deletions(-)
 rename src/components/ListView/{Todo.vue => TodoItem.vue} (99%)
 rename src/components/ListView/{TodoCreate.vue => TodoItemAdd.vue} (97%)

diff --git a/src/components/ListView/Todo.vue b/src/components/ListView/TodoItem.vue
similarity index 99%
rename from src/components/ListView/Todo.vue
rename to src/components/ListView/TodoItem.vue
index 8c98aba..597fa97 100644
--- a/src/components/ListView/Todo.vue
+++ b/src/components/ListView/TodoItem.vue
@@ -2,7 +2,6 @@
   <div class="ui fluid card" :class="{ 'green' :todo.done }">
     <!-- yoda, ternary: :class="todo.done ? 'green' : 'red'"  -->
 
-
     <!--View Mode-->
     <div class="content" v-show="!isEditing">
       <div class="header">
diff --git a/src/components/ListView/TodoCreate.vue b/src/components/ListView/TodoItemAdd.vue
similarity index 97%
rename from src/components/ListView/TodoCreate.vue
rename to src/components/ListView/TodoItemAdd.vue
index db7d0de..0180b92 100644
--- a/src/components/ListView/TodoCreate.vue
+++ b/src/components/ListView/TodoItemAdd.vue
@@ -78,7 +78,7 @@
 
     // no arrow functions! needs this context to vue instance
     created: function () {
-      console.log('TodoCreate.vue component was created')
+      console.log('TodoItemAdd.vue component was created')
     },
   }
 </script>
diff --git a/src/components/ListView/_ListView.vue b/src/components/ListView/_ListView.vue
index d943917..ea82734 100644
--- a/src/components/ListView/_ListView.vue
+++ b/src/components/ListView/_ListView.vue
@@ -17,20 +17,20 @@
     </div>
 
     <!-- v-for over array with key, v-bind todo -->
-    <todo v-for="(todo, index) in todos" :key="index"
+    <todo-item v-for="(todo, index) in todos" :key="index"
           @delete-todo="deleteTodo"
           @complete-todo="completeTodo"
-          :todo.sync="todo" />
+          :todo="todo" />
 
     <!-- v-on emitted events -->
-    <create-todo @create-todo="createTodo"></create-todo>
+    <todo-item-add @create-todo="createTodo"></todo-item-add>
   </div>
 </template>
 
 <script type="text/javascript">
   import sweetalert from 'sweetalert'
-  import Todo from './Todo.vue'
-  import CreateTodo from './TodoCreate.vue'
+  import TodoItem from './TodoItem.vue'
+  import TodoItemAdd from './TodoItemAdd.vue'
   import { mapState, mapMutations } from 'vuex'
 
   // Todo: use absolute path src/ as root https://github.com/parcel-bundler/parcel/pull/850
@@ -39,11 +39,21 @@
   export default {
     name: 'ListView',
     components: {
-      Todo,
-      CreateTodo,
+      TodoItem,
+      TodoItemAdd,
       TheHeader,
     },
 
+    props: {
+      status: {
+        type: String,
+        required: true,
+        validator: function (value) {
+          return ['syncing', 'error'].indexOf(value) !== -1
+        },
+      },
+    },
+
     /** Moved to store.js -> computed **/
     // data() {
     //   return {