bolt.new 生成 bookmark編集、サーバー保存等 修正 shadcnUI + React

概要:

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

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

[ 公開日: 2024/10/14 ]

---

構成

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

---

関連

https://bolt.new/

---

作成したコード

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

---

dev-start

bun run build
bun run dev

---

• APIエンドポイントに、POST通信
• bookmark2/src/routes/bookmarkData.ts
• https://github.com/kuc-arc-f/bolt_4example/blob/main/bookmark2/src/routes/bookmarkData.ts

---

....
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,
      title: body.title,
      url: body.url,
      createdAt: now.toISOString(),
    }
    this.items.push(row);
    return this.items;
  } catch (error) {
    console.error(error);
    throw new Error("error, create");
  }
},

---

• TOP画面
• bookmark2/src/App.tsx
• https://github.com/kuc-arc-f/bolt_4example/blob/main/bookmark2/src/App.tsx

....
return (
  <div className="container mx-auto p-4">
    <h1 className="text-3xl font-bold mb-6">Bookmark App</h1>
    <Card className="mb-6">
      <CardHeader>
        <CardTitle>{editingId !== null ? "Edit Bookmark" : "Add New Bookmark"}</CardTitle>
        <CardDescription>Enter the details of the bookmark you want to save.</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid w-full items-center gap-4">
          <div className="flex flex-col space-y-1.5">
            <Input
              placeholder="Title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>
          <div className="flex flex-col space-y-1.5">
            <Input
              placeholder="URL"
              value={url}
              onChange={(e) => setUrl(e.target.value)}
            />
          </div>
        </div>
      </CardContent>
      <CardFooter>
        <Button onClick={addBookmark}>
          {editingId !== null ? (
            <>
              <Pencil className="mr-2 h-4 w-4" /> Update Bookmark
            </>
          ) : (
            <>
              <BookmarkPlus className="mr-2 h-4 w-4" /> Add Bookmark
            </>
          )}
        </Button>
      </CardFooter>
    </Card>
    <div className="mb-6">
      <Input
        placeholder="Search bookmarks..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        className="max-w-sm"
        icon={<Search className="h-4 w-4" />}
      />
    </div>
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {filteredBookmarks.map((bookmark) => (
        <Card key={bookmark.id}>
          <CardHeader>
            <CardTitle>{bookmark.title}</CardTitle>
          </CardHeader>
          <CardContent>
            <a href={bookmark.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
              {bookmark.url}
            </a>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="outline" size="icon" onClick={() => editBookmark(bookmark.id)}>
              <Pencil className="h-4 w-4" />
            </Button>
            <Button variant="destructive" size="icon" onClick={() => {
              if (window.confirm("Delete OK?")) {
                  deleteBookmark(bookmark.id);
              }
            }}>
              <Trash2 className="h-4 w-4" />
            </Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  </div>
);