Update redesign for list view

vladislav0sidorov · Oct 28, 2023 · 52fe997 · 52fe997
1 parent 856e8a7
commit 52fe997
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 22 deletions.
diff --git a/src/entities/Article/ui/ArticleList/ArticleList.tsx b/src/entities/Article/ui/ArticleList/ArticleList.tsx
@@ -9,6 +9,8 @@ import { ArticleListItemSkeleton } from '../ArticleListItem/ArticleListItemSkele
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { Text, TextSize } from '@/shared/ui/deprecated/Text'
+import { ToggleFeaturesComponent } from '@/shared/lib/features'
+import { HStack } from '@/shared/ui/redesigned/Stack'
 
 interface ArticleListProps {
   className?: string
@@ -32,6 +34,20 @@ export const ArticleList: FC<ArticleListProps> = React.memo((props) => {
 view={view} />
   )
 
+  const deprecatedContent = (
+    <div data-testid="ArticleList" className={classNames(cls.ArticleList, {}, [className, cls[view]])}>
+      {articles.length > 0 ? articles.map(renderArtcile) : null}
+      {isLoading && getSkeleton(view)}
+    </div>
+  )
+
+  const redesignedContent = (
+    <HStack wrap gap="16" data-testid="ArticleList" className={classNames(cls.ArticleListRedesigned, {}, [className])}>
+      {articles.length > 0 ? articles.map(renderArtcile) : null}
+      {isLoading && getSkeleton(view)}
+    </HStack>
+  )
+
   if (!isLoading && !articles.length) {
     return (
       <div className={classNames(cls.ArticleList, {}, [className, cls[view]])}>
@@ -40,10 +56,5 @@ view={view} />
     )
   }
 
-  return (
-    <div data-testid="ArticleList" className={classNames(cls.ArticleList, {}, [className, cls[view]])}>
-      {articles.length > 0 ? articles.map(renderArtcile) : null}
-      {isLoading && getSkeleton(view)}
-    </div>
-  )
+  return <ToggleFeaturesComponent featureName="isAppRedesigned" on={redesignedContent} off={deprecatedContent} />
 })
diff --git a/src/entities/Article/ui/ArticleListItem/ArticleListItem.module.scss b/src/entities/Article/ui/ArticleListItem/ArticleListItem.module.scss
@@ -102,3 +102,9 @@
     text-overflow: ellipsis;
   }
 }
