Add counter example

Author: vadimkorr

src/App.svelte

@@ -1,19 +1,23 @@
 <script>
+	import { onMount } from 'svelte'
 	import { v4 as uuid } from 'uuid'
 	import AddTodoItem from './AddTodoItem.svelte'
 	import TodoItem from './TodoItem.svelte'
+	import getTodos from './getTodos'
+	import { onInterval }  from './interval'
 
-	let items = [{
-			id: uuid(),
-			text: 'First Item',
-			done: false,
-		}, {
-			id: uuid(),
-			text: 'Second Item',
-			checked: true,
-		}]
+	let items = []
+	let counter = 0
 	$: count = items.length;
 	$: checkedCount = items.filter(({ checked }) => checked).length
+
+	onInterval(() => {
+		counter++
+	}, 1000)
+
+	onMount(async () => {
+		items = await getTodos()
+	})
 	
 	function handleAddTodoItem(event) {
     items = [...items, {
@@ -34,6 +38,7 @@
 	}
 </script>
 
+<p>{counter}</p>
 <AddTodoItem
 	title='Please type todo here:'
 	buttonTitle={`Add (${checkedCount}/${count})`}

src/interval.js

@@ -0,0 +1,8 @@
+import { onDestroy } from 'svelte'
+
+export function onInterval(cb, ms) {
+  const interval = setInterval(cb, ms)
+  onDestroy(() => {
+    clearInterval(interval)
+  })
+}