2022-10-28 21:21:47 +00:00
|
|
|
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[] }) => {
|
2022-10-28 21:21:47 +00:00
|
|
|
const dice = createMemo(() => shuffle([Row1, Row2, Row3]))
|
2022-09-09 11:53:35 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2023-04-30 16:45:59 +00:00
|
|
|
<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>
|
|
|
|
)
|
|
|
|
}
|