refactor(ssr-qeuries): use hooks for get params

src/app/providers/RootStoreProvider.tsx

@@ -42,41 +42,38 @@ const RootStoreWrapper: FC<TProps> = ({ children, token }) => {
   // console.log('## pathname: ', pathname)
   const activeThread = parseThread(pathname)
   // console.log('## activeThread: ', activeThread)
-  // console.log('## communitySlug: ', communitySlug)
 
   const skip = !communitySlug
 
   const { sesstion } = useSession()
-
-  // const [result] = useQueryCommunity('home', { skip: pathname === '/home' })
-  const { community } = useCommunity(communitySlug, { skip, userHasLogin })
+  const { community } = useCommunity({ skip, userHasLogin })
 
   const { pagedPosts } = usePagedPosts({
     skip: !(activeThread === THREAD.POST && !params.id),
     userHasLogin,
   })
 
-  const { post } = usePost(communitySlug, params.id as string, {
+  const { pagedChangelogs } = usePagedChangelogs({
+    skip: activeThread !== THREAD.CHANGELOG,
+    userHasLogin,
+  })
+
+  const { post } = usePost({
     skip: !(activeThread === THREAD.POST && params.id),
     userHasLogin,
   })
 
-  const { changelog } = useChangelog(communitySlug, params.id as string, {
+  const { changelog } = useChangelog({
     skip: !(activeThread === THREAD.CHANGELOG && params.id),
     userHasLogin,
   })
 
-  const { groupedKanbanPosts } = useGroupedKanbanPosts(communitySlug, {
+  const { groupedKanbanPosts } = useGroupedKanbanPosts({
     skip: activeThread !== THREAD.KANBAN,
     userHasLogin,
   })
 
-  const { pagedChangelogs } = usePagedChangelogs(
-    { community: communitySlug },
-    { skip: activeThread !== THREAD.CHANGELOG, userHasLogin },
-  )
-
-  const { tags } = useTags({ community: communitySlug }, { skip, userHasLogin })
+  const { tags } = useTags({ skip, userHasLogin })
 
   const wallpaper = !skip ? parseWallpaper(community) : {}
   const dashboard = !skip ? parseDashboard(community, pathname) : {}
@@ -89,10 +86,6 @@ const RootStoreWrapper: FC<TProps> = ({ children, token }) => {
       ...groupedKanbanPosts,
     },
     kanbanThread: groupedKanbanPosts,
-    // articlesThread: {
-    //   pagedPosts,
-    //   resState: TYPE.RES_STATE.DONE,
-    // },
     tagsBar: {
       tags,
     },

src/app/queries/helper.ts

@@ -1,4 +1,7 @@
-import { reject, includes, values, isEmpty } from 'ramda'
+import { useMemo } from 'react'
+
+import { reject, includes, values, isEmpty, mergeRight } from 'ramda'
+import { useParams, useSearchParams } from 'next/navigation'
 
 import type {
   TCommunity,
@@ -12,6 +15,8 @@ import type {
   TDashboardBroadcastRoute,
   TDashboardLayoutRoute,
   TDashboardAliasRoute,
+  TPagedArticlesParams,
+  TArticleParams,
 } from '@/spec'
 import { BUILDIN_ALIAS, HCN } from '@/constant/name'
 import { THREAD } from '@/constant/thread'
@@ -27,6 +32,7 @@ import {
 import { removeEmptyValuesFromObject } from '@/helper'
 
 import type { TGQSSRResult, TParsedWallpaper, TDashboardTab } from './spec'
+import { ARTICLES_FILTER } from './constant'
 
 export const commonRes = (result): TGQSSRResult => {
   return {
@@ -36,6 +42,46 @@ export const commonRes = (result): TGQSSRResult => {
   }
 }
 
+export const useCommunityParam = (): string => {
+  const params = useParams()
+
+  return useMemo(() => parseCommunity(params.community as string), [params])
+}
+
+/**
+ * common url filter logic for all paged articles queries
+ */
+export const usePagedArticlesParams = (): TPagedArticlesParams => {
+  const searchParams = useSearchParams()
+  const community = useCommunityParam()
+
+  const filter = {
+    community,
+    page: Number(searchParams.get('page')) || 1,
+    size: 20,
+  } as TPagedArticlesParams
+
+  const tagParams = searchParams.get('tag')
+
+  if (tagParams) {
+    filter.articleTag = tagParams
+  }
+
+  return mergeRight(ARTICLES_FILTER, filter)
+}
+
+/**
+ * common url filter logic for all paged articles queries
+ */
+export const useArticleParams = (): TArticleParams => {
+  const params = useParams()
+
+  return {
+    community: useMemo(() => parseCommunity(params.community as string), [params]),
+    id: params.id as string,
+  }
+}
+
 export const parseCommunity = (communityPath: string): string => {
   if (!communityPath) return HCN
   if (communityPath === '_next') return null

src/app/queries/index.ts

@@ -3,12 +3,8 @@
  * https://formidable.com/open-source/urql/docs/api/urql/#usequery
  * https://formidable.com/open-source/urql/docs/api/core/#operationresult
  */
-import { useMemo } from 'react'
 import { useQuery } from '@urql/next'
-import { useParams, useSearchParams } from 'next/navigation'
-import { mergeRight } from 'ramda'
 
-import type { TID, TPagedArticlesFilter } from '@/spec'
 import { P } from '@/schemas'
 import { DEFAULT_THEME } from '@/config'
 
@@ -24,9 +20,9 @@ import type {
   TSSRQueryOpt,
   TTagsFilter,
 } from './spec'
-import { GQ_OPTION, TAGS_FILTER, ARTICLES_FILTER } from './constant'
+import { GQ_OPTION, TAGS_FILTER } from './constant'
 
-import { commonRes, parseCommunity } from './helper'
+import { commonRes, usePagedArticlesParams, useArticleParams, useCommunityParam } from './helper'
 
 export { parseCommunity, parseThread, parseWallpaper, parseDashboard } from './helper'
 
@@ -55,8 +51,9 @@ export const useSession = (): TSessionRes => {
   }
 }
 
-export const useCommunity = (slug: string, _opt: TSSRQueryOpt = {}): TCommunityRes => {
+export const useCommunity = (_opt: TSSRQueryOpt = {}): TCommunityRes => {
   const opt = { ...GQ_OPTION, ..._opt }
+  const slug = useCommunityParam()
 
   const [result] = useQuery({
     query: P.community,
@@ -74,9 +71,10 @@ export const useCommunity = (slug: string, _opt: TSSRQueryOpt = {}): TCommunityR
   }
 }
 
-export const useTags = (filter: TTagsFilter = TAGS_FILTER, _opt: TSSRQueryOpt = {}): TTagsRes => {
+export const useTags = (_opt: TSSRQueryOpt = {}): TTagsRes => {
   const opt = { ...GQ_OPTION, ..._opt }
-  const { community, thread } = { ...TAGS_FILTER, ...filter }
+  const community = useCommunityParam()
+  const { thread } = TAGS_FILTER
 
   const [result] = useQuery({
     query: P.pagedArticleTags,
@@ -97,27 +95,9 @@ export const useTags = (filter: TTagsFilter = TAGS_FILTER, _opt: TSSRQueryOpt =
   }
 }
 
-// TODO: extact articleQueryParams
-// TODO: common func to jadge skip for page/community change
 export const usePagedPosts = (_opt: TSSRQueryOpt = {}): TPagedPostsRes => {
   const opt = { ...GQ_OPTION, ..._opt }
-
-  const params = useParams()
-  const searchParams = useSearchParams()
-  const _community = useMemo(() => parseCommunity(params.community as string), [params])
-
-  const tagParams = searchParams.get('tag')
-
-  const _filter = {
-    community: _community,
-    page: Number(searchParams.get('page')) || 1,
-  } as TPagedArticlesFilter
-
-  if (tagParams) {
-    _filter.articleTag = tagParams
-  }
-
-  const filter = mergeRight(ARTICLES_FILTER, _filter)
+  const filter = usePagedArticlesParams()
 
   const [result] = useQuery({
     query: P.pagedPosts,
@@ -135,14 +115,14 @@ export const usePagedPosts = (_opt: TSSRQueryOpt = {}): TPagedPostsRes => {
   }
 }
 
-export const usePost = (community: string, id: TID, _opt: TSSRQueryOpt = {}): TPostRes => {
+export const usePagedChangelogs = (_opt: TSSRQueryOpt = {}): TPagedChangelogsRes => {
   const opt = { ...GQ_OPTION, ..._opt }
+  const filter = usePagedArticlesParams()
 
   const [result] = useQuery({
-    query: P.post,
+    query: P.pagedChangelogs,
     variables: {
-      community,
-      id,
+      filter,
       userHasLogin: opt.userHasLogin,
     },
     pause: opt.skip,
@@ -151,43 +131,41 @@ export const usePost = (community: string, id: TID, _opt: TSSRQueryOpt = {}): TP
 
   return {
     ...commonRes(result),
-    post: result.data?.post,
+    pagedChangelogs: result.data?.pagedChangelogs,
   }
 }
 
-export const useGroupedKanbanPosts = (
-  community: string,
-  _opt: TSSRQueryOpt = {},
-): TGroupedKanbanPostsRes => {
+export const usePost = (_opt: TSSRQueryOpt = {}): TPostRes => {
   const opt = { ...GQ_OPTION, ..._opt }
 
+  const { community, id } = useArticleParams()
+
   const [result] = useQuery({
-    query: P.groupedKanbanPosts,
+    query: P.post,
     variables: {
       community,
+      id,
+      userHasLogin: opt.userHasLogin,
     },
     pause: opt.skip,
     requestPolicy: opt.requestPolicy,
   })
 
   return {
     ...commonRes(result),
-    groupedKanbanPosts: result.data?.groupedKanbanPosts,
+    post: result.data?.post,
   }
 }
 
-export const usePagedChangelogs = (
-  filter: TPagedArticlesFilter = ARTICLES_FILTER,
-  _opt: TSSRQueryOpt = {},
-): TPagedChangelogsRes => {
+export const useChangelog = (_opt: TSSRQueryOpt = {}): TChangelogRes => {
   const opt = { ...GQ_OPTION, ..._opt }
-
-  const { page, size, community } = { ...ARTICLES_FILTER, ...filter }
+  const { community, id } = useArticleParams()
 
   const [result] = useQuery({
-    query: P.pagedChangelogs,
+    query: P.changelog,
     variables: {
-      filter: { page, size, community },
+      community,
+      id,
       userHasLogin: opt.userHasLogin,
     },
     pause: opt.skip,
@@ -196,30 +174,25 @@ export const usePagedChangelogs = (
 
   return {
     ...commonRes(result),
-    pagedChangelogs: result.data?.pagedChangelogs,
+    changelog: result.data?.changelog,
   }
 }
 
-export const useChangelog = (
-  community: string,
-  id: TID,
-  _opt: TSSRQueryOpt = {},
-): TChangelogRes => {
+export const useGroupedKanbanPosts = (_opt: TSSRQueryOpt = {}): TGroupedKanbanPostsRes => {
+  const community = useCommunityParam()
   const opt = { ...GQ_OPTION, ..._opt }
 
   const [result] = useQuery({
-    query: P.changelog,
+    query: P.groupedKanbanPosts,
     variables: {
       community,
-      id,
-      userHasLogin: opt.userHasLogin,
     },
     pause: opt.skip,
     requestPolicy: opt.requestPolicy,
   })
 
   return {
     ...commonRes(result),
-    changelog: result.data?.changelog,
+    groupedKanbanPosts: result.data?.groupedKanbanPosts,
   }
 }

src/containers/Mushroom/logic.ts

@@ -7,7 +7,7 @@ import type {
   TGlowPosition,
   TArticle,
   TResState,
-  TPagedArticlesFilter,
+  TPagedArticlesParams,
 } from '@/spec'
 import METRIC from '@/constant/metric'
 import EVENT from '@/constant/event'
@@ -79,7 +79,7 @@ const loadArticles = (page = 1): void => {
   store.updateResState(TYPE.RES_STATE.LOADING as TResState)
   scrollToTop()
 
-  const filter = { page, size: 20, community: curCommunity.slug } as TPagedArticlesFilter
+  const filter = { page, size: 20, community: curCommunity.slug } as TPagedArticlesParams
 
   if (activeTag?.slug) {
     filter.articleTag = activeTag?.slug

src/spec/article.d.ts

@@ -234,9 +234,14 @@ export type TFAQSection = {
   index: number
 }
 
-export type TPagedArticlesFilter = {
+export type TPagedArticlesParams = {
   page?: number
   size?: number
   community?: string
   articleTag?: string
 }
+
+export type TArticleParams = {
+  community: string
+  id: string
+}

src/spec/index.ts

@@ -151,7 +151,8 @@ export type {
   TArticleSort,
   TPagedPosts,
   TPagedChangelogs,
-  TPagedArticlesFilter,
+  TPagedArticlesParams,
+  TArticleParams,
 } from './article'
 
 export type {