Как сделать индикатор загрузки на каждом объекте в списке, если id генерируется только на сервере?

Question

[Иван]

То есть, у меня есть список файлов, у каждого есть свой id и я могу сделать loadingSet и смотреть если id файла в нем есть, то отображаем индикатор загрузки на файле, но как сделать такие индикаторы при добавление новых файлов, у которых еще нет id? Какие способы существуют для того, чтобы реализовать такой функционал?

Я не могу хранить количество загружаемых элементов и отображать ровно столько же индикаторов загрузки в конце списка, потому что еще должно отображать название и размер файла вместе с индикатором.
Я также не могу генерировать свое id и хранить его в сете, потому что с сервера все равно прийдёт файл с новым id и файл с индикатором никогда не уйдет

Мне не нужен код, а скорее нужна идея или уже готовые решения, но для ясности я скажу, что такую загрузку для каждого файла мне нужно провернуть в мобильном приложение и уже все реализовано, но в редизайне, который нам предоставили, загрузку нужно сделать на каждом файле в списке, вместо общего лоадера на странице

Comments

[Владимир]

Ты очень мутно описал функционал, которые тебе нужен.
Список файлов to upload, или download? Откуда у файла id и откуда ты их добавляешь.
Зачем тебе отдельные списки файлов и loadingSet, почему нельзя признак загрузки держать в самом списке файлов у каждого айтема и выставлять его из промиса, который отвечает за загрузку или выгрузку.

[Иван]

Владимир, Да, довольно сложно описать то, что мне нужно на деле... По сути выглядит это так: список файлов и рядом кнопка, которая за upload отвечает, а при нажатии на сами файлы можно выбрать удалить или заменить файл
Загрузку держать, ты имеешь в виду сделать loadingStatus для каждого файла? Если так то представь, что я добавляю новый файл:

const file1 = {name: 'File 1', comment: 'Мы проверяем данные', ...}

и поставлю ему loadingStatus: loading и отправлю на сервер без этого статуса
В это время в списке сделаю так: {file1.loadingStatus === 'loading' && ], т.е. отрендерю индикатор у такого файла и перед этим добавлю его в список с файлами, который хранится в сторе
Потом когда промис с upload разрешится и я получу файл, который был загружен сервером, то у него будет сгенерированное сервером id, то же имя и все остальные свойства. Как мне понять, какой файл загрузился и у какого файла в общем списке поменять loadingStatus, если id только что сгенерировалось сервером? По имени тоже не сделать, потому что имена могут быть одинаковые у файлов
То есть тут проблема в том, что мне нужно как-то отслеживать изменения в файлах, которые создаются на клиенте без id и свойств по которым можно отслеживать изменения, и когда приходит ответ с сервера менять список файлов

[Владимир]

Иван,
Ты сам себя в угол загоняешь.
Ты загружаешь файл, допустим после того как он загружен ты получаешь ID, URL и еще какую то информацию и тебе нужно этот файл показать в списке. Есть два варианта
1) Ты можешь влиять на API , тогда нужно чтобы в response на запрос на аплоад файла тебе пришел ID, сам fetch у тебя или внутри объекта в списке, или имеет на него ссылку, проставляешь необходимые атрибуты, убираешь лоадинг статус, живешь щасливо.
2) Ты не влияешь на API и загрузка файла и получение списка после загрузки у тебя идут разными запросами (не самый лучший вариант)
a) После загрузки файла (файлов) тебе нужно опять получить список с файлами
б) Если ты не можешь привязать файл, который загружается к ID, то просто удаляй из списка айтем файла, который загружается и отрисовывай новый, уже со всеми атрибутами и без признака загрузки.

[Иван]

Владимир, Вот второй вариант мне больше подходит, я его и старался реализовать, но что если загружаются стразу много файлов? 10 файлов, которые с индикатором, 7 загрузился -> нужно 7 файл заменить на реальный файл...

[Владимир]

Иван, проблема не в том, что 7 файлов нужно заменить, проблема в том, что тебе 10 раз нужно запрос на список файлов делать, заменить то плевое дело, а каждый запрос это задержка и ожидание ответа от сервера.
Еще и дебоунс нужно имплементировать, чтобы отображать только последний отправленный, если до отправки не успел перерисоваться
Имхо немного рагульный API, но тем неменее решение все равно есть.

[chincharovpc]

Иван, Нельзя при загрузке файла сгенерировать key параметр, чтобы по нему заменять файлы на реальные после получения ответа от upload? Т.е. ты не должен опираться на ключ массива, поэтому нужнен уникальный ключ для каждого объекта в массиве.

[Иван]

Нет, я говорю, что 7 по порядку файл с индикатором загрузки заменить на реальный файл и убрать индикатор.
То есть нажал добавить 10 файлов и у тебя показываются 10 файлов с индикаторами загрузки -> 7 по счету загрузился на сервер и пришел в ответе новый список файлов с этим 7 по счету, но он уже имеет id -> отрисовывается новый список с новым файлом и 9 индикаторами
А список файлов не будет сильно большим и там у каждого файла хранятся ссылка на файл на сервере, так что получать целый список с сервера не сильно на времени сказывается

[Иван]

Вот что-то вроде этого я имею в виду

// Files in a store
const files = [
  {
    id: "rf32fef",
    name: "File 1",
    loadingStatus: "idle",
    comment: "it's file 1",
  },
  {
    id: "rf32ffaefae",
    name: "File 2",
    loadingStatus: "idle",
    comment: "it's file 2",
  },
  {
    id: "rf32feffaef",
    name: "File 3",
    loadingStatus: "idle",
    comment: "it's file 3",
  },
  // User uploads 3 new files
  {
    id: "New File",
    name: "File 4",
    loadingStatus: "loading",
    comment: "it's file 4 that is loading",
  },
  {
    id: "New File",
    name: "File 5",
    loadingStatus: "loading",
    comment: "it's file 5 that is loading",
  },
  {
    id: "New File",
    name: "File 6",
    loadingStatus: "loading",
    comment: "it's file 6 that is loading",
  },
];

// Response when 4th file was loaded but 5th and 6th aren't
const dataFromServer = [
  {
    id: "rf32fef",
    name: "File 1",
    comment: "it's file 1",
  },
  {
    id: "rf32ffaefae",
    name: "File 2",
    comment: "it's file 2",
  },
  {
    id: "rf32feffaef",
    name: "File 3",
    comment: "it's file 3",
  },
  {
    id: "ifoajioejfaoeif",
    name: "File 4",
    comment: "it's file 4 that is loading",
  },
];

То есть новый список просто не будет содержать файлов, которые все еще грузятся и все индикаторы уйдут

Answer 1

[Арслан Абаев]

Надеюсь я правильно понял вопрос. Вам с апи прилетает список примерно такой

{
    id: 1,
    name: 'some cool name',
    size: 123,
}

Прямо в .jsx вы можете проверять на наличие id с помощью логических операторов и выдавать лоадер или же ваш файл.

Все достаточно просто я оставил комментарии в коде
https://stackblitz.com/edit/react-4dx9st?file=src%...