diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 8afa2ab..4f0dc0a 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -10,6 +10,7 @@ import { ToggleTheme } from "./components/theme/ToggleTheme.jsx"; function App() { const [posts, setPosts] = useState([]); const [isLoading, setIsLoading] = useState(false); + const [LoadFailed, setLoadFailed] = useState(false); const onSubmitted = (post) => { setPosts([post, ...posts]); }; @@ -20,10 +21,13 @@ function App() { const data = await res.json(); if (!res.ok) { console.error(data); + setIsLoading(false); + setLoadFailed(true); return; } setPosts(data); setIsLoading(false); + setLoadFailed(false); }; useEffect(() => { @@ -54,6 +58,7 @@ function App() { posts={posts} isLoading={isLoading} fetchPosts={fetchPosts} + LoadFailed={LoadFailed} /> diff --git a/frontend/src/components/Timeline.jsx b/frontend/src/components/Timeline.jsx index 55f0d24..692151b 100644 --- a/frontend/src/components/Timeline.jsx +++ b/frontend/src/components/Timeline.jsx @@ -20,7 +20,7 @@ const formatDateTime = (dateTimeString) => { return new Date(dateTimeString).toLocaleString("ja-JP", options); }; -export const Timeline = ({ posts, isLoading, fetchPosts }) => { +export const Timeline = ({ posts, isLoading, fetchPosts, LoadFailed}) => { return ( <> @@ -33,6 +33,12 @@ export const Timeline = ({ posts, isLoading, fetchPosts }) => { {isLoading ? "読み込み中" : "更新する"} + + {LoadFailed ? "読み込みに失敗しました": ""} + {posts.map((post) => ( diff --git a/scripts/setup.sh b/scripts/setup.sh index 51b11b9..3a7dd9f 100755 --- a/scripts/setup.sh +++ b/scripts/setup.sh @@ -43,7 +43,6 @@ go mod tidy echo "バックエンドのセットアップが完了しました!" echo "Dockerのセットアップを開始します..." - docker compose down docker compose build docker compose up -d