From 63c52ac6e45718113cf7c625f3eda163abc9986d Mon Sep 17 00:00:00 2001
From: Arkadzi Rakouski <arkadyrakovsky@gmail.com>
Date: Thu, 17 Aug 2023 19:00:53 +0300
Subject: [PATCH] add leads for feed (#167)

* add leads for feed

* Fix Media Items description autosave

* resolve conversation

---------

Co-authored-by: ilya-bkv <i.yablokov@ccmp.me>
---
 src/components/Feed/ArticleCard.module.scss | 54 +++++++++++--------
 src/components/Feed/ArticleCard.tsx         | 60 +++++++++++----------
 src/components/Views/Feed.tsx               |  2 +
 src/graphql/query/articles-load-by.ts       |  1 +
 4 files changed, 67 insertions(+), 50 deletions(-)

diff --git a/src/components/Feed/ArticleCard.module.scss b/src/components/Feed/ArticleCard.module.scss
index 6d4d9a22..b61190bf 100644
--- a/src/components/Feed/ArticleCard.module.scss
+++ b/src/components/Feed/ArticleCard.module.scss
@@ -71,7 +71,6 @@
 
     &::before {
       content: '';
-      height: 100%;
       left: 0;
       position: absolute;
       top: 0;
@@ -181,6 +180,15 @@
   }
 }
 
+.shoutCardLead {
+  @include font-size(1.6rem);
+
+  color: var(--secondary-color);
+  font-weight: 400;
+  line-height: 1.3;
+  margin-bottom: 1.4rem;
+}
+
 .shoutCardSubtitle {
   @include font-size(1.8rem);
   color: #141414;
@@ -202,8 +210,8 @@
   transition: background-color 0.2s, color 0.2s;
 
   &:hover {
-    background: #000;
-    color: #fff;
+    background: var(--background-color-invert);
+    color: var(--default-color-invert);
   }
 }
 
@@ -214,7 +222,7 @@
   a,
   .shoutCardTitle,
   .shoutCardSubtitle {
-    color: #fff;
+    color: var(--default-color-invert);
   }
 
   .shoutCardCover {
@@ -247,14 +255,14 @@
   z-index: 2;
 
   a:link {
-    background: #fff;
+    background: var(--default-color-invert);
     border-radius: 100%;
     display: block;
     height: 100%;
     width: 100%;
 
     &:hover {
-      background: #000;
+      background: var(--background-color-invert);
 
       .icon {
         display: inline-block;
@@ -326,7 +334,7 @@
     }
 
     .shoutCardSubtitle {
-      color: #fff;
+      color: var(--background-color-invert);
     }
 
     .shoutAuthor {
@@ -347,29 +355,29 @@
     }
 
     a:hover {
-      background-color: #fff !important;
+      background-color: var(--background-color) !important;
     }
   }
 
   a:link,
   a:visited {
-    color: #fff;
+    color: var(--default-color-invert);
   }
 
   a:hover {
-    background: #fff;
-    color: #000;
+    background: var(--background-color);
+    color: var(--default-color);
   }
 
   .shoutCardTitlesContainer {
     a:link {
       border: none;
-      color: #fff;
+      color: var(--default-color-invert);
 
       &:hover {
         .shoutCardTitle .shoutCardLinkContainer {
-          background-color: #fff;
-          color: #000;
+          background-color: var(--background-color);
+          color: var(--default-color);
         }
       }
     }
@@ -411,7 +419,7 @@
   a,
   .shoutCardTitle,
   .shoutCardSubtitle {
-    color: #fff !important;
+    color: var(--default-color-invert) !important;
   }
 
   .shoutAuthor,
@@ -419,8 +427,8 @@
     a:hover {
       &,
       .shoutCardTitle .shoutCardLinkContainer {
-        background-color: #fff;
-        color: #000 !important;
+        background-color: var(--background-color);
+        color: var(--default-color) !important;
       }
     }
   }
@@ -466,8 +474,8 @@
     &:link,
     &:visited {
       &:hover {
-        background: #fff !important;
-        color: #000 !important;
+        background: var(--background-color) !important;
+        color: var(--default-color) !important;
       }
     }
   }
@@ -505,7 +513,7 @@
   @include font-size(1.5rem);
 
   align-items: flex-start;
-  border-top: 2px solid #141414;
+  border-top: 2px solid var(--black-500);
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
@@ -638,7 +646,7 @@
 
     a:hover {
       .shoutCardLinkContainer {
-        color: #fff;
+        color: var(--default-color-invert);
       }
     }
   }
