add task solution

[ollavka]

DEMO LINK
TESTS LINK

[OlEzhA0]

could you explain why do we need this?

[OlEzhA0]

why do we need to add this text?

[OlEzhA0]

could you move this conditions to constants

[OlEzhA0]

add index.ts file to hooks folder. exports all hooks and import here with 1 import. The same for api

[OlEzhA0]

Suggested change

	export const CommentList: FC<Props> = (props) => {
	const { writingNewPost, onWritingNewPost } = props;
	export const CommentList: FC<Props> = ({ writingNewPost, onWritingNewPost }) => {

[OlEzhA0]

const noPosts = posts.length === 0 && !isPostsLoading

if (noPosts && error) {
    return (
      <Notification type={NotificationType.PostsError} />
    );
}

if (noPosts) {
  return (
    <Notification
      type={NotificationType.PostsWarning}
      warningText="No posts yet"
    />
  );
}

[OlEzhA0]

Suggested change

	const dropdownRef = useRef<HTMLDivElement | null>(null);
	const dropdownRef = useRef<HTMLDivElement>(null);

[OlEzhA0]

to avoid recreations of this fn on each rendering

Suggested change

	const handleClickOutsideDropdown = (event: MouseEvent) => {
	const dropdown = dropdownRef.current;
	if (dropdown && !dropdown.contains(event.target as Node)) {
	closeDropdown();
	}
	};
	useEffect(() => {
	document.addEventListener('click', handleClickOutsideDropdown);
	return () => {
	document.removeEventListener('click', handleClickOutsideDropdown);
	};
	}, []);
	useEffect(() => {
	const handleClickOutsideDropdown = (event: MouseEvent) => {
	const dropdown = dropdownRef.current;
	if (dropdown && !dropdown.contains(event.target as Node)) {
	closeDropdown();
	}
	};
	document.addEventListener('click', handleClickOutsideDropdown);
	return () => {
	document.removeEventListener('click', handleClickOutsideDropdown);
	};
	}, []);

[OlEzhA0]

wrap each your values with useMemo

[OlEzhA0]

would be better to use async await