From a31c432f5e2f3e2db18e68b5619baee40cd5de1b Mon Sep 17 00:00:00 2001
From: Alexey Pavlenko <alexey.pavlenko@idealscorp.com>
Date: Tue, 19 May 2020 18:58:38 +0300
Subject: [PATCH] add list item as separate element

---
 src/client.imba    |  8 ++------
 src/item-list.imba | 11 +++++++++++
 2 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 src/item-list.imba

diff --git a/src/client.imba b/src/client.imba
index f02e1cb..11b8db8 100644
--- a/src/client.imba
+++ b/src/client.imba
@@ -1,4 +1,5 @@
 import {vbox, completed} from './styles/index.css'
+import { List } from './item-list'
 
 var store = {
 	title: ""
@@ -15,16 +16,11 @@ tag App
 		data:items.push(title: data:title)
 		data:title = ""
 
-	def completeItem item
-		console.log "clicked,{item:completed}"
-		item:completed = !item:completed
-		
 	def render
 		<self.{vbox}>
 			<header>
 				<input[data:title] placeholder="New..." :keyup.enter.addItem>
 				<button :tap.addItem> 'Add item'
-			<ul> for item in data:items
-				<li .{item:completed and completed} :tap.completeItem(item)> item:title
+			<List list=data:items>
 
 Imba.mount <App[store]>
diff --git a/src/item-list.imba b/src/item-list.imba
new file mode 100644
index 0000000..aec7c98
--- /dev/null
+++ b/src/item-list.imba
@@ -0,0 +1,11 @@
+export tag List
+	prop list
+
+       def completeItem item
+               console.log "clicked,{item:completed}"
+               item:completed = !item:completed
+
+	def render
+		<self>
+			<ul> for item in list
+					<li .{item:completed} :tap.completeItem(item)> item:title