Сделать один request на каждый клик.

[Dedonych]

Предлагаю сделать один request на каждое изменение. При нажатии на любую кнопку, которая изменяет user_rate, делать один patch запрос, а не один на каждую кнопку(например, изменить статус - PATCH/PUT status:"dropped"):

PATCH/PUT
user_rate:{
  status: 'completed',
  episodes: 23,
  rewatches: 2,
  score: 3
}

Ну и для манги :

PATCH/PUT
user_rate:{
  status: 'rewatching',
  chapters: 52,
  volumes: 1,
  rewatches: 2,
  score: 3
}

Можно при нажатии на кнопку закинуть изменение на страницу RateControlScreen и потом через useEffect( или как то по другому ) сделать запрос.

[Hokid]

@Dedonych Привильно ли я понимаю, что ты предлагаешь оптимизировать количество запросов к user_rate через агрегирование? Если да, то можно это сделать в src/core/anime-rate/AnimeRate.ts с использованием debounce. Обернуть нужные методы в debounce, агрегировать данные для обновления в временном объекте и передавать его в запрос по таймауту с последующей отчисткой объекта. В целом идея норм, но пока в временем мало, чтобы это сделать. Сможешь это реализовать?

[Dedonych]

@Hokid Я не эксперт). Не сильно шарю. Но побробую как то.

[Dedonych]

Для новичка, как я, сложно разбиратся в твоем коде ( или я просто тупой ). Слишком много функций, которые сплетены воедино. Немножко поизучал код: Чтобы не делать каждый раз запрос на получение user_rate (await this.api.getById(this.data.id);), просто закинуть в localStorage (проще использовать и без промисов быстро берется) или chrome.storage. Потом в одной функции использовать:

//В начале класса 
dataForUpdate = localStorage.getItem('data-from-anime');
if(dataForUpdate){
   dataForUpdate = JSON.parse(localStorage.getItem('data-from-anime'));
}else {
   return NOT_IN_LIST;
}

 async setData(key:string,value:number|RateStatus):Promise<IRate>{
        this.dataForUpdate ={ // из localStorage
            ... this.dataForUpdate,
            [key]:value
         };
          localStorage.setItem('data-from-anime',JSON.stringify(this.dataForUpdate))
         return await this.api.update(this.data.id,this.dataForUpdate);
    }

Например при нажатии на изменении рейтинга:

(s)=>setData('score',s)

Также можно проверять на наличии dataForUpdate: если нету - NOT_IN_LIST. Повторюсь, новичок 3 ур.

[Hokid]

Возможно) Нужно учитывать еще, что обновление данных на сервере может происходить не только из расширения, но и с сайта shikimori и др. сайтов/приложение/расширений, которые пользуются их API. Тут важно поддерживать актуальность данных, поэтому это не хранится в локальных хранилищах, а берется напрямую с источника.

Давай пока отложим это и попробуем определить суть проблемы) Я правильно понимаю, что ты хочешь уменьшить количество запросов к API, чтобы повысить скорость работы расширения?

[Dedonych]

И это тоже. И уменьшить немного код, если будешь убирать другие запросы. В каком то смысле, да, повысить скорость). И есть такая проблема, как неправильный ответ: тайтл на сайте один, а в расширении другой. Я думаю ты знаешь эту проблему. Как я понимаю, все это будет во второй версии?

[Hokid]

Как я понимаю, все это будет во второй версии?

Когда-то начинал переписывать код, но бросил из-за нехватки времени и мотивации. Не знаю, выйдет ли она вообще.

Я тебя понял по поводу скорости. Если у тебя есть время, то буду рад PR)

[Dedonych]

Хорошо. Я еще несколько дней назад взял твое расширение как вдохновение набратся опыта в ts и в react. Я побробовал написать и что то получилось. Я кинул инвайт на репозиторий, если интересно.