[ Home ]
back

bolt.new 生成 TODOアプリ、サーバー保存等 修正 shadcnUI + React

id: 174, 2024-10-15

概要:

生成AI的な、bolt.new使用して。TODOアプリ作成後、機能追加等のメモになります。

  • データ(配列データ)、サーバー保存の追加になります。

[ 公開日: 2024/10/14 ]

構成

  • bolt.new
  • shadcn/ui
  • Express.js
  • esbuild
  • typescript

関連

https://bolt.new/

作成したコード

https://github.com/kuc-arc-f/bolt_4example/tree/main/todo_2

dev-start

bun run build
bun run dev


....
create: function(body: any){
  try {
    if(!body){
      throw new Error("nothing, body");
    }
console.log(body);
    const now = new Date();
    const myUUID = uuidv4();
    let row = {
      id: myUUID,
      text: body.text,
      completed: false,
      createdAt: now.toISOString(),
    }
    this.items.push(row);
    return this.items;
  } catch (error) {
    console.error(error);
    throw new Error("error, create");
  }
},

....

return (
  <>
    <Card className="w-[350px] mx-auto">
      <CardHeader>
        <CardTitle>TODOアプリ</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex space-x-2 mb-4">
          <Input
            placeholder="タスクを検索..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="flex-grow"
          />
          <Button onClick={() => openDialog()}>新しいタスク</Button>
        </div>
        <ScrollArea className="h-[300px]">
          {filteredTodos.map(todo => (
            <div key={todo.id} className="flex items-center space-x-2 mb-2">
              <Checkbox
                checked={todo.completed}
                onCheckedChange={() => toggleTodo(todo.id)}
              />
              <span className={`flex-grow text-left ${todo.completed ? "line-through" : ""}`}>{todo.text}</span>
              <Button variant="ghost" size="icon" onClick={() => openDialog(todo)}>
                <Edit className="h-4 w-4" />
              </Button>
              <Button variant="ghost" size="icon" onClick={() => {
                if (window.confirm("Delete OK?")) {
                  deleteTodo(todo.id);
                }
              }}>
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          ))}
        </ScrollArea>
      </CardContent>
    </Card>

    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{currentTodo ? "タスクを編集" : "新しいタスク"}</DialogTitle>
        </DialogHeader>
        <Input
          value={todoText}
          onChange={(e) => setTodoText(e.target.value)}
          placeholder="タスクを入力..."
        />
        <DialogFooter>
          <Button onClick={saveTodo}>保存</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </>
);