implementation

[Daniilart01]

DEMO LINK

[etojeDenys]

i can create the empty todo, let's fix this case firstly

[etojeDenys]

find can return the undefined

Suggested change

	usersFromServer.find(user => user.id === id) as User
	usersFromServer.find(user => user.id === id) || null

[etojeDenys]

user can be null, you need to handle this case here

[Daniilart01]

I decide to move this check using user?.name into TodoInfo component. In case User is null no info will be displayed, but in current implementation we have no possibilities to meet User === null, because when it's null we'll recive ann error 'Please choose user'

[andriy-shymkiv]

@Daniilart01 but you don't know where else this component can be reused so need to check if user exist

[etojeDenys]

Suggested change

	onChange={event => handleUserChange(event)}
	onChange={handleUserChange}

[etojeDenys]

Suggested change

	setFormData({
	title: event.currentTarget.value,
	user: formData.user,
	});
	setFormData({
	...formData,
	title: event.currentTarget.value,
	});

[andriy-shymkiv]

I think enough just:

Suggested change

	const [emptyTitleFieldError, setEmptyTitleFieldError] = useState(false);
	const [emptyUserFieldError, setEmptyUserFieldError] = useState(false);
	const [titleError, setTitleError] = useState(false);
	const [userError, setUserError] = useState(false);

[andriy-shymkiv]

better to create an interface for it:

interface FormFileds {
 title: string;
 user: User | null;
}

[andriy-shymkiv]

Suggested change

	= useState<{ title: string, user: User | null }>({ title: '', user: null });
	= useState<FormFields>({ title: '', user: null });

[andriy-shymkiv]

Suggested change

	setTodosList([...todosList, {
	id: getNextTodoId(todosList),
	title: formData.title.trim(),
	completed: false,
	userId: formData.user.id,
	}]);
	setTodosList(prevTodos => [...prevTodos, {
	id: getNextTodoId(todosList),
	title: formData.title.trim(),
	completed: false,
	userId: formData.user.id,
	}]);

[andriy-shymkiv]

@Daniilart01 but you don't know where else this component can be reused so need to check if user exist

[andriy-shymkiv]

Suggested change

	type Props = {
	user: User | null
	};
	export const UserInfo: React.FC<Props> = ({ user }) => {
	return (
	<a className="UserInfo" href={`mailto:${user?.email}`}>
	{user?.name}
	</a>
	);
	};
	type Props = {
	user: User;
	};
	export const UserInfo: React.FC<Props> = ({ user }) => {
	return (
	<a className="UserInfo" href={`mailto:${user.email}`}>
	{user.name}
	</a>
	);
	};

[Daniilart01]

now If userId === 0 it wouldn't be displayed on a todo. If we have undefined in formData.user this wont be proceed after add` button click

[etojeDenys]

better to avoid the assertions in TS

Suggested change

	return usersFromServer.find(user => user.id === id) as User;
	return usersFromServer.find(user => user.id === id) || null;

[etojeDenys]

Suggested change

	export const findUserById = (id: number): User => {
	export const findUserById = (id: number): User | null => {

[etojeDenys]

move findUserById(todo.userId) this to some var and check if the user is not null

[etojeDenys]

Suggested change

	onInput={event => handleTitleChange(event)}
	onInput={handleTitleChange}

we can simplify it

[etojeDenys]

fix it everywhere

[etojeDenys]

Suggested change

	{todo.userId !== 0 && user && (<UserInfo user={user} />)}
	{user && (<UserInfo user={user} />)}

[etojeDenys]

fix it everywhere

[etojeDenys]

lgtm