feat: remove outdated react-virtualized

json-server/db.json

@@ -755,7 +755,7 @@
         "isAppRedesigned": true
       },
       "jsonSettings": {
-        "theme": "app_dark_theme",
+        "theme": "app_light_theme",
         "isFirstVisit": true,
         "settingsPageHasBeenOpen": false,
         "isArticlesPageWasOpened": true

package.json

@@ -133,8 +133,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^11.18.3",
     "react-redux": "^8.0.5",
-    "react-router-dom": "^6.2.1",
-    "react-virtualized": "^9.22.5"
+    "react-router-dom": "^6.2.1"
   },
   "loki": {
     "configurations": {

src/entities/Article/ui/ArticleList/ArticleList.module.scss

@@ -1,13 +1,3 @@
-.BIG {
-  .card {
-    margin-bottom: 30px;
-  }
-
-  .row {
-    margin-bottom: 30px;
-  }
-}
-
 .SMALL {
   display: flex;
   flex-wrap: wrap;

src/entities/Article/ui/ArticleList/ArticleList.tsx

@@ -1,10 +1,8 @@
-import { HTMLAttributeAnchorTarget, memo, RefObject } from 'react';
+import { HTMLAttributeAnchorTarget, memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { List, ListRowProps, WindowScroller } from 'react-virtualized';
 
 import { Text, TextSize } from '@/shared/ui/deprecated/Text';
 import { classNames } from '@/shared/lib/classNames';
-import { PAGE_ID } from '@/shared/const/page';
 
 import { ArticleListItemSkeleton } from '../ArticleListItem/ArticleListItemSkeleton';
 import { ArticleListItem } from '../ArticleListItem/ArticleListItem';
@@ -18,7 +16,6 @@ interface ArticleListProps {
   isLoading?: boolean;
   view?: ArticleView;
   target?: HTMLAttributeAnchorTarget;
-  virtualized?: boolean;
 }
 
 const getSkeletons = (view: ArticleView) =>
@@ -27,47 +24,9 @@ const getSkeletons = (view: ArticleView) =>
     .map((item, index) => <ArticleListItemSkeleton className={cls.card} key={index} view={view} />);
 
 export const ArticleList = memo((props: ArticleListProps) => {
-  const {
-    className,
-    articles,
-    isLoading,
-    view = ArticleView.SMALL,
-    target,
-    virtualized = true,
-  } = props;
+  const { className, articles, isLoading, view = ArticleView.SMALL, target } = props;
   const { t } = useTranslation('articles');
 
-  const isBig = view === ArticleView.BIG;
-
-  const itemsPerRow = isBig ? 1 : 3;
-  const rowCount = isBig ? articles.length : Math.ceil(articles.length / itemsPerRow);
-
-  const rowRenderer = ({ index, key, style }: ListRowProps) => {
-    const items = [];
-    const fromIndex = index * itemsPerRow;
-    const toIndex = Math.min(fromIndex + itemsPerRow, articles.length);
-
-    for (let i = fromIndex; i < toIndex; i += 1) {
-      const article = articles[i];
-
-      items.push(
-        <ArticleListItem
-          className={cls.card}
-          article={article}
-          view={view}
-          target={target}
-          key={article.id}
-        />,
-      );
-    }
-
-    return (
-      <div key={key} style={style} className={cls.row}>
-        {items}
-      </div>
-    );
-  };
-
   if (!isLoading && !articles.length) {
     return (
       <div className={classNames(cls.articleList, {}, [className, cls[view]])}>
@@ -77,41 +36,22 @@ export const ArticleList = memo((props: ArticleListProps) => {
   }
 
   return (
-    <WindowScroller scrollElement={document.getElementById(PAGE_ID) || undefined}>
-      {({ width, height, registerChild, onChildScroll, isScrolling, scrollTop }) => (
-        <div
-          data-testid="ArticleList"
-          ref={registerChild as unknown as RefObject<HTMLDivElement>}
-          className={classNames(cls.articleList, {}, [className, cls[view]])}
-        >
-          {virtualized ? (
-            <List
-              height={height ?? 700}
-              rowCount={rowCount}
-              rowHeight={isBig ? 700 : 330}
-              rowRenderer={rowRenderer}
-              width={width ? width - 80 : 700}
-              autoHeight
-              onScroll={onChildScroll}
-              isScrolling={isScrolling}
-              scrollTop={scrollTop}
-            />
-          ) : (
-            articles.map((item) => (
-              <ArticleListItem
-                article={item}
-                view={view}
-                target={target}
-                key={item.id}
-                className={cls.card}
-              />
-            ))
-          )}
+    <div
+      data-testid="ArticleList"
+      className={classNames(cls.articleList, {}, [className, cls[view]])}
+    >
+      {articles.map((item) => (
+        <ArticleListItem
+          article={item}
+          view={view}
+          target={target}
+          key={item.id}
+          className={cls.card}
+        />
+      ))}
 
-          {isLoading && getSkeletons(view)}
-        </div>
-      )}
-    </WindowScroller>
+      {isLoading && getSkeletons(view)}
+    </div>
   );
 });
 

src/entities/Article/ui/ArticleListItem/ArticleListItemRedesigned/ArticleListItemRedesigned.module.scss

@@ -1,4 +1,6 @@
 .BIG {
+  margin-bottom: 20px;
+
   .img {
     width: 100%;
     max-height: 250px;

src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx

@@ -29,7 +29,7 @@ export const ArticleRecommendationsList = memo((props: ArticleRecommendationsLis
     >
       <Text size={TextSize.L} title={t('Рекомендуем')} />
 
-      <ArticleList articles={articles} target="_blank" virtualized={false} />
+      <ArticleList articles={articles} target="_blank" />
     </VStack>
   );
 });