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