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

load-more-wrapper-wip

Browse Source
This commit is contained in:
Untone 2024-07-15 17:28:08 +03:00
parent 2b7a825bc5
commit 789a7497a3
9 changed files with 258 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app.config.ts
View File

@ -34,18 +34,14 @@ export default defineConfig({
},
vite: {
envPrefix: 'PUBLIC_',
plugins: [
!isVercel && mkcert(),
nodePolyfills(polyfillOptions),
sassDts()
],
plugins: [!isVercel && mkcert(), nodePolyfills(polyfillOptions), sassDts()],
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "src/styles/imports";\n',
includePaths: ['./public', './src/styles']
}
} as CSSOptions["preprocessorOptions"]
} as CSSOptions['preprocessorOptions']
}
}
} as SolidStartInlineConfig)

8
src/components/Nav/SearchModal/SearchModal.tsx
View File

@ -1,19 +1,15 @@
import type { Shout } from '~/graphql/schema/core.gen'
import { For, Show, createResource, createSignal, onCleanup } from 'solid-js'
import { debounce } from 'throttle-debounce'
import { Button } from '~/components/_shared/Button'
import { Icon } from '~/components/_shared/Icon'
import { useFeed } from '~/context/feed'
import { useLocalize } from '~/context/localize'
import type { Shout } from '~/graphql/schema/core.gen'
import { byScore } from '~/lib/sort'
import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
import { FEED_PAGE_SIZE } from '../../Views/Feed/Feed'
import { SearchResultItem } from './SearchResultItem'
import styles from './SearchModal.module.scss'
import { SearchResultItem } from './SearchResultItem'
// @@TODO handle empty article options after backend support (subtitle, cover, etc.)
// @@TODO implement load more

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

