From a607a30b288d80f12722b7188d550458ea0d5c98 Mon Sep 17 00:00:00 2001 From: Igor Lobanov Date: Wed, 19 Jul 2023 21:48:24 +0200 Subject: [PATCH] client routing fix (#139) * client routing fix * lint --- src/components/Article/FullArticle.tsx | 1 - src/components/Views/Author/Author.tsx | 12 ++++-- src/components/Views/Topic.tsx | 2 +- src/pages/author.page.tsx | 51 +++++++++++++++++--------- src/pages/layoutShouts.page.tsx | 16 ++++---- src/pages/topic.page.tsx | 45 ++++++++++++++++------- vite.config.ts | 2 +- 7 files changed, 84 insertions(+), 45 deletions(-) diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index e19a1c0e..591a6707 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -118,7 +118,6 @@ export const FullArticle = (props: ArticleProps) => { actions: { loadReactionsBy } } = useReactions() - console.log('!!! props.s:', props.article.layout === 'literature') return ( <> {props.article.title} diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index 4878ac3b..cd88f6d0 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -52,7 +52,9 @@ export const AuthorView = (props: AuthorProps) => { const { sortedArticles } = useArticlesStore({ shouts: props.shouts }) const { searchParams, changeSearchParam } = useRouter() const { authorEntities } = useAuthorsStore({ authors: [props.author] }) - const author = authorEntities()[props.authorSlug] + + const author = createMemo(() => authorEntities()[props.authorSlug]) + const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) const [followers, setFollowers] = createSignal([]) const [subscriptions, setSubscriptions] = createSignal>([]) @@ -78,7 +80,7 @@ export const AuthorView = (props: AuthorProps) => { const userSubscribers = await apiClient.getAuthorFollowers({ slug: props.authorSlug }) setFollowers(userSubscribers) } catch (error) { - console.log('[getAuthorFollowers]', error) + console.error('[getAuthorFollowers]', error) } if (!searchParams().by) { changeSearchParam('by', 'rating') @@ -136,7 +138,9 @@ export const AuthorView = (props: AuthorProps) => { return (
- + + +
    @@ -218,7 +222,7 @@ export const AuthorView = (props: AuthorProps) => {
    -

    {author.about}

    +

    {author().about}

     diff --git a/src/components/Views/Topic.tsx b/src/components/Views/Topic.tsx index ec1772e8..bf22cfee 100644 --- a/src/components/Views/Topic.tsx +++ b/src/components/Views/Topic.tsx @@ -48,7 +48,7 @@ export const TopicView = (props: TopicProps) => { saveScrollPosition() const { hasMore } = await loadShouts({ - filters: { topic: topic().slug }, + filters: { topic: props.topicSlug }, limit: LOAD_MORE_PAGE_SIZE, offset: sortedArticles().length }) diff --git a/src/pages/author.page.tsx b/src/pages/author.page.tsx index 2a67d931..7346f789 100644 --- a/src/pages/author.page.tsx +++ b/src/pages/author.page.tsx @@ -1,7 +1,7 @@ import { PageLayout } from '../components/_shared/PageLayout' import { AuthorView, PRERENDERED_ARTICLES_COUNT } from '../components/Views/Author' import type { PageProps } from './types' -import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js' +import { createEffect, createMemo, createSignal, on, onCleanup, onMount, Show } from 'solid-js' import { loadShouts, resetSortedArticles } from '../stores/zine/articles' import { useRouter } from '../stores/router' import { loadAuthor } from '../stores/zine/authors' @@ -9,41 +9,58 @@ import { Loading } from '../components/_shared/Loading' import { ReactionsProvider } from '../context/reactions' export const AuthorPage = (props: PageProps) => { - const [isLoaded, setIsLoaded] = createSignal(Boolean(props.authorShouts) && Boolean(props.author)) + const { page } = useRouter() - const slug = createMemo(() => { - const { page: getPage } = useRouter() + const slug = createMemo(() => page().params['slug'] as string) - const page = getPage() + const [isLoaded, setIsLoaded] = createSignal( + Boolean(props.authorShouts) && Boolean(props.author) && props.author.slug === slug() + ) - if (page.route !== 'author') { - throw new Error('ts guard') - } - - return page.params.slug - }) + const preload = () => + Promise.all([ + loadShouts({ + filters: { author: slug(), visibility: 'community' }, + limit: PRERENDERED_ARTICLES_COUNT + }), + loadAuthor({ slug: slug() }) + ]) onMount(async () => { if (isLoaded()) { return } - await loadShouts({ - filters: { author: slug(), visibility: 'community' }, - limit: PRERENDERED_ARTICLES_COUNT - }) - await loadAuthor({ slug: slug() }) + await preload() setIsLoaded(true) }) + createEffect( + on( + () => slug(), + async () => { + setIsLoaded(false) + resetSortedArticles() + await preload() + setIsLoaded(true) + } + ) + ) + onCleanup(() => resetSortedArticles()) + const usePrerenderedData = props.author?.slug === slug() + return ( }> - + diff --git a/src/pages/layoutShouts.page.tsx b/src/pages/layoutShouts.page.tsx index d7671f5e..0d7983d3 100644 --- a/src/pages/layoutShouts.page.tsx +++ b/src/pages/layoutShouts.page.tsx @@ -27,13 +27,16 @@ export const LayoutShoutsPage = (props: PageProps) => { const { t } = useLocalize() const { page: getPage } = useRouter() - const getLayout = createMemo(() => { - const layout = getPage().params['layout'] - return layout as LayoutType - }) + const getLayout = createMemo(() => 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: props.layoutShouts + shouts: isLoaded() ? props.layoutShouts : [] }) const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) @@ -61,14 +64,13 @@ export const LayoutShoutsPage = (props: PageProps) => { splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE) ) - const isLoaded = createMemo(() => Boolean(props.layoutShouts)) - onMount(() => { if (isLoaded()) { return } loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE) + setIsLoaded(true) }) onMount(() => { diff --git a/src/pages/topic.page.tsx b/src/pages/topic.page.tsx index e67a7c11..c1f3d3c9 100644 --- a/src/pages/topic.page.tsx +++ b/src/pages/topic.page.tsx @@ -1,7 +1,7 @@ import { PageLayout } from '../components/_shared/PageLayout' import { PRERENDERED_ARTICLES_COUNT, TopicView } from '../components/Views/Topic' import type { PageProps } from './types' -import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js' +import { createEffect, createMemo, createSignal, on, onCleanup, onMount, Show } from 'solid-js' import { loadShouts, resetSortedArticles } from '../stores/zine/articles' import { useRouter } from '../stores/router' import { loadTopic } from '../stores/zine/topics' @@ -9,38 +9,55 @@ import { Loading } from '../components/_shared/Loading' import { ReactionsProvider } from '../context/reactions' export const TopicPage = (props: PageProps) => { - const [isLoaded, setIsLoaded] = createSignal(Boolean(props.topicShouts) && Boolean(props.topic)) + const { page } = useRouter() - const slug = createMemo(() => { - const { page: getPage } = useRouter() + const slug = createMemo(() => page().params['slug'] as string) - const page = getPage() + const [isLoaded, setIsLoaded] = createSignal( + Boolean(props.topicShouts) && Boolean(props.topic) && props.topic.slug === slug() + ) - if (page.route !== 'topic') { - throw new Error('ts guard') - } - - return page.params.slug - }) + const preload = () => + Promise.all([ + loadShouts({ filters: { topic: slug() }, limit: PRERENDERED_ARTICLES_COUNT, offset: 0 }), + loadTopic({ slug: slug() }) + ]) onMount(async () => { if (isLoaded()) { return } - await loadShouts({ filters: { topic: slug() }, limit: PRERENDERED_ARTICLES_COUNT, offset: 0 }) - await loadTopic({ slug: slug() }) + await preload() setIsLoaded(true) }) + createEffect( + on( + () => slug(), + async () => { + setIsLoaded(false) + resetSortedArticles() + await preload() + setIsLoaded(true) + } + ) + ) + onCleanup(() => resetSortedArticles()) + const usePrerenderedData = props.topic?.slug === slug() + return ( }> - + diff --git a/vite.config.ts b/vite.config.ts index 9b0ea874..6b917e1d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,7 +3,7 @@ import solidPlugin from 'vite-plugin-solid' import ssrPlugin from 'vite-plugin-ssr/plugin' import sassDts from 'vite-plugin-sass-dts' -export default defineConfig(({ mode }) => { +export default defineConfig(() => { return { envPrefix: 'PUBLIC_', plugins: [solidPlugin({ ssr: true }), ssrPlugin({ includeAssetsImportedByServer: true }), sassDts()],