add task solution #925

AnnaViolin23 · 2023-09-28T16:26:54Z

TarasHoliuk

GJ 👍
One thing should be fixed (cannot add comment), also, added a few comments to improve code :)

TarasHoliuk · 2023-09-28T16:35:22Z

src/App.tsx

+  useEffect(() => {
+    getAllUsers()
+      .then(usersFromServer => {
+        if (usersFromServer) {


I guess this check is redundant here
If the request is successful we will get an array (at least empty)

but not critical

TarasHoliuk · 2023-09-28T16:36:12Z

src/App.tsx

+            setPosts(postsFromServer);
+          }
+        })
+        .finally(() => setIsLoading(false));


would be nice to add .catch too here

TarasHoliuk · 2023-09-28T16:37:15Z

src/App.tsx

+                {(!posts.length
+                  && selectedUser
+                  && !errorMessage
+                  && !isLoading
+                  && !isDropdownActive
+                ) && (


I'd move it into a variable above. Do you need isDropdownActive here?

TarasHoliuk · 2023-09-28T16:39:20Z

src/components/PostsList.tsx

+  setSelectedPost,
+  setIsCommentButtonClicked,
+}) => {
+  const selectedPostHandler = (post: Post) => {


create this function in the App.tsx and pass as prop instead of setSelectedPost, and setIsCommentButtonClicked,

TarasHoliuk · 2023-09-28T16:41:59Z

src/components/UserSelector.tsx

+  const dropdown = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const closeDropdown = (e: MouseEvent) => {


define function outside the useEffect hook

TarasHoliuk · 2023-09-28T16:43:48Z

src/components/PostDetails.tsx

+      .finally(() => setIsCommentsLoading(false));
+  }, [selectedPost]);
+
+  const deleteComment = (id: number) => {


I'd move all such functions into a separate file

Still not fixed from the previous review

TarasHoliuk · 2023-09-28T16:44:01Z

src/components/PostDetails.tsx

+    return client.delete(`/comments/${id}`);
+  };
+
+  const handleDeletingComment = (id: number) => {


Suggested change

const handleDeletingComment = (id: number) => {

const handleDeleteComment = (id: number) => {

TarasHoliuk · 2023-09-28T16:47:22Z

src/components/NewCommentForm.tsx

+  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setCommentName(event.target.value);
+    setFormError({ ...formError, name: '' });
+  };


you may save all values in state as object (the same as errors), and create 1 handler. Use event.target.name as key for object:

setFormValue(prevValues => ({ ...prevValues, [name]: value }))

TarasHoliuk · 2023-09-28T16:48:11Z

src/components/NewCommentForm.tsx

+  const addComment = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!commentName) {


it's better to trim value here - count spaces only as an empty string

TarasHoliuk · 2023-09-28T16:50:32Z

src/components/NewCommentForm.tsx

+      setFormError(rest => ({ ...rest, name: 'Enter some text' }));
+    }
+
+    if (selectedPost?.id && !isEmptyField) {


in case selectedPost?.id is 0 number it will not work

generally, it doesn't work, also, there is a strange error for the name field:
Uploading Screencast from 28-09-23 19:49:44.webm…

volodymyr-soltys97

Good work 👍
Let's improve your code

volodymyr-soltys97 · 2023-09-29T05:52:19Z

src/App.tsx

+  const getAllUsers = () => {
+    return client.get<User[]>('/users');
+  };


Still not fixed from the previous review, will be better if you create a separate file for all helpers functions

volodymyr-soltys97 · 2023-09-29T05:52:37Z

src/App.tsx


 export const App: React.FC = () => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [errorMessage, setErrorMessage] = useState('');


Add a generic types everywher

Suggested change

const [errorMessage, setErrorMessage] = useState('');

const [errorMessage, setErrorMessage] = useState<string>('');

volodymyr-soltys97 · 2023-09-29T05:53:08Z

src/App.tsx

-                <div className="notification is-warning" data-cy="NoPostsYet">
-                  No posts yet
-                </div>
+                {(posts.length > 0


Suggested change

{(posts.length > 0

{(!!posts.length

volodymyr-soltys97 · 2023-09-29T05:53:57Z

src/App.tsx

-              <PostDetails />
-            </div>
+
+            {selectedPost !== null && (


Suggested change

{selectedPost !== null && (

{selectedPost && (

volodymyr-soltys97 · 2023-09-29T05:54:05Z

src/App.tsx

@@ -50,12 +132,19 @@ export const App: React.FC = () => {
              'is-parent',
              'is-8-desktop',
              'Sidebar',
-              'Sidebar--open',
+              { 'Sidebar--open': selectedPost !== null },


Suggested change

{ 'Sidebar--open': selectedPost !== null },

{ 'Sidebar--open': selectedPost },

volodymyr-soltys97 · 2023-09-29T05:54:46Z

src/components/PostDetails.tsx

+      .finally(() => setIsCommentsLoading(false));
+  }, [selectedPost]);
+
+  const deleteComment = (id: number) => {


Still not fixed from the previous review

anastasiiavorobiova

Great work! Almost done

anastasiiavorobiova · 2023-09-29T12:18:18Z

src/components/NewCommentForm.tsx

+      setFormError(rest => ({ ...rest, name: 'Enter some text' }));
+    }
+
+    if (selectedPost?.id && !isEmptyField) {


anastasiiavorobiova · 2023-09-29T12:19:47Z

src/components/UserSelector.tsx

+}) => {
+  const dropdownHandler = () => setIsDropdownActive(!isDropdownActive);
+
+  const dropdown = useRef<HTMLDivElement>(null);


anastasiiavorobiova

Great work!

anastasiiavorobiova

Great work!

add task solution

c5d8768

TarasHoliuk suggested changes Sep 28, 2023

View reviewed changes

issue with text input

afb9435

AnnaViolin23 requested a review from TarasHoliuk September 28, 2023 20:13

issue with text input

3c42dc9

volodymyr-soltys97 suggested changes Sep 29, 2023

View reviewed changes

some fixings

562840b

AnnaViolin23 requested a review from volodymyr-soltys97 September 29, 2023 11:41

anastasiiavorobiova suggested changes Sep 29, 2023

View reviewed changes

one more try

c5d6bcd

AnnaViolin23 requested a review from anastasiiavorobiova September 29, 2023 12:39

anastasiiavorobiova suggested changes Sep 29, 2023

View reviewed changes

anastasiiavorobiova approved these changes Sep 29, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add task solution #925

add task solution #925

AnnaViolin23 commented Sep 28, 2023

TarasHoliuk left a comment

TarasHoliuk Sep 28, 2023

TarasHoliuk Sep 28, 2023

TarasHoliuk Sep 28, 2023

TarasHoliuk Sep 28, 2023

TarasHoliuk Sep 28, 2023

TarasHoliuk Sep 28, 2023

volodymyr-soltys97 Sep 29, 2023

TarasHoliuk Sep 28, 2023

TarasHoliuk Sep 28, 2023

TarasHoliuk Sep 28, 2023

TarasHoliuk Sep 28, 2023

anastasiiavorobiova Sep 29, 2023

volodymyr-soltys97 left a comment

volodymyr-soltys97 Sep 29, 2023

volodymyr-soltys97 Sep 29, 2023

volodymyr-soltys97 Sep 29, 2023

volodymyr-soltys97 Sep 29, 2023

volodymyr-soltys97 Sep 29, 2023

volodymyr-soltys97 Sep 29, 2023

anastasiiavorobiova left a comment

anastasiiavorobiova Sep 29, 2023

anastasiiavorobiova Sep 29, 2023

anastasiiavorobiova left a comment

anastasiiavorobiova left a comment

	const handleDeletingComment = (id: number) => {
	const handleDeleteComment = (id: number) => {

	const [errorMessage, setErrorMessage] = useState('');
	const [errorMessage, setErrorMessage] = useState<string>('');

	{ 'Sidebar--open': selectedPost !== null },
	{ 'Sidebar--open': selectedPost },

add task solution #925

Are you sure you want to change the base?

add task solution #925

Conversation

AnnaViolin23 commented Sep 28, 2023

TarasHoliuk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

volodymyr-soltys97 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anastasiiavorobiova left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anastasiiavorobiova left a comment

Choose a reason for hiding this comment

anastasiiavorobiova left a comment

Choose a reason for hiding this comment