expo template

template/apps/<@if(eq(context.project.mobile,"expo"))>/src/app/index.tsx

@@ -0,0 +1,73 @@
+import { createRouter, Todo } from "@<@var(context.project.name)>/rpc"
+import { useEffect, useState } from "react"
+import { ScrollView, Button, Checkbox, Host, Column, TextInput, Text, useNativeState, Row, Icon } from "@expo/ui";
+import * as Crypto from "expo-crypto"
+import { colorInvert, controlSize } from "@expo/ui/swift-ui/modifiers";
+import { fillMaxWidth, padding, width } from "@expo/ui/jetpack-compose/modifiers";
+export default function Index() {
+  const router = createRouter("http://10.0.2.2:8080")
+  const [todos, setTodos] = useState<Array<Todo>>([])
+  const todoToCreateTask = useNativeState<string>("")
+  const fetchTodos = () => {
+    router.todos.listTodos({}).then((r) => {
+      setTodos(r.todos)
+    })
+  }
+  useEffect(() => {
+    fetchTodos();
+  })
+
+  const setTodoDone = (id: string, task: string) => {
+    return (done: boolean) => {
+      router.todos.updateTodo({ todo: { id, task, done } })
+      fetchTodos()
+    }
+  }
+
+  const deleteTodo = (id: string) => {
+    return () => {
+      router.todos.deleteTodo({ todo: { id } })
+      fetchTodos()
+    }
+  }
+
+  const createTodo = () => {
+    router.todos.createTodo({ todo: { id: Crypto.randomUUID(), task: todoToCreateTask.value } }).then((r) => {
+      console.log(r)
+      fetchTodos()
+    }).catch((e) => {
+      console.log(e)
+    })
+  }
+
+  const updateTodoToCreateTask = (task: string) => {
+    todoToCreateTask.value = task
+  }
+
+  return (
+    <Host style={{ flex: 1 }}>
+      <Column alignment="center" modifiers={[fillMaxWidth()]}>
+        <Text> create todo </Text>
+        <TextInput value={todoToCreateTask} onChangeText={updateTodoToCreateTask} />
+        <Button modifiers={[controlSize('regular')]} label="create Todo" onPress={createTodo} />
+        <ScrollView modifiers={[fillMaxWidth()]}>
+          {
+            todos.map((todo) => (
+              <Row alignment="center" modifiers={[fillMaxWidth(),padding(20,0,20,0)]}>
+                <Column alignment="start" modifiers={[width(200)]}>
+                    <Text> {todo.task} </Text>
+                </Column>
+                <Column alignment="center">
+                    <Checkbox value={todo.done || false} onValueChange={setTodoDone(todo.id || "", todo.task)} />
+                </Column>
+                <Column alignment="end" modifiers={[fillMaxWidth()]}>
+                  <Button modifiers={[controlSize('regular')]} label="delete" onPress={deleteTodo(todo.id || "")}/>
+                </Column>
+              </Row>
+            ))
+          }
+        </ScrollView>
+      </Column>
+    </Host>
+  )
+}