diff --git a/json-server/db.json b/json-server/db.json index 8818b95b..55c5a929 100644 --- a/json-server/db.json +++ b/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 diff --git a/package-lock.json b/package-lock.json index 8d046798..0481bb23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,8 +26,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" }, "devDependencies": { "@babel/core": "^7.17.5", @@ -20877,6 +20876,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz", "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==", + "dev": true, "engines": { "node": ">=6" } @@ -23048,15 +23048,6 @@ "utila": "~0.4" } }, - "node_modules/dom-helpers": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", - "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", - "dependencies": { - "@babel/runtime": "^7.8.7", - "csstype": "^3.0.2" - } - }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -35286,6 +35277,7 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -35295,7 +35287,8 @@ "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true }, "node_modules/property-information": { "version": "5.6.0", @@ -35746,11 +35739,6 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, - "node_modules/react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" - }, "node_modules/react-merge-refs": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz", @@ -35843,23 +35831,6 @@ "react-dom": ">=16.8" } }, - "node_modules/react-virtualized": { - "version": "9.22.5", - "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz", - "integrity": "sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==", - "dependencies": { - "@babel/runtime": "^7.7.2", - "clsx": "^1.0.4", - "dom-helpers": "^5.1.3", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-lifecycles-compat": "^3.0.4" - }, - "peerDependencies": { - "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0", - "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0" - } - }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -58286,7 +58257,8 @@ "clsx": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz", - "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==" + "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==", + "dev": true }, "co": { "version": "4.6.0", @@ -59980,15 +59952,6 @@ "utila": "~0.4" } }, - "dom-helpers": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", - "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", - "requires": { - "@babel/runtime": "^7.8.7", - "csstype": "^3.0.2" - } - }, "dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -69436,6 +69399,7 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -69445,7 +69409,8 @@ "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true } } }, @@ -69793,11 +69758,6 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, - "react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" - }, "react-merge-refs": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz", @@ -69847,19 +69807,6 @@ "react-router": "6.14.2" } }, - "react-virtualized": { - "version": "9.22.5", - "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz", - "integrity": "sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==", - "requires": { - "@babel/runtime": "^7.7.2", - "clsx": "^1.0.4", - "dom-helpers": "^5.1.3", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-lifecycles-compat": "^3.0.4" - } - }, "read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", diff --git a/package.json b/package.json index cc3c075a..660839e7 100644 --- a/package.json +++ b/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": { diff --git a/src/entities/Article/ui/ArticleList/ArticleList.module.scss b/src/entities/Article/ui/ArticleList/ArticleList.module.scss index 9d68aad4..90df1470 100644 --- a/src/entities/Article/ui/ArticleList/ArticleList.module.scss +++ b/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; diff --git a/src/entities/Article/ui/ArticleList/ArticleList.tsx b/src/entities/Article/ui/ArticleList/ArticleList.tsx index 4c4e8ce8..32c68476 100644 --- a/src/entities/Article/ui/ArticleList/ArticleList.tsx +++ b/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) => ); 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( - , - ); - } - - return ( -
- {items} -
- ); - }; - if (!isLoading && !articles.length) { return (
@@ -77,41 +36,22 @@ export const ArticleList = memo((props: ArticleListProps) => { } return ( - - {({ width, height, registerChild, onChildScroll, isScrolling, scrollTop }) => ( -
} - className={classNames(cls.articleList, {}, [className, cls[view]])} - > - {virtualized ? ( - - ) : ( - articles.map((item) => ( - - )) - )} +
+ {articles.map((item) => ( + + ))} - {isLoading && getSkeletons(view)} -
- )} - + {isLoading && getSkeletons(view)} +
); }); diff --git a/src/entities/Article/ui/ArticleListItem/ArticleListItemRedesigned/ArticleListItemRedesigned.module.scss b/src/entities/Article/ui/ArticleListItem/ArticleListItemRedesigned/ArticleListItemRedesigned.module.scss index 0a8cd0e0..9413a180 100644 --- a/src/entities/Article/ui/ArticleListItem/ArticleListItemRedesigned/ArticleListItemRedesigned.module.scss +++ b/src/entities/Article/ui/ArticleListItem/ArticleListItemRedesigned/ArticleListItemRedesigned.module.scss @@ -1,4 +1,6 @@ .BIG { + margin-bottom: 20px; + .img { width: 100%; max-height: 250px; diff --git a/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx b/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx index c4a23d11..3fd6761d 100644 --- a/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx +++ b/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx @@ -29,7 +29,7 @@ export const ArticleRecommendationsList = memo((props: ArticleRecommendationsLis > - + ); });