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

## Стек
- Vite / React / TypeScript
- Redux Toolkit
- MUI / CSS modules
- Web Workers
- LocalStorage

*Из интересного и нетривиального:*
1. **Web Workers** для загрузок основного списка (+настраиваемое время жизни кэша внутри) - код для воркеров без типизации, он он написан так, чтоб сам себя тестировал. В планах написать бойлерплейт на TypeScript под Vite и Next.js. Воркер получает массив из id и начинает очередь запросов в потоке Воркера, если пользователь хочет получить другой список - очередь прерывается, создаётся новая.
2. **MUI** (из требований по ТЗ)
3. **[PollingComponent](https://gist.github.com/pravosleva/5eae064226f19c4e7fe87014ecd72efe)** для обновления каждого комментария (я подумал, это было бы логично и в духе ТЗ, т.к. он содержит обновленный список id дочерних комментариев) - механизм может быть настроен на отключение поллинга при первом успешном ответе)

*TODO (may be in future):*
1. ✅ Оптимизировать [размеры бандла](https://pravosleva.pro/dist.hacker-news-2024/stats.html)

Конфиг для примера (результат на скринах):
```js
const modulesToSeparate = [
  'axios',
  'retry-axios',
  '@mui/material',
  '@remix-run',
  'react-dom',
]
```

<ImagesGalleryBox itemsJson='[
  {
    "src": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735335725346.png",
    "original": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735335725346.png",
    "title": "До оптимизации",
    "caption": "Один бандл, содержащий сборку"
  },
  {
    "src": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735301427469.png",
    "original": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735301427469.png",
    "title": "До оптимизации",
    "caption": "Один бандл, содержащий сборку"
  },
{
    "src": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735335732795.png",
    "original": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735335732795.png",
    "title": "После оптимизации",
    "caption": "Бандл делится на фрагменты (chunks)"
  },
  {
    "src": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735301432868.png",
    "original": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735301432868.png",
    "title": "После оптимизации",
    "caption": "Бандл делится на фрагменты (chunks)"
  },
  {
    "src": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735301441380.png",
    "original": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735301441380.png",
    "title": "После оптимизации",
    "caption": "Как видно, mui также можно дробить далее"
  }
]' />

*See also [vite config diffs](https://github.com/pravosleva/hacker-news-client-2024/commit/a599aea20bf9ecdc979f605ffb8e2affa519cef9#diff-6a3b01ba97829c9566ef2d8dc466ffcffb4bdac08706d3d6319e42e0aa6890dd)*

2. ⏸️ Те запросы что в основном потоке можно реализовать в ***динамически создаваемых*** воркерах (например, как я это реализовал 3 года назад [здесь](https://www.npmjs.com/package/worker-fetch-looper)). Что сейчас - Поллинг в основном потоке для: 
- Основного списка для очереди (раз в 60 сек) 
- Активной статьи и каждого комментария к ней (раз в 60 сек)
3. ✅ Добавить тесты (прикрутить Vitest) [target diffs](https://github.com/pravosleva/hacker-news-client-2024/commit/b96304c5ca4320ca03a5de15ea409d5c638597e1)
4. ✅ [Рефакторинг компонента PollingComponent](https://github.com/pravosleva/hacker-news-client-2024/commit/bc9ccc6d49d340d9868b5a0ccbc8d121caed372c) - теперь без `any` TS код стал более предсказуемым, но (кмк) не лучше читабельным (об этом не раз видел комменты [вроде этого](https://pravosleva.pro/dist.hacker-news-2024/#/news/42507769) - отчасти согласен с ним). [target diffs](https://github.com/pravosleva/hacker-news-client-2024/commit/bc9ccc6d49d340d9868b5a0ccbc8d121caed372c#diff-886d3f2212873be68a2aa1a706531cdcef9eed99c58082fc709057dc1f26c2a4)

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

NOTE: 2
```jsx
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" },
      ]}
    />
  );
};
```

5. ✅ Контекст **MainNewsListUpdateLogic** *как отдельный слой бизнес-логики* просто чтоб сделать компонент App чище
6. ✅ Интересная фича - favicon может быть перерисован, как это сделано в почте у Яндекса, например. Нашел вариант на чистом js, [переписал **утилиту documentFaviconBadger** на TypeScript](https://gist.github.com/pravosleva/86b52c0a8a1c840e2458b63301d03133)

<ImagesGalleryBox itemsJson='[
  {
    "src": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735396034114.png",
    "original": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735396034114.png",
    "title": "До",
    "caption": "Обычный favicon"
  },
  {
    "src": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735396038480.png",
    "original": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1735396038480.png",
    "title": "После",
    "caption": "favicon будет перерисован"
  }
]'
/>


*TODO (чего лично мне не хватило как пользователю):*
1. ✅ [Режимы основного списка](https://github.com/pravosleva/hacker-news-client-2024/issues/1) - реализовано с отменой существующей очереди при смене режима. Таким образом, приложение практически не делает лишних запросов (есть несущественная погрешность на время прибытия ивента от клиента в воркер - за это время что-то лишнее может быть получено от воркера, но будет проигнорировано клиентом)
2. ✅ Возможность сохранять избранное в локальном хранилище

<ControlsBox
  controlsJson='[
    {
      "title": "START_GITHUB",
      "label": "Source code",
      "type": "link",
      "link": "https://github.com/pravosleva/hacker-news-client-2024"
    },
    {
      "title": "END_DEMO",
      "label": "Life Demo",
      "type": "link",
      "link": "https://pravosleva.pro/dist.hacker-news-2024/"
    }
  ]'
/>

hn2024

Hacker News Client #hn2024