webapp/src/routes/expo/[layout].tsx

68 lines
2.0 KiB
TypeScript
Raw Normal View History

2024-07-13 09:36:23 +00:00
import { Params, RouteSectionProps, createAsync } from '@solidjs/router'
2024-07-03 21:25:03 +00:00
import { createEffect, createMemo, on } from 'solid-js'
2024-07-09 09:13:13 +00:00
import { TopicsNav } from '~/components/Nav/TopicsNav'
import { Expo } from '~/components/Views/Expo'
import { PageLayout } from '~/components/_shared/PageLayout'
import { useLocalize } from '~/context/localize'
import { loadShouts } from '~/graphql/api/public'
2024-07-03 21:25:03 +00:00
import { LoadShoutsOptions, Shout } from '~/graphql/schema/core.gen'
import { LayoutType } from '~/types/common'
2024-07-13 09:06:49 +00:00
import { SHOUTS_PER_PAGE } from '../(main)'
2024-07-03 21:25:03 +00:00
const fetchExpoShouts = async (layouts: string[]) => {
const result = await loadShouts({
filters: { layouts },
limit: SHOUTS_PER_PAGE,
offset: 0
} as LoadShoutsOptions)
return result || []
}
export const route = {
load: async ({ params }: { params: Params }) => {
const layouts = params.layout ? [params.layout] : ['audio', 'literature', 'article', 'video', 'image']
const shoutsLoader = await fetchExpoShouts(layouts)
return (await shoutsLoader()) as Shout[]
}
}
2024-07-05 17:23:07 +00:00
export default (props: RouteSectionProps<Shout[]>) => {
2024-07-03 21:25:03 +00:00
const { t } = useLocalize()
const shouts = createAsync(
async () =>
props.data ||
(await fetchExpoShouts(
2024-07-13 09:36:23 +00:00
props.params.layout ? [props.params.layout] : ['audio', 'literature', 'article', 'video', 'image']
2024-07-03 21:25:03 +00:00
))
)
2024-07-13 09:36:23 +00:00
const layout = createMemo(() => props.params.layout)
2024-07-03 21:25:03 +00:00
const title = createMemo(() => {
switch (layout()) {
case 'audio': {
return t('Audio')
}
case 'video': {
return t('Video')
}
case 'image': {
return t('Artworks')
}
case 'literature': {
return t('Literature')
}
default: {
return t('Art')
}
}
})
createEffect(on(title, (ttl) => (document.title = ttl), { defer: true }))
return (
2024-07-05 08:11:57 +00:00
<PageLayout withPadding={true} zeroBottomPadding={true} title={`${t('Discours')} :: ${title()}`}>
2024-07-09 09:13:13 +00:00
<TopicsNav />
2024-07-03 21:25:03 +00:00
<Expo shouts={shouts() || []} layout={layout() as LayoutType} />
</PageLayout>
)
}