React Effect middle

[Nolra]

Code: https://github.com/Nolra/front_course_2023/tree/react-effect-middle

Homework: (https://nolra.github.io/react_hw/ - вкладка Effect, компонент - Todos + Effect)

Добавим в нашу последнюю версию приложения "todo" api из https://jsonplaceholder.typicode.com/ Добавим функцию инициализации и изменения конкретных todo (post для текста и completed) а также удаления конкретного todo.

Итого у вас будет новый файл api.js, и в нем будет 4 новых функции getTodos - для инициализации приложения с 5 todo элементами deleteTodo - для удаления элемента списка addTodo - для добавления элемента списка updateTodo - для обновления элемента списка

Функция получения данных из api js для образца

const url = "https://jsonplaceholder.typicode.com";
const userId = 1;

const getTodos = async function() {
  try {
    const responce = await fetch(`${url}/todos?_limit=5`);
    const todos = await responce.json();
    return todos;
  } catch (error) {
    console.log("ОШИБКА: ", error.message);
    return [];
  }
}

и updateTodo для обновления данных

const updateTodo = async function(todo) {
  try {
    const responce = await fetch(`${url}/todos/${todo.id}`, {
      method: 'PUT',
      body: JSON.stringify({
        id: todo.id,
        title: todo.title,
        completed: todo.completed,
        userId,
      }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
    const updTodo = await responce.json();
    return { updStatus: responce.ok, updTodo };
  } catch (error) {
    console.log("ОШИБКА: ", error.message);
    return {error};     
  }

Две оставшиеся (add и delete) опишите самостоятельно, пользуясь документацией jsonplaceholder

Добавьте простую обработку ошибок с выводом ошибки в консоль (через response.ok и try-catch), добейтесь того, чтобы наличие ошибок не ломало ваше приложение (ошибки происходят с новыми добавленными элементами, когда вы пытаетесь их модифицировать).

Кроме того, реализуйте блокировку конкретного компонента пока идет загрузка (пока сервер не ответил на запрос)

[voidaugust]

https://pashbespaloff.github.io/react-craftworks/ https://github.com/pashbespaloff/react-craftworks

[Nolra]

https://pashbespaloff.github.io/react-craftworks/ https://github.com/pashbespaloff/react-craftworks

Есть проблема при удалении (кейс - создал 3 todo, удаляю одну - удаляются все). Хотелось бы так же получить более осмысленное сообщение об ошибке в консоли, когда пытаюсь edit созданный todo.

[voidaugust]

https://pashbespaloff.github.io/react-craftworks/ https://github.com/pashbespaloff/react-craftworks

Есть проблема при удалении (кейс - создал 3 todo, удаляю одну - удаляются все). Хотелось бы так же получить более осмысленное сообщение об ошибке в консоли, когда пытаюсь edit созданный todo.

Про удаление — у тебя в примере такая же история, поэтому намеренно не стал с этим ничего делать. Там история в том, что id у них одинаковый из-за того, что API фейковый, и мы не можем его менять на самом деле. А если давать id самим, то как бы цельность задачи (имитация работы с API) рушится.

Осмысленное — не совсем понял, о чём речь... потому что опять же ответ идёт с API.

[Nolra]

https://pashbespaloff.github.io/react-craftworks/ https://github.com/pashbespaloff/react-craftworks

Есть проблема при удалении (кейс - создал 3 todo, удаляю одну - удаляются все). Хотелось бы так же получить более осмысленное сообщение об ошибке в консоли, когда пытаюсь edit созданный todo.

Про удаление — у тебя в примере такая же история, поэтому намеренно не стал с этим ничего делать. Там история в том, что id у них одинаковый из-за того, что API фейковый, и мы не можем его менять на самом деле. А если давать id самим, то как бы цельность задачи (имитация работы с API) рушится.

Да, забыл про это, снимаем тогда этот вопрос.

Осмысленное — не совсем понял, о чём речь... потому что опять же ответ идёт с API.

Вот пример указать о том, с чем именно произошла ошибка и какая.

[voidaugust]

https://pashbespaloff.github.io/react-craftworks/ https://github.com/pashbespaloff/react-craftworks

Есть проблема при удалении (кейс - создал 3 todo, удаляю одну - удаляются все). Хотелось бы так же получить более осмысленное сообщение об ошибке в консоли, когда пытаюсь edit созданный todo.

Про удаление — у тебя в примере такая же история, поэтому намеренно не стал с этим ничего делать. Там история в том, что id у них одинаковый из-за того, что API фейковый, и мы не можем его менять на самом деле. А если давать id самим, то как бы цельность задачи (имитация работы с API) рушится.

Да, забыл про это, снимаем тогда этот вопрос.

Осмысленное — не совсем понял, о чём речь... потому что опять же ответ идёт с API.

Вот пример указать о том, с чем именно произошла ошибка и какая.

Сделал детальнее эти сообщения в api.js.