Solution added by DDefty · Pull Request #2034 · mate-academy/react_static-list-of-posts

DDefty · 2025-09-27T11:33:14Z

…lement PostList and CommentList components

mateacademy-ai-mentor

Review Summary

I’m requesting changes because a few core requirements and explicit checklist items are not met, which blocks acceptance.

Critical issues to fix:

App must prepare posts with related data before rendering. In src/App.tsx you pass postsFromServer directly to PostList (see the line with <PostList posts={postsFromServer} />). The requirement says: “prepare posts by adding a user and comments to each post (each comment has a postId)”. Implement a helper like getPostsWithUsersAndComments (or preparePostsWithRelations) that maps posts to include user (matched by userId) and comments (matched by postId), then pass that prepared array to PostList.
Move relation logic out of PostInfo. In src/components/PostInfo/PostInfo.tsx you import commentsFromServer and usersFromServer and compute related data as a fallback. This contradicts the requirement to prepare posts upstream. After preparing in App, PostInfo should rely on post.user and post.comments directly.
Remove unnecessary React fragments around a single root element (checklist item #4). Files to fix: src/components/CommentInfo/CommentInfo.tsx, src/components/CommentList/CommentList.tsx, src/components/PostInfo/PostInfo.tsx, src/components/PostList/PostList.tsx, src/components/UserInfo/UserInfo.tsx. Return the single root element directly without <>...</>.
Use centralized types. In src/components/UserInfo/UserInfo.tsx you declare a local interface User. Replace it by importing Users from src/types/Users and use that in props.

Minor but recommended:

Ensure styles are moved into component-level SCSS (e.g., add import './PostList.scss'; in PostList and move styles from App.scss as required by the task).

Once you prepare posts in App, remove redundant fragments, and use the shared Users type, the submission should meet the requirements. Good job on keys and preserving class names—finish these fixes and you’ll be set.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2025-09-27T11:41:32Z

+import { PostList } from './components/PostList';

-// import postsFromServer from './api/posts';
+import postsFromServer from './api/posts';


The project requirement says: "prepare posts by adding a user and comments to each post (each comment has a postId);". Here you import the raw posts array from the API but do not prepare/enrich it before passing to PostList. Prepare the posts first (map postsFromServer -> add matching user and comments) and pass the prepared array to PostList. Consider naming the helper getPostsWithUsersAndComments or preparePostsWithRelations to follow the checklist guidance on naming filter functions.

mateacademy-ai-mentor · 2025-09-27T11:41:32Z

-        </div>
-      </div>
-    </div>
+    <PostList posts={postsFromServer} />


You are passing the unmodified posts array to the list here: <PostList posts={postsFromServer} />. Replace postsFromServer with the prepared/enriched posts variable (for example preparedPosts returned by getPostsWithUsersAndComments) so the app meets the task requirement to add user and comments to each post before rendering.

mateacademy-ai-mentor · 2025-09-27T11:41:32Z

+  <>
+    <div className="CommentInfo">
+      <div className="CommentInfo__title">
+        <strong className="CommentInfo__name">{comment.name}</strong>
+
+        {' by '}
+
+        <a className="CommentInfo__email" href={`mailto:${comment.email}`}>
+          {comment.email}
+        </a>
+      </div>
+
+      <div className="CommentInfo__body">{comment.body}</div>
+    </div>
+  </>


This component is wrapped in a React fragment even though there is already a single root <div>. That violates checklist item #4: "4. [CODE KNOWLEDGE] - Don't use React fragment, if you already have a wrapper". Remove the fragment and return the <div className="CommentInfo"> directly (no fragment needed).

mateacademy-ai-mentor · 2025-09-27T11:41:32Z

+  <>
+    <div className="CommentList">
+      {comments.map(comment => (
+        <CommentInfo key={comment.id} comment={comment} />
+      ))}
+    </div>
+  </>


This component wraps the single root <div className="CommentList"> inside a React fragment (<> / </>). That violates checklist item #4: "4. [CODE KNOWLEDGE] - Don't use React fragment, if you already have a wrapper". Remove the fragment and return the <div className="CommentList"> directly.

mateacademy-ai-mentor · 2025-09-27T11:41:32Z

+import commentsFromServer from '../../api/comments';
+import usersFromServer from '../../api/users';


This component imports API data directly: commentsFromServer and usersFromServer and then performs filtering/finding here. That contradicts the task requirement: "- prepare posts by adding a user and comments to each post (each comment has a postId);". Move relation preparation to App (or a dedicated helper) so PostInfo only receives an already-enriched post (with user and comments fields). See description: "prepare posts by adding a user and comments to each post (each comment has a postId);" .

mateacademy-ai-mentor · 2025-09-27T11:41:32Z

+    <>
+      <div className="PostInfo">
+        <div className="PostInfo__header">
+          <h3 className="PostInfo__title">{post.title}</h3>
+
+          <p>
+            {' Posted by  '}
+
+            {user ? <UserInfo user={user} /> : null}
+          </p>
+        </div>
+
+        <p className="PostInfo__body">{post.body}</p>
+
+        <hr />
+
+        {commentsArr.length === 0 ? (
+          <b data-cy="NoCommentsMessage">No comments yet</b>
+        ) : (
+          <CommentList comments={commentsArr} />
+        )}
+      </div>
+    </>


A React fragment wraps the single root <div> returned by the component. This violates the checklist: "4. [CODE KNOWLEDGE] - Don't use React fragment, if you already have a wrapper". Remove the fragment and return the <div className="PostInfo"> directly.

mateacademy-ai-mentor · 2025-09-27T11:41:32Z

+  <>
+    <div className="PostList">
+      {posts.map(post => (
+        <PostInfo key={post.id} post={post} />
+      ))}
+    </div>
+  </>


Remove the unnecessary React fragment wrapping the single root <div>. This violates checklist item #4: "4. [CODE KNOWLEDGE] - Don't use React fragment, if you already have a wrapper". Return the <div className="PostList"> directly instead of <> … </> so the component has a single root element without a redundant fragment. Example fix: replace the fragment and the wrapped <div> with just the <div className="PostList"> block.

mateacademy-ai-mentor · 2025-09-27T11:41:33Z

+interface User {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+}


This file defines a local interface User (lines 3–8), but the task requires creating and using types from ./src/types/: "create all required types in ./src/types/;". Instead of redeclaring the interface here, import the shared type from src/types/Users.ts (e.g., import { Users } from '../../types/Users';) and use Users for the prop type. The repo already contains src/types/Users.ts with the Users interface.

mateacademy-ai-mentor · 2025-09-27T11:41:33Z

+  <>
+    <a className="UserInfo" href={`mailto:${user.email}`}>
+      {user.name}
+    </a>
+  </>


A React fragment wraps the single root <a> element. This violates checklist item #4: "4. [CODE KNOWLEDGE] - Don't use React fragment, if you already have a wrapper". Remove the fragment (<> / </>) and return the <a className="UserInfo" ...> directly.

… components and types

…reparePostsWithRelations function for post-user-comment relationships

mateacademy-ai-mentor

Review Summary

Decision: REQUEST_CHANGES — there are critical blockers preventing task completion and CI success.

Blocking issues to fix:

ESLint lint failure (CI blocker): In src/types/Posts.ts, line with import { Comments } from './Comments.ts'; violates the import/extensions rule. Change it to import { Comments } from './Comments'; so CI can pass.
Required stylesheet refactor not done: src/App.tsx still imports ./App.scss (top of file). The task requires moving styles into per-component SCSS files and importing them from components. Create and import:
- src/components/PostList/PostList.scss and add import './PostList.scss'; in PostList.tsx.
- src/components/PostInfo/PostInfo.scss and add import './PostInfo.scss'; in PostInfo.tsx.
- src/components/CommentList/CommentList.scss and add import './CommentList.scss'; in CommentList.tsx.
- src/components/CommentInfo/CommentInfo.scss and add import './CommentInfo.scss'; in CommentInfo.tsx.
- src/components/UserInfo/UserInfo.scss and add import './UserInfo.scss'; in UserInfo.tsx.
  Then remove or minimize App.scss to only truly global styles (if any).
Checklist item (#5) string interpolation: In src/components/PostInfo/PostInfo.tsx, replace the literal chunk {' Posted by '} with interpolation, e.g. <p>{Posted by }{user && <UserInfo user={user} />}</p> to follow the style guideline.

Minor (non-blocking) note: The rest of the component structure, typing, and keys usage look solid. After fixing the above, re-run npm run lint and CI should proceed. Good job on data preparation and component separation; address these items to meet all requirements.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2025-09-27T12:02:08Z

 import React from 'react';

 import './App.scss';
+import { PostList } from './components/PostList';


The project still imports a global stylesheet from App (see earlier import of ./App.scss). The task requires moving styles from App.scss into component-specific scss files and importing them inside their components (e.g., PostList.scss imported by PostList.tsx). Please split styles into per-component .scss files and add imports from the corresponding component files so styling is colocated with components.

mateacademy-ai-mentor · 2025-09-27T12:02:08Z

+        <h3 className="PostInfo__title">{post.title}</h3>
+
+        <p>
+          {' Posted by  '}


This uses a separate JSX string expression for the literal text: {' Posted by '}. The checklist requires: "Use string interpolation inside tag content" (checklist item #5). Consider replacing the literal chunk with a template string for the text and render the UserInfo component next to it, e.g.
{Posted by }{user && }
. This preserves behavior and follows the style guideline.

…nents; add missing styles for PostInfo and CommentList

mateacademy-ai-mentor

Review Summary

Educational approval: you’ve implemented the core functionality well — posts are enriched with users and comments, list/info components are split correctly, keys are set properly, and types are used consistently. A few improvements remain to fully align with the task/checklist:

Move component-specific styles out of App.scss (e.g., .App__title) into a component-scoped file and remove the ./App.scss import from src/App.tsx if only global rules remain. This is required by the task description.
In src/App.tsx (preparePostsWithRelations), replace inline find/filter with helpers like getUserById(userId) and getCommentsByPostId(postId) to satisfy checklist item #6 and clarify intent.
Fix string composition per checklist item #5: in src/components/CommentInfo/CommentInfo.tsx line with {' by '} → use { by }; in src/components/PostInfo/PostInfo.tsx line with {' Posted by '} → use {Posted by }.
In src/api/comments.ts, remove /* eslint-disable prettier/prettier */ so Prettier can format the file, or add it to .prettierignore with a short note in the PR.

Overall, nice progress and solid structure — addressing these small style/organization items will bring the solution fully in line with the requirements.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Rate AI review example ↩

mateacademy-ai-mentor · 2025-09-28T12:39:20Z

 import React from 'react';

 import './App.scss';
+import { PostList } from './components/PostList';


Task description requires moving styles out of App.scss: "- styles from App.scss should be moved to separate files, as well. E.g.: PostList.scss;" You still import './App.scss' in App.tsx and App.scss contains component-specific styles (e.g., .App__title). Move component-level styles (like .App__title) into a component-scoped SCSS file (or remove the App.scss import if it will only contain global rules). See description: "- styles from App.scss should be moved to separate files, as well. E.g.: PostList.scss;".

mateacademy-ai-mentor · 2025-09-28T12:39:20Z

+import commentsFromServer from './api/comments';
+import usersFromServer from './api/users';
+
+const preparePostsWithRelations = () => {


Checklist item: "6. [CODE STYLE] - If you are searching some entity by some filter, specify it in function/method name". preparePostsWithRelations currently uses inline find/filter calls. Extract and use named helpers (for example getUserById(userId) and getCommentsByPostId(postId)) so lookups reflect their filtering intent and match checklist guidance.

mateacademy-ai-mentor · 2025-09-28T12:39:20Z

+const preparePostsWithRelations = () => {
+  return postsFromServer.map(post => ({
+    ...post,
+    user: usersFromServer.find(u => u.id === post.userId),


Inline user lookup here uses find directly: consider replacing with a helper getUserById(uId) per checklist item #6. This keeps preparePostsWithRelations concise and follows the rule: "If you are searching some entity by some filter, specify it in function/method name".

mateacademy-ai-mentor · 2025-09-28T12:39:20Z

+  return postsFromServer.map(post => ({
+    ...post,
+    user: usersFromServer.find(u => u.id === post.userId),
+    comments: commentsFromServer.filter(c => c.postId === post.id),


Inline comments grouping here uses filter directly: consider replacing with a helper getCommentsByPostId(postId) per checklist item #6. That makes the intent explicit and satisfies the naming guideline.

mateacademy-ai-mentor · 2025-09-28T12:39:20Z

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */


This file disables Prettier enforcement with /* eslint-disable prettier/prettier */. The task instructions request using Prettier formatting (format on save per VSCode settings). Consider removing this directive so Prettier can format the file, or add the file to .prettierignore with a brief justification in the PR if you intentionally skip formatting this large data file.

mateacademy-ai-mentor · 2025-09-28T12:39:20Z

+    <div className="CommentInfo__title">
+      <strong className="CommentInfo__name">{comment.name}</strong>
+
+      {' by '}


This violates checklist item #5: "5. [CODE STYLE] - Use string interpolation inside tag content". The component uses the literal {' by '} at this location which should be replaced with a template-literal expression for readability and to match the style guideline. Suggested replacement:

// replace this line: {' by '} // with this: {` by `}

This keeps the output identical but follows the checklist requirement.

mateacademy-ai-mentor · 2025-09-28T12:39:20Z

+        <h3 className="PostInfo__title">{post.title}</h3>
+
+        <p>
+          {' Posted by  '}


This violates checklist item #5: "5. [CODE STYLE] - Use string interpolation inside tag content". The component uses the literal {' Posted by '} at this location; replace it with a template literal such as {Posted by } to comply with the guideline and improve readability. See the checklist examples for context.

Refactor components and add types for posts, comments, and users; imp…

db3b2a0

…lement PostList and CommentList components

mateacademy-ai-mentor suggested changes Sep 27, 2025

View reviewed changes

DDefty added 2 commits September 27, 2025 13:46

Fix import paths for Comments type to ensure consistent casing across…

c4cfe92

… components and types

Refactor components to improve structure and readability; implement p…

8f2c707

…reparePostsWithRelations function for post-user-comment relationships

DDefty changed the title ~~Refactor components and add types for posts, comments, and users; imp…~~ Solution added Sep 27, 2025

DDefty requested a review from mateacademy-ai-mentor September 27, 2025 11:53

mateacademy-ai-mentor suggested changes Sep 27, 2025

View reviewed changes

Refactor styles and imports for PostInfo, CommentList, UserInfo compo…

bcb064b

…nents; add missing styles for PostInfo and CommentList

DDefty requested a review from mateacademy-ai-mentor September 28, 2025 12:31

mateacademy-ai-mentor approved these changes Sep 28, 2025

View reviewed changes

		import commentsFromServer from '../../api/comments';
		import usersFromServer from '../../api/users';

Uh oh!

Conversation

DDefty commented Sep 27, 2025

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants