topic-!-routing

src/components/Views/Topic.tsx

@@ -20,15 +20,15 @@ import { FullTopic } from '../Topic/Full'
 import { Loading } from '../_shared/Loading'
 import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper'
 
-type TopicsPageSearchParams = {
+// FIXME: should be 'last_comment' and 'comments_stat' or just one?
-  by: 'comments' | '' | 'recent' | 'viewed' | 'rating' | 'commented'
+export type TopicFeedSortBy = 'comments' | '' | 'recent' | 'viewed' | 'rating' | 'commented'
-}
 
 interface Props {
   topic: Topic
   shouts: Shout[]
   topicSlug: string
   followers?: Author[]
+  selectedTab?: TopicFeedSortBy
 }
 
 export const PRERENDERED_ARTICLES_COUNT = 28
@@ -39,7 +39,7 @@ export const TopicView = (props: Props) => {
   const { feedByTopic, addFeed } = useFeed()
   const { topicEntities } = useTopics()
   const { authorsByTopic } = useAuthors()
-  const [searchParams, changeSearchParams] = useSearchParams<TopicsPageSearchParams>()
+  const [searchParams, changeSearchParams] = useSearchParams<{by: TopicFeedSortBy}>()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   const [favoriteTopArticles, setFavoriteTopArticles] = createSignal<Shout[]>([])
   const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal<Shout[]>([])

src/routes/[slug]/[...tab].tsx

@@ -5,7 +5,6 @@ import {
   Show,
   Suspense,
   createEffect,
-  createMemo,
   createSignal,
   on,
   onMount
@@ -15,13 +14,14 @@ import { Loading } from '~/components/_shared/Loading'
 import { gaIdentity } from '~/config'
 import { useLocalize } from '~/context/localize'
 import { getShout } from '~/graphql/api/public'
-import type { Author, Reaction, Shout } from '~/graphql/schema/core.gen'
+import type { Author, Reaction, Shout, Topic } from '~/graphql/schema/core.gen'
 import { initGA, loadGAScript } from '~/utils/ga'
 import { descFromBody, keywordsFromTopics } from '~/utils/meta'
 import { FullArticle } from '../../components/Article/FullArticle'
 import { PageLayout } from '../../components/_shared/PageLayout'
 import { ReactionsProvider } from '../../context/reactions'
 import AuthorPage, { AuthorPageProps } from '../author/[slug]/[...tab]'
+import TopicPage, { TopicPageProps } from '../topic/[slug]/[...tab]'
 
 const fetchShout = async (slug: string): Promise<Shout | undefined> => {
   const shoutLoader = getShout({ slug })
@@ -35,29 +35,16 @@ export const route: RouteDefinition = {
   })
 }
 
-type SlugPageProps = { article?: Shout; comments?: Reaction[]; votes?: Reaction[]; author?: Author }
+type ArticlePageProps = { article?: Shout; comments?: Reaction[]; votes?: Reaction[]; author?: Author }
-
-export default (props: RouteSectionProps<SlugPageProps>) => {
-  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<AuthorPageProps>
-    return AuthorPage(patchedProps)
-  }
 
+export const ArticlePage = (props: RouteSectionProps<ArticlePageProps>) => {
   const loc = useLocation()
   const { t } = useLocalize()
   const [scrollToComments, setScrollToComments] = createSignal<boolean>(false)
-  const article = createAsync(async () => props.data.article || (await fetchShout(props.params.slug)))
+  const data = createAsync(async () => props.data?.article || await fetchShout(props.params.slug))
-  const titleSuffix = createMemo(() => (article()?.title ? ` :: ${article()?.title || ''}` : ''))
 
   onMount(async () => {
-    if (gaIdentity && article()?.id) {
+    if (gaIdentity && data()?.id) {
       try {
         await loadGAScript(gaIdentity)
         initGA(gaIdentity)
@@ -69,7 +56,7 @@ export default (props: RouteSectionProps<SlugPageProps>) => {
 
   createEffect(
     on(
-      article,
+      data,
       (a?: Shout) => {
         if (!a?.id) return
         window?.gtag?.('event', 'page_view', {
@@ -86,7 +73,7 @@ export default (props: RouteSectionProps<SlugPageProps>) => {
     <ErrorBoundary fallback={() => <HttpStatusCode code={500} />}>
       <Suspense fallback={<Loading />}>
         <Show
-          when={article()?.id}
+          when={data()?.id}
           fallback={
             <PageLayout isHeaderFixed={false} hideFooter={true} title={t('Nothing is here')}>
               <FourOuFourView />
@@ -95,16 +82,16 @@ export default (props: RouteSectionProps<SlugPageProps>) => {
           }
         >
           <PageLayout
-            title={`${t('Discours')}${titleSuffix()}`}
+            title={`${t('Discours')}${data()?.title ? ' :: ' : ''}${data()?.title||''}`}
-            desc={descFromBody(article()?.body || '')}
+            desc={descFromBody(data()?.body || '')}
-            keywords={keywordsFromTopics(article()?.topics as { title: string }[])}
+            keywords={keywordsFromTopics(data()?.topics as { title: string }[])}
-            headerTitle={article()?.title || ''}
+            headerTitle={data()?.title || ''}
-            slug={article()?.slug}
+            slug={data()?.slug}
-            cover={article()?.cover || ''}
+            cover={data()?.cover || ''}
             scrollToComments={(value) => setScrollToComments(value)}
           >
             <ReactionsProvider>
-              <FullArticle article={article() as Shout} scrollToComments={scrollToComments()} />
+              <FullArticle article={data() as Shout} scrollToComments={scrollToComments()} />
             </ReactionsProvider>
           </PageLayout>
         </Show>
@@ -112,3 +99,33 @@ export default (props: RouteSectionProps<SlugPageProps>) => {
     </ErrorBoundary>
   )
 }
+
+type SlugPageProps = { article?: Shout; comments?: Reaction[]; votes?: Reaction[]; author?: Author, topics: Topic[] }
+
+export default (props: RouteSectionProps<SlugPageProps>) => {
+  if (props.params.slug.startsWith('@')) {
+    console.debug('[slug] starts with @, render as author page')
+    const patchedProps = {
+      ...props,
+      params: {
+        ...props.params,
+        slug: props.params.slug.slice(1, props.params.slug.length)
+      }
+    } as RouteSectionProps<AuthorPageProps>
+    return <AuthorPage {...patchedProps} />
+  }
+
+  if (props.params.slug.startsWith('!')) {
+    console.debug('[slug] starts with !, render as topic page')
+    const patchedProps = {
+      ...props,
+      params: {
+        ...props.params,
+        slug: props.params.slug.slice(1, props.params.slug.length)
+      }
+    } as RouteSectionProps<TopicPageProps>
+    return <TopicPage {...patchedProps} />
+  }
+
+  return <ArticlePage {...props} />
+}

src/routes/topic/[slug]/[...tab].tsx

@@ -2,16 +2,16 @@ 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'
-import { TopicView } from '~/components/Views/Topic'
+import { TopicFeedSortBy, TopicView } from '~/components/Views/Topic'
 import { Loading } from '~/components/_shared/Loading'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { useLocalize } from '~/context/localize'
 import { useTopics } from '~/context/topics'
 import { loadShouts, loadTopics } from '~/graphql/api/public'
-import { LoadShoutsOptions, Shout, Topic } from '~/graphql/schema/core.gen'
+import { Author, LoadShoutsOptions, Shout, Topic } from '~/graphql/schema/core.gen'
 import { getImageUrl } from '~/lib/getImageUrl'
 import { descFromBody } from '~/utils/meta'
-import { SHOUTS_PER_PAGE } from '../(main)'
+import { SHOUTS_PER_PAGE } from '../../(main)'
 
 const fetchTopicShouts = async (slug: string, offset?: number) => {
   const opts: LoadShoutsOptions = { filters: { topic: slug }, limit: SHOUTS_PER_PAGE, offset }
@@ -34,8 +34,9 @@ export const route = {
     }
   }
 }
+export type TopicPageProps = { articles?: Shout[]; topics: Topic[], authors?: Author[] }
 
-export default (props: RouteSectionProps<{ articles: Shout[]; topics: Topic[] }>) => {
+export default function TopicPage(props: RouteSectionProps<TopicPageProps>) {
   const { t } = useLocalize()
   const { addTopics } = useTopics()
   const [loadingError, setLoadingError] = createSignal(false)
@@ -104,6 +105,7 @@ export default (props: RouteSectionProps<{ articles: Shout[]; topics: Topic[] }>
             topic={topic() as Topic}
             topicSlug={props.params.slug}
             shouts={articles() as Shout[]}
+            selectedTab={props.params.tab as TopicFeedSortBy}
           />
         </PageLayout>
       </Show>