webapp/src/components/Feed/List.tsx

57 lines
1.8 KiB
TypeScript
Raw Normal View History

import { Row1 } from './Row1'
import { Row2 } from './Row2'
import { Row3 } from './Row3'
2022-09-09 11:53:35 +00:00
import { shuffle } from '../../utils'
2022-10-31 16:40:55 +00:00
import { createMemo, createSignal, For, Suspense } from 'solid-js'
2022-09-09 11:53:35 +00:00
import type { JSX } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
import './List.scss'
2023-02-17 09:21:02 +00:00
import { useLocalize } from '../../context/localize'
2022-09-09 11:53:35 +00:00
export const Block6 = (props: { articles: Shout[] }) => {
const dice = createMemo(() => shuffle([Row1, Row2, Row3]))
2022-09-09 11:53:35 +00:00
return (
<>
<For each={dice()}>{(c: () => JSX.Element) => c(props.articles)}</For>
2022-09-09 11:53:35 +00:00
</>
)
}
interface ArticleListProps {
articles: Shout[]
page: number
size: number
}
export default (props: ArticleListProps) => {
2023-02-17 09:21:02 +00:00
const { t } = useLocalize()
2022-09-09 11:53:35 +00:00
const [articles, setArticles] = createSignal(
props.articles.slice(props.page * props.size, props.size * (props.page + 1)) || []
)
const [loadingMore, setLoadingMore] = createSignal(false)
// const [, { more }] = useZine()
const handleMore = () => {
setArticles(props.articles.slice(props.page * props.size, props.size * (props.page + 1)))
if (props.size * (props.page + 1) > props.articles.length) {
console.log('[article-list] load more')
setLoadingMore(true)
// TODO: more()
setLoadingMore(false)
}
}
2022-11-13 12:14:04 +00:00
const x: number = Math.floor(articles().length / 6)
// eslint-disable-next-line unicorn/new-for-builtins
const numbers: number[] = [...Array(x).keys()]
2022-09-09 11:53:35 +00:00
return (
<Suspense fallback={<div class="article-preview">{t('Loading')}</div>}>
2022-11-13 12:14:04 +00:00
<For each={numbers}>
2022-09-09 11:53:35 +00:00
{() => <Block6 articles={articles().slice(0, Math.min(6, articles().length))} />}
</For>
<a href={''} onClick={handleMore} classList={{ disabled: loadingMore() }}>
{loadingMore() ? '...' : t('More')}
</a>
</Suspense>
)
}