feat: add tabs filters

extractedTranslations/en/translation.json

@@ -1,16 +1,20 @@
 {
   "": "",
+  "All": "",
+  "Articles not found": "",
   "Back to list": "",
   "Cancel": "",
   "Choose country": "",
   "Choose currency": "",
   "Comments": "",
+  "Economics": "",
   "Edit": "",
   "Enter ": "",
   "Enter comment text": "",
   "Enter cooment text": "",
   "Error with getting article data": "",
   "Error with getting profile data": "",
+  "IT": "",
   "Incorrect age": "",
   "Incorrect country": "",
   "Incorrect user data": "",
@@ -25,6 +29,7 @@
     }
   },
   "Save": "",
+  "Science": "",
   "Search": "",
   "Send": "",
   "Server error": "",

src/entities/Article/index.ts

@@ -4,4 +4,6 @@ export type { ArticleDetailsSchema } from './model/types/articleDetailsSchema';
 export { getArticlesDetailsData } from './model/selectors/articleDetails';
 export { ArticleList } from './ui/ArticleList/ArticleList';
 export { ArticleSortSelector } from './ui/ArticleSortSelector/ArticleSortSelector';
-export { Article, ArticleView, ArticleSortField } from './model/types/article';
+export {
+    Article, ArticleView, ArticleSortField, ArticleType,
+} from './model/types/article';

src/entities/Article/model/types/article.ts

