From 43018ed9c4f570a706456c401aebd5f9faa9c935 Mon Sep 17 00:00:00 2001 From: "mr.scrpt" Date: Mon, 16 Oct 2023 12:47:01 +0300 Subject: [PATCH] before: article, article feed refactoring --- src/entity/ArticleFeed/index.ts | 6 +++--- .../model/service/changeArticleFeedSort.ts | 4 ++-- .../model/service/changeArticleFeedView.ts | 4 ++-- .../ArticleFeed/model/service/initArticleFeed.ts | 15 ++++++++++----- .../ArticleFeed/model/slice/articleFeed.slice.ts | 6 +++--- src/entity/ArticleFeed/type/props.type.ts | 5 ++++- src/entity/ArticleFeed/ui/ArticleFeed.tsx | 6 ++++-- src/entity/ArticleFeedItem/type/props.type.ts | 4 ++-- .../ui/ArticleFeedItem.skeleton.tsx | 8 ++++---- src/entity/ArticleFeedItem/ui/ArticleFeedItem.tsx | 11 +++++------ .../FeedOrderDirection/data/direction.data.ts | 6 +++--- src/feature/FeedOrderDirection/type/order.type.ts | 4 ++-- src/feature/FeedOrderDirection/type/props.type.ts | 6 +++--- src/feature/FeedSort/data/sort.data.ts | 9 +++++---- src/feature/FeedSort/type/props.type.ts | 6 +++--- src/feature/FeedSort/type/sort.type.ts | 4 ++-- src/feature/FeedView/type/props.type.ts | 4 ++-- src/widget/FeedArticle/ui/FeedArticle.tsx | 2 ++ .../ui/FeedArticleContorlBar.tsx | 12 ++++++------ 19 files changed, 67 insertions(+), 55 deletions(-) diff --git a/src/entity/ArticleFeed/index.ts b/src/entity/ArticleFeed/index.ts index 2e324e7..771ef44 100644 --- a/src/entity/ArticleFeed/index.ts +++ b/src/entity/ArticleFeed/index.ts @@ -21,8 +21,8 @@ export { fetchArticleFeedNextPage } from './model/service/fetchArticleFeedNextPa export { changeArticleFeedTag } from './model/service/changeArticleFeedTag' export { ArticleFeedView } from './type/view.type' -export { ArticleFeedSortFieldEnum as ArticleSortFieldEnum } from './type/sort.enum' -export { ArticleFeedViewEnum as ArticleViewEnum } from './type/view.enum' -export { ArticleFeedOrderEnum as ArticleOrderEnum } from './type/order.enum' +export { ArticleFeedSortFieldEnum } from './type/sort.enum' +export { ArticleFeedViewEnum } from './type/view.enum' +export { ArticleFeedOrderEnum } from './type/order.enum' export { ArticleLimitValue } from './model/data/limit.data' diff --git a/src/entity/ArticleFeed/model/service/changeArticleFeedSort.ts b/src/entity/ArticleFeed/model/service/changeArticleFeedSort.ts index 8b5580b..258d5b6 100644 --- a/src/entity/ArticleFeed/model/service/changeArticleFeedSort.ts +++ b/src/entity/ArticleFeed/model/service/changeArticleFeedSort.ts @@ -1,14 +1,14 @@ import { createAsyncThunk } from '@reduxjs/toolkit' import { ThunkConfigType } from 'app/provider/StoreProvider' -import { ArticleSortFieldEnum } from 'entity/ArticleFeed' import { storageFeedSort } from 'shared/lib/storage/LocalStorage' +import { ArticleFeedSortFieldEnum } from '../../type/sort.enum' import { articleFeedAction } from '../slice/articleFeed.slice' import { fetchArticleFeed } from './fetchArticleFeed' export const changeArticleFeedSort = createAsyncThunk< void, - ArticleSortFieldEnum, + ArticleFeedSortFieldEnum, ThunkConfigType >('feedArticle/changeSort', async (sort, thunkAPI) => { const { rejectWithValue, dispatch, getState } = thunkAPI diff --git a/src/entity/ArticleFeed/model/service/changeArticleFeedView.ts b/src/entity/ArticleFeed/model/service/changeArticleFeedView.ts index ea8530e..343a5b4 100644 --- a/src/entity/ArticleFeed/model/service/changeArticleFeedView.ts +++ b/src/entity/ArticleFeed/model/service/changeArticleFeedView.ts @@ -1,18 +1,18 @@ import { createAsyncThunk } from '@reduxjs/toolkit' import { ThunkConfigType } from 'app/provider/StoreProvider' -import { ArticleViewEnum } from 'entity/ArticleFeed' import { storageFeedLimit, storageFeedView, } from 'shared/lib/storage/LocalStorage' +import { ArticleFeedViewEnum } from '../../type/view.enum' import { getArticleFeedLimitBase } from '../selector/getArticleFeedBaseLimit' import { articleFeedAction } from '../slice/articleFeed.slice' import { fetchArticleFeed } from './fetchArticleFeed' export const changeArticleFeedView = createAsyncThunk< void, - ArticleViewEnum, + ArticleFeedViewEnum, ThunkConfigType >('feedArticle/changeView', async (view, thunkAPI) => { const { rejectWithValue, dispatch, getState } = thunkAPI diff --git a/src/entity/ArticleFeed/model/service/initArticleFeed.ts b/src/entity/ArticleFeed/model/service/initArticleFeed.ts index b465b4a..e69d6bd 100644 --- a/src/entity/ArticleFeed/model/service/initArticleFeed.ts +++ b/src/entity/ArticleFeed/model/service/initArticleFeed.ts @@ -1,8 +1,8 @@ import { createAsyncThunk } from '@reduxjs/toolkit' import { ThunkConfigType } from 'app/provider/StoreProvider' -import { ArticleSortFieldEnum, ArticleViewEnum } from 'entity/ArticleFeed' -import { ArticleFeedOrderEnum } from 'entity/ArticleFeed/type/order.enum' -import { ArticleFeedSearchParamsEnum } from 'entity/ArticleFeed/type/params.enum' +// import { ArticleSortFieldEnum, ArticleViewEnum } from 'entity/ArticleFeed' +// import { ArticleFeedOrderEnum } from 'entity/ArticleFeed/type/order.enum' +// import { ArticleFeedSearchParamsEnum } from 'entity/ArticleFeed/type/params.enum' import { storageFeedLimit, storageFeedOrder, @@ -10,6 +10,10 @@ import { storageFeedView, } from 'shared/lib/storage/LocalStorage' +import { ArticleFeedOrderEnum } from '../../type/order.enum' +import { ArticleFeedSearchParamsEnum } from '../../type/params.enum' +import { ArticleFeedSortFieldEnum } from '../../type/sort.enum' +import { ArticleFeedViewEnum } from '../../type/view.enum' import { viewData } from '../data/view.data' import { getArticleFeedInited } from '../selector/getArticleFeedInited' import { articleFeedAction } from '../slice/articleFeed.slice' @@ -27,10 +31,11 @@ export const initArticleFeed = createAsyncThunk< if (!inited) { const [base] = viewData const initView = - (storageFeedView.getItem() as ArticleViewEnum) || base.view + (storageFeedView.getItem() as ArticleFeedViewEnum) || base.view const initLimit = Number(storageFeedLimit.getItem() || base.limitBase) - const initSort = storageFeedSort.getItem() || ArticleSortFieldEnum.CREATED + const initSort = + storageFeedSort.getItem() || ArticleFeedSortFieldEnum.CREATED const initOrder = storageFeedOrder.getItem() || ArticleFeedOrderEnum.ASC const urlOrder = searchParams.get(ArticleFeedSearchParamsEnum.ORDER) diff --git a/src/entity/ArticleFeed/model/slice/articleFeed.slice.ts b/src/entity/ArticleFeed/model/slice/articleFeed.slice.ts index c60e4b0..4c7ee65 100644 --- a/src/entity/ArticleFeed/model/slice/articleFeed.slice.ts +++ b/src/entity/ArticleFeed/model/slice/articleFeed.slice.ts @@ -4,7 +4,7 @@ import { createSlice, } from '@reduxjs/toolkit' import { IArticle } from 'entity/Article' -import { ArticleViewEnum } from 'entity/ArticleFeed' +import { ArticleFeedViewEnum } from 'entity/ArticleFeed/type/view.enum' import { ArticleFeedOrderEnum } from '../../type/order.enum' import { ArticleFeedSortFieldEnum } from '../../type/sort.enum' @@ -38,7 +38,7 @@ export const articleFeedSlice = createSlice({ name: 'feedArticleSlice', initialState, reducers: { - setView: (state, action: PayloadAction) => { + setView: (state, action: PayloadAction) => { if (state.feedView) { state.feedView = state.feedView.map((item) => { if (item.view === action.payload) { @@ -67,7 +67,7 @@ export const articleFeedSlice = createSlice({ state.search = action.payload }, setTag: (state, action: PayloadAction) => { - state.tag = action.payload + state.search = action.payload }, }, extraReducers: (builder) => { diff --git a/src/entity/ArticleFeed/type/props.type.ts b/src/entity/ArticleFeed/type/props.type.ts index 743c79d..9c3e039 100644 --- a/src/entity/ArticleFeed/type/props.type.ts +++ b/src/entity/ArticleFeed/type/props.type.ts @@ -1,5 +1,7 @@ import { IArticle } from 'entity/Article' -import { HTMLAttributes } from 'react' +import { ArticleProps } from 'entity/Article/type/props.type' +import { ArticleFeedItemProps } from 'entity/ArticleFeedItem/type/props.type' +import { ElementType, FC, HTMLAttributes } from 'react' import { ArticleFeedViewEnum } from './view.enum' @@ -9,6 +11,7 @@ export interface ArticleFeedProps extends HTMLAttributes { view?: ArticleFeedViewEnum isLoading?: boolean error?: string + item?: ElementType } export interface ArticleFeedSkeletonProps diff --git a/src/entity/ArticleFeed/ui/ArticleFeed.tsx b/src/entity/ArticleFeed/ui/ArticleFeed.tsx index 1b09917..83cbcd3 100644 --- a/src/entity/ArticleFeed/ui/ArticleFeed.tsx +++ b/src/entity/ArticleFeed/ui/ArticleFeed.tsx @@ -1,5 +1,5 @@ import { ArticleFeedItem } from 'entity/ArticleFeedItem' -import { memo, useTransition } from 'react' +import { memo } from 'react' import { useTranslation } from 'react-i18next' import { classNames } from 'shared/lib/classNames' @@ -14,6 +14,7 @@ export const ArticleFeed = memo((props: ArticleFeedProps) => { articleList, isLoading, view = ArticleFeedViewEnum.TILE, + item: Item, } = props const clsFeed = classNames(cls.list, [className], {}) @@ -28,8 +29,9 @@ export const ArticleFeed = memo((props: ArticleFeedProps) => {
{articleList && + Item && articleList.map((item) => ( - { className?: string - view?: ArticleViewEnum + view?: ArticleFeedViewEnum article: IArticle } diff --git a/src/entity/ArticleFeedItem/ui/ArticleFeedItem.skeleton.tsx b/src/entity/ArticleFeedItem/ui/ArticleFeedItem.skeleton.tsx index 0235880..ce81e43 100644 --- a/src/entity/ArticleFeedItem/ui/ArticleFeedItem.skeleton.tsx +++ b/src/entity/ArticleFeedItem/ui/ArticleFeedItem.skeleton.tsx @@ -1,4 +1,4 @@ -import { ArticleViewEnum } from 'entity/ArticleFeed' +import { ArticleFeedViewEnum } from 'entity/ArticleFeed/type/view.enum' import { memo } from 'react' import { Card } from 'shared/component/Card' import { Skeleton } from 'shared/component/Skeleton' @@ -9,13 +9,13 @@ import cls from './ArticleFeedItem.module.scss' export const ArticleFeedItemSkeleton = memo( (props: ArticleFeedItemSkeletonProps) => { - const { className, view = ArticleViewEnum.TILE } = props + const { className, view = ArticleFeedViewEnum.TILE } = props const clsCard = classNames(cls.card, [className], {}) let articleContent - if (view === ArticleViewEnum.ROW) { + if (view === ArticleFeedViewEnum.ROW) { articleContent = (
@@ -48,7 +48,7 @@ export const ArticleFeedItemSkeleton = memo( ) } - if (view === ArticleViewEnum.TILE) { + if (view === ArticleFeedViewEnum.TILE) { articleContent = (
diff --git a/src/entity/ArticleFeedItem/ui/ArticleFeedItem.tsx b/src/entity/ArticleFeedItem/ui/ArticleFeedItem.tsx index 4e4a343..e0d26c6 100644 --- a/src/entity/ArticleFeedItem/ui/ArticleFeedItem.tsx +++ b/src/entity/ArticleFeedItem/ui/ArticleFeedItem.tsx @@ -1,8 +1,7 @@ import { ArticleBlockVariantEnum, IArticleBlockText } from 'entity/Article' -import { ArticleViewEnum } from 'entity/ArticleFeed' -import { memo, useCallback } from 'react' +import { ArticleFeedViewEnum } from 'entity/ArticleFeed/type/view.enum' +import { memo } from 'react' import { useTranslation } from 'react-i18next' -import { useNavigate } from 'react-router-dom' import { Avatar } from 'shared/component/Avatar' import { Button } from 'shared/component/Button' import { Card } from 'shared/component/Card' @@ -19,7 +18,7 @@ import { ArticleFeedItemProps } from '../type/props.type' import cls from './ArticleFeedItem.module.scss' export const ArticleFeedItem = memo((props: ArticleFeedItemProps) => { - const { className, view = ArticleViewEnum.TILE, article } = props + const { className, view = ArticleFeedViewEnum.TILE, article } = props const { user } = article const clsCard = classNames(cls.card, [className], {}) @@ -45,7 +44,7 @@ export const ArticleFeedItem = memo((props: ArticleFeedItemProps) => { let articleContent console.log('article id', article.id) - if (view === ArticleViewEnum.ROW) { + if (view === ArticleFeedViewEnum.ROW) { articleContent = (
@@ -84,7 +83,7 @@ export const ArticleFeedItem = memo((props: ArticleFeedItemProps) => { ) } - if (view === ArticleViewEnum.TILE) { + if (view === ArticleFeedViewEnum.TILE) { articleContent = (
diff --git a/src/feature/FeedOrderDirection/data/direction.data.ts b/src/feature/FeedOrderDirection/data/direction.data.ts index 91231fb..ec3991b 100644 --- a/src/feature/FeedOrderDirection/data/direction.data.ts +++ b/src/feature/FeedOrderDirection/data/direction.data.ts @@ -1,14 +1,14 @@ -import { ArticleOrderEnum } from 'entity/ArticleFeed' +import { ArticleFeedOrderEnum } from 'entity/ArticleFeed' import { IFeedOrderDirection } from '../type/order.type' export const feedOrderDirectionData: IFeedOrderDirection[] = [ { content: 'order-direction-asc', - value: ArticleOrderEnum.ASC, + value: ArticleFeedOrderEnum.ASC, }, { content: 'order-direction-desc', - value: ArticleOrderEnum.DESC, + value: ArticleFeedOrderEnum.DESC, }, ] diff --git a/src/feature/FeedOrderDirection/type/order.type.ts b/src/feature/FeedOrderDirection/type/order.type.ts index e6e7686..993bb5d 100644 --- a/src/feature/FeedOrderDirection/type/order.type.ts +++ b/src/feature/FeedOrderDirection/type/order.type.ts @@ -1,6 +1,6 @@ -import { ArticleOrderEnum } from 'entity/ArticleFeed' +import { ArticleFeedOrderEnum } from 'entity/ArticleFeed' export interface IFeedOrderDirection { content: string - value: ArticleOrderEnum + value: ArticleFeedOrderEnum } diff --git a/src/feature/FeedOrderDirection/type/props.type.ts b/src/feature/FeedOrderDirection/type/props.type.ts index 4cadb6e..f36ab45 100644 --- a/src/feature/FeedOrderDirection/type/props.type.ts +++ b/src/feature/FeedOrderDirection/type/props.type.ts @@ -1,9 +1,9 @@ -import { ArticleOrderEnum } from 'entity/ArticleFeed' +import { ArticleFeedOrderEnum } from 'entity/ArticleFeed' import { HTMLAttributes } from 'react' export interface FeedOrderDirectionProps extends HTMLAttributes { className?: string - order: ArticleOrderEnum - onChangeOrder: (newOrder: ArticleOrderEnum) => void + order: ArticleFeedOrderEnum + onChangeOrder: (newOrder: ArticleFeedOrderEnum) => void } diff --git a/src/feature/FeedSort/data/sort.data.ts b/src/feature/FeedSort/data/sort.data.ts index de8e806..1c8c174 100644 --- a/src/feature/FeedSort/data/sort.data.ts +++ b/src/feature/FeedSort/data/sort.data.ts @@ -1,19 +1,20 @@ -import { ArticleSortFieldEnum } from 'entity/ArticleFeed' +// import { SortFieldEnum } from 'widget/FeedArticle/type/sort.enum' +import { ArticleFeedSortFieldEnum } from 'entity/ArticleFeed' import { IFeedSort } from '../type/sort.type' export const feedSortData: IFeedSort[] = [ { content: 'sort-by-created', - value: ArticleSortFieldEnum.CREATED, + value: ArticleFeedSortFieldEnum.CREATED, }, { content: 'sort-by-title', - value: ArticleSortFieldEnum.TITLE, + value: ArticleFeedSortFieldEnum.TITLE, }, { content: 'sort-by-view', - value: ArticleSortFieldEnum.VIEWS, + value: ArticleFeedSortFieldEnum.VIEWS, }, ] diff --git a/src/feature/FeedSort/type/props.type.ts b/src/feature/FeedSort/type/props.type.ts index 6f9bb12..304ae8b 100644 --- a/src/feature/FeedSort/type/props.type.ts +++ b/src/feature/FeedSort/type/props.type.ts @@ -1,8 +1,8 @@ -import { ArticleSortFieldEnum } from 'entity/ArticleFeed' +import { ArticleFeedSortFieldEnum } from 'entity/ArticleFeed' import { HTMLAttributes } from 'react' export interface FeedSortProps extends HTMLAttributes { className?: string - sort: ArticleSortFieldEnum - onChangeSort: (newOrder: ArticleSortFieldEnum) => void + sort: ArticleFeedSortFieldEnum + onChangeSort: (newOrder: ArticleFeedSortFieldEnum) => void } diff --git a/src/feature/FeedSort/type/sort.type.ts b/src/feature/FeedSort/type/sort.type.ts index 22d05f0..4406057 100644 --- a/src/feature/FeedSort/type/sort.type.ts +++ b/src/feature/FeedSort/type/sort.type.ts @@ -1,6 +1,6 @@ -import { ArticleSortFieldEnum } from 'entity/ArticleFeed' +import { ArticleFeedSortFieldEnum } from 'entity/ArticleFeed' export interface IFeedSort { content: string - value: ArticleSortFieldEnum + value: ArticleFeedSortFieldEnum } diff --git a/src/feature/FeedView/type/props.type.ts b/src/feature/FeedView/type/props.type.ts index 31e4f32..0cc933a 100644 --- a/src/feature/FeedView/type/props.type.ts +++ b/src/feature/FeedView/type/props.type.ts @@ -1,8 +1,8 @@ -import { ArticleFeedView, ArticleViewEnum } from 'entity/ArticleFeed' +import { ArticleFeedView, ArticleFeedViewEnum } from 'entity/ArticleFeed' import { HTMLAttributes } from 'react' export interface FeedViewProps extends HTMLAttributes { className?: string - changeView: (view: ArticleViewEnum) => void + changeView: (view: ArticleFeedViewEnum) => void view: ArticleFeedView[] } diff --git a/src/widget/FeedArticle/ui/FeedArticle.tsx b/src/widget/FeedArticle/ui/FeedArticle.tsx index 465c957..98f850e 100644 --- a/src/widget/FeedArticle/ui/FeedArticle.tsx +++ b/src/widget/FeedArticle/ui/FeedArticle.tsx @@ -8,6 +8,7 @@ import { getArticleViewFeedActive, } from 'entity/ArticleFeed' import { initArticleFeed } from 'entity/ArticleFeed/model/service/initArticleFeed' +import { ArticleFeedItem } from 'entity/ArticleFeedItem' import { MutableRefObject, memo, useCallback, useEffect, useRef } from 'react' import { useSelector } from 'react-redux' import { useSearchParams } from 'react-router-dom' @@ -64,6 +65,7 @@ export const FeedArticle = memo((props: FeedArticleProps) => { articleList={articleList} view={viewActive?.view} className={cls.list} + item={ArticleFeedItem} />
diff --git a/src/widget/FeedArticleContorlBar/ui/FeedArticleContorlBar.tsx b/src/widget/FeedArticleContorlBar/ui/FeedArticleContorlBar.tsx index 601929d..c780f63 100644 --- a/src/widget/FeedArticleContorlBar/ui/FeedArticleContorlBar.tsx +++ b/src/widget/FeedArticleContorlBar/ui/FeedArticleContorlBar.tsx @@ -1,7 +1,7 @@ import { - ArticleOrderEnum, - ArticleSortFieldEnum, - ArticleViewEnum, + ArticleFeedOrderEnum, + ArticleFeedSortFieldEnum, + ArticleFeedViewEnum, articleFeedAction, changeArticleFeedTag, changeArticleFeedView, @@ -54,19 +54,19 @@ export const FeedArticleContorlBar = memo( }, [dispatch]) const onChangeView = useCallback( - (view: ArticleViewEnum) => { + (view: ArticleFeedViewEnum) => { dispatch(changeArticleFeedView(view)) }, [dispatch] ) const onChangeSort = useCallback( - (sort: ArticleSortFieldEnum) => { + (sort: ArticleFeedSortFieldEnum) => { dispatch(changeArticleFeedSort(sort)) }, [dispatch] ) const onChangeOrder = useCallback( - (order: ArticleOrderEnum) => { + (order: ArticleFeedOrderEnum) => { dispatch(changeArticleFeedOrder(order)) }, [dispatch]