implement editing functionality #778

voievodik · 2023-09-21T11:37:30Z

roman-mirzoian

Good job, but there is quite a bit of work to be done.
Also, currently there are problems with updating the todo and deleting it if the todo title is empty:
https://gyazo.com/dfe0984f277df2035e92bef659455220

roman-mirzoian · 2023-09-21T11:56:26Z

src/components/TodoEditItem/TodoEditItem.tsx

+  const [newTitle, setNewTitle] = useState(todo.title);
+
+  const handleEditTodo = () => {
+    if (newTitle === '') {


Suggested change

if (newTitle === '') {

if (!newTitle) {

roman-mirzoian · 2023-09-21T12:03:21Z

src/components/TodoFooter/TodoFooter.tsx

+    todos
+      .filter(({ completed }) => completed)
+      .forEach(({ id }) => {
+        deleteTodo(id)
+          .then(() => {
+            setTodos(prevState => prevState.filter(todo => todo.id !== id));
+          })
+          .catch(() => setErrorMessage('Unable to delete a todo'));
+      });


There is no need to do unnecessary filtering and go through the array twice, it is enough to check the status of the todo during the traversal through the forEach.

roman-mirzoian · 2023-09-21T12:04:15Z

src/components/TodoHeader/TodoHeader.tsx

+      const todosCopy = [...currentTodos];
+
+      return todosCopy.map(todo => ({


Map is a non-mutating array method, so you don't need to make a copy manually.

roman-mirzoian · 2023-09-21T12:06:03Z

src/components/TodoNotification/TodoNotification.tsx

+  } = useContext(ErrorContext);
+
+  useEffect(() => {
+    if (errorMessage.length !== 0) {


Suggested change

if (errorMessage.length !== 0) {

if (errorMessage.length) {

roman-mirzoian · 2023-09-21T12:06:41Z

src/context/TodoContext.tsx

+  // useEffect(() => {
+  //   const todosStorage = localStorage.getItem('todos');
+
+  //   setTodos(JSON.parse(todosStorage || '[]') as Todo[]);
+  // }, []);
+
+  // useEffect(() => {
+  //   localStorage.setItem('todos', JSON.stringify(todos));
+  // }, [todos]);


Do not leave unnecessary comments.

AndrMar1939

Good work with Context!

Moroz-Dmytro

Not implemented

I can rename todo and enter just spaces

Why I see loader on all todos, if I'm making changes just in 1

"All, Active, Completed" buttons should not jump when I select or unselect all todos

When I have 1 todo checked and click "toggleAll" button, I expect that all todos now will be selected, but in your app, it works in a different way, check the working example how it should work

Moroz-Dmytro · 2023-09-21T18:28:33Z

src/App.tsx

+        <TodoList
+          isActive={isActive}
+        />


If you have just 1 prop -> better to write your component in 1 line

Moroz-Dmytro · 2023-09-21T18:36:32Z

src/components/TodoList/TodoList.tsx

+      {todoTemp && (
+        <div data-cy="Todo" className="todo">
+          <label className="todo__status-label">
+            <input
+              data-cy="TodoStatus"
+              type="checkbox"
+              className="todo__status"
+            />
+          </label>
+
+          <span data-cy="TodoTitle" className="todo__title">
+            {todoTemp?.title}
+          </span>
+
+          <button type="button" className="todo__remove" data-cy="TodoDelete">
+            ×
+          </button>
+
+          <div
+            data-cy="TodoLoader"
+            className={classnames(
+              'modal overlay', {
+                'is-active': isActive,
+              },
+            )}
+          >
+            <div className="modal-background has-background-white-ter" />
+            <div className="loader" />
+          </div>


I would move this to separate component

Moroz-Dmytro · 2023-09-21T18:36:43Z

src/components/TodoNotification/TodoNotification.tsx

+        aria-label="Delete"
+        onClick={() => setIsErrorHidden(true)}
+      />
+


Suggested change

BudnikOleksii

Good work 👍
But not all works as expected, left some suggestions, check them.
And a lot of tests failed, fix your solution:

BudnikOleksii · 2023-09-25T07:19:36Z

src/App.tsx

+  const { todos, setTodos } = useContext(TodoContext);
+  const { setErrorMessage } = useContext(ErrorContext);


Create hooks for contexts so you don't need to pass context every time, for example:

const useTodo = () => useContext(TodoContext);

BudnikOleksii · 2023-09-25T07:20:18Z

src/App.tsx

+      <h1 className="todoapp__title">todos</h1>
+
+      <div className="todoapp__content">
+        <TodoHeader onHandleActive={(value) => setIsActive(value)} />


Suggested change

<TodoHeader onHandleActive={(value) => setIsActive(value)} />

<TodoHeader onHandleActive={setIsActive} />

BudnikOleksii · 2023-09-25T07:20:37Z

src/App.tsx

+
+        <TodoList
+          isActive={isActive}
+          onHandleActive={(value) => setIsActive(value)}


Suggested change

onHandleActive={(value) => setIsActive(value)}

onHandleActive={setIsActive}

BudnikOleksii · 2023-09-25T07:23:40Z

src/components/TodoEditItem/TodoEditItem.tsx

+    const todosCopy = [...todos];
+    const index = todos.findIndex(({ id: currentId }) => currentId === id);
+    const updatedTodo = {
+      ...todosCopy[index],
+      title: newTitle,
+    };
+
+    todosCopy.splice(index, 1, updatedTodo);


Don't use splice and findIndex, just use map instead

BudnikOleksii · 2023-09-25T07:27:51Z

src/components/TodoFooter/TodoFooter.tsx

+    todos.forEach(({ id, completed }) => {
+      if (completed) {
+        deleteTodo(id)
+          .then(() => {
+            setTodos(prevState => prevState.filter(todo => todo.id !== id));
+          })
+          .catch(() => setErrorMessage('Unable to delete a todo'));
+      }
+    });


Don't use forEach for async operations, use for of with async/await or collect requests with mapand thenPromise.all`.

Also, add loaders to notify users what todos will be deleted.

BudnikOleksii · 2023-09-25T07:30:43Z

src/components/TodoHeader/TodoHeader.tsx

+  const toggleAll = () => {
+    const allCompleted = todos.every(({ completed }) => completed);
+
+    if (allCompleted) {
+      setTodos(currentTodos => {
+        return currentTodos.map(todo => ({
+          ...todo,
+          completed: false,
+        }));
+      });
+    } else {
+      setTodos(currentTodos => {
+        return currentTodos.map(todo => ({
+          ...todo,
+          completed: true,
+        }));
+      });
+    }
+  };


It should also change the status of todos in the database, as when the user reloads the page todos have the same status as previously.

BudnikOleksii · 2023-09-25T07:32:17Z

src/components/TodoList/TodoList.tsx

+            onDelete={handleDeleteTodo}
+            onEditedId={setEditedId}
+            isDeleteActive={isDeleteActive}
+            onDeleteActive={(value) => setIsDeleteActive(value)}


Suggested change

onDeleteActive={(value) => setIsDeleteActive(value)}

onDeleteActive={setIsDeleteActive}

BudnikOleksii · 2023-09-25T07:32:32Z

src/components/TodoList/TodoList.tsx

+            onEditedId={() => setEditedId(null)}
+            onDelete={handleDeleteTodo}
+            isLoading={isLoading}
+            onLoad={(value) => setIsLoading(value)}


Suggested change

onLoad={(value) => setIsLoading(value)}

onLoad={setIsLoading}

BudnikOleksii · 2023-09-25T07:34:16Z

src/components/TodoTempItem/TodoTempItem.tsx

+  isActive: boolean;
+};
+
+export const TodoTempItem: React.FC<Props> = ({ isActive }) => {


You can use your TodoItem component

My TodoItem has so many other functions that compared to TodoTempItem will be redundant

My TodoItem has so many other functions that compared to TodoTempItem will be redundant

But, the design is the same, so if something changes you have to change two components instead TodoItem.
You can create a UI component TodoItem without any logic and use it in both cases

Not fixed and without reply

TodoItem focuses on displaying individual todo with their specific details, while TodoTempItem is dedicated to indicating a loading state when data is still being processed. They serve different purposes and have different logic to fulfill those purposes.

TodoItem focuses on displaying individual todo with their specific details, while TodoTempItem is dedicated to indicating a loading state when data is still being processed. They serve different purposes and have different logic to fulfill those purposes.

It's the same component, they have only different logic so as I mentioned before you can create a representing component with optional props and use it in both cases.

A detailed explanation of why creating two components with the same UI but different logic can lead to several issues and is generally not considered a good practice. Here are some reasons why it's a bad idea:

Code Duplication: By having two separate components with similar UI, you are duplicating code. This can lead to maintenance challenges because any updates or bug fixes to the UI will need to be applied to both components, increasing the chances of inconsistencies and errors.

Inconsistent Behavior: When components have different logic, it can result in inconsistent behavior for seemingly similar UI elements. Users may not understand why similar-looking elements behave differently, which can lead to confusion and a poor user experience.

Difficulty in Maintenance: As your application grows, maintaining multiple components with similar UI but different logic becomes increasingly complex. It can be challenging to keep track of changes and ensure that both components remain in sync with each other.

Scalability Issues: If you decide to introduce additional variations of the same UI with different logic in the future, you will end up creating more and more similar components, making your codebase harder to manage and extending development time.

Reduced Reusability: One of the fundamental principles of component-based UI development is reusability. When you have multiple components with distinct logic but the same UI, you lose the benefits of component reusability, which can save time and effort in the long run.

To address these issues, it's advisable to create a single representing component with props or configuration options that allow you to customize the behavior of the component. This approach promotes code reuse, maintainability, and consistency in your application.

In your case, you can create a single "TodoItem" component that accepts props or configuration options to handle both regular todos and temporary todos. This way, you can have a single, well-maintained component that can adapt to different scenarios, ensuring a cleaner and more maintainable codebase.

BudnikOleksii · 2023-09-25T07:35:21Z

src/context/ErrorContext.tsx

+  const value = useMemo(() => ({
+    errorMessage,
+    setErrorMessage,
+    isErrorHidden,
+    setIsErrorHidden,
+  }), [errorMessage, isErrorHidden]);


useMemo is redundant, remove in all contexts

voievodik · 2023-09-26T08:47:35Z

Good work 👍 But not all works as expected, left some suggestions, check them. And a lot of tests failed, fix your solution:

Locally, for some reason, all the tests fail, but on GitHub, some tests work

Moroz-Dmytro

Should be "1 item" without "s" at the end

!IMPORTANT Status of Todo is not saved on API:

I selected all todos

After reloading status of todos was not saved

Not implemented:

BudnikOleksii

Better, but still some functionality has to be implemented:

You don't save the updated status for todo, when I reload the page it's the same.
When toggleAll it saves on the server, but you need to notify the user which todos are currently updating, so add a loader for them.

Recorded video:
https://www.loom.com/share/f8c1e8a49af34f3d89998a13bd9989f1?sid=a4d39569-dab5-41e1-acec-c0295a443b80

BudnikOleksii · 2023-09-26T12:28:03Z

src/components/TodoEditItem/TodoEditItem.tsx

+import { useTodo } from '../../context/TodoContext';
+import { useError } from '../../context/ErrorContext';
+import { updateTodo } from '../../api/todos';
+// import { useTitle } from '../../context/TitleContext';


Remove comments

BudnikOleksii · 2023-09-26T12:34:37Z

src/components/TodoFooter/TodoFooter.tsx

+import { useError } from '../../context/ErrorContext';
+
+export const TodoFooter = () => {
+  const { selectedFilter, setSelectedFilter } = useContext(FilterContext);


You created hooks for contexts, but not for this one) Let's create for the FilterContext too

BudnikOleksii · 2023-09-26T12:35:20Z

src/components/TodoHeader/TodoHeader.tsx

+};
+
+export const TodoHeader: React.FC<Props> = ({ onHandleActive }) => {
+  const { setTodoTemp } = useContext(TodoTempContext);


And for this one too

BudnikOleksii · 2023-09-26T12:38:30Z

src/components/TodoHeader/TodoHeader.tsx

+      todos.forEach(todo => {
+        if (todo.completed) {
+          const updatedTodo = { ...todo, completed: false };
+
+          updatePromises.push(updateTodo(todo.id, updatedTodo));
+        }
+      });
+    } else {
+      todos.forEach(todo => {
+        if (!todo.completed) {
+          const updatedTodo = { ...todo, completed: true };
+
+          updatePromises.push(updateTodo(todo.id, updatedTodo));
+        }
+      });


It's better to use map instead of forEach and push promises

BudnikOleksii · 2023-09-26T12:40:45Z

src/components/TodoHeader/TodoHeader.tsx

+    setTodoTemp({
+      id: 0,
+      userId: USER_ID,
+      title: title.trim(),
+      completed: false,
+    });


Suggested change

setTodoTemp({

id: 0,

userId: USER_ID,

title: title.trim(),

completed: false,

});

const newTodo = {

userId: USER_ID,

title: title.trim(),

completed: false,

};

setTodoTemp({

...newTodo,

id: 0,

});

Create an object for a new todo as you do the same when passing to createTodo

BudnikOleksii · 2023-09-26T12:42:26Z

src/components/TodoItem/TodoItem.tsx

+    setTodos(prev => prev.map(currentTodo => {
+      if (currentTodo.id === todo.id) {
+        return { ...currentTodo, completed: event.target.checked };
+      }
+
+      return currentTodo;
+    }));


You don't update the todo on the server, when I reload page status doesn't change

BudnikOleksii · 2023-09-26T12:45:26Z

src/components/TodoTempItem/TodoTempItem.tsx

+  isActive: boolean;
+};
+
+export const TodoTempItem: React.FC<Props> = ({ isActive }) => {


My TodoItem has so many other functions that compared to TodoTempItem will be redundant

But, the design is the same, so if something changes you have to change two components instead TodoItem.
You can create a UI component TodoItem without any logic and use it in both cases

Moroz-Dmytro

There is still bug 🐞 with saving todos statuses:
I have next todos selected:

I click toggle all:

But after reloading only next todos are selected:

Then when I start editing second selected todo, the todo status disappear:

onBlur still send a request to update todo even if todo title was not changed(save on Enter click is fixed)

Moroz-Dmytro · 2023-09-27T08:29:04Z

src/components/TodoItem/TodoItem.tsx

+            'is-active': (isDeleteActive && id === deletedTodoId)
+              || isToggleActive.includes(id) || isCompleteActive,


Better to create constant for this

Moroz-Dmytro · 2023-09-27T08:29:18Z

src/components/TodoItem/TodoItem.tsx

+        onClick={() => {
+          setDeletedTodoId(id);
+          onDelete(todo);
+        }}


Cerate function for this

Moroz-Dmytro · 2023-09-27T08:30:31Z

src/components/TodoTempItem/TodoTempItem.tsx

+  isActive: boolean;
+};
+
+export const TodoTempItem: React.FC<Props> = ({ isActive }) => {


Not fixed and without reply

BudnikOleksii

Good work 👍
I left a few suggestions and described why it's a bad idea to duplicate components.

BudnikOleksii · 2023-09-28T08:40:57Z

src/components/TodoHeader/TodoHeader.tsx

+    if (isAllCompleted) {
+      const allCompleted = todos
+        .filter(({ completed }) => completed)
+        .map(({ id }) => id);
+
+      onToggleActive(allCompleted);
+    } else {
+      const allActive = todos
+        .filter(({ completed }) => !completed)
+        .map(({ id }) => id);
+
+      onToggleActive(allActive);
+    }
+
+    const updatePromises: Promise<Todo>[] = [];
+
+    if (isAllCompleted) {
+      todos.map(todo => {
+        const updatedTodo = { ...todo, completed: false };
+
+        return updatePromises.push(updateTodo(todo.id, updatedTodo));
+      });
+    } else {
+      todos.map(todo => {
+        const updatedTodo = { ...todo, completed: true };
+
+        return updatePromises.push(updateTodo(todo.id, updatedTodo));
+      });
+    }


Suggested change

if (isAllCompleted) {

const allCompleted = todos

.filter(({ completed }) => completed)

.map(({ id }) => id);

onToggleActive(allCompleted);

} else {

const allActive = todos

.filter(({ completed }) => !completed)

.map(({ id }) => id);

onToggleActive(allActive);

}

const updatePromises: Promise<Todo>[] = [];

if (isAllCompleted) {

todos.map(todo => {

const updatedTodo = { ...todo, completed: false };

return updatePromises.push(updateTodo(todo.id, updatedTodo));

});

} else {

todos.map(todo => {

const updatedTodo = { ...todo, completed: true };

return updatePromises.push(updateTodo(todo.id, updatedTodo));

});

}

if (isAllCompleted) {

const allCompleted = todos

.filter(({ completed }) => completed)

.map(({ id }) => id);

onToggleActive(allCompleted);

} else {

const allActive = todos

.filter(({ completed }) => !completed)

.map(({ id }) => id);

onToggleActive(allActive);

}

const updatePromises: Promise<Todo>[] = [];

if (isAllCompleted) {

todos.map(todo => {

const updatedTodo = { ...todo, completed: false };

return updatePromises.push(updateTodo(todo.id, updatedTodo));

});

} else {

todos.map(todo => {

const updatedTodo = { ...todo, completed: true };

return updatePromises.push(updateTodo(todo.id, updatedTodo));

});

}

You have the same if/else blocks, also if all are completed you actually don't need to filter them.

You can do something like this:

const isAllCompleted = todos.every(({ completed }) => completed); const todosForUpdate = isAllCompleted ? todos : todos.filter(({ completed }) => !completed); const todosIds = todosForUpdate.map(({ id }) => id); const updatePromises = todos.map(todo => ( updateTodo(todo.id, { ...todo, completed: !isAllCompleted }) )); onToggleActive(todosIds);

BudnikOleksii · 2023-09-28T08:41:57Z

src/components/TodoHeader/TodoHeader.tsx

+      .catch(() => {
+        setIsInputDisabled(false);
+        setErrorMessage('Unable to add a todo');
+        inputRef?.current?.focus();


You set focus in finally so in catch block it's redundant

BudnikOleksii · 2023-09-28T08:51:22Z

src/components/TodoTempItem/TodoTempItem.tsx

+  isActive: boolean;
+};
+
+export const TodoTempItem: React.FC<Props> = ({ isActive }) => {


TodoItem focuses on displaying individual todo with their specific details, while TodoTempItem is dedicated to indicating a loading state when data is still being processed. They serve different purposes and have different logic to fulfill those purposes.

It's the same component, they have only different logic so as I mentioned before you can create a representing component with optional props and use it in both cases.

BudnikOleksii · 2023-09-28T09:03:20Z

src/components/TodoTempItem/TodoTempItem.tsx

+  isActive: boolean;
+};
+
+export const TodoTempItem: React.FC<Props> = ({ isActive }) => {


A detailed explanation of why creating two components with the same UI but different logic can lead to several issues and is generally not considered a good practice. Here are some reasons why it's a bad idea:

Code Duplication: By having two separate components with similar UI, you are duplicating code. This can lead to maintenance challenges because any updates or bug fixes to the UI will need to be applied to both components, increasing the chances of inconsistencies and errors.

Inconsistent Behavior: When components have different logic, it can result in inconsistent behavior for seemingly similar UI elements. Users may not understand why similar-looking elements behave differently, which can lead to confusion and a poor user experience.

Difficulty in Maintenance: As your application grows, maintaining multiple components with similar UI but different logic becomes increasingly complex. It can be challenging to keep track of changes and ensure that both components remain in sync with each other.

Scalability Issues: If you decide to introduce additional variations of the same UI with different logic in the future, you will end up creating more and more similar components, making your codebase harder to manage and extending development time.

Reduced Reusability: One of the fundamental principles of component-based UI development is reusability. When you have multiple components with distinct logic but the same UI, you lose the benefits of component reusability, which can save time and effort in the long run.

To address these issues, it's advisable to create a single representing component with props or configuration options that allow you to customize the behavior of the component. This approach promotes code reuse, maintainability, and consistency in your application.

In your case, you can create a single "TodoItem" component that accepts props or configuration options to handle both regular todos and temporary todos. This way, you can have a single, well-maintained component that can adapt to different scenarios, ensuring a cleaner and more maintainable codebase.

roman-mirzoian

Well done 👍

roman-mirzoian · 2023-09-28T21:42:08Z

src/components/TodoFooter/TodoFooter.tsx

+        {isActiveItemsLeft > 1
+          ? `${isActiveItemsLeft} items left`
+          : `${isActiveItemsLeft} item left`}


You only have to check one word:

Suggested change

{isActiveItemsLeft > 1

? `${isActiveItemsLeft} items left`

: `${isActiveItemsLeft} item left`}

{`${isActiveItemsLeft} ${isActiveItemsLeft > 1 ? 'items' : 'item'} left`}

implement editing functionality

ea780aa

roman-mirzoian suggested changes Sep 21, 2023

View reviewed changes

provided fixes according to review

812b638

voievodik requested a review from roman-mirzoian September 21, 2023 12:59

AndrMar1939 approved these changes Sep 21, 2023

View reviewed changes

Moroz-Dmytro suggested changes Sep 21, 2023

View reviewed changes

provided fixes according to review

f8195a2

voievodik requested a review from Moroz-Dmytro September 23, 2023 20:19

BudnikOleksii suggested changes Sep 25, 2023

View reviewed changes

provided fixes according to review

8ff9e63

voievodik requested a review from BudnikOleksii September 26, 2023 08:49

Moroz-Dmytro suggested changes Sep 26, 2023

View reviewed changes

added toggle saving on api

4281a01

voievodik requested a review from Moroz-Dmytro September 26, 2023 09:58

BudnikOleksii suggested changes Sep 26, 2023

View reviewed changes

added loader for toggle todo

5f19eba

voievodik requested a review from BudnikOleksii September 27, 2023 07:39

Moroz-Dmytro suggested changes Sep 27, 2023

View reviewed changes

fixed onblur cancel request

acec467

voievodik requested a review from Moroz-Dmytro September 27, 2023 09:08

BudnikOleksii suggested changes Sep 28, 2023

View reviewed changes

removed todotemp component, changed loader functionality

3181e58

voievodik requested a review from BudnikOleksii September 28, 2023 10:48

roman-mirzoian approved these changes Sep 28, 2023

View reviewed changes

		const todosCopy = [...currentTodos];

		return todosCopy.map(todo => ({

		const { todos, setTodos } = useContext(TodoContext);
		const { setErrorMessage } = useContext(ErrorContext);

	<TodoHeader onHandleActive={(value) => setIsActive(value)} />
	<TodoHeader onHandleActive={setIsActive} />

	onHandleActive={(value) => setIsActive(value)}
	onHandleActive={setIsActive}

	onDeleteActive={(value) => setIsDeleteActive(value)}
	onDeleteActive={setIsDeleteActive}

	onLoad={(value) => setIsLoading(value)}
	onLoad={setIsLoading}

		'is-active': (isDeleteActive && id === deletedTodoId)
		\|\| isToggleActive.includes(id) \|\| isCompleteActive,

implement editing functionality #778

Are you sure you want to change the base?

implement editing functionality #778

Conversation

voievodik commented Sep 21, 2023 • edited Loading

roman-mirzoian 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

AndrMar1939 left a comment

Choose a reason for hiding this comment

Moroz-Dmytro 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

BudnikOleksii 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

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

voievodik commented Sep 26, 2023 • edited Loading

Moroz-Dmytro left a comment

Choose a reason for hiding this comment

BudnikOleksii left a comment • edited Loading

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

Moroz-Dmytro 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

BudnikOleksii 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

roman-mirzoian left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

voievodik commented Sep 21, 2023 •

edited

Loading

voievodik commented Sep 26, 2023 •

edited

Loading

BudnikOleksii left a comment •

edited

Loading