@ -1,25 +1,27 @@
import { clsx } from 'clsx'
import { For, Show, createEffect, createSignal, on, onCleanup, onMount } from 'solid-js'
import { A } from '@solidjs/router'
import { Button } from '~/components/_shared/Button'
import { clsx } from 'clsx'
import { For, Show, createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js'
import { ConditionalWrapper } from '~/components/_shared/ConditionalWrapper'
import { LoadMoreWrapper } from '~/components/_shared/LoadMoreWrapper'
import { Loading } from '~/components/_shared/Loading'
import { ArticleCardSwiper } from '~/components/_shared/SolidSwiper/ArticleCardSwiper'
import { useFeed } from '~/context/feed'
import { useGraphQL } from '~/context/graphql'
import { useLocalize } from '~/context/localize'
import getShoutsQuery from '~/graphql/query/core/articles-load-by'
import { loadShouts } from '~/graphql/api/public'
import getRandomTopShoutsQuery from '~/graphql/query/core/articles-load-random-top'
import { LoadShoutsFilters, LoadShoutsOptions, Shout } from '~/graphql/schema/core.gen'
import { SHOUTS_PER_PAGE } from '~/routes/(main)'
import { LayoutType } from '~/types/common'
import { getUnixtime } from '~/utils/date'
import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
import { ArticleCard } from '../../Feed/ArticleCard'
import styles from './Expo.module.scss'
type Props = {
shouts: Shout[]
layout: LayoutType
topMonthShouts?: Shout[]
topRatedShouts?: Shout[]
layout?: LayoutType
}
export const PRERENDERED_ARTICLES_COUNT = 36
@ -28,52 +30,28 @@ const LOAD_MORE_PAGE_SIZE = 12
export const Expo = (props: Props) => {
const { t } = useLocalize()
const { query } = useGraphQL()
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
const [favoriteTopArticles, setFavoriteTopArticles] = createSignal<Shout[]>([])
const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal<Shout[]>([])
const [articlesEndPage, setArticlesEndPage] = createSignal<number>(PRERENDERED_ARTICLES_COUNT)
const [expoShouts, setExpoShouts] = createSignal<Shout[]>([])
const getLoadShoutsFilters = (additionalFilters: LoadShoutsFilters = {}): LoadShoutsFilters => {
const filters = { ...additionalFilters }
const { feedByLayout, expoFeed, setExpoFeed } = useFeed()
const layouts = createMemo<LayoutType[]>(() =>
props.layout ? [props.layout] : ['audio', 'video', 'image', 'literature']
)
if (!filters.layouts) filters.layouts = []
if (props.layout) {
filters.layouts.push(props.layout)
} else {
filters.layouts.push('audio', 'video', 'image', 'literature')
}
return filters
}
const loadMore = async (count: number) => {
const options: LoadShoutsOptions = {
filters: getLoadShoutsFilters(),
limit: count,
offset: expoShouts().length
}
options.filters = props.layout
? { layouts: [props.layout] }
: { layouts: ['audio', 'video', 'image', 'literature'] }
const resp = await query(getShoutsQuery, options).toPromise()
const result = resp?.data?.load_shouts || []
const hasMore = result.length !== options.limit + 1 && result.length !== 0
setIsLoadMoreButtonVisible(hasMore)
setExpoShouts((prev) => [...prev, ...result])
}
const loadMoreWithoutScrolling = async (count: number) => {
saveScrollPosition()
await loadMore(count)
restoreScrollPosition()
const loadMoreFiltered = async () => {
const limit = SHOUTS_PER_PAGE
const offset = (props.layout ? feedByLayout()[props.layout] : expoFeed())?.length
const filters: LoadShoutsFilters = { layouts: layouts(), featured: true }
const options: LoadShoutsOptions = { filters, limit, offset }
const shoutsFetcher = loadShouts(options)
const result = await shoutsFetcher()
result && setExpoFeed(result)
return result
}
const loadRandomTopArticles = async () => {
const options: LoadShoutsOptions = {
filters: { ...getLoadShoutsFilters(), featured: true },
filters: { layouts: layouts(), featured: true },
limit: 10,
random_limit: 100
}
@ -84,19 +62,16 @@ export const Expo = (props: Props) => {
const loadRandomTopMonthArticles = async () => {
const now = new Date()
const after = getUnixtime(new Date(now.setMonth(now.getMonth() - 1)))
const options: LoadShoutsOptions = {
filters: { ...getLoadShoutsFilters({ after }), reacted: true },
filters: { layouts: layouts(), after, reacted: true },
limit: 10,
random_limit: 10
}
const resp = await query(getRandomTopShoutsQuery, { options }).toPromise()
setReactedTopMonthArticles(resp?.data?.load_shouts_random_top || [])
}
onMount(() => {
loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE)
loadRandomTopArticles()
loadRandomTopMonthArticles()
})
@ -106,11 +81,8 @@ export const Expo = (props: Props) => {
() => props.layout,
() => {
setExpoShouts([])
setIsLoadMoreButtonVisible(false)
setFavoriteTopArticles([])
setReactedTopMonthArticles([])
setArticlesEndPage(PRERENDERED_ARTICLES_COUNT)
loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE)
loadRandomTopArticles()
loadRandomTopMonthArticles()
}
@ -120,108 +92,106 @@ export const Expo = (props: Props) => {
onCleanup(() => {
setExpoShouts([])
})
const ExpoTabs = () => (
<div class="wide-container">
<ul class={clsx('view-switcher')}>
<li class={clsx({ 'view-switcher__item--selected': !props.layout })}>
<A href={'/expo'}>
<span class={clsx('linkReplacement')}>{t('All')}</span>
</A>
</li>
<li class={clsx({ 'view-switcher__item--selected': props.layout === 'literature' })}>
<ConditionalWrapper
condition={props.layout !== 'literature'}
wrapper={(children) => <A href={'/expo/literature'}>{children}</A>}
>
<span class={clsx('linkReplacement')}>{t('Literature')}</span>
</ConditionalWrapper>
</li>
<li class={clsx({ 'view-switcher__item--selected': props.layout === 'audio' })}>
<ConditionalWrapper
condition={props.layout !== 'audio'}
wrapper={(children) => <A href={'/expo/audio'}>{children}</A>}
>
<span class={clsx('linkReplacement')}>{t('Music')}</span>
</ConditionalWrapper>
</li>
<li class={clsx({ 'view-switcher__item--selected': props.layout === 'image' })}>
<ConditionalWrapper
condition={props.layout !== 'image'}
wrapper={(children) => <A href={'/expo/image'}>{children}</A>}
>
<span class={clsx('linkReplacement')}>{t('Gallery')}</span>
</ConditionalWrapper>
</li>
<li class={clsx({ 'view-switcher__item--selected': props.layout === 'video' })}>
<ConditionalWrapper
condition={props.layout !== 'video'}
wrapper={(children) => <A href={'/expo/video'}>{children}</A>}
>
<span class={clsx('cursorPointer linkReplacement')}>{t('Video')}</span>
</ConditionalWrapper>
</li>
</ul>
</div>
)
const ExpoGrid = () => (
<div class="wide-container">
<div class="row">
<For each={props.shouts.slice(0, LOAD_MORE_PAGE_SIZE)}>
{(shout) => (
<div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3">
<ArticleCard
article={shout}
settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }}
desktopCoverSize="XS"
withAspectRatio={true}
/>
</div>
)}
</For>
<Show when={reactedTopMonthArticles()?.length > 0} keyed={true}>
<ArticleCardSwiper title={t('Top month')} slides={reactedTopMonthArticles()} />
</Show>
<For each={(props.topMonthShouts || []).slice(LOAD_MORE_PAGE_SIZE, LOAD_MORE_PAGE_SIZE * 2)}>
{(shout) => (
<div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3">
<ArticleCard
article={shout}
settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }}
desktopCoverSize="XS"
withAspectRatio={true}
/>
</div>
)}
</For>
<Show when={favoriteTopArticles()?.length > 0} keyed={true}>
<ArticleCardSwiper title={t('Favorite')} slides={favoriteTopArticles()} />
</Show>
<For each={props.topRatedShouts?.slice(LOAD_MORE_PAGE_SIZE * 2, expoShouts().length)}>
{(shout) => (
<div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3">
<ArticleCard
article={shout}
settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }}
desktopCoverSize="XS"
withAspectRatio={true}
/>
</div>
)}
</For>
</div>
</div>
)
const handleLoadMoreClick = () => {
loadMoreWithoutScrolling(LOAD_MORE_PAGE_SIZE)
setArticlesEndPage((prev) => prev + LOAD_MORE_PAGE_SIZE)
}
console.log(props.layout)
return (
<div class={styles.Expo}>
<div class="wide-container">
<ul class={clsx('view-switcher')}>
<li class={clsx({ 'view-switcher__item--selected': !props.layout })}>
<A href={'/expo'}>
<span class={clsx('linkReplacement')}>{t('All')}</span>
</A>
</li>
<li class={clsx({ 'view-switcher__item--selected': props.layout === 'literature' })}>
<ConditionalWrapper
condition={props.layout !== 'literature'}
wrapper={(children) => <A href={'/expo/literature'}>{children}</A>}
>
<span class={clsx('linkReplacement')}>{t('Literature')}</span>
</ConditionalWrapper>
</li>
<li class={clsx({ 'view-switcher__item--selected': props.layout === ('audio' as LayoutType) })}>
<ConditionalWrapper
condition={props.layout !== ('audio' as LayoutType)}
wrapper={(children) => <A href={'/expo/audio'}>{children}</A>}
>
<span class={clsx('linkReplacement')}>{t('Music')}</span>
</ConditionalWrapper>
</li>
<li class={clsx({ 'view-switcher__item--selected': props.layout === 'image' })}>
<ConditionalWrapper
condition={props.layout !== 'image'}
wrapper={(children) => <A href={'/expo/image'}>{children}</A>}
>
<span class={clsx('linkReplacement')}>{t('Gallery')}</span>
</ConditionalWrapper>
</li>
<li class={clsx({ 'view-switcher__item--selected': props.layout === 'video' })}>
<ConditionalWrapper
condition={props.layout !== 'video'}
wrapper={(children) => <A href={'/expo/video'}>{children}</A>}
>
<span class={clsx('cursorPointer linkReplacement')}>{t('Video')}</span>
</ConditionalWrapper>
</li>
</ul>
</div>
<ExpoTabs />
<Show when={expoShouts().length > 0} fallback={<Loading />}>
<div class="wide-container">
<div class="row">
<For each={expoShouts()?.slice(0, LOAD_MORE_PAGE_SIZE)}>
{(shout) => (
<div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3">
<ArticleCard
article={shout}
settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }}
desktopCoverSize="XS"
withAspectRatio={true}
/>
</div>
)}
</For>
<Show when={reactedTopMonthArticles()?.length > 0} keyed={true}>
<ArticleCardSwiper title={t('Top month')} slides={reactedTopMonthArticles()} />
</Show>
<For each={expoShouts().slice(LOAD_MORE_PAGE_SIZE, LOAD_MORE_PAGE_SIZE * 2)}>
{(shout) => (
<div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3">
<ArticleCard
article={shout}
settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }}
desktopCoverSize="XS"
withAspectRatio={true}
/>
</div>
)}
</For>
<Show when={favoriteTopArticles()?.length > 0} keyed={true}>
<ArticleCardSwiper title={t('Favorite')} slides={favoriteTopArticles()} />
</Show>
<For each={expoShouts().slice(LOAD_MORE_PAGE_SIZE * 2, articlesEndPage())}>
{(shout) => (
<div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3">
<ArticleCard
article={shout}
settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }}
desktopCoverSize="XS"
withAspectRatio={true}
/>
</div>
)}
</For>
</div>
<Show when={isLoadMoreButtonVisible()}>
<div class={styles.showMore}>
<Button size="L" onClick={handleLoadMoreClick} value={t('Load more')} />
</div>
</Show>
</div>
<LoadMoreWrapper loadFunction={loadMoreFiltered} pageSize={LOAD_MORE_PAGE_SIZE}>
<ExpoGrid />
</LoadMoreWrapper>
</Show>
</div>
)

