Skip to content

Commit 9be2fbc

Browse files
committed
fix(post): update error handling and improve layout in PostComponent
- Handled review comments - Changed error handling to set comments state correctly on failure. - Enhanced layout by introducing Stack components for better spacing and readability. - Updated paragraph elements for post body and comments for consistency. Resolves: no-ticket Signed-off-by: [Balint Lendvai] <lendvai.balint@gmail.com>
1 parent 5b578f7 commit 9be2fbc

File tree

1 file changed

+25
-21
lines changed

1 file changed

+25
-21
lines changed

src/pages/welcome/post/PostComponent.jsx

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { getComments, getPost } from '../../../api/message.js';
2-
import { Heading, Layer, Section, Tile } from '@carbon/react';
2+
import { Heading, Section, Tile, Stack, Layer } from '@carbon/react';
33
import { useEffect, useState } from 'react';
44

55
const PostComponent = () => {
@@ -20,7 +20,7 @@ const PostComponent = () => {
2020
const comments = await getComments(1);
2121
setComments(comments);
2222
} catch {
23-
setPost('Failed to load comments');
23+
setComments('Failed to load comments');
2424
}
2525
};
2626

@@ -33,28 +33,32 @@ const PostComponent = () => {
3333
<Section as="article" level={3}>
3434
<Heading>Posts</Heading>
3535
<Tile>
36-
<Section as="article" level={3}>
37-
<Section level={4}>
38-
<Heading>{post?.title ?? 'Loading...'}</Heading>
39-
<div>{post?.body}</div>
36+
<Stack gap={6}>
37+
<Section as="article" level={3}>
38+
<Section level={4}>
39+
<Heading>{post?.title ?? 'Loading...'}</Heading>
40+
<p>{post?.body}</p>
41+
</Section>
4042
</Section>
41-
</Section>
4243

43-
<Section as="article" level={3}>
44-
<Heading>Comments</Heading>
45-
<Section as="article" level={4}>
46-
<Layer level={1}>
47-
<Tile>
48-
{comments?.map((comment) => (
49-
<Tile title={`Post from ${comment.email}`} key={comment.id}>
50-
<Heading>{`From ${comment.email}`}</Heading>
51-
<div>{comment.body}</div>
52-
</Tile>
53-
))}
54-
</Tile>
55-
</Layer>
44+
<Section as="article" level={5}>
45+
<Stack gap={3}>
46+
<Heading>Comments</Heading>
47+
<Section as="article" level={6}>
48+
<Stack gap={3}>
49+
{comments?.map((comment) => (
50+
<Layer level={1} key={comment.id}>
51+
<Tile title={`Post from ${comment.email}`}>
52+
<Heading>{`From ${comment.email}`}</Heading>
53+
<p>{comment.body}</p>
54+
</Tile>
55+
</Layer>
56+
))}
57+
</Stack>
58+
</Section>
59+
</Stack>
5660
</Section>
57-
</Section>
61+
</Stack>
5862
</Tile>
5963
</Section>
6064
);

0 commit comments

Comments
 (0)