74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
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>
|
|
)
|
|
}
|