feat: add vite for dev mode, uninstall virtualized

TomatoVan · Mar 6, 2024 · 7d02946 · 7d02946
1 parent f0858ae
commit 7d02946
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 86 deletions.
diff --git a/extractedTranslations/en/translation.json b/extractedTranslations/en/translation.json
@@ -1,5 +1,6 @@
 {
   "": "",
+  "123": "123",
   "Admin panel": "",
   "All": "",
   "Articles app": "",

diff --git a/extractedTranslations/ru/translation.json b/extractedTranslations/ru/translation.json
@@ -1,4 +1,5 @@
 {
+  "123": "123",
   "Admin panel": "Admin panel",
   "All": "All",
   "Articles app": "Articles app",

diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/src/index.tsx"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -5,8 +5,10 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack serve --env port=3000",
+    "start:vite": "vite",
     "start:dev:server": "node ./json-server/index.js",
     "start:dev": "concurrently \"npm start\" \"npm run start:dev:server\"",
+    "start:dev:vite": "concurrently \"npm run start:vite\" \"npm run start:dev:server\"",
     "build:prod": "webpack  --env mode=production apiUrl=https://production-project-server-three-sable.vercel.app",
     "build:dev": "webpack  --env mode=development",
     "lint:ts": "eslint \"**/*.{ts,tsx}\"",
@@ -98,7 +100,10 @@
     "storybook-addon-mock": "^2.4.1",
     "circular-dependency-plugin": "^5.2.2",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
-    "ts-morph": "^16.0.0"
+    "ts-morph": "^16.0.0",
+    "@vitejs/plugin-react": "^2.1.0",
+    "vite": "^3.1.0",
+    "vite-plugin-svgr": "^2.2.1"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.0",

diff --git a/src/entities/Article/ui/ArticleList/ArticleList.tsx b/src/entities/Article/ui/ArticleList/ArticleList.tsx
@@ -1,22 +1,19 @@
 import { useTranslation } from 'react-i18next';
-import { HTMLAttributeAnchorTarget, LegacyRef, memo } from 'react';
-import { List, ListRowProps, WindowScroller } from 'react-virtualized';
-import { Text, TextSize } from '@/shared/ui/Text/Text';
+import { HTMLAttributeAnchorTarget, memo } from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
-import { PAGE_ID } from '@/widgets/Page/Page';
-import { ArticleView } from '../../model/consts/consts';
+import { Text, TextSize } from '@/shared/ui/Text/Text';
 import { ArticleListItemSkeleton } from '../ArticleListItem/ArticleListItemSkeleton';
 import { ArticleListItem } from '../ArticleListItem/ArticleListItem';
 import cls from './ArticleList.module.scss';
 import { Article } from '../../model/types/article';
+import { ArticleView } from '../../model/consts/consts';
 
 interface ArticleListProps {
   className?: string;
   articles: Article[];
   isLoading?: boolean;
   target?: HTMLAttributeAnchorTarget;
   view?: ArticleView;
-	virtualized?: boolean;
 }
 
 const getSkeletons = (view: ArticleView) => new Array(view === ArticleView.SMALL ? 9 : 3)
@@ -32,95 +29,32 @@ export const ArticleList = memo((props: ArticleListProps) => {
         view = ArticleView.SMALL,
         isLoading,
         target,
-        virtualized = true,
     } = props;
     const { t } = useTranslation();
 
-    const isBig = view === ArticleView.BIG;
-
-    const itemsPerRow = isBig ? 1 : 3;
-    const rowCount = isBig ? articles.length : Math.ceil(articles.length / itemsPerRow);
-
-    const rowRender = ({
-        index, isScrolling, 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) {
-            items.push(
-                <ArticleListItem
-                    article={articles[i]}
-                    view={view}
-                    target={target}
-                    key={`str${i}`}
-                    className={cls.card}
-                />,
-            );
-        }
-
-        return (
-            <div
-                key={key}
-                style={style}
-                className={cls.row}
-            >
-                {items}
-            </div>
-        );
-    };
-
     if (!isLoading && !articles.length) {
         return (
             <div className={classNames(cls.ArticleList, {}, [className, cls[view]])}>
-                <Text size={TextSize.L} title={t('no articles found')} />
+                <Text size={TextSize.L} title={t('Статьи не найдены')} />
             </div>
         );
     }
 
     return (
-        <WindowScroller
-            scrollElement={document.getElementById(PAGE_ID) as Element}
+        <div
+            className={classNames(cls.ArticleList, {}, [className, cls[view]])}
         >
-            {({
-                height,
-                width,
-                registerChild,
-                onChildScroll,
-                isScrolling,
-                scrollTop,
-            }) => (
-                <div
-                    ref={registerChild as LegacyRef<HTMLDivElement>}
-                    className={classNames(cls.ArticleList, {}, [className, cls[view]])}
-                >
-                    {virtualized ? (
-                        <List
-                            height={height ?? 700}
-                            rowCount={rowCount}
-                            rowHeight={isBig ? 500 : 330}
-                            rowRenderer={rowRender}
-                            width={width ? width - 80 : 700}
-                            autoHeight
-                            onScroll={onChildScroll}
-                            isScrolling={isScrolling}
-                            scrollTop={scrollTop}
-                        />
-                    ) : (
-                        articles.map((article) => (
-                            <ArticleListItem
-                                article={article}
-                                view={view}
-                                key={article.id}
-                                target={target}
-                                className={cls.card}
-                            />
-                        ))
-                    )}
-                    {isLoading && getSkeletons(view)}
-                </div>
-            )}
-        </WindowScroller>
+            {articles.map((item) => (
+                <ArticleListItem
+                    article={item}
+                    view={view}
+                    target={target}
+                    key={item.id}
+                    className={cls.card}
+                />
+            ))}
+            {isLoading && getSkeletons(view)}
+        </div>
+
     );
 });
diff --git a/...s/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx b/...s/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx
@@ -28,7 +28,6 @@ export const ArticleRecommendationsList = memo((props: ArticleRecommendationsLis
             <ArticleList
                 articles={articles}
                 target="_blank"
-                virtualized={false}
             />
         </VStack>
     );

diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [
+        react(),
+        svgr({ exportAsDefault: true }),
+    ],
+    resolve: {
+        alias: [
+            { find: '@', replacement: '/src' },
+        ],
+    },
+    define: {
+        __IS_DEV__: JSON.stringify(true),
+        __API__: JSON.stringify('http://localhost:8000'),
+        __PROJECT__: JSON.stringify('frontend'),
+    },
+});