From ffde754a432b5aa5ef63238568ae52c0b4500cc8 Mon Sep 17 00:00:00 2001
From: Igor Lobanov <bniwredyc@gmail.com>
Date: Sat, 16 Dec 2023 15:06:41 +0100
Subject: [PATCH] expo random tops fixes (#337)

Co-authored-by: Igor Lobanov <igor.lobanov@onetwotrip.com>
---
 src/components/Views/Expo/Expo.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Views/Expo/Expo.tsx b/src/components/Views/Expo/Expo.tsx
index 06c592e2..1d347b82 100644
--- a/src/components/Views/Expo/Expo.tsx
+++ b/src/components/Views/Expo/Expo.tsx
@@ -58,7 +58,6 @@ export const Expo = (props: Props) => {
   }
 
   const loadMore = async (count: number) => {
-    saveScrollPosition()
     const options: LoadShoutsOptions = {
       filters: getLoadShoutsFilters(),
       limit: count,
@@ -67,6 +66,11 @@ export const Expo = (props: Props) => {
 
     const { hasMore } = await loadShouts(options)
     setIsLoadMoreButtonVisible(hasMore)
+  }
+
+  const loadMoreWithoutScrolling = async (count: number) => {
+    saveScrollPosition()
+    await loadMore(count)
     restoreScrollPosition()
   }
 
@@ -137,7 +141,7 @@ export const Expo = (props: Props) => {
   })
 
   const handleLoadMoreClick = () => {
-    loadMore(LOAD_MORE_PAGE_SIZE)
+    loadMoreWithoutScrolling(LOAD_MORE_PAGE_SIZE)
   }
 
   return (
@@ -206,8 +210,8 @@ export const Expo = (props: Props) => {
                 </div>
               )}
             </For>
-            <Show when={randomTopArticles().length > 0} keyed={true}>
-              <ArticleCardSwiper title={t('Favorite')} slides={randomTopArticles()} />
+            <Show when={randomTopMonthArticles().length > 0} keyed={true}>
+              <ArticleCardSwiper title={t('Top month articles')} slides={randomTopMonthArticles()} />
             </Show>
             <For each={sortedArticles().slice(PRERENDERED_ARTICLES_COUNT / 2, PRERENDERED_ARTICLES_COUNT)}>
               {(shout) => (
@@ -220,8 +224,8 @@ export const Expo = (props: Props) => {
                 </div>
               )}
             </For>
-            <Show when={randomTopMonthArticles().length > 0} keyed={true}>
-              <ArticleCardSwiper title={t('Top month articles')} slides={randomTopMonthArticles()} />
+            <Show when={randomTopArticles().length > 0} keyed={true}>
+              <ArticleCardSwiper title={t('Favorite')} slides={randomTopArticles()} />
             </Show>
             <For each={pages()}>
               {(page) => (