Developer by Yar14k · Pull Request #3566 · mate-academy/react_add-todo-form

Yar14k · 2026-02-28T14:12:53Z

No description provided.

mateacademy-ai-mentor

Review Summary

Great job implementing the core functionality! The form validation and state management work as expected. However, changes are needed to meet the project's technical requirements.

The main issue is the lack of TypeScript. Please add type definitions for component props, state, and event handlers in App.tsx, TodoInfo.tsx, and UserInfo.tsx. This is a core requirement of the task.

Additionally, in TodoInfo.tsx, the application could crash if todo.user is undefined. Please add a conditional check before rendering the UserInfo component to fix this [CHECKLIST ITEM #4].

Lastly, please replace single-letter variable names (e.g., e, t, u) with more descriptive ones like event, todo, and user throughout App.tsx [CHECKLIST ITEM #1].

✨ 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 · 2026-02-28T14:14:48Z

src/components/TodoInfo/TodoInfo.tsx

-export const TodoInfo = () => {};
+import { UserInfo } from '../UserInfo';
+
+export const TodoInfo = ({ todo }) => {


Since this is a TypeScript file (.tsx), the component's props should be typed. Defining a type or interface for the todo prop will improve code safety and align with the project's setup.

mateacademy-ai-mentor · 2026-02-28T14:14:48Z

src/components/TodoInfo/TodoInfo.tsx

+    >
+      <h2 className="TodoInfo__title">{todo.title}</h2>
+
+      <UserInfo user={todo.user} />


This violates checklist item #4: "Don't render the component if the property that you pass to the component has null or undefined value." The todo.user property could be undefined if no matching user is found. You should add a check here to ensure todo.user exists before rendering the UserInfo component to prevent the application from crashing.

mateacademy-ai-mentor · 2026-02-28T14:14:48Z

src/components/UserInfo/UserInfo.tsx

@@ -1 +1,7 @@
-export const UserInfo = () => {};
+export const UserInfo = ({ user }) => {


This component is missing TypeScript types for its props. According to the task requirements, you should use the React TypeScript cheat sheet. The user prop should be properly typed to reflect its shape (e.g., { id, name, username, email }).

mateacademy-ai-mentor · 2026-02-28T14:14:48Z

src/App.tsx

+import usersFromServer from './api/users';
+import todosFromServer from './api/todos';

 export const App = () => {


While the component is in a .tsx file, it's not taking advantage of TypeScript. You should define interfaces for your data structures (like Todo and User) and use them to type your state, props, and event handlers. For example, const App: React.FC = () => { ... } and const [todos, setTodos] = useState<Todo[]>(...). This would make your code more robust and easier to maintain. Please refer to the 'React TypeScript cheat sheet' from the task description.

mateacademy-ai-mentor · 2026-02-28T14:14:48Z

src/App.tsx

+  const [todos, setTodos] = useState(
+    todosFromServer.map(todo => ({
+      ...todo,
+      user: usersFromServer.find(u => u.id === todo.userId),


This violates checklist item #1: 'Don't use one-letter variable naming.' Please use a more descriptive name for the parameter, for example, user instead of u.

mateacademy-ai-mentor · 2026-02-28T14:14:48Z

src/App.tsx

+  const [title, setTitle] = useState('');
+  const [errors, setErrors] = useState({ title: false, userId: false });
+
+  const handleSubmit = e => {


This violates checklist item #1: 'Don't use one-letter variable naming.' Please rename e to event and provide a proper type for it, like React.FormEvent<HTMLFormElement>.

mateacademy-ai-mentor · 2026-02-28T14:14:48Z

src/App.tsx

+    }
+
+    const newTodo = {
+      id: todos.length ? Math.max(...todos.map(t => t.id)) + 1 : 1,


This violates checklist item #1: 'Don't use one-letter variable naming.' A more descriptive name like todo would be better than t.

mateacademy-ai-mentor · 2026-02-28T14:14:48Z

src/App.tsx

+            data-cy="titleInput"
+            placeholder="Enter todo title"
+            value={title}
+            onChange={e => {


This violates checklist item #1: 'Don't use one-letter variable naming.' Please rename e to event and give it a type, e.g., React.ChangeEvent<HTMLInputElement>.

mateacademy-ai-mentor · 2026-02-28T14:14:48Z

src/App.tsx

+          <select
+            data-cy="userSelect"
+            value={userId}
+            onChange={b => {


This violates checklist item #1: 'Don't use one-letter variable naming.' A name like event or changeEvent would be more descriptive than b. Also, consider adding the correct TypeScript type for the event.

mateacademy-ai-mentor

Review Summary

Great job on implementing TypeScript across the application! Your progress is excellent. However, this requires changes because a critical issue from the previous review still needs to be addressed.

The application can crash if a user for a specific todo is not found. In src/components/TodoInfo/TodoInfo.tsx, the UserInfo component is rendered without checking if todo.user exists. Since todo.user can be undefined, this will cause an error. Please add a conditional check to only render UserInfo when todo.user is defined, as this violates a core requirement [CHECKLIST ITEM #4].

Once that's fixed, please also rename the single-letter variable u in App.tsx to something more descriptive like user. After these changes, your work should be ready for approval!

✨ 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 · 2026-02-28T14:35:30Z

src/components/TodoInfo/TodoInfo.tsx

+    >
+      <h2 className="TodoInfo__title">{todo.title}</h2>
+
+      <UserInfo user={todo.user} />


The todo.user property can be undefined if a matching user isn't found, but it's being passed to UserInfo, which requires a defined user object. This could cause the application to crash.

This violates checklist item #4: "Don't render the component if the property that you pass to the component has null or undefined value". Please add a conditional check here to only render UserInfo when todo.user exists.

mateacademy-ai-mentor

Review Summary

Great job on this update! You've successfully fixed the critical bug by adding the conditional check, which is a fantastic improvement.

I am approving your solution as an educational override so you can move forward. However, please remember to address the minor code style feedback from the last review. In src/App.tsx, the one-letter variable u in your handleSubmit function should be renamed to a more descriptive name like user. This is an important habit for writing clean, readable code [CHECKLIST ITEM #1].

Overall, this is excellent progress. Keep up the great work!

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

Rate AI review example ↩

mateacademy-ai-mentor · 2026-02-28T14:40:37Z

src/App.tsx

+      title: title.trim(),
+      userId,
+      completed: false,
+      user: users.find(u => u.id === userId),


This still uses a one-letter variable u. As mentioned in the previous review, please rename this to a more descriptive name like user to improve readability. This violates checklist item #1: 'Don't use one-letter variable naming'.

Yar14k added 5 commits February 28, 2026 12:09

Add solution

6190016

Add solution

f1e36d9

Add solution

2a80113

Add solution

fab4182

Add solution

65e81a5

mateacademy-ai-mentor suggested changes Feb 28, 2026

View reviewed changes

Add solution

173f5e6

Yar14k requested a review from mateacademy-ai-mentor February 28, 2026 14:33

mateacademy-ai-mentor suggested changes Feb 28, 2026

View reviewed changes

Add solution

63e5819

Yar14k requested a review from mateacademy-ai-mentor February 28, 2026 14:39

mateacademy-ai-mentor approved these changes Feb 28, 2026

View reviewed changes

		@@ -1 +1,7 @@
		export const UserInfo = () => {};
		export const UserInfo = ({ user }) => {

Conversation

Yar14k commented Feb 28, 2026

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!

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants