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

Feature/expo pages (#253)

Browse Source 
Expo pages
This commit is contained in:
Ilya Y 2023-10-10 18:38:02 +03:00 committed by GitHub
parent 796321e3ee
commit 44c2269edb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 383 additions and 313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/locales/en/translation.json
View File

@ -29,6 +29,7 @@
"All topics": "All topics",
"Almost done! Check your email.": "Almost done! Just checking your email.",
"Are you sure you want to to proceed the action?": "Are you sure you want to to proceed the action?",
"Art": "Art",
"Artist": "Artist",
"Artworks": "Artworks",
"Audio": "Audio",
@ -134,6 +135,7 @@
"Forgot password?": "Forgot your password?",
"Forward": "Forward",
"Full name": "First and last name",
"Gallery": "Gallery",
"Gallery name": "Gallery name",
"Get to know the most intelligent people of our time, edit and discuss the articles, share your expertise, rate and decide what to publish in the magazine": "Get to know the most intelligent people of our time, edit and discuss the articles, share your expertise, rate and decide what to publish in the magazine",
"Go to main page": "Go to main page",
@ -199,6 +201,7 @@
"Most read": "Readable",
"Move down": "Move down",
"Move up": "Move up",
"Music": "Music",
"My feed": "My feed",
"My subscriptions": "Subscriptions",
"Name": "Name",

3
public/locales/ru/translation.json
View File

@ -32,6 +32,7 @@
"All topics": "Все темы",
"Almost done! Check your email.": "Почти готово! Осталось подтвердить вашу почту.",
"Are you sure you want to to proceed the action?": "Вы уверены, что хотите продолжить?",
"Art": "Искусство",
"Artist": "Исполнитель",
"Artist...": "Исполнитель...",
"Artworks": "Артворки",
@ -139,6 +140,7 @@
"Forgot password?": "Забыли пароль?",
"Forward": "Переслать",
"Full name": "Имя и фамилия",
"Gallery": "Галерея",
"Gallery name": "Название галереи",
"Genre...": "Жанр...",
"Get notifications": "Получать уведомления",
@ -209,6 +211,7 @@
"Most read": "Читаемое",
"Move down": "Переместить вниз",
"Move up": "Переместить вверх",
"Music": "Музыка",
"My feed": "Моя лента",
"My subscriptions": "Подписки",
"Name": "Имя",

5
src/components/App.tsx
View File

@ -30,7 +30,7 @@ import { CreatePage } from '../pages/create.page'
import { EditPage } from '../pages/edit.page'
import { ConnectPage } from '../pages/connect.page'
import { InboxPage } from '../pages/inbox.page'
import { LayoutShoutsPage } from '../pages/layoutShouts.page'
import { ExpoPage } from '../pages/expo/expo.page'
import { SessionProvider } from '../context/session'
import { ProfileSettingsPage } from '../pages/profile/profileSettings.page'
import { ProfileSecurityPage } from '../pages/profile/profileSecurity.page'
@ -51,7 +51,8 @@ const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = {
authorFollowing: AuthorPage,
authorFollowers: AuthorPage,
inbox: InboxPage,
expo: LayoutShoutsPage,
expo: ExpoPage,
expoLayout: ExpoPage,
connect: ConnectPage,
create: CreatePage,
edit: EditPage,

4
src/components/Article/FullArticle.tsx
View File

@ -218,7 +218,7 @@ export const FullArticle = (props: Props) => {
<div class="row position-relative">
<article class="col-md-16 col-lg-14 col-xl-12 offset-md-5">
{/*TODO: Check styles.shoutTopic*/}
<Show when={props.article.layout !== 'audio'}>
<Show when={props.article.layout !== 'music'}>
<div class={styles.shoutHeader}>
<Show when={mainTopic()}>
<CardTopic title={mainTopic().title} slug={props.article.mainTopic} />
@ -256,7 +256,7 @@ export const FullArticle = (props: Props) => {
<Show when={props.article.lead}>
<section class={styles.lead} innerHTML={props.article.lead} />
</Show>
<Show when={props.article.layout === 'audio'}>
<Show when={props.article.layout === 'music'}>
<AudioHeader
title={props.article.title}
cover={props.article.cover}

2
src/components/Nav/Header/Header.tsx
View File

@ -375,7 +375,7 @@ export const Header = (props: Props) => {
>
<ul class="nodash">
<li class="item">
<a href="/expo/image">Искусство</a>
<a href="/expo">{t('Art')}</a>
</li>
<li class="item">
<a href="/podcasts">Подкасты</a>

52
src/components/Nav/Topics.tsx
View File

@ -1,52 +0,0 @@
import { Icon } from '../_shared/Icon'
import { useLocalize } from '../../context/localize'
import './Topics.scss'
export const NavTopics = () => {
const { t } = useLocalize()
return (
<nav class="subnavigation wide-container text-2xl">
<ul class="topics">
<li class="item">
<a href="/expo/image">Искусство</a>
</li>
<li class="item">
<a href="/podcasts">Подкасты</a>
</li>
<li class="item">
<a href="">Спецпроекты</a>
</li>
<li class="item">
<a href="/topic/interview">#Интервью</a>
</li>
<li class="item">
<a href="/topic/reportage">#Репортажи</a>
</li>
<li class="item">
<a href="/topic/empiric">#Личный опыт</a>
</li>
<li class="item">
<a href="/topic/society">#Общество</a>
</li>
<li class="item">
<a href="/topic/culture">#Культура</a>
</li>
<li class="item">
<a href="/topic/theory">#Теории</a>
</li>
<li class="item">
<a href="/topic/poetry">#Поэзия</a>
</li>
<li class="item right">
<a href={`/topics`}>
<span>
{t('All topics')}
<Icon name="arrow-right-black" class={'icon'} />
</span>
</a>
</li>
</ul>
</nav>
)
}

36
src/components/Nav/Topics.scss → src/components/Nav/Topics/Topics.module.scss
View File

@ -1,8 +1,9 @@
.subnavigation {
.Topics {
@include font-size(1.4rem);
height: 6rem;
line-height: 6rem;
margin-bottom: 5rem !important;
margin-bottom: 3rem;
overflow: hidden;
position: relative;
transform: translateY(-2px);
@ -11,7 +12,7 @@
padding: 0 divide($container-padding-x, 2);
}
.topics {
.list {
display: flex;
flex-wrap: wrap;
font-weight: 500;
@ -32,32 +33,11 @@
}
a {
border-bottom: 0;
&:hover {
.icon {
filter: invert(1);
}
border-bottom: unset;
&.selected {
font-weight: 500;
border-bottom: 2px solid var(--default-color);
}
}
.icon {
display: inline-block;
margin-left: 0.3em;
position: relative;
top: 0.15em;
}
}
.selected {
color: black;
}
a {
color: #141414;
}
a:hover {
color: white;
}
}

57
src/components/Nav/Topics/Topics.tsx Normal file
View File

@ -0,0 +1,57 @@
import { Icon } from '../../_shared/Icon'
import { useLocalize } from '../../../context/localize'
import styles from './Topics.module.scss'
import { clsx } from 'clsx'
import { router, useRouter } from '../../../stores/router'
import { getPagePath } from '@nanostores/router'
export const Topics = () => {
const { t } = useLocalize()
const { page } = useRouter()
return (
<nav class={clsx('wide-container text-2xl', styles.Topics)}>
<ul class={styles.list}>
<li class={styles.item}>
<a class={clsx({ [styles.selected]: page().route === 'expo' })} href="/expo">
{t('Art')}
</a>
</li>
<li class={styles.item}>
<a href="/podcasts">Подкасты</a>
</li>
<li class={styles.item}>
<a href="">Спецпроекты</a>
</li>
<li class={styles.item}>
<a href="/topic/interview">#Интервью</a>
</li>
<li class={styles.item}>
<a href="/topic/reportage">#Репортажи</a>
</li>
<li class={styles.item}>
<a href="/topic/empiric">#Личный опыт</a>
</li>
<li class={styles.item}>
<a href="/topic/society">#Общество</a>
</li>
<li class={styles.item}>
<a href="/topic/culture">#Культура</a>
</li>
<li class={styles.item}>
<a href="/topic/theory">#Теории</a>
</li>
<li class={styles.item}>
<a href="/topic/poetry">#Поэзия</a>
</li>
<li class={clsx(styles.item, styles.right)}>
<a href={getPagePath(router, 'topics')}>
<span>
{t('All topics')}
<Icon name="arrow-right-black" class={'icon'} />
</span>
</a>
</li>
</ul>
</nav>
)
}

1
src/components/Nav/Topics/index.ts Normal file
View File

@ -0,0 +1 @@
export { Topics } from './Topics'

1
src/components/Topic/TopicBadge/TopicBadge.tsx
View File

@ -3,7 +3,6 @@ import styles from './TopicBadge.module.scss'
import { FollowingEntity, Topic } from '../../../graphql/types.gen'
import { createMemo, createSignal, Show } from 'solid-js'
import { imageProxy } from '../../../utils/imageProxy'
import { capitalize } from '../../../utils'
import { Button } from '../../_shared/Button'
import { useSession } from '../../../context/session'
import { useLocalize } from '../../../context/localize'

18
src/components/Views/Edit.tsx
View File

@ -158,7 +158,7 @@ export const EditView = (props: Props) => {
const articleTitle = () => {
switch (props.shout.layout as LayoutType) {
case 'audio': {
case 'music': {
return t('Album name')
}
case 'image': {
@ -172,7 +172,7 @@ export const EditView = (props: Props) => {
const pageTitle = () => {
switch (props.shout.layout as LayoutType) {
case 'audio': {
case 'music': {
return t('Publish Album')
}
case 'image': {
@ -259,19 +259,19 @@ export const EditView = (props: Props) => {
<div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
<Show when={page().route === 'edit'}>
<div class={styles.headingActions}>
<Show when={!isSubtitleVisible() && props.shout.layout !== 'audio'}>
<Show when={!isSubtitleVisible() && props.shout.layout !== 'music'}>
<div class={styles.action} onClick={showSubtitleInput}>
{t('Add subtitle')}
</div>
</Show>
<Show when={!isLeadVisible() && props.shout.layout !== 'audio'}>
<Show when={!isLeadVisible() && props.shout.layout !== 'music'}>
<div class={styles.action} onClick={showLeadInput}>
{t('Add intro')}
</div>
</Show>
</div>
<>
<div class={clsx({ [styles.audioHeader]: props.shout.layout === 'audio' })}>
<div class={clsx({ [styles.audioHeader]: props.shout.layout === 'music' })}>
<div class={styles.inputContainer}>
<GrowingTextarea
allowEnterKey={true}
@ -286,7 +286,7 @@ export const EditView = (props: Props) => {
<div class={styles.validationError}>{formErrors.title}</div>
</Show>
<Show when={props.shout.layout === 'audio'}>
<Show when={props.shout.layout === 'music'}>
<div class={styles.additional}>
<input
type="text"
@ -314,7 +314,7 @@ export const EditView = (props: Props) => {
/>
</div>
</Show>
<Show when={props.shout.layout !== 'audio'}>
<Show when={props.shout.layout !== 'music'}>
<Show when={isSubtitleVisible()}>
<GrowingTextarea
textAreaRef={(el) => {
@ -340,7 +340,7 @@ export const EditView = (props: Props) => {
</Show>
</Show>
</div>
<Show when={props.shout.layout === 'audio'}>
<Show when={props.shout.layout === 'music'}>
<Show
when={form.coverImageUrl}
fallback={
@ -387,7 +387,7 @@ export const EditView = (props: Props) => {
/>
</Show>
<Show when={props.shout.layout === 'audio'}>
<Show when={props.shout.layout === 'music'}>
<AudioUploader
audio={mediaItems()}
baseFields={baseAudioFields()}

17
src/components/Views/Expo/Expo.module.scss Normal file
View File

@ -0,0 +1,17 @@
.Expo {
display: block;
background: #fef2f2;
padding: 0 0 4rem 0;
min-height: 100vh;
.navigation {
padding: 0 0;
}
.showMore {
display: flex;
width: 100%;
padding: 4rem 0 2rem;
align-items: center;
justify-content: center;
}
}

174
src/components/Views/Expo/Expo.tsx Normal file
View File

@ -0,0 +1,174 @@
import styles from './Expo.module.scss'
import { LoadShoutsOptions, Shout } from '../../../graphql/types.gen'
import { createEffect, createMemo, createSignal, For, on, onCleanup, onMount, Show } from 'solid-js'
import { ArticleCard } from '../../Feed/ArticleCard'
import { Loading } from '../../_shared/Loading'
import { Button } from '../../_shared/Button'
import { useLocalize } from '../../../context/localize'
import { router, useRouter } from '../../../stores/router'
import { LayoutType } from '../../../pages/types'
import { loadShouts, resetSortedArticles, useArticlesStore } from '../../../stores/zine/articles'
import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
import { splitToPages } from '../../../utils/splitToPages'
import { clsx } from 'clsx'
import { getPagePath } from '@nanostores/router'
import { ConditionalWrapper } from '../../_shared/ConditionalWrapper'
type Props = {
shouts: Shout[]
}
export const PRERENDERED_ARTICLES_COUNT = 28
const LOAD_MORE_PAGE_SIZE = 16
export const Expo = (props: Props) => {
const [isLoaded, setIsLoaded] = createSignal<boolean>(Boolean(props.shouts))
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
const { t } = useLocalize()
const { page: getPage } = useRouter()
const getLayout = createMemo<LayoutType>(() => getPage().params['layout'] as LayoutType)
const { sortedArticles } = useArticlesStore({
shouts: isLoaded() ? props.shouts : []
})
const loadMore = async (count) => {
saveScrollPosition()
const options: LoadShoutsOptions = {
limit: count,
offset: sortedArticles().length
}
options.filters = getLayout() ? { layout: getLayout() } : { excludeLayout: 'article' }
const { hasMore } = await loadShouts(options)
setIsLoadMoreButtonVisible(hasMore)
restoreScrollPosition()
}
const pages = createMemo<Shout[][]>(() =>
splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE)
)
onMount(() => {
if (isLoaded()) {
return
}
loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE)
setIsLoaded(true)
})
onMount(() => {
if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
loadMore(LOAD_MORE_PAGE_SIZE)
}
})
createEffect(
on(
() => getLayout(),
() => {
resetSortedArticles()
loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE)
},
{ defer: true }
)
)
onCleanup(() => {
resetSortedArticles()
})
const handleLoadMoreClick = () => {
loadMore(LOAD_MORE_PAGE_SIZE)
}
return (
<div class={styles.Expo}>
<Show when={sortedArticles().length > 0} fallback={<Loading />}>
<div class="wide-container">
<ul class={clsx('view-switcher', styles.navigation)}>
<li class={clsx({ 'view-switcher__item--selected': !getLayout() })}>
<ConditionalWrapper
condition={Boolean(getLayout())}
wrapper={(children) => <a href={getPagePath(router, 'expo')}>{children}</a>}
>
<span class={clsx('linkReplacement')}>{t('All')}</span>
</ConditionalWrapper>
</li>
<li class={clsx({ 'view-switcher__item--selected': getLayout() === 'literature' })}>
<ConditionalWrapper
condition={getLayout() !== 'literature'}
wrapper={(children) => (
<a href={getPagePath(router, 'expoLayout', { layout: 'literature' })}>{children}</a>
)}
>
<span class={clsx('linkReplacement')}>{t('Literature')}</span>
</ConditionalWrapper>
</li>
<li class={clsx({ 'view-switcher__item--selected': getLayout() === 'music' })}>
<ConditionalWrapper
condition={getLayout() !== 'music'}
wrapper={(children) => (
<a href={getPagePath(router, 'expoLayout', { layout: 'music' })}>{children}</a>
)}
>
<span class={clsx('linkReplacement')}>{t('Music')}</span>
</ConditionalWrapper>
</li>
<li class={clsx({ 'view-switcher__item--selected': getLayout() === 'image' })}>
<ConditionalWrapper
condition={getLayout() !== 'image'}
wrapper={(children) => (
<a href={getPagePath(router, 'expoLayout', { layout: 'image' })}>{children}</a>
)}
>
<span class={clsx('linkReplacement')}>{t('Gallery')}</span>
</ConditionalWrapper>
</li>
<li class={clsx({ 'view-switcher__item--selected': getLayout() === 'video' })}>
<ConditionalWrapper
condition={getLayout() !== 'video'}
wrapper={(children) => (
<a href={getPagePath(router, 'expoLayout', { layout: 'video' })}>{children}</a>
)}
>
<span class={clsx('cursorPointer linkReplacement')}>{t('Video')}</span>
</ConditionalWrapper>
</li>
</ul>
<div class="row">
<For each={sortedArticles().slice(0, PRERENDERED_ARTICLES_COUNT)}>
{(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 }}
/>
</div>
)}
</For>
<For each={pages()}>
{(page) => (
<For each={page}>
{(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 }}
/>
</div>
)}
</For>
)}
</For>
</div>
<Show when={isLoadMoreButtonVisible()}>
<div class={styles.showMore}>
<Button size="L" onClick={handleLoadMoreClick} value={t('Load more')} />
</div>
</Show>
</div>
</Show>
</div>
)
}

1
src/components/Views/Expo/index.ts Normal file
View File

@ -0,0 +1 @@
export { Expo } from './Expo'

4
src/components/Views/Home.tsx
View File

@ -1,6 +1,6 @@
import { createMemo, createSignal, For, onMount, Show } from 'solid-js'
import Banner from '../Discours/Banner'
import { NavTopics } from '../Nav/Topics'
import { Topics } from '../Nav/Topics'
import { Row5 } from '../Feed/Row5'
import { Row3 } from '../Feed/Row3'
import { Row2 } from '../Feed/Row2'
@ -104,7 +104,7 @@ export const HomeView = (props: Props) => {
return (
<Show when={sortedArticles().length > 0}>
<NavTopics />
<Topics />
<Row5 articles={sortedArticles().slice(0, 5)} nodate={true} />

4
src/components/_shared/PageLayout.module.scss
View File

@ -1,3 +1,7 @@
.withPadding {
padding-top: 58px;
}
.zeroBottomPadding {
padding-bottom: 0;
}

4
src/components/_shared/PageLayout.tsx
View File

@ -18,6 +18,7 @@ type Props = {
hideFooter?: boolean
class?: string
withPadding?: boolean
zeroBottomPadding?: boolean
scrollToComments?: (value: boolean) => void
}
@ -44,7 +45,8 @@ export const PageLayout = (props: Props) => {
/>
<main
class={clsx('main-content', {
[styles.withPadding]: props.withPadding
[styles.withPadding]: props.withPadding,
[styles.zeroBottomPadding]: props.zeroBottomPadding
})}
classList={{ 'main-content--no-padding': !isHeaderFixed }}
>

2
src/pages/create.page.tsx
View File

@ -44,7 +44,7 @@ export const CreatePage = () => {
</div>
</li>
<li>
<div class={styles.link} onClick={() => handleCreate('audio')}>
<div class={styles.link} onClick={() => handleCreate('music')}>
<Icon name="create-music" class={styles.icon} />
<div>{t('music')}</div>
</div>

4
src/pages/expo/expo.page.route.ts Normal file
View File

@ -0,0 +1,4 @@
import { ROUTES } from '../../stores/router'
import { getServerRoute } from '../../utils/getServerRoute'
export default getServerRoute(ROUTES.expo)

17
src/pages/expo/expo.page.server.ts Normal file
View File

@ -0,0 +1,17 @@
import type { PageContext } from '../../renderer/types'
import { apiClient } from '../../utils/apiClient'
import type { PageProps } from '../types'
import { PRERENDERED_ARTICLES_COUNT } from '../../components/Views/Expo/Expo'
export const onBeforeRender = async (_pageContext: PageContext) => {
const expoShouts = await apiClient.getShouts({
filters: { excludeLayout: 'article' },
limit: PRERENDERED_ARTICLES_COUNT
})
const pageProps: PageProps = { expoShouts }
return {
pageContext: {
pageProps
}
}
}

44
src/pages/expo/expo.page.tsx Normal file
View File

@ -0,0 +1,44 @@
import { PageLayout } from '../../components/_shared/PageLayout'
import type { PageProps } from '../types'
import { Topics } from '../../components/Nav/Topics'
import { Expo } from '../../components/Views/Expo'
import { useLocalize } from '../../context/localize'
import { createMemo } from 'solid-js'
import { LayoutType } from '../types'
import { useRouter } from '../../stores/router'
import { Title } from '@solidjs/meta'
export const ExpoPage = (props: PageProps) => {
const { t } = useLocalize()
const { page: getPage } = useRouter()
const getLayout = createMemo<LayoutType>(() => getPage().params['layout'] as LayoutType)
const title = createMemo(() => {
switch (getLayout()) {
case 'music': {
return t('Audio')
}
case 'video': {
return t('Video')
}
case 'image': {
return t('Artworks')
}
case 'literature': {
return t('Literature')
}
default: {
return t('Art')
}
}
})
return (
<PageLayout withPadding={true} zeroBottomPadding={true}>
<Title>{title()}</Title>
<Topics />
<Expo shouts={props.expoShouts} />
</PageLayout>
)
}
export const Page = ExpoPage

4
src/pages/expo/expoLayout.page.route.ts Normal file
View File

@ -0,0 +1,4 @@
import { ROUTES } from '../../stores/router'
import { getServerRoute } from '../../utils/getServerRoute'
export default getServerRoute(ROUTES.expoLayout)

20
src/pages/expo/expoLayout.page.server.ts Normal file
View File

@ -0,0 +1,20 @@
import type { PageContext } from '../../renderer/types'
import { apiClient } from '../../utils/apiClient'
import type { PageProps } from '../types'
import { PRERENDERED_ARTICLES_COUNT } from '../../components/Views/Expo/Expo'
export const onBeforeRender = async (pageContext: PageContext) => {
const { layout } = pageContext.routeParams
const expoShouts = await apiClient.getShouts({
filters: { layout: layout },
limit: PRERENDERED_ARTICLES_COUNT
})
const pageProps: PageProps = { expoShouts }
return {
pageContext: {
pageProps
}
}
}

4
src/pages/layoutShouts.page.route.ts
View File

@ -1,4 +0,0 @@
import { ROUTES } from '../stores/router'
import { getServerRoute } from '../utils/getServerRoute'
export default getServerRoute(ROUTES.expo)

18
src/pages/layoutShouts.page.server.ts
View File

@ -1,18 +0,0 @@
import type { PageContext } from '../renderer/types'
import { apiClient } from '../utils/apiClient'
import type { PageProps } from './types'
import { PRERENDERED_ARTICLES_COUNT } from './layoutShouts.page'
export const onBeforeRender = async (pageContext: PageContext) => {
const { layout } = pageContext.routeParams
const layoutShouts = await apiClient.getShouts({ filters: { layout }, limit: PRERENDERED_ARTICLES_COUNT })
const pageProps: PageProps = { layoutShouts }
return {
pageContext: {
pageProps
}
}
}

187
src/pages/layoutShouts.page.tsx
View File

@ -1,187 +0,0 @@
import { PageLayout } from '../components/_shared/PageLayout'
import type { LayoutType, PageProps } from './types'
import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js'
import { loadShouts, resetSortedArticles, useArticlesStore } from '../stores/zine/articles'
import { router, useRouter } from '../stores/router'
import { Loading } from '../components/_shared/Loading'
import { restoreScrollPosition, saveScrollPosition } from '../utils/scroll'
import type { Shout } from '../graphql/types.gen'
import { splitToPages } from '../utils/splitToPages'
import { clsx } from 'clsx'
import { Row3 } from '../components/Feed/Row3'
import { Row2 } from '../components/Feed/Row2'
import { Beside } from '../components/Feed/Beside'
import { Slider } from '../components/_shared/Slider'
import { Row1 } from '../components/Feed/Row1'
import styles from '../styles/Topic.module.scss'
import { ArticleCard } from '../components/Feed/ArticleCard'
import { useLocalize } from '../context/localize'
import { getPagePath } from '@nanostores/router'
import { Title } from '@solidjs/meta'
export const PRERENDERED_ARTICLES_COUNT = 27
const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3
export const LayoutShoutsPage = (props: PageProps) => {
const { t } = useLocalize()
const { page: getPage } = useRouter()
const getLayout = createMemo<LayoutType>(() => getPage().params['layout'] as LayoutType)
const [isLoaded, setIsLoaded] = createSignal(
Boolean(props.layoutShouts) &&
props.layoutShouts.length > 0 &&
props.layoutShouts[0].layout === getLayout()
)
const { sortedArticles } = useArticlesStore({
shouts: isLoaded() ? props.layoutShouts : []
})
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
const loadMore = async (count) => {
saveScrollPosition()
const { hasMore } = await loadShouts({
filters: { layout: getLayout() },
limit: count,
offset: sortedArticles().length
})
setIsLoadMoreButtonVisible(hasMore)
restoreScrollPosition()
}
const title = createMemo(() => {
const l = getLayout()
if (l === 'audio') return t('Audio')
if (l === 'video') return t('Video')
if (l === 'image') return t('Artworks')
return t('Literature')
})
const pages = createMemo<Shout[][]>(() =>
splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE)
)
onMount(() => {
if (isLoaded()) {
return
}
loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE)
setIsLoaded(true)
})
onMount(() => {
if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
loadMore(LOAD_MORE_PAGE_SIZE)
}
})
createEffect((prevLayout) => {
if (prevLayout !== getLayout()) {
resetSortedArticles()
loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE)
}
return getLayout()
}, getLayout())
onCleanup(() => {
resetSortedArticles()
})
const handleLoadMoreClick = () => {
loadMore(LOAD_MORE_PAGE_SIZE)
}
return (
<PageLayout>
<Title>{title()}</Title>
<Show when={isLoaded()} fallback={<Loading />}>
<div class={styles.topicPage}>
<Show when={getLayout()}>
<div class="wide-container">
<h1>{title()}</h1>
</div>
<div class="wide-container">
<div class={clsx(styles.groupControls, 'row group__controls')}>
<div class="col-md-16">
<ul class="view-switcher">
<li classList={{ 'view-switcher__item--selected': getLayout() === 'audio' }}>
<a href={getPagePath(router, 'expo', { layout: 'audio' })}>{t('Audio')}</a>
</li>
<li classList={{ 'view-switcher__item--selected': getLayout() === 'video' }}>
<a href={getPagePath(router, 'expo', { layout: 'video' })}>{t('Video')}</a>
</li>
<li classList={{ 'view-switcher__item--selected': getLayout() === 'image' }}>
<a href={getPagePath(router, 'expo', { layout: 'image' })}>{t('Artworks')}</a>
</li>
<li classList={{ 'view-switcher__item--selected': getLayout() === 'literature' }}>
<a href={getPagePath(router, 'expo', { layout: 'literature' })}>{t('Literature')}</a>
</li>
</ul>
</div>
</div>
</div>
<Show when={sortedArticles().length > 0} fallback={<Loading />}>
<Row1 article={sortedArticles()[0]} />
<Row2 articles={sortedArticles().slice(1, 3)} />
<Slider title={title()}>
<For each={sortedArticles().slice(5, 11)}>
{(article) => (
<ArticleCard
article={article}
settings={{
additionalClass: 'swiper-slide',
isFloorImportant: true,
isWithCover: true,
nodate: true
}}
/>
)}
</For>
</Slider>
<Beside
beside={sortedArticles()[12]}
title={t('Top viewed')}
values={sortedArticles().slice(0, 5)}
wrapper={'top-article'}
/>
<Show when={sortedArticles().length > 5}>
<Row3 articles={sortedArticles().slice(13, 16)} />
<Row2 articles={sortedArticles().slice(16, 18)} />
<Row3 articles={sortedArticles().slice(18, 21)} />
<Row3 articles={sortedArticles().slice(21, 24)} />
<Row3 articles={sortedArticles().slice(24, 27)} />
</Show>
<For each={pages()}>
{(page) => (
<>
<Row3 articles={page.slice(0, 3)} />
<Row3 articles={page.slice(3, 6)} />
<Row3 articles={page.slice(6, 9)} />
</>
)}
</For>
<Show when={isLoadMoreButtonVisible()}>
<p class="load-more-container">
<button class="button" onClick={handleLoadMoreClick}>
{t('Load more')}
</button>
</p>
</Show>
</Show>
</Show>
</div>
</Show>
</PageLayout>
)
}
export const Page = LayoutShoutsPage

4
src/pages/types.ts
View File

@ -4,7 +4,7 @@ import type { Author, Chat, Shout, Topic } from '../graphql/types.gen'
// all the things (she said) that could be passed from the server
export type PageProps = {
article?: Shout
layoutShouts?: Shout[]
expoShouts?: Shout[]
authorShouts?: Shout[]
topicShouts?: Shout[]
homeShouts?: Shout[]
@ -24,7 +24,7 @@ export type RootSearchParams = {
lang: string
}
export type LayoutType = 'article' | 'audio' | 'video' | 'image' | 'literature'
export type LayoutType = 'article' | 'music' | 'video' | 'image' | 'literature'
export type FileTypeToUpload = 'image' | 'video' | 'doc' | 'audio'

3
src/stores/router.ts
View File

@ -37,7 +37,8 @@ export const ROUTES = {
projects: '/about/projects',
termsOfUse: '/about/terms-of-use',
thanks: '/about/thanks',
expo: '/expo/:layout',
expo: '/expo',
expoLayout: '/expo/:layout',
profileSettings: '/profile/settings',
profileSecurity: '/profile/security',
profileSubscriptions: '/profile/subscriptions',

2
src/styles/app.scss
View File

@ -623,7 +623,7 @@ figure {
a,
.linkReplacement,
button {
border-bottom: 2px solid #fff;
border-bottom: 2px solid transparent;
color: var(--link-color);
cursor: pointer;
font-weight: inherit;

1
src/utils/apiClient.ts
View File

@ -325,7 +325,6 @@ export const apiClient = {
getShouts: async (options: LoadShoutsOptions) => {
const resp = await publicGraphQLClient.query(shoutsLoadBy, { options }).toPromise()
if (resp.error) {
console.error(resp)
}