features entities refactor

src/entities/Article/index.ts

@@ -5,9 +5,6 @@ export type { Article } 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";
 export { getArticleDetailsData } from "./model/selectors/articleDetails";
 export {
   ArticleView,

src/features/ArticleSortSelector/index.ts

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

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

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ArticleSortSelector } from './ArticleSortSelector';
 
 export default {
-    title: 'entities/Article/ArticleSortSelector',
+    title: 'features/ArticleSortSelector',
     component: ArticleSortSelector,
     argTypes: {
         backgroundColor: { control: 'color' },
@@ -14,4 +14,6 @@ export default {
 const Template: ComponentStory<typeof ArticleSortSelector> = (args) => <ArticleSortSelector {...args} />;
 
 export const Normal = Template.bind({});
-Normal.args = {};
+Normal.args = {
+
+};

src/features/ArticleSortSelector/ui/ArticleSortSelector/ArticleSortSelector.tsx

@@ -0,0 +1,66 @@
+import { useTranslation } from 'react-i18next';
+import { memo, useMemo } from 'react';
+import { classNames } from '@/shared/lib/classNames/classNames';
+import { Select, SelectOption } from '@/shared/ui/Select';
+import { SortOrder } from '@/shared/types';
+import cls from './ArticleSortSelector.module.scss';
+import { ArticleSortField } from '@/entities/Article';
+
+interface ArticleSortSelectorProps {
+    className?: string;
+    sort: ArticleSortField;
+    order: SortOrder;
+    onChangeOrder: (newOrder: SortOrder) => void;
+    onChangeSort: (newSort: ArticleSortField) => void;
+}
+
+export const ArticleSortSelector = memo((props: ArticleSortSelectorProps) => {
+    const {
+        className, onChangeOrder, onChangeSort, order, sort,
+    } = props;
+    const { t } = useTranslation();
+
+    const orderOptions = useMemo<SelectOption<SortOrder>[]>(() => [
+        {
+            value: 'asc',
+            content: t('возрастанию'),
+        },
+        {
+            value: 'desc',
+            content: t('убыванию'),
+        },
+    ], [t]);
+
+    const sortFieldOptions = useMemo<SelectOption<ArticleSortField>[]>(() => [
+        {
+            value: ArticleSortField.CREATED,
+            content: t('дате создания'),
+        },
+        {
+            value: ArticleSortField.TITLE,
+            content: t('названию'),
+        },
+        {
+            value: ArticleSortField.VIEWS,
+            content: t('просмотрам'),
+        },
+    ], [t]);
+
+    return (
+        <div className={classNames(cls.ArticleSortSelector, {}, [className])}>
+            <Select<ArticleSortField>
+                options={sortFieldOptions}
+                label={t('Сортировать ПО')}
+                value={sort}
+                onChange={onChangeSort}
+            />
+            <Select
+                options={orderOptions}
+                label={t('по')}
+                value={order}
+                onChange={onChangeOrder}
+                className={cls.order}
+            />
+        </div>
+    );
+});

src/features/ArticleTypeTabs/index.ts

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

src/entities/Article/ui/ArticleTypeTabs/ArticleTypeTabs.stories.tsx → src/features/ArticleTypeTabs/ui/ArticleTypeTabs/ArticleTypeTabs.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ArticleTypeTabs } from './ArticleTypeTabs';
 
 export default {
-    title: 'entities/Article/ArticleTypeTabs',
+    title: 'features/ArticleTypeTabs',
     component: ArticleTypeTabs,
     argTypes: {
         backgroundColor: { control: 'color' },
@@ -14,4 +14,6 @@ export default {
 const Template: ComponentStory<typeof ArticleTypeTabs> = (args) => <ArticleTypeTabs {...args} />;
 
 export const Normal = Template.bind({});
-Normal.args = {};
+Normal.args = {
+
+};

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

@@ -0,0 +1,48 @@
+import { useTranslation } from 'react-i18next';
+import { memo, useCallback, useMemo } from 'react';
+import { classNames } from '@/shared/lib/classNames/classNames';
+import { TabItem, Tabs } from '@/shared/ui/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('Все статьи'),
+        },
+        {
+            value: ArticleType.IT,
+            content: t('Айти'),
+        },
+        {
+            value: ArticleType.ECONOMICS,
+            content: t('Экономика'),
+        },
+        {
+            value: ArticleType.SCIENCE,
+            content: t('Наука'),
+        },
+    ], [t]);
+
+    const onTabClick = useCallback((tab: TabItem) => {
+        onChangeType(tab.value as ArticleType);
+    }, [onChangeType]);
+
+    return (
+        <Tabs
+            tabs={typeTabs}
+            value={value}
+            onTabClick={onTabClick}
+            className={classNames('', {}, [className])}
+        />
+    );
+});

src/features/ArticleViewSelector/index.ts

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

src/entities/Article/ui/ArticleViewSelector/ArticleViewSelector.stories.tsx → src/features/ArticleViewSelector/ui/ArticleViewSelector/ArticleViewSelector.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ArticleViewSelector } from './ArticleViewSelector';
 
 export default {
-    title: 'entities/Article/ArticleViewSelector',
+    title: 'features/ArticleViewSelector',
     component: ArticleViewSelector,
     argTypes: {
         backgroundColor: { control: 'color' },
@@ -14,4 +14,6 @@ export default {
 const Template: ComponentStory<typeof ArticleViewSelector> = (args) => <ArticleViewSelector {...args} />;
 
 export const Normal = Template.bind({});
-Normal.args = {};
+Normal.args = {
+
+};