before: article, article feed refactoring

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'

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<string>
 >('feedArticle/changeSort', async (sort, thunkAPI) => {
   const { rejectWithValue, dispatch, getState } = thunkAPI

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<string>
 >('feedArticle/changeView', async (view, thunkAPI) => {
   const { rejectWithValue, dispatch, getState } = thunkAPI

src/entity/ArticleFeed/model/service/initArticleFeed.ts

@@ -1,15 +1,19 @@
 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,
   storageFeedSort,
   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)

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<ArticleViewEnum>) => {
+    setView: (state, action: PayloadAction<ArticleFeedViewEnum>) => {
       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<string>) => {
-      state.tag = action.payload
+      state.search = action.payload
     },
   },
   extraReducers: (builder) => {

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<HTMLDivElement> {
   view?: ArticleFeedViewEnum
   isLoading?: boolean
   error?: string
+  item?: ElementType<ArticleFeedItemProps>
 }
 
 export interface ArticleFeedSkeletonProps

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) => {
     <div className={clsFeed}>
       <div className={cls.inner}>
         {articleList &&
+          Item &&
           articleList.map((item) => (
-            <ArticleFeedItem
+            <Item
               view={view}
               className={clsItem}
               article={item}

src/entity/ArticleFeedItem/type/props.type.ts

@@ -1,10 +1,10 @@
 import { IArticle } from 'entity/Article'
-import { ArticleViewEnum } from 'entity/ArticleFeed'
+import { ArticleFeedViewEnum } from 'entity/ArticleFeed/type/view.enum'
 import { HTMLAttributes } from 'react'
 
 export interface ArticleFeedItemProps extends HTMLAttributes<HTMLDivElement> {
   className?: string
-  view?: ArticleViewEnum
+  view?: ArticleFeedViewEnum
   article: IArticle
 }
 

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 = (
         <Skeleton className={cls.inner}>
           <div className={cls.header}>
@@ -48,7 +48,7 @@ export const ArticleFeedItemSkeleton = memo(
       )
     }
 
-    if (view === ArticleViewEnum.TILE) {
+    if (view === ArticleFeedViewEnum.TILE) {
       articleContent = (
         <Skeleton className={cls.inner}>
           <div className={cls.imgbox}>

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 = (
       <div className={cls.inner}>
         <div className={cls.header}>
@@ -84,7 +83,7 @@ export const ArticleFeedItem = memo((props: ArticleFeedItemProps) => {
     )
   }
 
-  if (view === ArticleViewEnum.TILE) {
+  if (view === ArticleFeedViewEnum.TILE) {
     articleContent = (
       <div className={cls.inner} tabIndex={0} role="button">
         <div className={cls.imgbox}>

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,
   },
 ]

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
 }

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<HTMLDivElement> {
   className?: string
-  order: ArticleOrderEnum
-  onChangeOrder: (newOrder: ArticleOrderEnum) => void
+  order: ArticleFeedOrderEnum
+  onChangeOrder: (newOrder: ArticleFeedOrderEnum) => void
 }

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,
   },
 ]

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<HTMLDivElement> {
   className?: string
-  sort: ArticleSortFieldEnum
-  onChangeSort: (newOrder: ArticleSortFieldEnum) => void
+  sort: ArticleFeedSortFieldEnum
+  onChangeSort: (newOrder: ArticleFeedSortFieldEnum) => void
 }

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
 }

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<HTMLDivElement> {
   className?: string
-  changeView: (view: ArticleViewEnum) => void
+  changeView: (view: ArticleFeedViewEnum) => void
   view: ArticleFeedView[]
 }

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}
           />
           <div className={cls.end} ref={targetRef}></div>
         </div>

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]