lesson-5_ノートの編集・削除機能を完成させよう

🖋 フロントエンドからノートを編集・削除しよう

前回のレッスンに引き続き、routes/notes/index.tsxのNotesコンポーネントを更新していきましょう。

updateNote関数内でログ出力をしているconsole.log('update note');の部分を下記のように更新します。

const updateNote = async () => {
  if (auth.status !== "SYNCED") {
    console.error(`CryptoService is not synced.`);
    return;
  }

  setIsLoading(true);

  try {
    // バックエンドキャニスターにノートを追加します。
    await auth.actor.updateNote(currentNote);
    await getNotes();
  } catch (err) {
    showMessage({
      title: "Failed to update note",
      status: "error",
    });
  } finally {
    onCloseNoteModal();
    setIsLoading(false);
  }
};

updateNote関数は、前回のレッスンで定義したaddNote関数と仕組みが一緒なので、説明は省略します。

続いて、deleteNote関数内でログ出力をしているconsole.log('delete note');の部分を下記のように更新します。

const deleteNote = async () => {
  if (auth.status !== "SYNCED") {
    console.error(`CryptoService is not synced.`);
    return;
  }

  setIsLoading(true);

  try {
    // ノートを削除します。
    await auth.actor.deleteNote(deleteId);
    await getNotes();
  } catch (err) {
    showMessage({
      title: "Failed to delete note",
      status: "error",
    });
  } finally {
    onCloseDeleteDialog();
    setIsLoading(false);
  }
};

各ノートには、一意なIDが割り当てられています。このID(deleteId)を用いて、バックエンドキャニスターのdeleteNote関数を呼び出します。deleteIdは、useStateで定義されたステート変数です。setDeleteId関数を辿って、どのタイミングでdeleteIdが更新されるか確認してみましょう。

const [deleteId, setDeleteId] = useState<bigint | undefined>(undefined);

✅ 動作確認をしよう

まずは、ノートを編集してみましょう。編集アイコンをクリックすると、モーダルが開きます。

テキストを編集して「Save」ボタンをクリックします。

ノートが編集されていることを確認しましょう。

同様の流れで、今度はノートを削除してみましょう。削除アイコンをクリックします。

確認のダイアログが表示されるので、「Delete」ボタンをクリックします。

ノートが削除されたら実装は完成です！

📝 このレッスンで追加したコード

• src/routes/notes/index.tsx

export const Notes = () => {

  ...

  const deleteNote = async () => {
    if (auth.status !== 'SYNCED') {
      console.error(`CryptoService is not synced.`);
      return;
    }

    setIsLoading(true);

    try {
      // ノートを削除します。
-      console.log('delete note');
+      await auth.actor.deleteNote(deleteId);
+      await getNotes();
    } catch (err) {
      showMessage({
        title: 'Failed to delete note',
        status: 'error',
      });
    } finally {
      onCloseDeleteDialog();
      setIsLoading(false);
    }
  };

  ...

  const updateNote = async () => {
    if (auth.status !== 'SYNCED') {
      console.error(`CryptoService is not synced.`);
      return;
    }

    setIsLoading(true);

    try {
      // バックエンドキャニスターにノートを追加します。
-      console.log('update note');
+      await auth.actor.updateNote(currentNote);
+      await getNotes();
    } catch (err) {
      showMessage({
        title: 'Failed to update note',
        status: 'error',
      });
    } finally {
      onCloseNoteModal();
      setIsLoading(false);
    }
  };

...

🙋‍♂️ 質問する

ここまでの作業で何かわからないことがある場合は、Discordの#icpで質問をしてください。

ヘルプをするときのフローが円滑になるので、エラーレポートには下記の4点を記載してください ✨

1. 質問が関連しているセクション番号とレッスン番号
2. 何をしようとしていたか
3. エラー文をコピー&ペースト
4. エラー画面のスクリーンショット

---

次のセクションに進み、ノートを暗号化する方法について考えましょう 🎉