From 7e3499fbb337dcae380b6056b6d9f2ba043e2718 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Tue, 9 Jul 2024 12:56:56 +0300
Subject: [PATCH] all-topics-styling-fix

---
 .../Views/AllTopics/AllTopics.module.scss     |  49 ++++----
 src/components/Views/AllTopics/AllTopics.tsx  | 118 ++++++++----------
 src/components/_shared/PageLayout.tsx         |   7 +-
 src/routes/topic/(all-topics).tsx             |   3 +-
 4 files changed, 81 insertions(+), 96 deletions(-)

diff --git a/src/components/Views/AllTopics/AllTopics.module.scss b/src/components/Views/AllTopics/AllTopics.module.scss
index cb4bb1d5..fc5ee61f 100644
--- a/src/components/Views/AllTopics/AllTopics.module.scss
+++ b/src/components/Views/AllTopics/AllTopics.module.scss
@@ -1,37 +1,36 @@
-.allTopicsPage {
-  .group {
-    @include font-size(1.6rem);
+.group {
+  @include font-size(1.6rem);
 
-    margin: 3em 0 9.6rem;
+  margin: 3em 0 9.6rem;
 
-    @include media-breakpoint-down(sm) {
-      margin-bottom: 6.4rem;
-    }
-
-    h2 {
-      margin-bottom: 3.2rem;
-      text-transform: capitalize;
-
-      @include media-breakpoint-down(sm) {
-        margin-bottom: 1.6rem;
-      }
-    }
-
-    .topic {
-      margin-bottom: 2.4rem;
-    }
+  @include media-breakpoint-down(sm) {
+    margin-bottom: 6.4rem;
   }
 
-  .container {
-    width: auto;
+  h2 {
+    margin-bottom: 3.2rem;
+    text-transform: capitalize;
 
-    .search-input {
-      display: inline-block;
-      width: 100px !important;
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 1.6rem;
     }
   }
 }
 
+.topicTitle {
+  margin-bottom: 2.4rem;
+}
+
+.container {
+  width: auto;
+
+  .search-input {
+    display: inline-block;
+    width: 100px !important;
+  }
+}
+
+
 .loadMoreContainer {
   margin-top: 48px;
   text-align: center;
diff --git a/src/components/Views/AllTopics/AllTopics.tsx b/src/components/Views/AllTopics/AllTopics.tsx
index 08664a59..4e8218c0 100644
--- a/src/components/Views/AllTopics/AllTopics.tsx
+++ b/src/components/Views/AllTopics/AllTopics.tsx
@@ -7,7 +7,6 @@ import { useLocalize } from '~/context/localize'
 import { useTopics } from '~/context/topics'
 import type { Topic } from '~/graphql/schema/core.gen'
 import { dummyFilter } from '~/lib/dummyFilter'
-import { capitalize } from '~/utils/capitalize'
 import { scrollHandler } from '~/utils/scroll'
 import { TopicBadge } from '../../Topic/TopicBadge'
 import styles from './AllTopics.module.scss'
@@ -57,10 +56,6 @@ export const AllTopics = (props: Props) => {
     return keys
   })
 
-  // limit/offset based pagination aka 'show more' logic
-  const [limit, setLimit] = createSignal(TOPICS_PER_PAGE)
-  const showMore = () => setLimit((oldLimit) => oldLimit + TOPICS_PER_PAGE)
-
   // filter
   const [searchQuery, setSearchQuery] = createSignal('')
   const [filteredResults, setFilteredResults] = createSignal<Topic[]>([])
@@ -94,9 +89,56 @@ export const AllTopics = (props: Props) => {
       </div>
     </div>
   )
+  const AllTopicAlphabeticallyHead = () => (
+    <div class="col-lg-18 col-xl-15">
+      <ul class={clsx('nodash', styles.alphabet)}>
+        <For each={Array.from(alphabet())}>
+          {(letter, index) => (
+            <li>
+              <Show when={letter in byLetter()} fallback={letter}>
+                <A
+                  href={`/topic?by=title#letter-${index()}`}
+                  onClick={(event) => {
+                    event.preventDefault()
+                    scrollHandler(`letter-${index()}`)
+                  }}
+                >
+                  {letter}
+                </A>
+              </Show>
+            </li>
+          )}
+        </For>
+      </ul>
+    </div>
+  )
+  const AllTopicAlphabetically = () => (
+    <For each={sortedKeys()}>
+      {(letter) => (
+        <div class={clsx(styles.group, 'group')}>
+          <h2 id={`letter-${alphabet().indexOf(letter)}`}>{letter}</h2>
+          <div class="row">
+            <div class="col-lg-20">
+              <div class="row">
+                <For each={byLetter()[letter]}>
+                    {(topic) => (
+                      <div class={clsx(styles.topicTitle, 'col-sm-12 col-md-8')}>
+                        <A href={`/topic/${topic.slug}`}>{topic.title || topic.slug}</A>
+                        <Show when={topic.stat?.shouts || 0}>
+                          <span class={styles.articlesCounter}>{topic.stat?.shouts || 0}</span>
+                        </Show>
+                      </div>
+                    )}
+                </For>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </For>
+  )
   return (
     <>
-      <h1>{t('Themes and plots')}</h1>
       <Show when={Boolean(filteredResults())} fallback={<Loading />}>
         <div class="row">
           <div class="col-md-19 offset-md-5">
@@ -104,76 +146,20 @@ export const AllTopics = (props: Props) => {
 
             <Show when={filteredResults().length > 0}>
               <Show when={searchParams?.by === 'title'}>
-                <div class="col-lg-18 col-xl-15">
-                  <ul class={clsx('nodash', styles.alphabet)}>
-                    <For each={Array.from(alphabet())}>
-                      {(letter, index) => (
-                        <li>
-                          <Show when={letter in byLetter()} fallback={letter}>
-                            <A
-                              href={`/topic?by=title#letter-${index()}`}
-                              onClick={(event) => {
-                                event.preventDefault()
-                                scrollHandler(`letter-${index()}`)
-                              }}
-                            >
-                              {letter}
-                            </A>
-                          </Show>
-                        </li>
-                      )}
-                    </For>
-                  </ul>
-                </div>
-
-                <For each={sortedKeys()}>
-                  {(letter) => (
-                    <div class={clsx(styles.group, 'group')}>
-                      <h2 id={`letter-${alphabet().indexOf(letter)}`}>{letter}</h2>
-                      <div class="row">
-                        <div class="col-lg-20">
-                          <div class="row">
-                            <For each={byLetter()[letter]}>
-                              {(topic) => (
-                                <div class={clsx(styles.topic, 'topic col-sm-12 col-md-8')}>
-                                  <A href={`/topic/${topic.slug}`}>
-                                    {lang() === 'en'
-                                      ? capitalize(topic.slug.replaceAll('-', ' '))
-                                      : topic.title}
-                                  </A>
-                                  <span class={styles.articlesCounter}>{topic.stat?.shouts || 0}</span>
-                                </div>
-                              )}
-                            </For>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </For>
+                <AllTopicAlphabeticallyHead />
+                <AllTopicAlphabetically />
               </Show>
 
               <Show when={searchParams?.by && searchParams?.by !== 'title'}>
                 <div class="row">
                   <div class="col-lg-18 col-xl-15 py-4">
-                    <For each={filteredResults().slice(0, limit())}>
-                      {(topic) => (
-                        <>
-                          <TopicBadge topic={topic} showStat={true} />
-                        </>
-                      )}
+                    <For each={filteredResults()}>
+                      {(topic) => <TopicBadge topic={topic} showStat={true} />}
                     </For>
                   </div>
                 </div>
               </Show>
 
-              <Show when={filteredResults().length > limit() && searchParams?.by !== 'title'}>
-                <div class={clsx(styles.loadMoreContainer, 'col-24 col-md-20 col-lg-14 offset-md-2')}>
-                  <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
-                    {t('Load more')}
-                  </button>
-                </div>
-              </Show>
             </Show>
           </div>
         </div>
diff --git a/src/components/_shared/PageLayout.tsx b/src/components/_shared/PageLayout.tsx
index de24c9bb..3b431e54 100644
--- a/src/components/_shared/PageLayout.tsx
+++ b/src/components/_shared/PageLayout.tsx
@@ -46,7 +46,6 @@ export const PageLayout = (props: PageLayoutProps) => {
         })
       : imageUrl
   )
-  const ogTitle = createMemo(() => t(props.title))
   const description = createMemo(() => (props.desc ? t(props.desc) : ''))
   const keypath = createMemo(() => (props.key || loc?.pathname.split('/')[0]) as keyof typeof ruKeywords)
   const keywords = createMemo(
@@ -58,7 +57,7 @@ export const PageLayout = (props: PageLayoutProps) => {
   createEffect(() => props.scrollToComments?.(scrollToComments()))
   return (
     <>
-      <Title>{props.title}</Title>
+      <Title>{props.article?.title || t(props.title)}</Title>
       <Header
         slug={props.slug}
         title={props.headerTitle}
@@ -70,12 +69,12 @@ export const PageLayout = (props: PageLayoutProps) => {
       <Meta name="descprition" content={description() || ''} />
       <Meta name="keywords" content={keywords()} />
       <Meta name="og:type" content="article" />
-      <Meta name="og:title" content={ogTitle() || ''} />
+      <Meta name="og:title" content={props.article?.title || t(props.title) || ''} />
       <Meta name="og:image" content={ogImage() || ''} />
       <Meta name="twitter:image" content={ogImage() || ''} />
       <Meta name="og:description" content={description() || ''} />
       <Meta name="twitter:card" content="summary_large_image" />
-      <Meta name="twitter:title" content={ogTitle() || ''} />
+      <Meta name="twitter:title" content={props.article?.title || t(props.title) || ''} />
       <Meta name="twitter:description" content={description() || ''} />
       <main
         class={clsx('main-content', {
diff --git a/src/routes/topic/(all-topics).tsx b/src/routes/topic/(all-topics).tsx
index daf202f3..cfe109ae 100644
--- a/src/routes/topic/(all-topics).tsx
+++ b/src/routes/topic/(all-topics).tsx
@@ -25,7 +25,8 @@ export default (props: RouteSectionProps<{ topics: Topic[] }>) => {
     <PageLayout
       withPadding={true}
       key="topics"
-      title={`${t('Discours')} :: ${t('All topics')}`}
+      title='Themes and plots'
+      headerTitle={`${t('Discours')} :: ${t('All topics')}`}
       desc="Thematic table of contents of the magazine. Here you can find all the topics that the community authors wrote about"
     >
       <ReactionsProvider>