@@ -693,7 +701,7 @@
   }
 
   .shoutCardSubtitle {
-    color: #000;
+    color: var(--default-color);
   }
 
   .shoutCardTitle {
@@ -708,7 +716,7 @@
 
   a:hover {
     .shoutCardLinkContainer {
-      color: #fff;
+      color: var(--default-color-invert);
     }
   }
 }
diff --git a/src/components/Feed/ArticleCard.tsx b/src/components/Feed/ArticleCard.tsx
index 78d3bf5f..9c32b6c6 100644
--- a/src/components/Feed/ArticleCard.tsx
+++ b/src/components/Feed/ArticleCard.tsx
@@ -78,14 +78,12 @@ export const ArticleCard = (props: ArticleCardProps) => {
 
   const { title, subtitle } = getTitleAndSubtitle(props.article)
 
-  const { id, cover, layout, slug, authors, stat, body } = props.article
-
-  const canEdit = () => authors?.some((a) => a.slug === user()?.slug)
+  const canEdit = () => props.article.authors?.some((a) => a.slug === user()?.slug)
 
   const { changeSearchParam } = useRouter()
   const scrollToComments = (event) => {
     event.preventDefault()
-    openPage(router, 'article', { slug })
+    openPage(router, 'article', { slug: props.article.slug })
     changeSearchParam('scrollTo', 'comments')
   }
 
@@ -106,14 +104,14 @@ export const ArticleCard = (props: ArticleCardProps) => {
         [styles.shoutCardCompact]: props.settings?.isCompact,
         [styles.shoutCardSingle]: props.settings?.isSingle,
         [styles.shoutCardBeside]: props.settings?.isBeside,
-        [styles.shoutCardNoImage]: !cover
+        [styles.shoutCardNoImage]: !props.article.cover
       }}
     >
       <Show when={!props.settings?.noimage && !props.settings?.isFeedMode}>
         <div class={styles.shoutCardCoverContainer}>
           <div class={styles.shoutCardCover}>
-            <Show when={cover}>
-              <img src={imageProxy(cover)} alt={title || ''} loading="lazy" />
+            <Show when={props.article.cover}>
+              <img src={imageProxy(props.article.cover)} alt={title || ''} loading="lazy" />
             </Show>
           </div>
         </div>
@@ -122,15 +120,15 @@ export const ArticleCard = (props: ArticleCardProps) => {
       <div class={styles.shoutCardContent}>
         <Show
           when={
-            layout &&
-            layout !== 'article' &&
+            props.article.layout &&
+            props.article.layout !== 'article' &&
             !(props.settings?.noicon || props.settings?.noimage) &&
             !props.settings?.isFeedMode
           }
         >
           <div class={styles.shoutCardType}>
-            <a href={`/expo/${layout}`}>
-              <Icon name={layout} class={styles.icon} />
+            <a href={`/expo/${props.article.layout}`}>
+              <Icon name={props.article.layout} class={styles.icon} />
               {/*<Icon name={`${layout}-hover`} class={clsx(styles.icon, styles.iconHover)} />*/}
             </a>
           </div>
@@ -153,7 +151,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
             [styles.shoutCardTitlesContainerFeedMode]: props.settings?.isFeedMode
           })}
         >
-          <a href={`/${slug || ''}`}>
+          <a href={`/${props.article.slug || ''}`}>
             <div class={styles.shoutCardTitle}>
               <span class={styles.shoutCardLinkWrapper}>
                 <span class={styles.shoutCardLinkContainer}>{title}</span>