@@ -39,7 +39,8 @@ export type ArticleBlock = ArticleCodeBlock | ArticleImageBlock | ArticleTextBlo
 export enum ArticleType {
 	IT = 'IT',
 	SCIENCE = 'SCIENCE',
-	ECONOMICS = 'ECONOMICS'
+	ECONOMICS = 'ECONOMICS',
+	ALL = 'ALL'
 }
 
 export enum ArticleView {

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

@@ -1,5 +1,7 @@
 import { classNames } from 'shared/lib/classNames/classNames';
 import { memo } from 'react';
+import { Text, TextSize } from 'shared/ui/Text/Text';
+import { useTranslation } from 'react-i18next';
 import { ArticleListItemSkeleton } from '../../ui/ArticleListItem/ArticleListItemSkeleton';
 import { ArticleListItem } from '../ArticleListItem/ArticleListItem';
 import { Article, ArticleView } from '../../model/types/article';
@@ -26,6 +28,8 @@ export const ArticleList = memo((props: ArticleListProps) => {
         isLoading,
     } = props;
 
+    const { t } = useTranslation();
+
     const renderArticle = (article: Article) => (
         <ArticleListItem
             article={article}
@@ -35,6 +39,12 @@ export const ArticleList = memo((props: ArticleListProps) => {
         />
     );
 
+    if (!isLoading && !articles.length) {
+        return (
+            <Text size={TextSize.L} title={t('Articles not found')} />
+        );
+    }
+
     return (
         <div className={classNames(cls.ArticleList, {}, [className, cls[view]])}>
             {articles.length > 0

src/entities/Article/ui/ArticleSortSelector/ArticleSortSelector.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ArticleSortSelector } from './ArticleSortSelector';
 
 export default {
-    title: 'shared/ArticleSortSelector',
+    title: 'entities/ArticleSortSelector',
     component: ArticleSortSelector,
     argTypes: {
         backgroundColor: { control: 'color' },

src/features/ArticleTypeTabs/index.ts

@@ -0,0 +1 @@
+export { ArticleTypeTabs } from './ui/ArticleTypeTabs';

src/features/ArticleTypeTabs/ui/ArticleTypeTabs.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { ArticleTypeTabs } from './ArticleTypeTabs';
+
+export default {
+    title: 'features/ArticleTypeTabs',
+    component: ArticleTypeTabs,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof ArticleTypeTabs>;
+
+const Template: ComponentStory<typeof ArticleTypeTabs> = (args) => <ArticleTypeTabs {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};

src/features/ArticleTypeTabs/ui/ArticleTypeTabs.tsx

@@ -0,0 +1,49 @@
+import { classNames } from 'shared/lib/classNames/classNames';
+import { useTranslation } from 'react-i18next';
+import { memo, useCallback, useMemo } from 'react';
+import { TabItem, Tabs } from 'shared/ui/Tabs/Tabs';
+import { ArticleType } from 'entities/Article';
+
+interface ArticleTypeTabsProps {
+  className?: string;
+  value: ArticleType;
+  onChangeType: (type: ArticleType) => void;
+}
+
+export const ArticleTypeTabs = memo((props: ArticleTypeTabsProps) => {
+    const { className, value, onChangeType } = props;
+    const { t } = useTranslation();
+
+    const typeTabs = useMemo<TabItem[]>(() => [
+        {
+            value: ArticleType.ALL,
+            content: t('All'),
+        },
+        {
+            value: ArticleType.IT,
+            content: t('IT'),
+        },
+        {
+            value: ArticleType.ECONOMICS,
+            content: t('Economics'),
+        },
+        {
+            value: ArticleType.SCIENCE,
+            content: t('Science'),
+        },
+
+    ], [t]);
+
+    const onTabClick = useCallback((tab: TabItem) => {
+        onChangeType(tab.value as ArticleType);
+    }, [onChangeType]);
+
+    return (
+        <Tabs
+            className={classNames('', {}, [className])}
+            tabs={typeTabs}
+            value={value}
+            onTabClick={onTabClick}
+        />
+    );
+});

src/features/ArticleViewSelector/ui/ArticleViewSelector.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ArticleViewSelector } from './ArticleViewSelector';
 
 export default {
-    title: 'shared/ArticleViewSelector',
+    title: 'features/ArticleViewSelector',
     component: ArticleViewSelector,
     argTypes: {
         backgroundColor: { control: 'color' },

src/pages/ArticlesPage/model/selectors/articlesPageSelectors.ts

@@ -1,5 +1,5 @@
 import { StateSchema } from 'app/providers/StoreProvider';
-import { ArticleSortField, ArticleView } from '../../../../entities/Article';
+import { ArticleSortField, ArticleType, ArticleView } from '../../../../entities/Article';
 
 export const getArticlesPageisLoading = (state: StateSchema) => state.articlesPage?.isLoading || false;
 export const getArticlesPageError = (state: StateSchema) => state.articlesPage?.error;
@@ -11,3 +11,4 @@ export const getArticlesPageInited = (state: StateSchema) => state.articlesPage?
 export const getArticlesPageOrder = (state: StateSchema) => state.articlesPage?.order ?? 'asc';
 export const getArticlesPageSort = (state: StateSchema) => state.articlesPage?.sort ?? ArticleSortField.CREATED;
 export const getArticlesPageSearch = (state: StateSchema) => state.articlesPage?.search ?? '';
+export const getArticlesPageType = (state: StateSchema) => state.articlesPage?.type ?? ArticleType.ALL;

src/pages/ArticlesPage/model/services/fetchArticlesList/fetchArticlesList.ts

@@ -1,17 +1,18 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import { ThunkConfig } from 'app/providers/StoreProvider';
-import { Article } from 'entities/Article';
+import { Article, ArticleType } from 'entities/Article';
+import { addQueryParams } from 'shared/lib/url/addQueryParams/addQueryParams';
 import {
     getArticlesPageLimit,
     getArticlesPageNum,
     getArticlesPageOrder,
     getArticlesPageSearch,
     getArticlesPageSort,
-} from 'pages/ArticlesPage/model/selectors/articlesPageSelectors';
-import { addQueryParams } from 'shared/lib/url/addQueryParams/addQueryParams';
+    getArticlesPageType,
+} from '../../selectors/articlesPageSelectors';
 
 interface fetchArticlesListProps {
-	replace?: boolean;
+  replace?: boolean;
 }
 
 export const fetchArticlesList = createAsyncThunk<
@@ -26,10 +27,11 @@ export const fetchArticlesList = createAsyncThunk<
     const order = getArticlesPageOrder(getState());
     const search = getArticlesPageSearch(getState());
     const page = getArticlesPageNum(getState());
+    const type = getArticlesPageType(getState());
 
     try {
         addQueryParams({
-            sort, order, search,
+            sort, order, search, type,
         });
 
         const response = await extra.api.get<Article[]>('/articles', {
@@ -40,6 +42,7 @@ export const fetchArticlesList = createAsyncThunk<
                 _sort: sort,
                 _order: order,
                 q: search,
+                type: type === ArticleType.ALL ? undefined : type,
 
             },
         });

src/pages/ArticlesPage/model/services/initArticlesPage/initArticlesPage.ts

@@ -3,8 +3,8 @@ import { ThunkConfig } from 'app/providers/StoreProvider';
 import { getArticlesPageInited } from 'pages/ArticlesPage/model/selectors/articlesPageSelectors';
 import { articlesPageActions } from 'pages/ArticlesPage/model/slices/articlesPageSlice';
 import { fetchArticlesList } from 'pages/ArticlesPage/model/services/fetchArticlesList/fetchArticlesList';
-import { ArticleSortField } from 'entities/Article';
 import { SortOrder } from 'shared/types';
+import { ArticleSortField } from '../../../../../entities/Article';
 
 export const initArticlesPage = createAsyncThunk<
   void,

src/pages/ArticlesPage/model/slices/articlesPageSlice.ts

@@ -6,7 +6,10 @@ import {
 import { StateSchema } from 'app/providers/StoreProvider';
 import { ARTICLE_VIEW_LOCALSTORAGE_KEY } from 'shared/const/localstorage';
 import { SortOrder } from 'shared/types';
-import { ArticleSortField } from '../../../../entities/Article/model/types/article';
+import {
+    ArticleSortField,
+    ArticleType,
+} from '../../../../entities/Article/model/types/article';
 import { ArticlesPageSchema } from '../types/articlesPageSchema';
 import { Article, ArticleView } from '../../../../entities/Article';
 import { fetchArticlesList } from '../services/fetchArticlesList/fetchArticlesList';
@@ -34,6 +37,7 @@ const articlesPageSlice = createSlice({
         sort: ArticleSortField.CREATED,
         search: '',
         order: 'asc',
+        type: ArticleType.ALL,
     }),
     reducers: {
         setView: (state, action: PayloadAction<ArticleView>) => {
@@ -49,6 +53,9 @@ const articlesPageSlice = createSlice({
         setSort: (state, action: PayloadAction<ArticleSortField>) => {
             state.sort = action.payload;
         },
+        setType: (state, action: PayloadAction<ArticleType>) => {
+            state.type = action.payload;
+        },
         setSearch: (state, action: PayloadAction<string>) => {
             state.search = action.payload;
         },

src/pages/ArticlesPage/model/types/articlesPageSchema.ts

@@ -1,7 +1,8 @@
 import { EntityState } from '@reduxjs/toolkit';
-import { Article, ArticleView } from 'entities/Article';
+import {
+    Article, ArticleView, ArticleSortField, ArticleType,
+} from 'entities/Article';
 import { SortOrder } from 'shared/types';
-import { ArticleSortField } from 'entities/Article/model/types/article';
 
 export interface ArticlesPageSchema extends EntityState<Article> {
 	isLoading?: boolean;
@@ -16,7 +17,7 @@ export interface ArticlesPageSchema extends EntityState<Article> {
 	order: SortOrder;
 	sort:ArticleSortField;
 	search: string;
-
+	type: ArticleType;
 	// data already inited or not
 	_inited: boolean;
 }

src/pages/ArticlesPage/ui/ArticlesPageFilters/ArticlesPageFilters.module.scss

@@ -7,3 +7,7 @@
 .search {
     margin-top: 16px;
 }
+
+.tabs {
+    margin-top: 16px;
+}

src/pages/ArticlesPage/ui/ArticlesPageFilters/ArticlesPageFilters.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ArticlesPageFilters } from './ArticlesPageFilters';
 
 export default {
-    title: 'shared/ArticlesPageFilters',
+    title: 'pages/ArticlesPageFilters',
     component: ArticlesPageFilters,
     argTypes: {
         backgroundColor: { control: 'color' },

src/pages/ArticlesPage/ui/ArticlesPageFilters/ArticlesPageFilters.tsx

@@ -1,23 +1,28 @@
 import { classNames } from 'shared/lib/classNames/classNames';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { ArticleViewSelector } from 'features/ArticleViewSelector';
 import { useAppDispatch } from 'shared/lib/hook/useAppDispatch/useAppDispatch';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Input } from 'shared/ui/Input/Input';
 import { Card } from 'shared/ui/Card/Card';
 import { SortOrder } from 'shared/types';
-import { fetchArticlesList } from 'pages/ArticlesPage/model/services/fetchArticlesList/fetchArticlesList';
 import { useDebounce } from 'shared/lib/hook/useDebounce/useDebounce';
+import { TabItem } from 'shared/ui/Tabs/Tabs';
+import { ArticleType } from 'entities/Article/model/types/article';
+import { ArticleTypeTabs } from 'features/ArticleTypeTabs';
+import { fetchArticlesList } from '../../model/services/fetchArticlesList/fetchArticlesList';
 import {
     ArticleSortField,
     ArticleSortSelector,
     ArticleView,
 } from '../../../../entities/Article';
 import { articlesPageActions } from '../../model/slices/articlesPageSlice';
 import {
-    getArticlesPageOrder, getArticlesPageSearch,
+    getArticlesPageOrder,
+    getArticlesPageSearch,
     getArticlesPageSort,
+    getArticlesPageType,
     getArticlesPageView,
 } from '../../model/selectors/articlesPageSelectors';
 import cls from './ArticlesPageFilters.module.scss';
@@ -36,6 +41,7 @@ export const ArticlesPageFilters = memo((props: ArticlesPageFiltersProps) => {
     const sort = useSelector(getArticlesPageSort);
     const order = useSelector(getArticlesPageOrder);
     const search = useSelector(getArticlesPageSearch);
+    const type = useSelector(getArticlesPageType);
 
     const fetchData = useCallback(() => {
         dispatch(fetchArticlesList({ replace: true }));
@@ -67,6 +73,12 @@ export const ArticlesPageFilters = memo((props: ArticlesPageFiltersProps) => {
         debouncedFetchData();
     }, [dispatch, debouncedFetchData]);
 
+    const onChangeType = useCallback((value: ArticleType) => {
+        dispatch(articlesPageActions.setType(value));
+        dispatch(articlesPageActions.setPage(1));
+        fetchData();
+    }, [dispatch, fetchData]);
+
     return (
         <div className={classNames(cls.ArticlesPageFilters, {}, [className])}>
             <div className={cls.sortWrapper}>
@@ -85,6 +97,11 @@ export const ArticlesPageFilters = memo((props: ArticlesPageFiltersProps) => {
                     placeholder={t('Search')}
                 />
             </Card>
+            <ArticleTypeTabs
+                value={type}
+                onChangeType={onChangeType}
+                className={cls.tabs}
+            />
         </div>
     );
 });

src/shared/ui/Card/Card.module.scss

@@ -1,5 +1,12 @@
 .Card {
     padding: 15px;
     border-radius: 12px;
+}
+
+.normal {
     background: var(--card-bg);
 }
+
+.outlined {
+    border: 1px solid var(--primary-color);
+}