discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Fix expo article length (#431)

Browse Source
This commit is contained in:
Ilya Y 2024-03-27 03:54:15 +03:00 committed by GitHub
parent ddaed0557d
commit 78dd43a497
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Views/Expo/Expo.tsx
View File

@ -24,8 +24,8 @@ type Props = {
layout: LayoutType layout: LayoutType
} }
export const PRERENDERED_ARTICLES_COUNT = 37 export const PRERENDERED_ARTICLES_COUNT = 36
const LOAD_MORE_PAGE_SIZE = 11 const LOAD_MORE_PAGE_SIZE = 12
export const Expo = (props: Props) => { export const Expo = (props: Props) => {
const [isLoaded, setIsLoaded] = createSignal<boolean>(Boolean(props.shouts)) const [isLoaded, setIsLoaded] = createSignal<boolean>(Boolean(props.shouts))
@ -34,11 +34,10 @@ export const Expo = (props: Props) => {
const [randomTopArticles, setRandomTopArticles] = createSignal<Shout[]>([]) const [randomTopArticles, setRandomTopArticles] = createSignal<Shout[]>([])
const [randomTopMonthArticles, setRandomTopMonthArticles] = createSignal<Shout[]>([]) const [randomTopMonthArticles, setRandomTopMonthArticles] = createSignal<Shout[]>([])
console.log('%c!!! randomTopMonthArticles():', 'color: #bada55', randomTopMonthArticles())
const { t } = useLocalize() const { t } = useLocalize()
// const { sortedArticles } = useArticlesStore({
// shouts: isLoaded() ? props.shouts : [],
// })
const { sortedArticles } = useArticlesStore({ const { sortedArticles } = useArticlesStore({
shouts: props.shouts || [], shouts: props.shouts || [],
layout: props.layout, layout: props.layout,
@ -84,7 +83,7 @@ export const Expo = (props: Props) => {
limit: 10, limit: 10,
random_limit: 100, random_limit: 100,
} }
console.log('%c!!! options:', 'color: #bada55', options)
const result = await apiClient.getRandomTopShouts({ options }) const result = await apiClient.getRandomTopShouts({ options })
setRandomTopArticles(result) setRandomTopArticles(result)
} }
@ -202,7 +201,7 @@ export const Expo = (props: Props) => {
</li> </li>
</ul> </ul>
<div class="row"> <div class="row">
<For each={sortedArticles().slice(0, PRERENDERED_ARTICLES_COUNT / 2)}> <For each={sortedArticles().slice(0, LOAD_MORE_PAGE_SIZE / 2)}>
{(shout) => ( {(shout) => (
<div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3"> <div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3">
<ArticleCard <ArticleCard
@ -217,7 +216,7 @@ export const Expo = (props: Props) => {
<Show when={randomTopMonthArticles()?.length > 0} keyed={true}> <Show when={randomTopMonthArticles()?.length > 0} keyed={true}>
<ArticleCardSwiper title={t('Top month articles')} slides={randomTopMonthArticles()} /> <ArticleCardSwiper title={t('Top month articles')} slides={randomTopMonthArticles()} />
</Show> </Show>
<For each={sortedArticles().slice(PRERENDERED_ARTICLES_COUNT / 2, PRERENDERED_ARTICLES_COUNT)}> <For each={sortedArticles().slice(LOAD_MORE_PAGE_SIZE / 2, LOAD_MORE_PAGE_SIZE)}>
{(shout) => ( {(shout) => (
<div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3"> <div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3">
<ArticleCard <ArticleCard
@ -232,9 +231,7 @@ export const Expo = (props: Props) => {
<Show when={randomTopArticles()?.length > 0} keyed={true}> <Show when={randomTopArticles()?.length > 0} keyed={true}>
<ArticleCardSwiper title={t('Favorite')} slides={randomTopArticles()} /> <ArticleCardSwiper title={t('Favorite')} slides={randomTopArticles()} />
</Show> </Show>
<For each={pages()}> <For each={sortedArticles().slice(LOAD_MORE_PAGE_SIZE, PRERENDERED_ARTICLES_COUNT)}>
{(page) => (
<For each={page}>
{(shout) => ( {(shout) => (
<div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3"> <div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3">
<ArticleCard <ArticleCard
@ -246,8 +243,6 @@ export const Expo = (props: Props) => {
</div> </div>
)} )}
</For> </For>
)}
</For>
</div> </div>
<Show when={isLoadMoreButtonVisible()}> <Show when={isLoadMoreButtonVisible()}>
<div class={styles.showMore}> <div class={styles.showMore}>