fix: change todoIdBeingEdited to TodoList.vue

Author: r-toki

src/components/EditTodoForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="handleSubmitEditedTodo(todoBeingEdited)">
+  <form @submit.prevent="handleSubmitEditedTodoAndReset(todoBeingEdited)">
     <input
       ref="input"
       type="text"
@@ -16,16 +16,16 @@ import { defineComponent, PropType, Ref, ref, onMounted } from "vue";
 import type Todo from "@/models/todo";
 
 export type HandleCancelEdit = () => void;
-export type HandleSubmitEditedTodo = (editedTodo: Todo) => void;
+export type HandleSubmitEditedTodoAndReset = (editedTodo: Todo) => void;
 
 export default defineComponent({
   props: {
     todo: {
       type: Object as PropType<Todo>,
       required: true,
     },
-    handleSubmitEditedTodo: {
-      type: Function as PropType<HandleSubmitEditedTodo>,
+    handleSubmitEditedTodoAndReset: {
+      type: Function as PropType<HandleSubmitEditedTodoAndReset>,
       required: true,
     },
     handleCancelEdit: {

src/components/TodoList.vue

@@ -11,15 +11,15 @@
       <EditTodoForm
         v-else
         :todo="todo"
-        :handle-submit-edited-todo="handleSubmitEditedTodo"
+        :handle-submit-edited-todo-and-reset="handleSubmitEditedTodoAndReset"
         :handle-cancel-edit="handleCancelEdit"
       />
     </div>
   </ul>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, PropType, reactive } from "vue";
 import Todo from "@/models/todo";
 import TodoItem from "@/components/TodoItem.vue";
 import EditTodoForm from "@/components/EditTodoForm.vue";
@@ -30,48 +30,64 @@ import type {
   HandleClickRemove,
 } from "@/components/TodoItem.vue";
 import type {
+  HandleSubmitEditedTodoAndReset,
   HandleCancelEdit,
-  HandleSubmitEditedTodo,
 } from "@/components/EditTodoForm.vue";
 
+export type HandleSubmitEditedTodo = (editedTodo: Todo) => void;
+
+type State = {
+  todoIdBeingEdited: string | null;
+};
+
 export default defineComponent({
   components: { TodoItem, EditTodoForm },
 
   props: {
     todos: {
       type: Array as PropType<ReadonlyArray<Todo>>,
-      required: true
-    },
-    todoIdBeingEdited: {
-      type: String as PropType<string | null>,
-      default: undefined
+      required: true,
     },
     handleToggleCompleted: {
       type: Function as PropType<HandleToggleCompleted>,
-      required: true
-    },
-    handleClickEdit: {
-      type: Function as PropType<HandleClickEdit>,
-      required: true
+      required: true,
     },
     handleClickRemove: {
       type: Function as PropType<HandleClickRemove>,
-      required: true
+      required: true,
     },
     handleSubmitEditedTodo: {
       type: Function as PropType<HandleSubmitEditedTodo>,
-      required: true
+      required: true,
     },
-    handleCancelEdit: {
-      type: Function as PropType<HandleCancelEdit>,
-      required: true
-    }
   },
 
   setup(props) {
+    const state = reactive<State>({
+      todoIdBeingEdited: null,
+    });
     const isTodoBeingEdited = (todo: Todo) =>
-      todo.id === props.todoIdBeingEdited;
-    return { isTodoBeingEdited };
-  }
+      todo.id === state.todoIdBeingEdited;
+
+    const handleSubmitEditedTodoAndReset: HandleSubmitEditedTodoAndReset = (
+      editedTodo
+    ) => {
+      props.handleSubmitEditedTodo(editedTodo);
+      state.todoIdBeingEdited = null;
+    };
+    const handleClickEdit: HandleClickEdit = (todo) => {
+      state.todoIdBeingEdited = todo.id;
+    };
+    const handleCancelEdit: HandleCancelEdit = () => {
+      state.todoIdBeingEdited = null;
+    };
+
+    return {
+      isTodoBeingEdited,
+      handleSubmitEditedTodoAndReset,
+      handleClickEdit,
+      handleCancelEdit,
+    };
+  },
 });
 </script>

src/pages/Index.vue

@@ -7,83 +7,64 @@
     />
     <TodoList
       :todos="todos"
-      :todo-id-being-edited="todoIdBeingEdited"
       :handle-toggle-completed="handleToggleCompleted"
-      :handle-click-edit="handleClickEdit"
       :handle-click-remove="handleClickRemove"
       :handle-submit-edited-todo="handleSubmitEditedTodo"
-      :handle-cancel-edit="handleCancelEdit"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, Ref, ref } from "vue";
+import { defineComponent, reactive } from "vue";
 import CreateTodoForm from "@/components/CreateTodoForm.vue";
 import TodoList from "@/components/TodoList.vue";
 import useTodos from "@/composables/use-todos";
 
 import type { HandleSubmitNewTodo } from "@/components/CreateTodoForm.vue";
+import type { HandleSubmitEditedTodo } from "@/components/TodoList.vue";
 import type {
   HandleToggleCompleted,
-  HandleClickEdit,
   HandleClickRemove,
 } from "@/components/TodoItem.vue";
-import type {
-  HandleCancelEdit,
-  HandleSubmitEditedTodo,
-} from "@/components/EditTodoForm.vue";
 
 type State = {
-  newTodoTitle: string,
-}
+  newTodoTitle: string;
+};
 
 export default defineComponent({
   components: { CreateTodoForm, TodoList },
 
   setup() {
-    const { todos, createTodo, updateTodo, removeTodo } = useTodos();
     const state = reactive<State>({
-      newTodoTitle: ''
-    })
+      newTodoTitle: "",
+    });
+
+    const { todos, createTodo, updateTodo, removeTodo } = useTodos();
 
     const handleSubmitNewTodo: HandleSubmitNewTodo = () => {
       createTodo({ title: state.newTodoTitle, completed: false });
       state.newTodoTitle = "";
     };
-
-    const todoIdBeingEdited: Ref<string | null> = ref(null);
     const handleToggleCompleted: HandleToggleCompleted = (todo) => {
       const { id, title, completed } = todo;
       updateTodo({ id, title, completed: !completed });
     };
-    const handleClickEdit: HandleClickEdit = (todo) => {
-      todoIdBeingEdited.value = todo.id;
-    };
     const handleClickRemove: HandleClickRemove = (todo) => {
       const { id } = todo;
       removeTodo({ id });
     };
     const handleSubmitEditedTodo: HandleSubmitEditedTodo = (editedTodo) => {
       const { id, title, completed } = editedTodo;
       updateTodo({ id, title, completed });
-      todoIdBeingEdited.value = null;
-    };
-    const handleCancelEdit: HandleCancelEdit = () => {
-      todoIdBeingEdited.value = null;
     };
 
     return {
       state,
-      handleSubmitNewTodo,
-
       todos,
-      todoIdBeingEdited,
+      handleSubmitNewTodo,
       handleToggleCompleted,
-      handleClickEdit,
       handleClickRemove,
       handleSubmitEditedTodo,
-      handleCancelEdit,
     };
   },
 });