diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index 42eef937..f270dc39 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -1,4 +1,4 @@ -import { A, useLocation, useParams } from '@solidjs/router' +import { A, useLocation } from '@solidjs/router' import { clsx } from 'clsx' import { For, Match, Show, Switch, createEffect, createMemo, createSignal, on, onMount } from 'solid-js' import { Loading } from '~/components/_shared/Loading' @@ -26,7 +26,7 @@ import { Row2 } from '../../Feed/Row2' import { Row3 } from '../../Feed/Row3' import styles from './Author.module.scss' -type Props = { +type AuthorViewProps = { authorSlug: string selectedTab: string shouts?: Shout[] @@ -37,11 +37,10 @@ type Props = { export const PRERENDERED_ARTICLES_COUNT = 12 const LOAD_MORE_PAGE_SIZE = 9 -export const AuthorView = (props: Props) => { +export const AuthorView = (props: AuthorViewProps) => { // contexts const { t } = useLocalize() const loc = useLocation() - const params = useParams() const { session } = useSession() const { query } = useGraphQL() const { sortedFeed } = useFeed() @@ -173,19 +172,19 @@ export const AuthorView = (props: Props) => {
- +
@@ -230,7 +229,7 @@ export const AuthorView = (props: Props) => {
- +
@@ -256,7 +255,7 @@ export const AuthorView = (props: Props) => {
- +
diff --git a/src/components/_shared/PageLayout.tsx b/src/components/_shared/PageLayout.tsx index e8322e30..63ed4836 100644 --- a/src/components/_shared/PageLayout.tsx +++ b/src/components/_shared/PageLayout.tsx @@ -16,6 +16,7 @@ import styles from './PageLayout.module.scss' type PageLayoutProps = { title: string desc?: string + keywords?: string headerTitle?: string slug?: string article?: Shout @@ -46,12 +47,10 @@ export const PageLayout = (props: PageLayoutProps) => { }) : imageUrl ) - const description = createMemo(() => (props.desc ? t(props.desc) : '')) + const description = createMemo(() => props.desc || (props.article && descFromBody(props.article.body))) const keypath = createMemo(() => (props.key || loc?.pathname.split('/')[0]) as keyof typeof ruKeywords) const keywords = createMemo( - () => - (props.article && descFromBody(props.article.body)) || - (lang() === 'ru' ? ruKeywords[keypath()] : enKeywords[keypath()]) + () => props.keywords || (lang() === 'ru' ? ruKeywords[keypath()] : enKeywords[keypath()]) ) const [scrollToComments, setScrollToComments] = createSignal(false) createEffect(() => props.scrollToComments?.(scrollToComments())) diff --git a/src/context/authors.tsx b/src/context/authors.tsx index c69475a8..34da77ff 100644 --- a/src/context/authors.tsx +++ b/src/context/authors.tsx @@ -92,12 +92,13 @@ export const AuthorsProvider = (props: { children: JSX.Element }) => { const loadAuthor = async (opts: QueryGet_AuthorArgs): Promise => { try { + console.debug('[context.authors] load author', opts) const fetcher = await getAuthor(opts) const author = await fetcher() if (author) addAuthor(author as Author) - console.debug('Loaded author:', author) + console.debug('[context.authors]', author) } catch (error) { - console.error('Error loading author:', error) + console.error('[context.authors] Error loading author:', error) throw error } } diff --git a/src/routes/[slug]/(author-or-post).tsx b/src/routes/[slug]/(author-or-post).tsx index b3c17e10..7b85f217 100644 --- a/src/routes/[slug]/(author-or-post).tsx +++ b/src/routes/[slug]/(author-or-post).tsx @@ -1,4 +1,4 @@ -import { RouteDefinition, RouteSectionProps, createAsync, useLocation, useParams } from '@solidjs/router' +import { RouteDefinition, RouteSectionProps, createAsync, useLocation } from '@solidjs/router' import { HttpStatusCode } from '@solidjs/start' import { ErrorBoundary, @@ -14,7 +14,7 @@ import { FourOuFourView } from '~/components/Views/FourOuFour' import { Loading } from '~/components/_shared/Loading' import { gaIdentity } from '~/config' import { useLocalize } from '~/context/localize' -import { getAuthor, getShout } from '~/graphql/api/public' +import { getShout } from '~/graphql/api/public' import type { Author, Reaction, Shout } from '~/graphql/schema/core.gen' import { initGA, loadGAScript } from '~/utils/ga' import { descFromBody, keywordsFromTopics } from '~/utils/meta' @@ -29,12 +29,6 @@ const fetchShout = async (slug: string): Promise => { return result } -const fetchAuthor = async (slug: string): Promise => { - const authorLoader = getAuthor({ slug }) - const result = await authorLoader() - return result -} - export const route: RouteDefinition = { load: async ({ params }) => ({ article: await fetchShout(params.slug) @@ -44,21 +38,23 @@ export const route: RouteDefinition = { type SlugPageProps = { article?: Shout; comments?: Reaction[]; votes?: Reaction[]; author?: Author } export default (props: RouteSectionProps) => { - const params = useParams() - if (params.slug.startsWith('@')) return AuthorPage(props as RouteSectionProps) + if (props.params.slug.startsWith('@')) { + console.debug('[slug] @ found, render as author page') + const patchedProps = { + ...props, + params: { + ...props.params, + slug: props.params.slug.slice(1, props.params.slug.length) + } + } as RouteSectionProps + return AuthorPage(patchedProps) + } const loc = useLocation() const { t } = useLocalize() const [scrollToComments, setScrollToComments] = createSignal(false) - const article = createAsync(async () => props.data.article || (await fetchShout(params.slug))) - const author = createAsync(async () => - params.slug.startsWith('@') - ? props.data.author || (await fetchAuthor(params.slug)) - : article()?.authors?.[0] - ) - const titleSuffix = createMemo( - () => (article()?.title || author()?.name) ?? ` :: ${article()?.title || author()?.name || ''}` - ) + const article = createAsync(async () => props.data.article || (await fetchShout(props.params.slug))) + const titleSuffix = createMemo(() => (article()?.title ? ` :: ${article()?.title || ''}` : '')) onMount(async () => { if (gaIdentity && article()?.id) { @@ -98,35 +94,19 @@ export default (props: RouteSectionProps) => { } > - setScrollToComments(value)} - > - - - - - } + setScrollToComments(value)} > - - - - - - + + + + diff --git a/src/routes/author/[slug]/[...tab].tsx b/src/routes/author/[slug]/[...tab].tsx index d065afc1..43f996a8 100644 --- a/src/routes/author/[slug]/[...tab].tsx +++ b/src/routes/author/[slug]/[...tab].tsx @@ -1,4 +1,4 @@ -import { RouteSectionProps, createAsync, useParams } from '@solidjs/router' +import { RouteSectionProps, createAsync } from '@solidjs/router' import { ErrorBoundary, Suspense, createEffect, createMemo } from 'solid-js' import { AuthorView } from '~/components/Views/Author' import { FourOuFourView } from '~/components/Views/FourOuFour' @@ -50,13 +50,12 @@ export const route = { export type AuthorPageProps = { articles?: Shout[]; author?: Author; topics?: Topic[] } export const AuthorPage = (props: RouteSectionProps) => { - const params = useParams() const { addAuthor } = useAuthors() const articles = createAsync( - async () => props.data.articles || (await fetchAuthorShouts(params.slug)) || [] + async () => props.data.articles || (await fetchAuthorShouts(props.params.slug)) || [] ) const author = createAsync(async () => { - const a = props.data.author || (await fetchAuthor(params.slug)) + const a = props.data.author || (await fetchAuthor(props.params.slug)) a && addAuthor(a) return a }) @@ -81,7 +80,9 @@ export const AuthorPage = (props: RouteSectionProps) => { : getImageUrl('production/image/logo_image.png') ) - const selectedTab = createMemo(() => (params.tab in ['followers', 'shouts'] ? params.tab : 'name')) + const selectedTab = createMemo(() => + props.params.tab in ['followers', 'shouts'] ? props.params.tab : 'name' + ) return ( }> }> @@ -96,7 +97,7 @@ export const AuthorPage = (props: RouteSectionProps) => { diff --git a/src/routes/edit/[id]/(draft).tsx b/src/routes/edit/[id]/(draft).tsx index 3b82b3db..d4ae45e8 100644 --- a/src/routes/edit/[id]/(draft).tsx +++ b/src/routes/edit/[id]/(draft).tsx @@ -1,4 +1,4 @@ -import { redirect, useParams } from '@solidjs/router' +import { RouteSectionProps, redirect } from '@solidjs/router' import { createEffect, createMemo, createSignal, lazy, on } from 'solid-js' import { AuthGuard } from '~/components/AuthGuard' import { PageLayout } from '~/components/_shared/PageLayout' @@ -27,7 +27,7 @@ export const getContentTypeTitle = (layout: LayoutType) => { } } -export default () => { +export default (props: RouteSectionProps) => { const { t } = useLocalize() const { session } = useSession() const snackbar = useSnackbar() @@ -38,13 +38,12 @@ export default () => { redirect('/edit') // all drafts page } const [shout, setShout] = createSignal() - const params = useParams() const client = useGraphQL() createEffect(on(session, (s) => s?.access_token && loadDraft(), { defer: true })) const loadDraft = async () => { - const result = await client.query(getShoutDraft, { shout_id: params.id }).toPromise() + const result = await client.query(getShoutDraft, { shout_id: props.params.id }).toPromise() if (result) { const { shout: loadedShout, error } = result.data.get_my_shout if (error) { diff --git a/src/routes/edit/[id]/settings.tsx b/src/routes/edit/[id]/settings.tsx index ef664afe..4f0c4ee0 100644 --- a/src/routes/edit/[id]/settings.tsx +++ b/src/routes/edit/[id]/settings.tsx @@ -1,4 +1,4 @@ -import { useParams } from '@solidjs/router' +import { RouteSectionProps } from '@solidjs/router' import { createEffect, createSignal, on } from 'solid-js' import { AuthGuard } from '~/components/AuthGuard' import EditSettingsView from '~/components/Views/EditView/EditSettingsView' @@ -9,15 +9,14 @@ import { useSession } from '~/context/session' import getShoutDraft from '~/graphql/query/core/article-my' import { Shout } from '~/graphql/schema/core.gen' -export default () => { +export default (props: RouteSectionProps) => { const { t } = useLocalize() - const params = useParams() const client = useGraphQL() const { session } = useSession() createEffect(on(session, (s) => s?.access_token && loadDraft(), { defer: true })) const [shout, setShout] = createSignal() const loadDraft = async () => { - const result = await client.query(getShoutDraft, { shout_id: params.id }).toPromise() + const result = await client.query(getShoutDraft, { shout_id: props.params.id }).toPromise() if (result) { const { shout: loadedShout, error } = result.data.get_my_shout if (error) throw new Error(error) diff --git a/src/routes/expo/[layout].tsx b/src/routes/expo/[layout].tsx index 427c7a2b..7a386a80 100644 --- a/src/routes/expo/[layout].tsx +++ b/src/routes/expo/[layout].tsx @@ -1,4 +1,4 @@ -import { Params, RouteSectionProps, createAsync, useParams } from '@solidjs/router' +import { Params, RouteSectionProps, createAsync } from '@solidjs/router' import { createEffect, createMemo, on } from 'solid-js' import { TopicsNav } from '~/components/Nav/TopicsNav' import { Expo } from '~/components/Views/Expo' @@ -28,15 +28,14 @@ export const route = { export default (props: RouteSectionProps) => { const { t } = useLocalize() - const params = useParams() const shouts = createAsync( async () => props.data || (await fetchExpoShouts( - params.layout ? [params.layout] : ['audio', 'literature', 'article', 'video', 'image'] + props.params.layout ? [props.params.layout] : ['audio', 'literature', 'article', 'video', 'image'] )) ) - const layout = createMemo(() => params.layout) + const layout = createMemo(() => props.params.layout) const title = createMemo(() => { switch (layout()) { case 'audio': { diff --git a/src/routes/topic/[slug].tsx b/src/routes/topic/[slug].tsx index f30be97b..ebc22868 100644 --- a/src/routes/topic/[slug].tsx +++ b/src/routes/topic/[slug].tsx @@ -1,4 +1,4 @@ -import { RouteSectionProps, createAsync, useParams } from '@solidjs/router' +import { RouteSectionProps, createAsync } from '@solidjs/router' import { HttpStatusCode } from '@solidjs/start' import { Show, Suspense, createEffect, createMemo, createSignal } from 'solid-js' import { FourOuFourView } from '~/components/Views/FourOuFour' @@ -37,7 +37,6 @@ export const route = { export default (props: RouteSectionProps<{ articles: Shout[]; topics: Topic[] }>) => { const { t } = useLocalize() - const params = useParams() const { addTopics } = useTopics() const [loadingError, setLoadingError] = createSignal(false) @@ -46,7 +45,7 @@ export default (props: RouteSectionProps<{ articles: Shout[]; topics: Topic[] }> const ttt: Topic[] = props.data.topics || (await fetchAllTopics()) || [] addTopics(ttt) console.debug('[route.topic] all topics loaded') - const t = ttt.find((x) => x.slug === params.slug) + const t = ttt.find((x) => x.slug === props.params.slug) return t } catch (_error) { setLoadingError(true) @@ -55,7 +54,7 @@ export default (props: RouteSectionProps<{ articles: Shout[]; topics: Topic[] }> }) const articles = createAsync( - async () => props.data.articles || (await fetchTopicShouts(params.slug)) || [] + async () => props.data.articles || (await fetchTopicShouts(props.params.slug)) || [] ) const title = createMemo(() => `${t('Discours')} :: ${topic()?.title || ''}`)