2
src/components/_shared/Button/Button.tsx
View File

@ -6,6 +6,7 @@ import styles from './Button.module.scss'
export type ButtonVariant = 'primary' | 'secondary' | 'bordered' | 'inline' | 'light' | 'outline' | 'danger'
type Props = {
title?: string
value: string | JSX.Element
size?: 'S' | 'M' | 'L'
variant?: ButtonVariant
@ -28,6 +29,7 @@ export const Button = (props: Props) => {
}
props.ref = el
}}
title={props.title || (typeof props.value === 'string' ? props.value : '')}
onClick={props.onClick}
type={props.type ?? 'button'}
disabled={props.loading || props.disabled}

51
src/components/_shared/LoadMoreWrapper.tsx Normal file
View File

@ -0,0 +1,51 @@
import { JSX, Show, createSignal, onMount } from 'solid-js'
import { Button } from '~/components/_shared/Button'
import { useLocalize } from '~/context/localize'
import { Author, Reaction, Shout } from '~/graphql/schema/core.gen'
import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
type LoadMoreProps = {
loadFunction: (offset?: number) => void
pageSize: number
children: JSX.Element
}
type Items = Shout[] | Author[] | Reaction[]
export const LoadMoreWrapper = (props: LoadMoreProps) => {
const { t } = useLocalize()
const [items, setItems] = createSignal<Items>([])
const [offset, setOffset] = createSignal(0)
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(true)
const [isLoading, setIsLoading] = createSignal(false)
const loadItems = async () => {
setIsLoading(true)
saveScrollPosition()
const newItems = await props.loadFunction(offset())
if (!Array.isArray(newItems)) return
setItems((prev) => [...prev, ...newItems])
setOffset((prev) => prev + props.pageSize)
setIsLoadMoreButtonVisible(newItems.length >= props.pageSize)
setIsLoading(false)
restoreScrollPosition()
}
onMount(loadItems)
return (
<>
{props.children}
<Show when={isLoadMoreButtonVisible()}>
<div class="load-more-container">
<Button
onClick={loadItems}
disabled={isLoading()}
value={t('Load more')}
title={`${items().length} ${t('loaded')}`}
/>
</div>
</Show>
</>
)
}

