From 9483b84bade9c546512d505219e0ea803aac1e3e Mon Sep 17 00:00:00 2001
From: Alexey Khaov <kvakazyambra@gmail.com>
Date: Wed, 25 Jan 2023 01:15:29 +0300
Subject: [PATCH] Hide articles dates on the main page

---
 src/components/Feed/Beside.tsx | 11 +++++++--
 src/components/Feed/Row1.tsx   |  4 ++--
 src/components/Feed/Row2.tsx   |  4 ++--
 src/components/Feed/Row3.tsx   |  4 ++--
 src/components/Feed/Row5.tsx   | 21 ++++++++++++-----
 src/components/Views/Home.tsx  | 41 ++++++++++++++++++++--------------
 6 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx
index e97842fb..a8514e25 100644
--- a/src/components/Feed/Beside.tsx
+++ b/src/components/Feed/Beside.tsx
@@ -20,6 +20,7 @@ interface BesideProps {
   topicShortDescription?: boolean
   topicsBySlug?: { [slug: string]: Topic }
   iconButton?: boolean
+  nodate?: boolean
 }
 
 export const Beside = (props: BesideProps) => {
@@ -72,7 +73,10 @@ export const Beside = (props: BesideProps) => {
                           />
                         </Show>
                         <Show when={props.wrapper === 'article' && value?.slug}>
-                          <ArticleCard article={value as Shout} settings={{ noimage: true }} />
+                          <ArticleCard
+                            article={value as Shout}
+                            settings={{ noimage: true, nodate: props.nodate }}
+                          />
                         </Show>
                         <Show when={props.wrapper === 'top-article' && value?.slug}>
                           <ArticleCard
@@ -87,7 +91,10 @@ export const Beside = (props: BesideProps) => {
               </div>
             </Show>
             <div class={clsx('col-md-8', styles.shoutCardContainer)}>
-              <ArticleCard article={props.beside} settings={{ isBigTitle: true, isBeside: true }} />
+              <ArticleCard
+                article={props.beside}
+                settings={{ isBigTitle: true, isBeside: true, nodate: props.nodate }}
+              />
             </div>
           </div>
         </div>
diff --git a/src/components/Feed/Row1.tsx b/src/components/Feed/Row1.tsx
index c5c07c87..7da01c27 100644
--- a/src/components/Feed/Row1.tsx
+++ b/src/components/Feed/Row1.tsx
@@ -2,13 +2,13 @@ import { Show } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
 import { ArticleCard } from './Card'
 
-export const Row1 = (props: { article: Shout }) => (
+export const Row1 = (props: { article: Shout; nodate?: boolean }) => (
   <Show when={!!props.article}>
     <div class="floor floor--one-article">
       <div class="wide-container">
         <div class="row">
           <div class="col-12">
-            <ArticleCard article={props.article} settings={{ isSingle: true }} />
+            <ArticleCard article={props.article} settings={{ isSingle: true, nodate: props.nodate }} />
           </div>
         </div>
       </div>
diff --git a/src/components/Feed/Row2.tsx b/src/components/Feed/Row2.tsx
index 573c4e6c..71fdc1f2 100644
--- a/src/components/Feed/Row2.tsx
+++ b/src/components/Feed/Row2.tsx
@@ -8,7 +8,7 @@ const x = [
   ['8', '4']
 ]
 
-export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
+export const Row2 = (props: { articles: Shout[]; isEqual?: boolean; nodate?: boolean }) => {
   const [y, setY] = createSignal(0)
 
   createComputed(() => setY(Math.floor(Math.random() * x.length)))
@@ -26,7 +26,7 @@ export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
                       article={a}
                       settings={{
                         isWithCover: props.isEqual || x[y()][i()] === '8',
-                        nodate: props.isEqual
+                        nodate: props.isEqual || props.nodate
                       }}
                     />
                   </div>
diff --git a/src/components/Feed/Row3.tsx b/src/components/Feed/Row3.tsx
index 7c1e315e..026aca50 100644
--- a/src/components/Feed/Row3.tsx
+++ b/src/components/Feed/Row3.tsx
@@ -3,7 +3,7 @@ import { For } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
 import { ArticleCard } from './Card'
 
-export const Row3 = (props: { articles: Shout[]; header?: JSX.Element }) => {
+export const Row3 = (props: { articles: Shout[]; header?: JSX.Element; nodate?: boolean }) => {
   return (
     <div class="floor">
       <div class="wide-container">
@@ -12,7 +12,7 @@ export const Row3 = (props: { articles: Shout[]; header?: JSX.Element }) => {
           <For each={props.articles}>
             {(a) => (
               <div class="col-md-4">
-                <ArticleCard article={a} />
+                <ArticleCard article={a} settings={{ nodate: props.nodate }} />
               </div>
             )}
           </For>
diff --git a/src/components/Feed/Row5.tsx b/src/components/Feed/Row5.tsx
index 1cc9b3e8..091c2a4b 100644
--- a/src/components/Feed/Row5.tsx
+++ b/src/components/Feed/Row5.tsx
@@ -1,21 +1,30 @@
 import type { Shout } from '../../graphql/types.gen'
 import { ArticleCard } from './Card'
 
-export const Row5 = (props: { articles: Shout[] }) => {
+export const Row5 = (props: { articles: Shout[]; nodate?: boolean }) => {
   return (
     <div class="floor floor--1">
       <div class="wide-container">
         <div class="row">
           <div class="col-md-3">
-            <ArticleCard article={props.articles[0]} />
-            <ArticleCard article={props.articles[1]} settings={{ noimage: true, withBorder: true }} />
+            <ArticleCard article={props.articles[0]} settings={{ nodate: props.nodate }} />
+            <ArticleCard
+              article={props.articles[1]}
+              settings={{ noimage: true, withBorder: true, nodate: props.nodate }}
+            />
           </div>
           <div class="col-md-6">
-            <ArticleCard article={props.articles[2]} settings={{ isBigTitle: true }} />
+            <ArticleCard
+              article={props.articles[2]}
+              settings={{ isBigTitle: true, nodate: props.nodate }}
+            />
           </div>
           <div class="col-md-3">
-            <ArticleCard article={props.articles[3]} />
-            <ArticleCard article={props.articles[4]} settings={{ noimage: true, withBorder: true }} />
+            <ArticleCard article={props.articles[3]} settings={{ nodate: props.nodate }} />
+            <ArticleCard
+              article={props.articles[4]}
+              settings={{ noimage: true, withBorder: true, nodate: props.nodate }}
+            />
           </div>
         </div>
       </div>
diff --git a/src/components/Views/Home.tsx b/src/components/Views/Home.tsx
index 6abec772..297de3bf 100644
--- a/src/components/Views/Home.tsx
+++ b/src/components/Views/Home.tsx
@@ -107,7 +107,7 @@ export const HomeView = (props: HomeProps) => {
     <Show when={locale() && sortedArticles().length > 0}>
       <NavTopics topics={randomTopics()} />
 
-      <Row5 articles={sortedArticles().slice(0, 5)} />
+      <Row5 articles={sortedArticles().slice(0, 5)} nodate={true} />
 
       <Hero />
 
@@ -117,15 +117,17 @@ export const HomeView = (props: HomeProps) => {
           title={t('Top viewed')}
           values={topViewedArticles().slice(0, 5)}
           wrapper={'top-article'}
+          nodate={true}
         />
 
-        <Row3 articles={sortedArticles().slice(6, 9)} />
+        <Row3 articles={sortedArticles().slice(6, 9)} nodate={true} />
 
         <Beside
           beside={sortedArticles()[9]}
           title={t('Top authors')}
           values={topAuthors()}
           wrapper={'author'}
+          nodate={true}
         />
 
         <Slider title={t('Top month articles')}>
@@ -144,13 +146,17 @@ export const HomeView = (props: HomeProps) => {
           </For>
         </Slider>
 
-        <Row2 articles={sortedArticles().slice(10, 12)} />
+        <Row2 articles={sortedArticles().slice(10, 12)} nodate={true} />
 
         <RowShort articles={sortedArticles().slice(12, 16)} />
 
-        <Row1 article={sortedArticles()[16]} />
-        <Row3 articles={sortedArticles().slice(17, 20)} />
-        <Row3 articles={topCommentedArticles().slice(0, 3)} header={<h2>{t('Top commented')}</h2>} />
+        <Row1 article={sortedArticles()[16]} nodate={true} />
+        <Row3 articles={sortedArticles().slice(17, 20)} nodate={true} />
+        <Row3
+          articles={topCommentedArticles().slice(0, 3)}
+          header={<h2>{t('Top commented')}</h2>}
+          nodate={true}
+        />
 
         {randomLayout()}
 
@@ -176,28 +182,29 @@ export const HomeView = (props: HomeProps) => {
           values={topTopics().slice(0, 5)}
           wrapper={'topic'}
           isTopicCompact={true}
+          nodate={true}
         />
 
         <Row3 articles={sortedArticles().slice(21, 24)} />
 
         <Banner />
 
-        <Row2 articles={sortedArticles().slice(24, 26)} />
-        <Row3 articles={sortedArticles().slice(26, 29)} />
-        <Row2 articles={sortedArticles().slice(29, 31)} />
-        <Row3 articles={sortedArticles().slice(31, 34)} />
+        <Row2 articles={sortedArticles().slice(24, 26)} nodate={true} />
+        <Row3 articles={sortedArticles().slice(26, 29)} nodate={true} />
+        <Row2 articles={sortedArticles().slice(29, 31)} nodate={true} />
+        <Row3 articles={sortedArticles().slice(31, 34)} nodate={true} />
       </Show>
 
       <For each={pages()}>
         {(page) => (
           <>
-            <Row1 article={page[0]} />
-            <Row3 articles={page.slice(1, 4)} />
-            <Row2 articles={page.slice(4, 6)} />
-            <Beside values={page.slice(6, 9)} beside={page[9]} wrapper="article" />
-            <Row1 article={page[10]} />
-            <Row2 articles={page.slice(11, 13)} />
-            <Row3 articles={page.slice(13, 16)} />
+            <Row1 article={page[0]} nodate={true} />
+            <Row3 articles={page.slice(1, 4)} nodate={true} />
+            <Row2 articles={page.slice(4, 6)} nodate={true} />
+            <Beside values={page.slice(6, 9)} beside={page[9]} wrapper="article" nodate={true} />
+            <Row1 article={page[10]} nodate={true} />
+            <Row2 articles={page.slice(11, 13)} nodate={true} />
+            <Row3 articles={page.slice(13, 16)} nodate={true} />
           </>
         )}
       </For>