From 87b6e44eb212b363ecfb7b34db014a58efc2fac0 Mon Sep 17 00:00:00 2001 From: Igor Lobanov Date: Thu, 21 Dec 2023 13:48:13 +0100 Subject: [PATCH] topic navigation fix (#346) * topic navigation fix * topic loading state --- src/components/Views/Topic.tsx | 176 +++++++++--------- .../_shared/SolidSwiper/ArticleCardSwiper.tsx | 119 ++++++------ src/pages/topic.page.server.ts | 8 +- src/pages/topic.page.tsx | 21 ++- 4 files changed, 163 insertions(+), 161 deletions(-) diff --git a/src/components/Views/Topic.tsx b/src/components/Views/Topic.tsx index b830a1a6..d8b1f592 100644 --- a/src/components/Views/Topic.tsx +++ b/src/components/Views/Topic.tsx @@ -2,7 +2,7 @@ import type { Shout, Topic } from '../../graphql/types.gen' import { Meta } from '@solidjs/meta' import { clsx } from 'clsx' -import { For, Show, createMemo, onMount, createSignal, createEffect } from 'solid-js' +import { For, Show, createMemo, onMount, createSignal } from 'solid-js' import { useLocalize } from '../../context/localize' import { useRouter } from '../../stores/router' @@ -14,7 +14,6 @@ import { getImageUrl } from '../../utils/getImageUrl' import { getDescription } from '../../utils/meta' import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll' import { splitToPages } from '../../utils/splitToPages' -import { Loading } from '../_shared/Loading' import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper' import { Beside } from '../Feed/Beside' import { Row1 } from '../Feed/Row1' @@ -32,8 +31,6 @@ interface Props { topic: Topic shouts: Shout[] topicSlug: string - isLoaded: boolean - title: (val: string) => string } export const PRERENDERED_ARTICLES_COUNT = 28 @@ -88,7 +85,6 @@ export const TopicView = (props: Props) => { ) const pageTitle = `#${capitalize(topic().title, true)}` - createEffect(() => props.title(pageTitle)) const ogImage = topic().pic ? getImageUrl(topic().pic, { width: 1200 }) @@ -101,7 +97,7 @@ export const TopicView = (props: Props) => { return (
- + @@ -110,102 +106,98 @@ export const TopicView = (props: Props) => { - }> - - -
-
-
-
    -
  • - -
    • - {/*TODO: server sort*/} - {/*
  • */} - {/* */} - {/*
    • */} - {/*
  • */} - {/* */} - {/*
    • */} - {/*
  • */} - {/* */} - {/*
    • */} -
-
-
-
- {`${t('Show')} `} - {t('All posts')} -
-
+ +
+
+
+
    +
  • + +
    • + {/*TODO: server sort*/} + {/*
  • */} + {/* */} + {/*
    • */} + {/*
  • */} + {/* */} + {/*
    • */} + {/*
  • */} + {/* */} + {/*
    • */} +
+
+
+
+ {`${t('Show')} `} + {t('All posts')}
+
+
- - + + - + - + - + - - + + - 15}> - - - - + 15}> + + + + - - {(page) => ( - <> - - - - - )} - + + {(page) => ( + <> + + + + + )} + - -

- -

- - + +

+ +

) diff --git a/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx b/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx index 9df151cf..df4d44be 100644 --- a/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx +++ b/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx @@ -5,6 +5,7 @@ import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper' import { Shout } from '../../../graphql/types.gen' import { ArticleCard } from '../../Feed/ArticleCard' import { Icon } from '../Icon' +import { ShowOnlyOnClient } from '../ShowOnlyOnClient' import { SwiperRef } from './swiper' @@ -25,65 +26,67 @@ export const ArticleCardSwiper = (props: Props) => { }) return ( -
- -

{props.title}

- -
- 0}> -
- (mainSwipeRef.current = el)} - centered-slides={true} - observer={true} - space-between={10} - breakpoints={{ - 576: { spaceBetween: 20, slidesPerView: 1.5 }, - 992: { spaceBetween: 52, slidesPerView: 1.5 }, - }} - round-lengths={true} - loop={true} - speed={800} - autoplay={{ - disableOnInteraction: false, - delay: 6000, - pauseOnMouseEnter: true, - }} - > - - {(slide, index) => ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - - - - )} - - -
mainSwipeRef.current.swiper.slidePrev()} - > - -
-
mainSwipeRef.current.swiper.slideNext()} - > - -
-
+ +
+ +

{props.title}

 +
+ 0}> +
+ (mainSwipeRef.current = el)} + centered-slides={true} + observer={true} + space-between={10} + breakpoints={{ + 576: { spaceBetween: 20, slidesPerView: 1.5 }, + 992: { spaceBetween: 52, slidesPerView: 1.5 }, + }} + round-lengths={true} + loop={true} + speed={800} + autoplay={{ + disableOnInteraction: false, + delay: 6000, + pauseOnMouseEnter: true, + }} + > + + {(slide, index) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + + + + )} + + +
mainSwipeRef.current.swiper.slidePrev()} + > + +
+
mainSwipeRef.current.swiper.slideNext()} + > + +
+
+ +
-
+ ) } diff --git a/src/pages/topic.page.server.ts b/src/pages/topic.page.server.ts index 30cb8bae..82a35137 100644 --- a/src/pages/topic.page.server.ts +++ b/src/pages/topic.page.server.ts @@ -3,6 +3,7 @@ import type { PageContext } from '../renderer/types' import { render } from 'vike/abort' +import { PRERENDERED_ARTICLES_COUNT } from '../components/Views/Topic' import { apiClient } from '../utils/apiClient' export const onBeforeRender = async (pageContext: PageContext) => { @@ -14,7 +15,12 @@ export const onBeforeRender = async (pageContext: PageContext) => { throw render(404) } - const pageProps: PageProps = { topic, seo: { title: topic.title } } + const topicShouts = await apiClient.getShouts({ + filters: { topic: topic.slug }, + limit: PRERENDERED_ARTICLES_COUNT, + }) + + const pageProps: PageProps = { topic, topicShouts, seo: { title: topic.title } } return { pageContext: { diff --git a/src/pages/topic.page.tsx b/src/pages/topic.page.tsx index 574eb12a..573a3605 100644 --- a/src/pages/topic.page.tsx +++ b/src/pages/topic.page.tsx @@ -1,7 +1,8 @@ import type { PageProps } from './types' -import { createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js' +import { createEffect, createMemo, createSignal, on, onCleanup, onMount, Show } from 'solid-js' +import { Loading } from '../components/_shared/Loading' import { PageLayout } from '../components/_shared/PageLayout' import { PRERENDERED_ARTICLES_COUNT, TopicView } from '../components/Views/Topic' import { ReactionsProvider } from '../context/reactions' @@ -16,7 +17,7 @@ export const TopicPage = (props: PageProps) => { const [isLoaded, setIsLoaded] = createSignal( Boolean(props.topicShouts) && Boolean(props.topic) && props.topic.slug === slug(), ) - const [pageTitle, setPageTitle] = createSignal() + const preload = () => Promise.all([ loadShouts({ filters: { topic: slug() }, limit: PRERENDERED_ARTICLES_COUNT, offset: 0 }), @@ -51,15 +52,15 @@ export const TopicPage = (props: PageProps) => { const usePrerenderedData = props.topic?.slug === slug() return ( - + - setPageTitle(title)} - isLoaded={isLoaded()} - topic={usePrerenderedData ? props.topic : null} - shouts={usePrerenderedData ? props.topicShouts : null} - topicSlug={slug()} - /> + }> + + )