+
+.ArticleListItemRedesigned {
+  &.LIST {
+    width: 100%;
+  }
+}
diff --git a/...rticle/ui/ArticleListItem/ArticleListItemRedesigned/ArticleListItemRedesigned.module.scss b/...rticle/ui/ArticleListItem/ArticleListItemRedesigned/ArticleListItemRedesigned.module.scss
@@ -12,10 +12,29 @@
 }
 
 .PLATE {
+  .card {
+    width: 240px;
+    height: 350px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
   .img {
     width: 100%;
-    max-height: 141px;
     object-fit: cover;
+    min-height: 140px;
+    max-height: 140px;
   }
 
+  .info {
+    padding: 8px 8px 16px 8px;
+    height: 100%;
+  }
+
+  .footer {
+    height: 100%;
+    justify-content: flex-end;
+  }
 }
diff --git a/...tities/Article/ui/ArticleListItem/ArticleListItemRedesigned/ArticleListItemRedesigned.tsx b/...tities/Article/ui/ArticleListItem/ArticleListItemRedesigned/ArticleListItemRedesigned.tsx
@@ -31,6 +31,12 @@ export const ArticleListItemRedesigned: FC<ArticleListItemProps> = React.memo((p
       <Text className={cls.views} text={String(article.views)} />
     </HStack>
   )
+  const userInfo = (
+    <>
+      {article.user.avatar && <Avatar size={32} src={article.user.avatar} />}
+      <Text bold text={article.user.username} />
+    </>
+  )
 
   const errorIconFallback = (
     <VStack heightMax justify="center">
@@ -61,8 +67,7 @@ export const ArticleListItemRedesigned: FC<ArticleListItemProps> = React.memo((p
         <VStack max gap="16">
           <VStack max gap="8">
             <HStack max gap="8">
-              {article.user.avatar && <Avatar size={32} src={article.user.avatar} />}
-              <Text bold text={article.user.username} />
+              {userInfo}
               <Text size="s" text={article.createdAt} />
             </HStack>
             <Text bold size="l" title={article.title} />
@@ -93,16 +98,18 @@ export const ArticleListItemRedesigned: FC<ArticleListItemProps> = React.memo((p
       to={getRouteArticleDetails(article.id)}
       className={classNames(cls.ArticleListItem, {}, [className, cls[view]])}
     >
-      <Card>
-        <div>
-          {image}
-          <Text text={article.createdAt} />
-        </div>
-        <div>
-          {types}
-          {views}
-        </div>
-        <Text size="s" title={article.title} />
+      <Card padding="0" className={cls.card} borderRadius="round">
+        {image}
+        <VStack className={cls.info} gap="4">
+          <Text title={article.title} className={cls.title} />
+          <VStack gap="4" className={cls.footer} max>
+            <HStack justify="between" max>
+              <Text text={article.createdAt} className={cls.date} />
+              {views}
+            </HStack>
+            <HStack gap="4">{userInfo}</HStack>
+          </VStack>
+        </VStack>
       </Card>
     </AppLink>
   )

diff --git a/src/entities/Article/ui/ArticleListItem/ArticleListItemSkeleton.tsx b/src/entities/Article/ui/ArticleListItem/ArticleListItemSkeleton.tsx
@@ -30,9 +30,15 @@ export const ArticleListItemSkeleton: React.FC<ArticleListItemSkeletonProps> = R
     off: () => CardDeprecated,
   })
 
+  const mainClass = toggleFeatures({
+    name: 'isAppRedesigned',
+    on: () => cls.ArticleListItemRedesigned,
+    off: () => cls.ArticleListItem,
+  })
+
   if (view === ArticleView.LIST) {
     return (
-      <div className={classNames(cls.ArticleListItem, {}, [className, cls[view]])}>
+      <div className={classNames(mainClass, {}, [className, cls[view]])}>
         <Card className={cls.card}>
           <div className={cls.header}>
             <Skeleton width={30} height={30} border="50%" />
@@ -50,10 +56,10 @@ export const ArticleListItemSkeleton: React.FC<ArticleListItemSkeletonProps> = R
   }
 
   return (
-    <div className={classNames(cls.ArticleListItem, {}, [className, cls[view]])}>
+    <div className={classNames(mainClass, {}, [className, cls[view]])}>
       <Card className={cls.card}>
         <div>
-          <Skeleton width={200} height={200} />
+          <Skeleton width="100%" height={200} />
         </div>
         <div className={cls.infoWrapper}>
           <Skeleton width={130} height={16} />

diff --git a/src/features/ArticleRecomendationsList/api/ArticleRecomendationsListApi.ts b/src/features/ArticleRecomendationsList/api/ArticleRecomendationsListApi.ts
@@ -7,6 +7,7 @@ const recomendationsApi = rtkApi.injectEndpoints({
         url: '/articles',
         params: {
           _limit: limit,
+          _expand: 'user',
         },
       }),
     }),

diff --git a/src/shared/ui/redesigned/Stack/Flex/Flex.module.scss b/src/shared/ui/redesigned/Stack/Flex/Flex.module.scss
@@ -65,3 +65,7 @@
 .heightMax {
   height: 100%;
 }
+
+.wrap {
+  flex-wrap: wrap;
+}
diff --git a/src/shared/ui/redesigned/Stack/Flex/Flex.tsx b/src/shared/ui/redesigned/Stack/Flex/Flex.tsx
@@ -45,6 +45,7 @@ export interface FlexProps extends DivProps {
   direction: FlexDirection
   gap?: FlexGap
   max?: boolean
+  wrap?: boolean
   heightMax?: boolean
 }
 
@@ -57,6 +58,7 @@ export const Flex = (props: FlexProps) => {
     direction = 'row',
     gap,
     max,
+    wrap,
     heightMax,
     ...otherProps
   } = props
@@ -72,6 +74,7 @@ export const Flex = (props: FlexProps) => {
   const mods: Mods = {
     [cls.max]: max,
     [cls.heightMax]: heightMax,
+    [cls.wrap]: wrap,
   }
 
   return (