Dia 3

Author: paulmelero

04-frameworks/03-vue/Dia_3/src/components/HelloWorld/HelloWorld.spec.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import HelloWorld from './HelloWorld.vue'
+
+describe('HelloWorld', () => {
+  it('should render', () => {
+    const wrapper = mount(HelloWorld, {
+      props: {
+        msg: 'Hello World',
+      },
+    })
+
+    expect(wrapper.html()).toContain('<h1>Hello World</h1>')
+  })
+
+  it('emits the salute event', () => {
+    const wrapper = mount(HelloWorld, {
+      props: {
+        msg: 'Hello World',
+      },
+    })
+
+    const button = wrapper.find('button')
+    button.trigger('click')
+
+    const emittedEvents = wrapper.emitted()
+
+    expect(emittedEvents.salute[0]).toEqual(['hiiiiii'])
+  })
+})

04-frameworks/03-vue/Dia_3/src/components/HelloWorld/HelloWorld.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1>{{ msg }}</h1>
+    <h2 v-if="subtitle">{{ subtitle }}</h2>
+    <button @click="emit('salute', 'hiiiiii')">Click me</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  msg: string
+  subtitle?: string
+}>()
+
+const emit = defineEmits<{
+  salute: [salutation: string]
+}>()
+</script>

04-frameworks/03-vue/Dia_3/src/components/ToDoList/ToDoList.spec.ts

@@ -0,0 +1,21 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import ToDoList from './ToDoList.vue'
+import { createPinia, setActivePinia } from 'pinia'
+
+describe('ToDoList', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('should render', () => {
+    const wrapper = mount(ToDoList)
+
+    const label = wrapper.find('label')
+
+    console.log(label)
+
+    expect(label.text()).toMatchInlineSnapshot(`"Show only pending"`)
+  })
+})

04-frameworks/03-vue/Dia_3/src/components/ToDoList.vue renamed to 04-frameworks/03-vue/Dia_3/src/components/ToDoList/ToDoList.vue

@@ -1,25 +1,44 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useTodosStore } from '../stores/todos'
+import { ref, onMounted } from 'vue'
+import { useTodosStore } from '../../stores/todos'
 
 const todosStore = useTodosStore()
 
-onMounted(() => {
-  todosStore.loadTodos()
-})
-
 const onChange = (timestamp: number) => {
   todosStore.toggleCompleted(timestamp)
 }
 
 const onClick = (timestamp: number) => {
   todosStore.removeTodo(timestamp)
 }
+
+const toDosToShow = ref(todosStore.todos)
+
+const showOnlyPendingToDos = (event: Event) => {
+  if ((event.target as HTMLInputElement)?.checked) {
+    toDosToShow.value = todosStore.pendingToDos
+  } else {
+    toDosToShow.value = todosStore.todos
+  }
+}
+
+onMounted(() => {
+  todosStore.loadTodos()
+  toDosToShow.value = todosStore.todos
+})
 </script>
 
 <template>
+  <div v-if="todosStore.total">
+    <p>Completed: {{ todosStore.completed }} / {{ todosStore.total }}</p>
+  </div>
+  <div>
+    <input type="checkbox" id="toggle" @change="showOnlyPendingToDos" />
+    <label for="toggle">Show only pending</label>
+  </div>
+  <hr />
   <ul class="max-w-[500px]">
-    <li v-for="todo in todosStore.todos" :key="todo.timestamp">
+    <li v-for="todo in toDosToShow" :key="todo.timestamp">
       <form @submit.prevent class="flex items-center justify-between">
         <input
           type="checkbox"

04-frameworks/03-vue/Dia_3/src/composables/storage.ts

@@ -0,0 +1,15 @@
+export const useStorage = <T>(storageKey: string) => {
+  const get = () => {
+    const value = localStorage.getItem(storageKey)
+    return value ? (JSON.parse(value) as T) : []
+  }
+
+  const set = (value: T) => {
+    localStorage.setItem(storageKey, JSON.stringify(value))
+  }
+
+  return {
+    get,
+    set,
+  }
+}

04-frameworks/03-vue/Dia_3/src/stores/todos.ts

@@ -1,54 +1,57 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
 
 import type { ToDo } from '../types'
+import { useStorage } from '../composables/storage'
 
 const toDoFactory = (text: string): ToDo => ({
   timestamp: Date.now(),
   text,
   completed: false,
 })
 
-const getTodosFromLocalStorage = (): ToDo[] => {
-  const todos = localStorage.getItem('todos') ? JSON.parse(localStorage.getItem('todos')!) : []
-  return todos
-}
-
-const setTodosToLocalStorage = (todo: ToDo) => {
-  const storedValue = getTodosFromLocalStorage()
-  storedValue.push(todo)
-  localStorage.setItem('todos', JSON.stringify(storedValue))
-}
-
 export const useTodosStore = defineStore('todosStore', () => {
   const todos = ref<ToDo[]>([])
+  const completedToDos = computed(() => todos.value.filter((todo) => todo.completed))
+  const pendingToDos = computed(() => todos.value.filter((todo) => !todo.completed))
+
+  const total = computed(() => todos.value.length)
+  const completed = computed(() => completedToDos.value.length)
+
+  const storage = useStorage<ToDo[]>('todos')
 
   const loadTodos = () => {
-    todos.value = getTodosFromLocalStorage()
+    todos.value = storage.get()
   }
 
   const addTodo = (todo: string) => {
     const newTodo = toDoFactory(todo)
     todos.value.push(newTodo)
-    setTodosToLocalStorage(newTodo)
+    storage.set(todos.value)
   }
 
   const toggleCompleted = (timestamp: number) => {
     const todo = todos.value.find((todo) => todo.timestamp === timestamp)
     if (todo) {
       todo.completed = !todo.completed
     }
+    storage.set(todos.value)
   }
 
   const removeTodo = (timestamp: number) => {
     const index = todos.value.findIndex((todo) => todo.timestamp === timestamp)
     if (index !== -1) {
       todos.value.splice(index, 1)
     }
+    storage.set(todos.value)
   }
 
   return {
     todos,
+    total,
+    completed,
+    completedToDos,
+    pendingToDos,
     loadTodos,
     addTodo,
     toggleCompleted,

04-frameworks/03-vue/Dia_3/src/utils/sum.spec.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest'
+import { sum } from './sum'
+
+describe('sum', () => {
+  it('should add two numbers', () => {
+    expect(sum(1, 2)).toBe(3)
+  })
+
+  it('should add three numbers', () => {
+    const result = sum(1, 2, 3)
+
+    const expected = 6
+
+    expect(result).toBe(expected)
+  })
+})

04-frameworks/03-vue/Dia_3/src/utils/sum.ts

@@ -0,0 +1,2 @@
+export const sum = (...operands: number[]) =>
+  operands.reduce((accumulator, current) => accumulator + current, 0)

04-frameworks/03-vue/Dia_3/src/views/HomeView.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import HelloWorld from '../components/HelloWorld/HelloWorld.vue'
 import ToDoForm from '../components/ToDoForm.vue'
-import TodoList from '../components/TodoList.vue'
+import TodoList from '../components/ToDoList/ToDoList.vue'
 </script>
 
 <template>
   <main class="py-4">
     <ToDoForm />
     <TodoList />
   </main>
+  <footer>
+    <HelloWorld msg="holaaaa" />
+  </footer>
 </template>