Skip to content

Error failed loading #94

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LLstream wants to merge 3 commits into
base: development
Choose a base branch
from
Open

Error failed loading #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c20061a
読み込み失敗したらエラーメッセージを表示するようにした
LLstream Oct 30, 2023
90194b6
最新の状態にしても問題ないか確認
LLstream Oct 30, 2023
c4e5df4
fix: コンフリクトを解消
LLstream Nov 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link
Copy Markdown
Member

@sor4chi sor4chi Nov 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

細かい指摘になってしまいますが、JavaScriptでは変数や関数の命名はlowerCamelCaseで行うような慣習があります。
また、Booleanの変数にはprefixにisやcanなどをつけるような慣習があります。変数を見た時に大体どういうことを想定した変数なのかを判断するために命名を規則づけているんです。

今回だとisLoadFailed / setIsLoadFailedのような命名にするのが良いと思います！

const onSubmitted = (post) => {
setPosts([post, ...posts]);
};
Expand All @@ -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(() => {
Expand Down Expand Up @@ -54,6 +58,7 @@ function App() {
posts={posts}
isLoading={isLoading}
fetchPosts={fetchPosts}
LoadFailed={LoadFailed}
/>
</Container>
</ColorModeProvider>
Expand Down
8 changes: 7 additions & 1 deletion frontend/src/components/Timeline.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
<Box textAlign="center" m={3}>
Expand All @@ -33,6 +33,12 @@ export const Timeline = ({ posts, isLoading, fetchPosts }) => {
{isLoading ? "読み込み中" : "更新する"}
</Button>
</Box>
<Typography textAlign="center"
variant="h6"
sx={{ color: 'error.main' }}
>
{LoadFailed ? "読み込みに失敗しました": ""}
</Typography>
Comment on lines +36 to +41
Copy link
Copy Markdown
Member

@sor4chi sor4chi Nov 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

この表示はいいと思います、確かに失敗した時にエラーメッセージ出るのはいいですよね。
ただ、LoadFailedがfalseの時にから文字列が返されることから、エラーでない場合は空の<Typography>が存在してしまうことになります。

なのでTypography全体を出し分けるようにすると良いと思います。

Suggested change
<Typography textAlign="center"
variant="h6"
sx={{ color: 'error.main' }}
>
{LoadFailed ? "読み込みに失敗しました": ""}
</Typography>
{LoadFailed && (
<Typography textAlign="center"
variant="h6"
sx={{ color: 'error.main' }}
>
読み込みに失敗しました
</Typography>
)}

Copy link
Copy Markdown
Member

@sor4chi sor4chi Nov 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ちなみに&&演算子は、左オペランド（今回だとLoadFailed）がtrueの時に右オペランド(今回だとTypography)を返す、falseの時はfalseを返すという挙動をします
  • Reactではfalseを埋め込むと存在が消されるのでうまく動くというわけです。

ここについてわからなかったら言ってください！

{posts.map((post) => (
<Card key={post.id} sx={{ my: 2 }}>
<CardActionArea>
Expand Down
1 change: 0 additions & 1 deletion scripts/setup.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ go mod tidy
echo "バックエンドのセットアップが完了しました！"

echo "Dockerのセットアップを開始します..."

docker compose down
docker compose build
docker compose up -d
Expand Down