14
src/context/feed.tsx
View File

@ -1,6 +1,6 @@
import { createLazyMemo } from '@solid-primitives/memo'
import { makePersisted } from '@solid-primitives/storage'
import { Accessor, JSX, createContext, createSignal, useContext } from 'solid-js'
import { Accessor, JSX, Setter, createContext, createSignal, useContext } from 'solid-js'
import { loadFollowedShouts } from '~/graphql/api/private'
import { loadShoutsSearch as fetchShoutsSearch, getShout, loadShouts } from '~/graphql/api/public'
import {
@ -37,6 +37,10 @@ type FeedContextType = {
loadTopFeed: () => Promise<void>
seen: Accessor<{ [slug: string]: number }>
addSeen: (slug: string) => void
featuredFeed: Accessor<Shout[] | undefined>
setFeaturedFeed: Setter<Shout[]>
expoFeed: Accessor<Shout[] | undefined>
setExpoFeed: Setter<Shout[]>
}
const FeedContext = createContext<FeedContextType>({} as FeedContextType)
@ -46,6 +50,8 @@ export const useFeed = () => useContext(FeedContext)
export const FeedProvider = (props: { children: JSX.Element }) => {
const [sortedFeed, setSortedFeed] = createSignal<Shout[]>([])
const [articleEntities, setArticleEntities] = createSignal<{ [articleSlug: string]: Shout }>({})
const [featuredFeed, setFeaturedFeed] = createSignal<Shout[]>([])
const [expoFeed, setExpoFeed] = createSignal<Shout[]>([])
const [topFeed, setTopFeed] = createSignal<Shout[]>([])
const [topMonthFeed, setTopMonthFeed] = createSignal<Shout[]>([])
const [feedByLayout, _setFeedByLayout] = createSignal<{ [layout: string]: Shout[] }>({})
@ -236,7 +242,11 @@ export const FeedProvider = (props: { children: JSX.Element }) => {
loadTopMonthFeed,
loadTopFeed,
seen,
addSeen
addSeen,
featuredFeed,
setFeaturedFeed,
expoFeed,
setExpoFeed
}}
>
{props.children}

93
src/routes/(main).tsx
View File

@ -1,11 +1,12 @@
import { type RouteDefinition, type RouteSectionProps, createAsync } from '@solidjs/router'
import { Show, Suspense, createEffect, createSignal, onMount } from 'solid-js'
import { Show, createEffect } from 'solid-js'
import { LoadMoreWrapper } from '~/components/_shared/LoadMoreWrapper'
import { useFeed } from '~/context/feed'
import { useTopics } from '~/context/topics'
import { loadShouts, loadTopics } from '~/graphql/api/public'
import { LoadShoutsOptions, Shout } from '~/graphql/schema/core.gen'
import { byStat } from '~/lib/sort'
import { SortFunction } from '~/types/common'
import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
import { HomeView, HomeViewProps } from '../components/Views/Home'
import { Loading } from '../components/_shared/Loading'
import { PageLayout } from '../components/_shared/PageLayout'
@ -13,6 +14,15 @@ import { useLocalize } from '../context/localize'
export const SHOUTS_PER_PAGE = 20
const featuredLoader = (offset?: number) => {
const SHOUTS_PER_PAGE = 20
return loadShouts({
filters: { featured: true },
limit: SHOUTS_PER_PAGE,
offset
})
}
const fetchAllTopics = async () => {
const allTopicsLoader = loadTopics()
return await allTopicsLoader()
@ -65,66 +75,63 @@ export const route = {
} satisfies RouteDefinition
export default function HomePage(props: RouteSectionProps<HomeViewProps>) {
const limit = 20
const { addTopics } = useTopics()
const { t } = useLocalize()
const [featuredOffset, setFeaturedOffset] = createSignal<number>(0)
const {
setFeaturedFeed,
featuredFeed,
topMonthFeed,
topViewedFeed,
topCommentedFeed,
topFeed: topRatedFeed
} = useFeed()
const featuredLoader = (offset?: number) => {
const result = loadShouts({
filters: { featured: true },
limit,
offset
})
return result
}
// async ssr-friendly router-level cached data source
const data = createAsync(async (prev?: HomeViewProps) => {
const topics = props.data?.topics || (await fetchAllTopics())
const featuredShoutsLoader = featuredLoader(featuredOffset())
const offset = prev?.featuredShouts?.length || 0
const featuredShoutsLoader = featuredLoader(offset)
const loaded = await featuredShoutsLoader()
const featuredShouts = [
...(prev?.featuredShouts || []),
...((await featuredShoutsLoader()) || props.data?.featuredShouts || [])
...(loaded || props.data?.featuredShouts || [])
]
const sortFn = byStat('viewed')
const topViewedShouts = featuredShouts?.sort(sortFn as SortFunction<Shout>) || []
const result = {
const topViewedShouts = featuredShouts.sort(sortFn as SortFunction<Shout>)
return {
...prev,
...props.data,
topViewedShouts,
featuredShouts,
topics
}
return result
})
createEffect(() => data()?.topics && addTopics(data()?.topics || []))
const [canLoadMoreFeatured, setCanLoadMoreFeatured] = createSignal(true)
const loadMoreFeatured = async () => {
saveScrollPosition()
const before = data()?.featuredShouts.length || 0
featuredLoader(featuredOffset())
setFeaturedOffset((o: number) => o + limit)
const after = data()?.featuredShouts.length || 0
setTimeout(() => setCanLoadMoreFeatured((_) => before !== after), 1)
restoreScrollPosition()
createEffect(() => {
if (data()?.topics) {
console.debug('[routes.main] topics update')
addTopics(data()?.topics || [])
}
})
const loadMoreFeatured = async (offset?: number) => {
const shoutsLoader = featuredLoader(offset)
const loaded = await shoutsLoader()
loaded && setFeaturedFeed((prev: Shout[]) => [...prev, ...loaded])
}
onMount(async () => await loadMoreFeatured())
const SHOUTS_PER_PAGE = 20
return (
<PageLayout withPadding={true} title={t('Discours')} key={'home'}>
<Suspense fallback={<Loading />}>
<HomeView {...(data() as HomeViewProps)} />
<Show when={canLoadMoreFeatured()}>
<p class="load-more-container">
<button class="button" onClick={loadMoreFeatured}>
{t('Load more')}
</button>
</p>
</Show>
</Suspense>
<PageLayout withPadding={true} title={t('Discours')} key="home">
<Show when={(featuredFeed() || []).length > 0} fallback={<Loading />}>
<LoadMoreWrapper loadFunction={loadMoreFeatured} pageSize={SHOUTS_PER_PAGE}>
<HomeView
featuredShouts={featuredFeed() as Shout[]}
topMonthShouts={topMonthFeed() as Shout[]}
topViewedShouts={topViewedFeed() as Shout[]}
topRatedShouts={topRatedFeed() as Shout[]}
topCommentedShouts={topCommentedFeed() as Shout[]}
/>
</LoadMoreWrapper>
</Show>
</PageLayout>
)
}

21
src/routes/feed/(feed).tsx
View File

@ -1,7 +1,9 @@
import { RouteSectionProps, createAsync, useSearchParams } from '@solidjs/router'
import { Client } from '@urql/core'
import { Show, createEffect, createSignal } from 'solid-js'
import { createSignal } from 'solid-js'
import { AUTHORS_PER_PAGE } from '~/components/Views/AllAuthors/AllAuthors'
import { Feed } from '~/components/Views/Feed'
import { LoadMoreWrapper } from '~/components/_shared/LoadMoreWrapper'
import { PageLayout } from '~/components/_shared/PageLayout'
import { useLocalize } from '~/context/localize'
import { ReactionsProvider } from '~/context/reactions'
@ -59,7 +61,6 @@ export default (props: RouteSectionProps<Shout[]>) => {
const { t } = useLocalize()
const [offset, setOffset] = createSignal<number>(0)
const shouts = createAsync(async () => ({ ...props.data }) || (await loadMore()))
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal<boolean>(true)
const loadMore = async () => {
const newOffset = offset() + SHOUTS_PER_PAGE
setOffset(newOffset)
@ -75,7 +76,6 @@ export default (props: RouteSectionProps<Shout[]>) => {
}
return await fetchPublishedShouts(newOffset)
}
createEffect(() => setIsLoadMoreButtonVisible(offset() < (shouts()?.length || 0)))
return (
<PageLayout
withPadding={true}
@ -83,16 +83,11 @@ export default (props: RouteSectionProps<Shout[]>) => {
key="feed"
desc="Independent media project about culture, science, art and society with horizontal editing"
>
<ReactionsProvider>
<Feed shouts={shouts() || []} />
</ReactionsProvider>
<Show when={isLoadMoreButtonVisible()}>
<p class="load-more-container">
<button class="button" onClick={loadMore}>
{t('Load more')}
</button>
</p>
</Show>
<LoadMoreWrapper loadFunction={loadMore} pageSize={AUTHORS_PER_PAGE}>
<ReactionsProvider>
<Feed shouts={shouts() || []} />
</ReactionsProvider>
</LoadMoreWrapper>
</PageLayout>
)
}

26
src/routes/search/(search).tsx
View File

@ -1,5 +1,5 @@
import { action, useSearchParams } from '@solidjs/router'
import { Show, Suspense, createEffect, createSignal, onCleanup } from 'solid-js'
import { Show, createEffect, createSignal, onCleanup } from 'solid-js'
import { SearchView } from '~/components/Views/Search'
import { Loading } from '~/components/_shared/Loading'
@ -48,20 +48,18 @@ export default () => {
return (
<PageLayout withPadding={true} title={`${t('Discours')} :: ${t('Search')}`}>
<Suspense fallback={<Loading />}>
<Show when={isLoaded()} fallback={<Loading />}>
<Show
when={searchResults().length > 0}
fallback={
<Show when={hasSearched()} fallback={<div>{t('Enter your search query')}</div>}>
<div>{t('No results found')}</div>
</Show>
}
>
<SearchView results={searchResults() as SearchResult[]} query={searchParams?.q || ''} />
</Show>
<Show when={isLoaded()} fallback={<Loading />}>
<Show
when={searchResults().length > 0}
fallback={
<Show when={hasSearched()} fallback={<div>{t('Enter your search query')}</div>}>
<div>{t('No results found')}</div>
</Show>
}
>
<SearchView results={searchResults() as SearchResult[]} query={searchParams?.q || ''} />
</Show>
</Suspense>
</Show>
</PageLayout>
)
}