@@ -166,6 +164,10 @@ export const ArticleCard = (props: ArticleCardProps) => {
               </div>
             </Show>
           </a>
+
+          <Show when={props.article.lead}>
+            <div class={styles.shoutCardLead}>{props.article.lead}</div>
+          </Show>
         </div>
 
         <Show when={!props.settings?.noauthor || !props.settings?.nodate}>
@@ -174,7 +176,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
           >
             <Show when={!props.settings?.noauthor}>
               <div class={styles.shoutAuthor}>
-                <For each={authors}>
+                <For each={props.article.authors}>
                   {(author) => {
                     return (
                       <AuthorCard
@@ -196,22 +198,24 @@ export const ArticleCard = (props: ArticleCardProps) => {
         </Show>
 
         <Show when={props.settings?.isFeedMode}>
-          <Show when={!props.settings?.noimage && cover}>
+          <Show when={!props.settings?.noimage && props.article.cover}>
             <div class={styles.shoutCardCoverContainer}>
               <Show
                 when={
-                  layout && layout !== 'article' && !(props.settings?.noicon || props.settings?.noimage)
+                  props.article.layout &&
+                  props.article.layout !== 'article' &&
+                  !(props.settings?.noicon || props.settings?.noimage)
                 }
               >
                 <div class={styles.shoutCardType}>
-                  <a href={`/expo/${layout}`}>
-                    <Icon name={layout} class={styles.icon} />
+                  <a href={`/expo/${props.article.layout}`}>
+                    <Icon name={props.article.layout} class={styles.icon} />
                     {/*<Icon name={`${layout}-hover`} class={clsx(styles.icon, styles.iconHover)} />*/}
                   </a>
                 </div>
               </Show>
               <div class={styles.shoutCardCover}>
-                <img src={imageProxy(cover)} alt={title || ''} loading="lazy" />
+                <img src={imageProxy(props.article.cover)} alt={title || ''} loading="lazy" />
               </div>
             </div>
           </Show>
@@ -230,14 +234,16 @@ export const ArticleCard = (props: ArticleCardProps) => {
                     name="comment-hover"
                     class={clsx(styles.icon, styles.iconHover, styles.feedControlIcon)}
                   />
-                  <span class={styles.shoutCardLinkContainer}>{stat?.commented || t('Add comment')}</span>
+                  <span class={styles.shoutCardLinkContainer}>
+                    {props.article.stat?.commented || t('Add comment')}
+                  </span>
                 </a>
               </div>
 
               <Show when={props.settings?.withViewed}>
                 <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardDetailsViewed)}>
                   <Icon name="eye" class={clsx(styles.icon, styles.feedControlIcon)} />
-                  {stat?.viewed}
+                  {props.article.stat?.viewed}
                 </div>
               </Show>
             </div>
@@ -247,7 +253,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
                 <Popover content={t('Edit')}>
                   {(triggerRef: (el) => void) => (
                     <div class={styles.shoutCardDetailsItem} ref={triggerRef}>
-                      <a href={getPagePath(router, 'edit', { shoutId: id.toString() })}>
+                      <a href={getPagePath(router, 'edit', { shoutId: props.article.id.toString() })}>
                         <Icon name="pencil-outline" class={clsx(styles.icon, styles.feedControlIcon)} />
                         <Icon
                           name="pencil-outline-hover"
@@ -279,9 +285,9 @@ export const ArticleCard = (props: ArticleCardProps) => {
                     <SharePopup
                       containerCssClass={stylesHeader.control}
                       title={title}
-                      description={getDescription(body)}
-                      imageUrl={cover}
-                      shareUrl={getShareUrl({ pathname: `/${slug}` })}
+                      description={getDescription(props.article.body)}
+                      imageUrl={props.article.cover}
+                      shareUrl={getShareUrl({ pathname: `/${props.article.slug}` })}
                       isVisible={(value) => setIsActionPopupActive(value)}
                       trigger={
                         <button>
@@ -302,9 +308,9 @@ export const ArticleCard = (props: ArticleCardProps) => {
                   isOwner={canEdit()}
                   containerCssClass={stylesHeader.control}
                   title={title}
-                  description={getDescription(body)}
-                  imageUrl={cover}
-                  shareUrl={getShareUrl({ pathname: `/${slug}` })}
+                  description={getDescription(props.article.body)}
+                  imageUrl={props.article.cover}
+                  shareUrl={getShareUrl({ pathname: `/${props.article.slug}` })}
                   isVisible={(value) => setIsActionPopupActive(value)}
                   trigger={
                     <button>
diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx
index a0bf8254..c763f9da 100644
--- a/src/components/Views/Feed.tsx
+++ b/src/components/Views/Feed.tsx
@@ -44,6 +44,7 @@ export const FeedView = () => {
 
   // state
   const { sortedArticles } = useArticlesStore()
+
   const { sortedAuthors } = useAuthorsStore()
   const { topTopics } = useTopicsStore()
   const { topAuthors } = useTopAuthorsStore()
@@ -90,6 +91,7 @@ export const FeedView = () => {
   const loadMore = async () => {
     setIsLoading(true)
     const { hasMore, newShouts } = await loadFeedShouts()
+
     setIsLoading(false)
 
     loadReactionsBy({
diff --git a/src/graphql/query/articles-load-by.ts b/src/graphql/query/articles-load-by.ts
index e40bee3f..9e8dd616 100644
--- a/src/graphql/query/articles-load-by.ts
+++ b/src/graphql/query/articles-load-by.ts
@@ -9,6 +9,7 @@ export default gql`
       slug
       layout
       cover
+      lead
       # community
       mainTopic
       topics {