From 4bb6e1e1f7746bb292d720d9046b37fca6b26bb9 Mon Sep 17 00:00:00 2001
From: sushichan044 <mail@sushichan.live>
Date: Mon, 10 Mar 2025 15:11:26 +0900
Subject: [PATCH] =?UTF-8?q?docs:=20=E5=9E=8B=E7=9A=84=E3=81=AB=E3=81=AF?=
 =?UTF-8?q?=E5=BF=85=E8=A6=81=E3=81=AA=E3=81=84=E5=88=86=E5=B2=90=E3=81=8C?=
 =?UTF-8?q?=E5=85=A5=E3=81=A3=E3=81=A6=E3=81=84=E3=82=8B=E7=90=86=E7=94=B1?=
 =?UTF-8?q?=E3=82=92=E6=9B=B8=E3=81=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/note/Note.tsx | 53 ++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/app/components/note/Note.tsx b/app/components/note/Note.tsx
index 16ae684..c29ff79 100644
--- a/app/components/note/Note.tsx
+++ b/app/components/note/Note.tsx
@@ -61,30 +61,35 @@ export const Note = ({ note }: NoteProps) => {
           </div>
         </Stack>
         <Post post={note.post} />
-        {isNonEmptyString(note.postId) && (
-          <Group justify="flex-end">
-            <Button
-              color="pink"
-              component="a"
-              href={postLinkFromPostId(note.postId)}
-              size="xs"
-              target="_blank"
-              variant="light"
-            >
-              ポストを見る
-            </Button>
-            <Button
-              color="pink"
-              component="a"
-              href={birdWatchLinkFromPostId(note.postId)}
-              size="xs"
-              target="_blank"
-              variant="light"
-            >
-              このポストについたノートを見る
-            </Button>
-          </Group>
-        )}
+        {
+          // ref: https://github.com/codeforjapan/BirdXplorer_Viewer/pull/32#discussion_r1978997326
+          // API 側で Post 情報を非同期に取得する仕様変更が予定されているが、誤って postId が null になってしまう場合がありえるので
+          // 予防的に分岐を入れている。Note.postId の存在が保証されている場合は分岐を削除して良い。
+          isNonEmptyString(note.postId) && (
+            <Group justify="flex-end">
+              <Button
+                color="pink"
+                component="a"
+                href={postLinkFromPostId(note.postId)}
+                size="xs"
+                target="_blank"
+                variant="light"
+              >
+                ポストを見る
+              </Button>
+              <Button
+                color="pink"
+                component="a"
+                href={birdWatchLinkFromPostId(note.postId)}
+                size="xs"
+                target="_blank"
+                variant="light"
+              >
+                このポストについたノートを見る
+              </Button>
+            </Group>
+          )
+        }
       </Stack>
     </Card>
   );