From 405fbb4db16030c53b7a1b1973f3c4b74218e54f Mon Sep 17 00:00:00 2001 From: tonyrewin Date: Sat, 12 Nov 2022 21:59:29 +0300 Subject: [PATCH] layout upgrade --- CHANGELOG.txt | 8 +- src/components/Pages/AllAuthorsPage.tsx | 6 +- src/components/Pages/AllTopicsPage.tsx | 6 +- src/components/Pages/ArticlePage.tsx | 6 +- src/components/Pages/ArtworksPage.tsx | 0 src/components/Pages/AudioPage.tsx | 0 src/components/Pages/AuthorPage.tsx | 6 +- src/components/Pages/ConnectPage.tsx | 6 +- src/components/Pages/CreatePage.tsx | 6 +- src/components/Pages/FeedPage.tsx | 6 +- src/components/Pages/FourOuFourPage.tsx | 6 +- src/components/Pages/HomePage.tsx | 6 +- src/components/Pages/LayoutShoutsPage.tsx | 49 ++++++ src/components/Pages/ReadingPage.tsx | 48 ------ src/components/Pages/SearchPage.tsx | 6 +- src/components/Pages/TopicPage.tsx | 6 +- src/components/Pages/VIdeoPage.tsx | 0 .../Pages/about/DiscussionRulesPage.tsx | 6 +- src/components/Pages/about/DogmaPage.tsx | 6 +- src/components/Pages/about/GuidePage.tsx | 6 +- src/components/Pages/about/HelpPage.tsx | 6 +- src/components/Pages/about/ManifestPage.tsx | 6 +- src/components/Pages/about/PartnersPage.tsx | 6 +- src/components/Pages/about/PrinciplesPage.tsx | 6 +- src/components/Pages/about/ProjectsPage.tsx | 6 +- src/components/Pages/about/TermsOfUsePage.tsx | 6 +- src/components/Pages/about/ThanksPage.tsx | 6 +- src/components/Root.tsx | 10 +- src/components/Views/LayoutView.tsx | 140 ++++++++++++++++++ .../MainLayout.tsx => Wrap/MainWrap.tsx} | 4 +- src/components/types.ts | 5 +- src/pages/layout/[...layout].astro | 2 +- src/stores/router.ts | 4 +- src/stores/zine/layouts.ts | 14 +- src/utils/apiClient.ts | 5 +- 35 files changed, 279 insertions(+), 136 deletions(-) delete mode 100644 src/components/Pages/ArtworksPage.tsx delete mode 100644 src/components/Pages/AudioPage.tsx create mode 100644 src/components/Pages/LayoutShoutsPage.tsx delete mode 100644 src/components/Pages/ReadingPage.tsx delete mode 100644 src/components/Pages/VIdeoPage.tsx create mode 100644 src/components/Views/LayoutView.tsx rename src/components/{Layouts/MainLayout.tsx => Wrap/MainWrap.tsx} (89%) diff --git a/CHANGELOG.txt b/CHANGELOG.txt index e4fcaba0..3b42f1a1 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -1,5 +1,11 @@ [0.6.0] -[+] editor enabled +[+] hybrid routing ssr/spa +[+] layout pages +[-] nanostores +[+] inbox +[+] css modules +[+] draft editor +[+] solid-driven storages [0.5.1] [+] nanostores-base global store diff --git a/src/components/Pages/AllAuthorsPage.tsx b/src/components/Pages/AllAuthorsPage.tsx index 5a6e380c..3978e95e 100644 --- a/src/components/Pages/AllAuthorsPage.tsx +++ b/src/components/Pages/AllAuthorsPage.tsx @@ -1,4 +1,4 @@ -import { MainLayout } from '../Layouts/MainLayout' +import { MainWrap } from '../Wrap/MainWrap' import { AllAuthorsView } from '../Views/AllAuthors' import type { PageProps } from '../types' import { createSignal, onMount, Show } from 'solid-js' @@ -18,11 +18,11 @@ export const AllAuthorsPage = (props: PageProps) => { }) return ( - + }> - + ) } diff --git a/src/components/Pages/AllTopicsPage.tsx b/src/components/Pages/AllTopicsPage.tsx index ae5e3230..96889617 100644 --- a/src/components/Pages/AllTopicsPage.tsx +++ b/src/components/Pages/AllTopicsPage.tsx @@ -1,4 +1,4 @@ -import { MainLayout } from '../Layouts/MainLayout' +import { MainWrap } from '../Wrap/MainWrap' import { AllTopicsView } from '../Views/AllTopics' import type { PageProps } from '../types' import { createSignal, onMount, Show } from 'solid-js' @@ -18,11 +18,11 @@ export const AllTopicsPage = (props: PageProps) => { }) return ( - + }> - + ) } diff --git a/src/components/Pages/ArticlePage.tsx b/src/components/Pages/ArticlePage.tsx index 00e7d661..974d27c8 100644 --- a/src/components/Pages/ArticlePage.tsx +++ b/src/components/Pages/ArticlePage.tsx @@ -1,4 +1,4 @@ -import { MainLayout } from '../Layouts/MainLayout' +import { MainWrap } from '../Wrap/MainWrap' import { ArticleView } from '../Views/Article' import type { PageProps } from '../types' import { loadArticle, useArticlesStore } from '../../stores/zine/articles' @@ -37,11 +37,11 @@ export const ArticlePage = (props: PageProps) => { }) return ( - + }> - + ) } diff --git a/src/components/Pages/ArtworksPage.tsx b/src/components/Pages/ArtworksPage.tsx deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/Pages/AudioPage.tsx b/src/components/Pages/AudioPage.tsx deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/Pages/AuthorPage.tsx b/src/components/Pages/AuthorPage.tsx index d8d73f6c..d3d3c9b6 100644 --- a/src/components/Pages/AuthorPage.tsx +++ b/src/components/Pages/AuthorPage.tsx @@ -1,4 +1,4 @@ -import { MainLayout } from '../Layouts/MainLayout' +import { MainWrap } from '../Wrap/MainWrap' import { AuthorView, PRERENDERED_ARTICLES_COUNT } from '../Views/Author' import type { PageProps } from '../types' import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js' @@ -36,11 +36,11 @@ export const AuthorPage = (props: PageProps) => { onCleanup(() => resetSortedArticles()) return ( - + }> - + ) } diff --git a/src/components/Pages/ConnectPage.tsx b/src/components/Pages/ConnectPage.tsx index b278bf2a..1ee0913b 100644 --- a/src/components/Pages/ConnectPage.tsx +++ b/src/components/Pages/ConnectPage.tsx @@ -1,8 +1,8 @@ -import { MainLayout } from '../Layouts/MainLayout' +import { MainWrap } from '../Wrap/MainWrap' export const ConnectPage = () => { return ( - +

