Hacker News Client 2024

Скидываю сюда чтоб ссылка не потерялась. Ну и как пример кода в соответствии с требуемым стеком (см. описание). От себя добавил пару фич для удобства навигации и возврату к статье из списка.

Стек

Vite / React / TypeScript
Redux Toolkit
MUI / CSS modules
Web Workers
LocalStorage

Из интересного и нетривиального:

Web Workers для загрузок основного списка (+настраиваемое время жизни кэша внутри) - код для воркеров без типизации, он он написан так, чтоб сам себя тестировал. В планах написать бойлерплейт на TypeScript под Vite и Next.js. Воркер получает массив из id и начинает очередь запросов в потоке Воркера, если пользователь хочет получить другой список - очередь прерывается, создаётся новая.
MUI (из требований по ТЗ)
PollingComponent для обновления каждого комментария (я подумал, это было бы логично и в духе ТЗ, т.к. он содержит обновленный список id дочерних комментариев) - механизм может быть настроен на отключение поллинга при первом успешном ответе)

TODO (may be in future):

✅ Оптимизировать размеры бандла

Конфиг для примера (результат на скринах):

const modulesToSeparate = [
  'axios',
  'retry-axios',
  '@mui/material',
  '@remix-run',
  'react-dom',
]

See also vite config diffs

⏸️ Те запросы что в основном потоке можно реализовать в динамически создаваемых воркерах (например, как я это реализовал 3 года назад здесь). Что сейчас - Поллинг в основном потоке для:

Основного списка для очереди (раз в 60 сек)
Активной статьи и каждого комментария к ней (раз в 60 сек)

✅ Добавить тесты (прикрутить Vitest) target diffs
✅ Рефакторинг компонента PollingComponent - теперь без any TS код стал более предсказуемым, но (кмк) не лучше читабельным (об этом не раз видел комменты вроде этого - отчасти согласен с ним). target diffs

NOTE: 1

const genericMemo: <T>(component: T) => T = memo
function GenericComponent<Value>(props: PropsWithGeneric<Value>) {
  return <div />
}
export const GenericMemoComponent = genericMemo(GenericComponent)

NOTE: 2

function MyComponent<T>(props: {
  options: {
    label: string;
    value: T;
  }[];
}) {
  return <div>MyComponent</div>;
}
type DominantHand = "RIGHT" | "LEFT";
function ParentComponent() {
  return (
    <MyComponent<DominantHand>
      options={[
        { label: "Right Hand", value: "RIGHT" },
        { label: "Left Hand", value: "LEFT" },
      ]}
    />
  );
};

✅ Контекст MainNewsListUpdateLogic как отдельный слой бизнес-логики просто чтоб сделать компонент App чище
✅ Интересная фича - favicon может быть перерисован, как это сделано в почте у Яндекса, например. Нашел вариант на чистом js, переписал утилиту documentFaviconBadger на TypeScript

TODO (чего лично мне не хватило как пользователю):

✅ Режимы основного списка - реализовано с отменой существующей очереди при смене режима. Таким образом, приложение практически не делает лишних запросов (есть несущественная погрешность на время прибытия ивента от клиента в воркер - за это время что-то лишнее может быть получено от воркера, но будет проигнорировано клиентом)
✅ Возможность сохранять избранное в локальном хранилище