component recommendation articles for article details page

veronikaa-kuznetsova · Jun 21, 2024 · 956c76e · 956c76e
1 parent 2b19fe5
commit 956c76e
Show file tree

Hide file tree

Showing 55 changed files with 893 additions and 155 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -43,7 +43,7 @@ module.exports = {
       'error',
       {
         markupOnly: true,
-        ignoreAttribute: ['data-testid', 'to'],
+        ignoreAttribute: ['data-testid', 'to', 'target'],
       },
     ],
     'max-len': ['error', { ignoreComments: true, code: 150 }],

diff --git a/json-server/db.json b/json-server/db.json
@@ -14,10 +14,10 @@
   "articles": [
     {
       "id": "1",
-      "title": "Javascript news",
+      "title": "Javascript news ...",
       "subtitle": "Что нового в JS за 2024 год?",
       "img": "https://teknotower.com/wp-content/uploads/2020/11/js.png",
-      "views": 1022,
+      "views": 805,
       "createdAt": "26.02.2022",
       "userId": "1",
       "type": [
@@ -89,8 +89,8 @@
       "title": "Python news",
       "subtitle": "Что нового в Python за 2024 год?",
       "img": "https://micros.uz/upload/iblock/85a/nwx4nuozlvjg8a4h57kqtpdqginf5ovg/python_programming_language.png",
-      "views": 1022,
-      "createdAt": "26.02.2022",
+      "views": 750,
+      "createdAt": "26.02.2023",
       "userId": "1",
       "type": [
         "IT"
@@ -113,8 +113,8 @@
       "title": "Kotlin news",
       "subtitle": "Что нового в Kotlin за 2024 год?",
       "img": "https://maxilect.ru/wp-content/uploads/sites/1/2021/11/c344c59f81efa338f5dd4324a8411696.jpeg",
-      "views": 1022,
-      "createdAt": "26.02.2022",
+      "views": 850,
+      "createdAt": "26.02.2021",
       "userId": "1",
       "type": [
         "IT"
@@ -137,8 +137,8 @@
       "title": "Python news",
       "subtitle": "Что нового в Python за 2024 год?",
       "img": "https://datascientest.com/en/wp-content/uploads/sites/9/2024/02/python.png",
-      "views": 1022,
-      "createdAt": "26.02.2022",
+      "views": 456,
+      "createdAt": "26.08.2022",
       "userId": "1",
       "type": [
         "IT"
@@ -161,8 +161,8 @@
       "title": "Kotlin news",
       "subtitle": "Что нового в JS за 2024 год?",
       "img": "https://maspex.com/wp-content/uploads/2021/05/MAS2MA-PL-WWW-KOMPRO-KOTLIN-870X755PX-V02-870x755.jpg",
-      "views": 1022,
-      "createdAt": "26.02.2022",
+      "views": 20,
+      "createdAt": "26.12.2022",
       "userId": "1",
       "type": [
         "IT"
@@ -185,8 +185,8 @@
       "title": "Python news",
       "subtitle": "Что нового в Python за 2024 год?",
       "img": "https://dlacademy.ru/media/blog/image_7.jpg",
-      "views": 1022,
-      "createdAt": "26.02.2022",
+      "views": 74,
+      "createdAt": "17.02.2024",
       "userId": "1",
       "type": [
         "IT"
@@ -209,8 +209,8 @@
       "title": "Kotlin news",
       "subtitle": "Что нового в Kotlin за 2024 год?",
       "img": "https://habrastorage.org/getpro/habr/upload_files/784/040/572/784040572c499a4b59cbf7ce8d06e31e.png",
-      "views": 1022,
-      "createdAt": "26.02.2022",
+      "views": 898,
+      "createdAt": "26.01.2023",
       "userId": "1",
       "type": [
         "IT"
@@ -233,8 +233,8 @@
       "title": "Python news",
       "subtitle": "Что нового в Python за 2024 год?",
       "img": "https://datascientest.com/en/wp-content/uploads/sites/9/2024/02/python.png",
-      "views": 1022,
-      "createdAt": "26.02.2022",
+      "views": 636,
+      "createdAt": "01.02.2024",
       "userId": "1",
       "type": [
         "IT"
@@ -257,8 +257,8 @@
       "title": "Kotlin news",
       "subtitle": "Что нового в Kotlin за 2024 год?",
       "img": "https://habrastorage.org/getpro/habr/upload_files/784/040/572/784040572c499a4b59cbf7ce8d06e31e.png",
-      "views": 1022,
-      "createdAt": "26.02.2022",
+      "views": 225,
+      "createdAt": "18.04.2024",
       "userId": "1",
       "type": [
         "IT"
@@ -281,8 +281,8 @@
       "title": "Python news",
       "subtitle": "Что нового в JS за 2024 год?",
       "img": "https://datascientest.com/en/wp-content/uploads/sites/9/2024/02/python.png",
-      "views": 1022,
-      "createdAt": "26.02.2022",
+      "views": 21,
+      "createdAt": "25.02.2022",
       "userId": "1",
       "type": [
         "IT"
@@ -305,8 +305,8 @@
       "title": "Kotlin news",
       "subtitle": "Что нового в JS за 2024 год?",
       "img": "https://habrastorage.org/getpro/habr/upload_files/784/040/572/784040572c499a4b59cbf7ce8d06e31e.png",
-      "views": 1022,
-      "createdAt": "26.02.2022",
+      "views": 321,
+      "createdAt": "08.02.2022",
       "userId": "1",
       "type": [
         "IT"
@@ -329,8 +329,8 @@
       "title": "Python news",
       "subtitle": "Что нового в JS за 2024 год?",
       "img": "https://datascientest.com/en/wp-content/uploads/sites/9/2024/02/python.png",
-      "views": 1022,
-      "createdAt": "26.02.2022",
+      "views": 889,
+      "createdAt": "26.06.2022",
       "userId": "1",
       "type": [
         "IT"
@@ -353,8 +353,8 @@
       "title": "Kotlin news",
       "subtitle": "Что нового в JS за 2024 год?",
       "img": "https://habrastorage.org/getpro/habr/upload_files/784/040/572/784040572c499a4b59cbf7ce8d06e31e.png",
-      "views": 1022,
-      "createdAt": "26.02.2022",
+      "views": 864,
+      "createdAt": "08.02.2024",
       "userId": "1",
       "type": [
         "IT"
@@ -378,7 +378,7 @@
       "subtitle": "Что нового в JS за 2024 год?",
       "img": "https://datascientest.com/en/wp-content/uploads/sites/9/2024/02/python.png",
       "views": 1022,
-      "createdAt": "26.02.2022",
+      "createdAt": "27.12.2024",
       "userId": "1",
       "type": [
         "IT"
@@ -401,8 +401,8 @@
       "title": "Kotlin news",
       "subtitle": "Что нового в JS за 2024 год?",
       "img": "https://habrastorage.org/getpro/habr/upload_files/784/040/572/784040572c499a4b59cbf7ce8d06e31e.png",
-      "views": 1022,
-      "createdAt": "26.02.2022",
+      "views": 877,
+      "createdAt": "05.02.2023",
       "userId": "1",
       "type": [
         "IT"

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -22,12 +22,25 @@
   "incorrect_username_or_password": "Incorrect username or password",
   "profile_page": "Profile page",
   "error_loading_an_article": "Error loading an article",
-  "error_loading_articles_page": "Error loading the articles page",
+  "articles_not_found": "Articles not found",
   "article_not_found": "Article not found",
   "comments": "Comments",
+  "we_recommend": "We recommend",
   "start_of_discussion": "Start of discussion",
   "send": "Send",
   "enter_comment_text": "Enter comment text",
   "read_more": "Read more...",
-  "go_back": "Go back"
+  "go_back": "Go back",
+  "search": "Search",
+  "sort_software": "Sort Software",
+  "by": "by",
+  "ascending": "ascending",
+  "descending": "descending",
+  "date_of_creation": "date of creation",
+  "name": "name",
+  "views": "views",
+  "all_articles": "All Articles",
+  "it": "IT",
+  "economics": "Economy",
+  "science": "Science"
 }
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
@@ -22,12 +22,25 @@
   "incorrect_username_or_password": "Неверное имя пользователя или пароль",
   "profile_page": "Страница профиля",
   "error_loading_an_article": "Ошибка при загрузке статьи",
-  "error_loading_articles_page": "Ошибка при загрузке страницы статей",
+  "articles_not_found": "Статьи не найдены",
   "article_not_found": "Статья не найдена",
   "comments": "Комментарии",
+  "we_recommend": "Мы рекомендуем",
   "start_of_discussion": "Начало обсуждения",
   "send": "Отправить",
   "enter_comment_text": "Введите текст комментария",
   "read_more": "Читать далее...",
-  "go_back": "Вернуться назад"
+  "go_back": "Вернуться назад",
+  "search": "Поиск",
+  "sort_software": "Сортировать по",
+  "by": "по",
+  "ascending": "возрастанию",
+  "descending": "убыванию",
+  "date_of_creation": "дате создания",
+  "name": "названию",
+  "views": "просмотрам",
+  "all_articles": "Все статьи",
+  "it": "IT",
+  "economics": "Экономика",
+  "science": "Наука"
 }
diff --git a/src/app/providers/StoreProvider/config/StateSchema.ts b/src/app/providers/StoreProvider/config/StateSchema.ts
@@ -8,7 +8,7 @@ import { CombinedState } from 'redux';
 import { ProfileSchema } from 'entities/Profile';
 import { AxiosInstance } from 'axios';
 import { ArticleDetailsSchema } from 'entities/Article';
-import { ArticleDetailsCommentsSchema } from 'pages/ArticleDetailsPage';
+import { ArticleDetailsPageSchema } from 'pages/ArticleDetailsPage';
 import { AddCommentFormSchema } from 'features/addCommentForm';
 import { ArticlesPageSchema } from 'pages/ArticlesPage';
 import { UISchema } from 'features/UI';
@@ -22,9 +22,9 @@ export interface StateSchema {
  loginForm?: LoginSchema;
  profile?: ProfileSchema;
  articleDetails?: ArticleDetailsSchema;
- articleDetailsComments?: ArticleDetailsCommentsSchema;
  addCommentForm?: AddCommentFormSchema;
  articlesPage?: ArticlesPageSchema;
+ articleDetailsPage?: ArticleDetailsPageSchema;
 }
 
 export type StateSchemaKey = keyof StateSchema;

diff --git a/src/app/styles/index.scss b/src/app/styles/index.scss
@@ -18,3 +18,18 @@ body {
   display: flex;
 }
 
+*::-webkit-scrollbar {
+  width: 12px; /* ширина scrollbar */
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--card-bg); /* цвет дорожки */
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--inverted-primary-color); /* цвет плашки */
+  border-radius: 20px; /* закругления плашки */
+  border: 2px solid var(--primary-color); /* padding вокруг плашки */
+}
+
diff --git a/src/app/styles/reset.scss b/src/app/styles/reset.scss
@@ -11,3 +11,7 @@ select {
   margin: 0;
   font: inherit;
 }
+
+a {
+  text-decoration: none;
+}
diff --git a/src/entities/Article/index.ts b/src/entities/Article/index.ts
@@ -2,8 +2,12 @@ export {
   ArticleDetails,
 } from './ui/ArticleDetails/ArticleDetails';
 
-export { Article, ArticleView } from './model/types/article';
+export {
+  Article, ArticleView, ArticleSortField, ArticleType,
+} from './model/types/article';
 export type { ArticleDetailsSchema } from './model/types/articleDetailsSchema';
 
 export { ArticleList } from './ui/ArticleList/ArticleList';
 export { ArticleViewSelector } from './ui/ArticleViewSelector/ArticleViewSelector';
+export { ArticleSortSelector } from './ui/ArticleSortSelector/ArticleSortSelector';
+export { ArticleTypeTabs } from './ui/ArticleTypeTabs/ArticleTypeTabs';
diff --git a/src/entities/Article/model/types/article.ts b/src/entities/Article/model/types/article.ts
@@ -1,5 +1,11 @@
 import { User } from 'entities/User';
 
+export enum ArticleSortField {
+  VIEWS = 'views',
+  TITLE = 'title',
+  CREATED = 'createdAt',
+}
+
 export enum ArticleBlockType {
   CODE = 'CODE',
   IMAGE = 'IMAGE',
@@ -31,6 +37,7 @@ export interface ArticleTextBlock extends ArticleBlockBase {
 export type ArticleBlock = ArticleCodeBlock | ArticleImageBlock | ArticleTextBlock;
 
 export enum ArticleType {
+  ALL = 'ALL',
   IT = 'IT',
   SCIENCE = 'SCIENCE',
   ECONOMICS = 'ECONOMICS'

diff --git a/src/entities/Article/ui/ArticleList/ArticleList.module.scss b/src/entities/Article/ui/ArticleList/ArticleList.module.scss
@@ -7,9 +7,5 @@
 .TILE {
   display: flex;
   flex-wrap: wrap;
-
-  .card {
-    margin-right: 30px;
-    margin-bottom: 30px;
-  }
+  gap: 30px;
 }
diff --git a/src/entities/Article/ui/ArticleList/ArticleList.tsx b/src/entities/Article/ui/ArticleList/ArticleList.tsx
@@ -1,7 +1,8 @@
 import { classNames } from 'shared/lib/classNames/classNames';
 import { useTranslation } from 'react-i18next';
-import { memo } from 'react';
+import { HTMLAttributeAnchorTarget, memo } from 'react';
 import { ArticleListItemSkeleton } from 'entities/Article/ui/ArticleListItem/ArticleListItemSkeleton';
+import { Text, TextSize } from 'shared/ui/Text/Text';
 import { ArticleListItem } from '../ArticleListItem/ArticleListItem';
 import cls from './ArticleList.module.scss';
 import { Article, ArticleView } from '../../model/types/article';
@@ -10,6 +11,7 @@ interface ArticleListProps {
   className?: string;
   articles: Article[]
   isLoading?: boolean;
+  target?: HTMLAttributeAnchorTarget;
   view?: ArticleView;
 }
 
@@ -24,6 +26,7 @@ export const ArticleList = memo((props: ArticleListProps) => {
     className,
     articles,
     isLoading,
+    target,
     view = ArticleView.TILE,
   } = props;
   const { t } = useTranslation();
@@ -34,9 +37,21 @@ export const ArticleList = memo((props: ArticleListProps) => {
       className={cls.card}
       article={article}
       view={view}
+      target={target}
     />
   );
 
+  if (!isLoading && !articles.length) {
+    return (
+      <div className={classNames(cls.ArticleList, {}, [className, cls[view]])}>
+        <Text
+          size={TextSize.L}
+          title={t('articles_not_found')}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className={classNames(cls.ArticleList, {}, [className, cls[view]])}>
       {articles.length > 0