@@ -38,7 +38,7 @@ export const ConnectPage = () => {

- + ) } diff --git a/src/components/Pages/CreatePage.tsx b/src/components/Pages/CreatePage.tsx index 3662483d..8f7ea417 100644 --- a/src/components/Pages/CreatePage.tsx +++ b/src/components/Pages/CreatePage.tsx @@ -1,16 +1,16 @@ import { lazy, Suspense } from 'solid-js' -import { MainLayout } from '../Layouts/MainLayout' +import { MainWrap } from '../Wrap/MainWrap' import { Loading } from '../Loading' const CreateView = lazy(() => import('../Views/Create')) export const CreatePage = () => { return ( - + }> - + ) } diff --git a/src/components/Pages/FeedPage.tsx b/src/components/Pages/FeedPage.tsx index 7aef8fbf..9ec5f9d2 100644 --- a/src/components/Pages/FeedPage.tsx +++ b/src/components/Pages/FeedPage.tsx @@ -1,4 +1,4 @@ -import { MainLayout } from '../Layouts/MainLayout' +import { MainWrap } from '../Wrap/MainWrap' import { FeedView } from '../Views/Feed' import { onCleanup } from 'solid-js' import { resetSortedArticles } from '../../stores/zine/articles' @@ -7,9 +7,9 @@ export const FeedPage = () => { onCleanup(() => resetSortedArticles()) return ( - + - + ) } diff --git a/src/components/Pages/FourOuFourPage.tsx b/src/components/Pages/FourOuFourPage.tsx index 68d5cb97..2848cadf 100644 --- a/src/components/Pages/FourOuFourPage.tsx +++ b/src/components/Pages/FourOuFourPage.tsx @@ -1,11 +1,11 @@ import { FourOuFourView } from '../Views/FourOuFour' -import { MainLayout } from '../Layouts/MainLayout' +import { MainWrap } from '../Wrap/MainWrap' export const FourOuFourPage = () => { return ( - + - + ) } diff --git a/src/components/Pages/HomePage.tsx b/src/components/Pages/HomePage.tsx index 392280bb..ec1cb842 100644 --- a/src/components/Pages/HomePage.tsx +++ b/src/components/Pages/HomePage.tsx @@ -1,5 +1,5 @@ import { HomeView, PRERENDERED_ARTICLES_COUNT } from '../Views/Home' -import { MainLayout } from '../Layouts/MainLayout' +import { MainWrap } from '../Wrap/MainWrap' import type { PageProps } from '../types' import { createSignal, onCleanup, onMount, Show } from 'solid-js' import { loadPublishedArticles, resetSortedArticles } from '../../stores/zine/articles' @@ -23,11 +23,11 @@ export const HomePage = (props: PageProps) => { onCleanup(() => resetSortedArticles()) return ( - + }> - + ) } diff --git a/src/components/Pages/LayoutShoutsPage.tsx b/src/components/Pages/LayoutShoutsPage.tsx new file mode 100644 index 00000000..c6b905ca --- /dev/null +++ b/src/components/Pages/LayoutShoutsPage.tsx @@ -0,0 +1,49 @@ +import { MainWrap } from '../Wrap/MainWrap' +import { LayoutView } from '../Views/LayoutView' +import type { PageProps } from '../types' +import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js' +import { resetSortedArticles } from '../../stores/zine/articles' +import { useRouter } from '../../stores/router' +import { loadLayoutShouts } from '../../stores/zine/layouts' +import { Loading } from '../Loading' + +const PER_PAGE = 50 + +export const LayoutShoutsPage = (props: PageProps) => { + const [isLoaded, setIsLoaded] = createSignal(Boolean(props.shouts)) + + const layout = createMemo(() => { + const { page: getPage } = useRouter() + + const page = getPage() + + if (page.route !== 'layout') { + throw new Error('ts guard') + } + + return page.params.layout + }) + + onMount(async () => { + if (isLoaded()) { + return + } + + await loadLayoutShouts({ layout: layout(), amount: PER_PAGE, offset: 0 }) + + setIsLoaded(true) + }) + + onCleanup(() => resetSortedArticles()) + + return ( + + }> + + + + ) +} + +// for lazy loading +export default LayoutShoutsPage diff --git a/src/components/Pages/ReadingPage.tsx b/src/components/Pages/ReadingPage.tsx deleted file mode 100644 index 15cbe4c2..00000000 --- a/src/components/Pages/ReadingPage.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { MainLayout } from '../Layouts/MainLayout' -import { PRERENDERED_ARTICLES_COUNT, TopicView } from '../Views/Topic' -import type { PageProps } from '../types' -import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js' -import { resetSortedArticles } from '../../stores/zine/articles' -import { useRouter } from '../../stores/router' -import { loadLayoutShouts, loadLayout } from '../../stores/zine/layouts' -import { Loading } from '../Loading' - -export const ReadingPage = (props: PageProps) => { - const [isLoaded, setIsLoaded] = createSignal(Boolean(props.authorArticles) && Boolean(props.author)) - - const slug = createMemo(() => { - const { page: getPage } = useRouter() - - const page = getPage() - - if (page.route !== 'topic') { - throw new Error('ts guard') - } - - return page.params.slug - }) - - onMount(async () => { - if (isLoaded()) { - return - } - - await loadLayoutShouts({ topicSlug: slug(), limit: PRERENDERED_ARTICLES_COUNT, offset: 0 }) - await loadLayout({ slug: slug() }) - - setIsLoaded(true) - }) - - onCleanup(() => resetSortedArticles()) - - return ( - - }> - - - - ) -} - -// for lazy loading -export default TopicPage diff --git a/src/components/Pages/SearchPage.tsx b/src/components/Pages/SearchPage.tsx index 9ce346b1..204ca05e 100644 --- a/src/components/Pages/SearchPage.tsx +++ b/src/components/Pages/SearchPage.tsx @@ -1,4 +1,4 @@ -import { MainLayout } from '../Layouts/MainLayout' +import { MainWrap } from '../Wrap/MainWrap' import { SearchView } from '../Views/Search' import type { PageProps } from '../types' import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js' @@ -33,11 +33,11 @@ export const SearchPage = (props: PageProps) => { onCleanup(() => resetSortedArticles()) return ( - + }> - + ) } diff --git a/src/components/Pages/TopicPage.tsx b/src/components/Pages/TopicPage.tsx index 16e0c95a..4cf60a28 100644 --- a/src/components/Pages/TopicPage.tsx +++ b/src/components/Pages/TopicPage.tsx @@ -1,4 +1,4 @@ -import { MainLayout } from '../Layouts/MainLayout' +import { MainWrap } from '../Wrap/MainWrap' import { PRERENDERED_ARTICLES_COUNT, TopicView } from '../Views/Topic' import type { PageProps } from '../types' import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js' @@ -36,11 +36,11 @@ export const TopicPage = (props: PageProps) => { onCleanup(() => resetSortedArticles()) return ( - + }> - + ) } diff --git a/src/components/Pages/VIdeoPage.tsx b/src/components/Pages/VIdeoPage.tsx deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/Pages/about/DiscussionRulesPage.tsx b/src/components/Pages/about/DiscussionRulesPage.tsx index 11ee4565..eb70490e 100644 --- a/src/components/Pages/about/DiscussionRulesPage.tsx +++ b/src/components/Pages/about/DiscussionRulesPage.tsx @@ -1,10 +1,10 @@ -import { MainLayout } from '../../Layouts/MainLayout' +import { MainWrap } from '../../Wrap/MainWrap' import { t } from '../../../utils/intl' export const DiscussionRulesPage = () => { const title = t('Discussion rules') return ( - +
@@ -114,7 +114,7 @@ export const DiscussionRulesPage = () => {
- + ) } diff --git a/src/components/Pages/about/DogmaPage.tsx b/src/components/Pages/about/DogmaPage.tsx index 1407c73d..b4dcea1f 100644 --- a/src/components/Pages/about/DogmaPage.tsx +++ b/src/components/Pages/about/DogmaPage.tsx @@ -1,10 +1,10 @@ -import { MainLayout } from '../../Layouts/MainLayout' +import { MainWrap } from '../../Wrap/MainWrap' // const title = t('Dogma') export const DogmaPage = () => { return ( - +
@@ -53,7 +53,7 @@ export const DogmaPage = () => {
- + ) } diff --git a/src/components/Pages/about/GuidePage.tsx b/src/components/Pages/about/GuidePage.tsx index b1158c60..b9ba2837 100644 --- a/src/components/Pages/about/GuidePage.tsx +++ b/src/components/Pages/about/GuidePage.tsx @@ -1,5 +1,5 @@ import { createSignal, Show } from 'solid-js' -import { MainLayout } from '../../Layouts/MainLayout' +import { MainWrap } from '../../Wrap/MainWrap' import { t } from '../../../utils/intl' import { Icon } from '../../Nav/Icon' @@ -11,7 +11,7 @@ export const GuidePage = () => { const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded) return ( - + {/**/} {/**/} {/**/} @@ -283,7 +283,7 @@ export const GuidePage = () => { - + ) } diff --git a/src/components/Pages/about/HelpPage.tsx b/src/components/Pages/about/HelpPage.tsx index 34180213..a327b837 100644 --- a/src/components/Pages/about/HelpPage.tsx +++ b/src/components/Pages/about/HelpPage.tsx @@ -1,5 +1,5 @@ import { createSignal, Show } from 'solid-js' -import { MainLayout } from '../../Layouts/MainLayout' +import { MainWrap } from '../../Wrap/MainWrap' import { Donate } from '../../Discours/Donate' import { Icon } from '../../Nav/Icon' @@ -11,7 +11,7 @@ export const HelpPage = () => { const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded) return ( - + {/*Здесь можно поддержать Дискурс материально.*/} {/*Discours.io, помощь, благотворительность*/} @@ -161,7 +161,7 @@ export const HelpPage = () => { - + ) } diff --git a/src/components/Pages/about/ManifestPage.tsx b/src/components/Pages/about/ManifestPage.tsx index 3e7101af..c221762a 100644 --- a/src/components/Pages/about/ManifestPage.tsx +++ b/src/components/Pages/about/ManifestPage.tsx @@ -1,5 +1,5 @@ import { createSignal, Show } from 'solid-js' -import { MainLayout } from '../../Layouts/MainLayout' +import { MainWrap } from '../../Wrap/MainWrap' import { Modal } from '../../Nav/Modal' import { Feedback } from '../../Discours/Feedback' import Subscribe from '../../Discours/Subscribe' @@ -14,7 +14,7 @@ export const ManifestPage = () => { const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded) return ( - + @@ -191,7 +191,7 @@ export const ManifestPage = () => { - + ) } diff --git a/src/components/Pages/about/PartnersPage.tsx b/src/components/Pages/about/PartnersPage.tsx index 4800e380..c30a7fec 100644 --- a/src/components/Pages/about/PartnersPage.tsx +++ b/src/components/Pages/about/PartnersPage.tsx @@ -1,11 +1,11 @@ -import { MainLayout } from '../../Layouts/MainLayout' +import { MainWrap } from '../../Wrap/MainWrap' import { t } from '../../../utils/intl' // const title = t('Partners') export const PartnersPage = () => { return ( - +
@@ -13,7 +13,7 @@ export const PartnersPage = () => {
- + ) } diff --git a/src/components/Pages/about/PrinciplesPage.tsx b/src/components/Pages/about/PrinciplesPage.tsx index e52eed41..717539f3 100644 --- a/src/components/Pages/about/PrinciplesPage.tsx +++ b/src/components/Pages/about/PrinciplesPage.tsx @@ -1,10 +1,10 @@ -import { MainLayout } from '../../Layouts/MainLayout' +import { MainWrap } from '../../Wrap/MainWrap' import { t } from '../../../utils/intl' export const PrinciplesPage = () => { const title = t('Principles') return ( - +
@@ -172,7 +172,7 @@ export const PrinciplesPage = () => {
- + ) } diff --git a/src/components/Pages/about/ProjectsPage.tsx b/src/components/Pages/about/ProjectsPage.tsx index 63a7e55e..114ffd0d 100644 --- a/src/components/Pages/about/ProjectsPage.tsx +++ b/src/components/Pages/about/ProjectsPage.tsx @@ -1,11 +1,11 @@ -import { MainLayout } from '../../Layouts/MainLayout' +import { MainWrap } from '../../Wrap/MainWrap' import { t } from '../../../utils/intl' // title={t('Projects')}> export const ProjectsPage = () => { return ( - +
@@ -13,7 +13,7 @@ export const ProjectsPage = () => {
- + ) } diff --git a/src/components/Pages/about/TermsOfUsePage.tsx b/src/components/Pages/about/TermsOfUsePage.tsx index 3a300c00..31e1e930 100644 --- a/src/components/Pages/about/TermsOfUsePage.tsx +++ b/src/components/Pages/about/TermsOfUsePage.tsx @@ -1,5 +1,5 @@ import { createSignal, Show } from 'solid-js' -import { MainLayout } from '../../Layouts/MainLayout' +import { MainWrap } from '../../Wrap/MainWrap' import { Icon } from '../../Nav/Icon' // const title = t('Terms of use') @@ -10,7 +10,7 @@ export const TermsOfUsePage = () => { const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded) return ( - + {/**/} {/**/} {/**/} @@ -274,7 +274,7 @@ export const TermsOfUsePage = () => { - + ) } diff --git a/src/components/Pages/about/ThanksPage.tsx b/src/components/Pages/about/ThanksPage.tsx index c4efa93d..8aecb632 100644 --- a/src/components/Pages/about/ThanksPage.tsx +++ b/src/components/Pages/about/ThanksPage.tsx @@ -1,10 +1,10 @@ -import { MainLayout } from '../../Layouts/MainLayout' +import { MainWrap } from '../../Wrap/MainWrap' import { t } from '../../../utils/intl' export const ThanksPage = () => { const title = t('Thank you') return ( - + {/**/} {/**/} {/**/} @@ -85,7 +85,7 @@ export const ThanksPage = () => { - + ) } diff --git a/src/components/Root.tsx b/src/components/Root.tsx index ce16d897..9c45f111 100644 --- a/src/components/Root.tsx +++ b/src/components/Root.tsx @@ -31,10 +31,7 @@ import { ThanksPage } from './Pages/about/ThanksPage' import { CreatePage } from './Pages/CreatePage' import { ConnectPage } from './Pages/ConnectPage' import { renewSession } from '../stores/auth' -import { AudioPage } from './Pages/AudioPage' -import { VideoPage } from './Pages/VideoPage' -import { ReadingPage } from './Pages/ReadingPage' -import { ArtworksPage } from './Pages/ArtworksPage' +import { LayoutShoutsPage } from './Pages/LayoutShoutsPage' // TODO: lazy load // const SomePage = lazy(() => import('./Pages/SomePage')) @@ -47,10 +44,7 @@ type RootSearchParams = { } const pagesMap: Record> = { - audio: AudioPage, - video: VideoPage, - literature: ReadingPage, - artworks: ArtworksPage, + layout: LayoutShoutsPage, connect: ConnectPage, create: CreatePage, home: HomePage, diff --git a/src/components/Views/LayoutView.tsx b/src/components/Views/LayoutView.tsx new file mode 100644 index 00000000..a3db9f99 --- /dev/null +++ b/src/components/Views/LayoutView.tsx @@ -0,0 +1,140 @@ +import { For, Show, createMemo, onMount, createSignal } from 'solid-js' +import type { Shout } from '../../graphql/types.gen' +import { Row3 } from '../Feed/Row3' +import { Row2 } from '../Feed/Row2' +import { Beside } from '../Feed/Beside' +import styles from '../../styles/Topic.module.scss' +import { t } from '../../utils/intl' +import { useRouter } from '../../stores/router' +import { useArticlesStore } from '../../stores/zine/articles' +import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll' +import { splitToPages } from '../../utils/splitToPages' +import { clsx } from 'clsx' +import Slider from '../Feed/Slider' +import { Row1 } from '../Feed/Row1' +import { loadLayoutShouts } from '../../stores/zine/layouts' + +type LayoutPageSearchParams = { + layout: 'audio' | 'video' | 'artworks' | 'literature' +} + +interface LayoutProps { + layout: string + shouts: Shout[] +} + +export const PRERENDERED_ARTICLES_COUNT = 21 +const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3 + +export const LayoutView = (props: LayoutProps) => { + const { searchParams, changeSearchParam } = useRouter() + + const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) + + const { sortedArticles } = useArticlesStore({ sortedArticles: props.shouts }) + const layout = createMemo(() => props.layout) + + const loadMoreLayout = async (layout: string) => { + saveScrollPosition() + + const { hasMore } = await loadLayoutShouts({ + layout, + amount: LOAD_MORE_PAGE_SIZE, + offset: sortedArticles().length + }) + setIsLoadMoreButtonVisible(hasMore) + + restoreScrollPosition() + } + + onMount(async () => { + if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) { + loadMoreLayout(searchParams().layout) + } + }) + + const title = createMemo(() => { + const l = searchParams().layout + if (l === 'audio') return t('Audio') + if (l === 'video') return t('Video') + if (l === 'artworks') return t('Artworks') + return t('Literature') + }) + + const pages = createMemo(() => + splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE) + ) + + const ModeSwitcher = () => ( +
+
+
+ +
+
+
+ {`${t('Show')} `} + {t('All posts')} +
+
+
+
+ ) + + return ( +
+ +

{title()}

+ + + + + + + 5}> + + + + + + + + + {(page) => ( + <> + + + + + )} + + + +

