index page random topic fixes (#345)

* index page random topic fixes

* debug code removed

public/locales/en/translation.json

@@ -25,6 +25,7 @@
   "Alignment left": "Alignment left",
   "Alignment right": "Alignment right",
   "All": "All",
+  "All articles": "All articles",
   "All authors": "All authors",
   "All posts": "All posts",
   "All topics": "All topics",

public/locales/ru/translation.json

@@ -27,6 +27,7 @@
   "Alignment left": "По левому краю",
   "Alignment right": "По правому краю",
   "All": "Все",
+  "All articles": "Все материалы",
   "All authors": "Все авторы",
   "All posts": "Все публикации",
   "All topics": "Все темы",

src/components/Feed/Group.tsx

@@ -12,7 +12,6 @@ interface GroupProps {
 }
 
 export default (props: GroupProps) => {
-  if (!props.articles) props.articles = []
   return (
     <div class="floor floor--group">
       <Show when={props.articles.length > 4}>

src/components/Views/Feed/Feed.tsx

@@ -54,6 +54,21 @@ const getOrderBy = (by: FeedSearchParams['by']) => {
   return ''
 }
 
+const getFromDate = (period: FeedPeriod): Date => {
+  const now = new Date()
+  switch (period) {
+    case 'week': {
+      return new Date(now.setDate(now.getDate() - 7))
+    }
+    case 'month': {
+      return new Date(now.setMonth(now.getMonth() - 1))
+    }
+    case 'year': {
+      return new Date(now.setFullYear(now.getFullYear() - 1))
+    }
+  }
+}
+
 type Props = {
   loadShouts: (options: LoadShoutsOptions) => Promise<{
     hasMore: boolean
@@ -124,20 +139,6 @@ export const Feed = (props: Props) => {
     ),
   )
 
-  const getFromDate = (period: FeedPeriod): Date => {
-    const now = new Date()
-    switch (period) {
-      case 'week': {
-        return new Date(now.setDate(now.getDate() - 7))
-      }
-      case 'month': {
-        return new Date(now.setMonth(now.getMonth() - 1))
-      }
-      case 'year': {
-        return new Date(now.setFullYear(now.getFullYear() - 1))
-      }
-    }
-  }
   const loadFeedShouts = () => {
     const options: LoadShoutsOptions = {
       limit: FEED_PAGE_SIZE,

src/components/Views/Home.module.scss

@@ -0,0 +1,36 @@
+.randomTopicHeaderContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+}
+
+.randomTopicHeader {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 44px;
+  text-transform: capitalize;
+}
+
+.randomTopicHeaderLink {
+  border: none !important;
+  display: inline-block;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 24px;
+
+  .icon {
+    vertical-align: top;
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+  }
+
+  &:hover {
+    border: none !important;
+
+    .icon {
+      filter: invert(1);
+    }
+  }
+}

src/components/Views/Home.tsx

@@ -1,8 +1,10 @@
 import type { Shout, Topic } from '../../graphql/types.gen'
 
+import { getPagePath } from '@nanostores/router'
 import { batch, createMemo, createSignal, For, onMount, Show } from 'solid-js'
 
 import { useLocalize } from '../../context/localize'
+import { router } from '../../stores/router'
 import {
   loadShouts,
   loadTopArticles,
@@ -14,6 +16,7 @@ import { useTopicsStore } from '../../stores/zine/topics'
 import { apiClient } from '../../utils/apiClient'
 import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
 import { splitToPages } from '../../utils/splitToPages'
+import { Icon } from '../_shared/Icon'
 import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper'
 import Banner from '../Discours/Banner'
 import Hero from '../Discours/Hero'
@@ -26,6 +29,8 @@ import { Row5 } from '../Feed/Row5'
 import RowShort from '../Feed/RowShort'
 import { Topics } from '../Nav/Topics'
 
+import styles from './Home.module.scss'
+
 type Props = {
   shouts: Shout[]
 }
@@ -125,7 +130,22 @@ export const HomeView = (props: Props) => {
           nodate={true}
         />
         <Show when={randomTopic()}>
-          <Group articles={randomTopicArticles()} header={''} />
+          <Group
+            articles={randomTopicArticles()}
+            header={
+              <div class={styles.randomTopicHeaderContainer}>
+                <div class={styles.randomTopicHeader}>{randomTopic().title}</div>
+                <div>
+                  <a
+                    class={styles.randomTopicHeaderLink}
+                    href={getPagePath(router, 'topic', { slug: randomTopic().slug })}
+                  >
+                    {t('All articles')} <Icon class={styles.icon} name="arrow-right" />
+                  </a>
+                </div>
+              </div>
+            }
+          />
         </Show>
         <Show when={topArticles()}>
           <ArticleCardSwiper title={t('Favorite')} slides={topArticles()} />