+ +

+ + +
+ ) +} diff --git a/src/components/Layouts/MainLayout.tsx b/src/components/Wrap/MainWrap.tsx similarity index 89% rename from src/components/Layouts/MainLayout.tsx rename to src/components/Wrap/MainWrap.tsx index d2f4659d..46138afe 100644 --- a/src/components/Layouts/MainLayout.tsx +++ b/src/components/Wrap/MainWrap.tsx @@ -5,14 +5,14 @@ import { Footer } from '../Discours/Footer' import '../../styles/app.scss' import { Show } from 'solid-js' -type MainLayoutProps = { +type MainWrapProps = { headerTitle?: string children: JSX.Element isHeaderFixed?: boolean hideFooter?: boolean } -export const MainLayout = (props: MainLayoutProps) => { +export const MainWrap = (props: MainWrapProps) => { const isHeaderFixed = props.isHeaderFixed !== undefined ? props.isHeaderFixed : true return ( diff --git a/src/components/types.ts b/src/components/types.ts index f3158bb7..2a5dce56 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -5,14 +5,13 @@ import type { Author, Chat, Shout, Topic } from '../graphql/types.gen' export type PageProps = { randomTopics?: Topic[] article?: Shout - authorArticles?: Shout[] - topicArticles?: Shout[] - homeArticles?: Shout[] + shouts?: Shout[] author?: Author allAuthors?: Author[] topic?: Topic allTopics?: Topic[] searchQuery?: string + layout?: string // other types? searchResults?: Shout[] chats?: Chat[] diff --git a/src/pages/layout/[...layout].astro b/src/pages/layout/[...layout].astro index 2615cd26..555ff131 100644 --- a/src/pages/layout/[...layout].astro +++ b/src/pages/layout/[...layout].astro @@ -12,7 +12,7 @@ const LAYOUTS = ['literature', 'audio', 'video', 'artworks'] if (!LAYOUTS.includes(layout)) { return Astro.redirect('/404') } -const shouts = await apiClient.getRecentByLayout(layout) +const shouts = await apiClient.getLayoutShouts({ layout }) const { pathname, search } = Astro.url initRouter(pathname, search) --- diff --git a/src/stores/router.ts b/src/stores/router.ts index ab156ef2..06792cb5 100644 --- a/src/stores/router.ts +++ b/src/stores/router.ts @@ -25,6 +25,7 @@ export interface Routes { projects: void termsOfUse: void thanks: void + layout: 'layout' } const searchParamsStore = createSearchParams() @@ -49,7 +50,8 @@ const routerStore = createRouter( principles: '/about/principles', projects: '/about/projects', termsOfUse: '/about/terms-of-use', - thanks: '/about/thanks' + thanks: '/about/thanks', + layout: 'layout/:layout' }, { search: false, diff --git a/src/stores/zine/layouts.ts b/src/stores/zine/layouts.ts index 1e0d77bf..b19f1a33 100644 --- a/src/stores/zine/layouts.ts +++ b/src/stores/zine/layouts.ts @@ -99,22 +99,22 @@ const addSortedArticles = (articles: Shout[]) => { export const loadLayoutShouts = async ({ layout, - limit, + amount, offset }: { layout: string - limit: number + amount: number offset?: number }): Promise<{ hasMore: boolean }> => { - const newArticles = await apiClient.getLayoutShouts({ layout, limit: limit + 1, offset }) - const hasMore = newArticles.length === limit + 1 + const layoutShouts: Shout[] = await apiClient.getLayoutShouts({ layout, amount, offset }) + const hasMore = layoutShouts.length > amount if (hasMore) { - newArticles.splice(-1) + layoutShouts.splice(-1) } - addArticles(newArticles) - addSortedArticles(newArticles) + addArticles(layoutShouts) + addSortedArticles(layoutShouts) return { hasMore } } diff --git a/src/utils/apiClient.ts b/src/utils/apiClient.ts index f2792a16..7213cf58 100644 --- a/src/utils/apiClient.ts +++ b/src/utils/apiClient.ts @@ -336,7 +336,8 @@ export const apiClient = { const resp = await privateGraphQLClient.query(myChats, payload).toPromise() return resp.data.myChats }, - getLayoutShouts: async (layout = 'article', amount = 50, offset = 0) => { - const resp = await publicGraphQLClient.query(getLayout, { amount, offset, layout }) + getLayoutShouts: async ({ layout = 'article', amount = 50, offset = 0 }) => { + const resp = await publicGraphQLClient.query(getLayout, { amount, offset, layout }).toPromise() + return resp.data.shoutsByLayout } }