feat: posts sorting and ordering, refactor fab

package.json

@@ -41,6 +41,7 @@
     "@mx-space/api-client": "1.5.1",
     "@radix-ui/react-dialog": "1.0.4",
     "@sentry/nextjs": "7.64.0",
+    "@radix-ui/react-select": "1.2.2",
     "@sentry/webpack-plugin": "2.6.2",
     "@tanstack/react-query": "4.32.6",
     "@tanstack/react-query-devtools": "4.32.6",
@@ -119,4 +120,4 @@
     "budgetPercentIncreaseRed": 20,
     "showDetails": true
   }
-}
+}

src/app/posts/page.tsx

@@ -1,8 +1,9 @@
 import { NormalContainer } from '~/components/layout/container/Normal'
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
+import { PostsSortingFab } from '~/components/widgets/post/fab/PostsSortingFab'
+import { PostTagsFAB } from '~/components/widgets/post/fab/PostTagsFAB'
 import { PostItem } from '~/components/widgets/post/PostItem'
 import { PostPagination } from '~/components/widgets/post/PostPagination'
-import { PostTagsFAB } from '~/components/widgets/post/PostTagsFAB'
 import { NothingFound } from '~/components/widgets/shared/NothingFound'
 import { SearchFAB } from '~/components/widgets/shared/SearchFAB'
 import { apiClient } from '~/lib/request'
@@ -11,6 +12,8 @@ interface Props {
   searchParams: {
     page?: string
     size?: string
+    sortBy?: string
+    orderBy?: string
   }
 }
 
@@ -19,11 +22,14 @@ export const metadata = {
 }
 
 export default async (props: Props) => {
-  const { page, size } = props?.searchParams || {}
+  const { page, size, orderBy, sortBy } = props?.searchParams || {}
   const nextPage = page ? parseInt(page) : 1
   const nextSize = size ? parseInt(size) : 10
 
-  const { $serialized } = await apiClient.post.getList(nextPage, nextSize)
+  const { $serialized } = await apiClient.post.getList(nextPage, nextSize, {
+    sortBy: sortBy as any,
+    sortOrder: orderBy === 'desc' ? -1 : 1,
+  })
   const { data, pagination } = $serialized
 
   if (!data?.length) {
@@ -47,8 +53,9 @@ export default async (props: Props) => {
       </ul>
 
       <PostPagination pagination={pagination} />
-      <PostTagsFAB />
 
+      <PostsSortingFab />
+      <PostTagsFAB />
       <SearchFAB />
     </NormalContainer>
   )

src/components/layout/header/config.ts

@@ -31,7 +31,7 @@ export const headerMenuConfig: IHeaderMenu[] = [
     subMenu: [],
   },
   {
-    title: '水文',
+    title: '文稿',
     path: '/posts',
     type: 'Post',
     subMenu: [],

src/components/layout/root/Root.tsx

@@ -1,3 +1,4 @@
+import { ClientOnly } from '~/components/common/ClientOnly'
 import { BackToTopFAB, FABContainer } from '~/components/ui/fab'
 
 import { Content } from '../content/Content'
@@ -11,9 +12,11 @@ export const Root: Component = ({ children }) => {
       <Content>{children}</Content>
 
       <Footer />
-      <FABContainer>
-        <BackToTopFAB />
-      </FABContainer>
+      <ClientOnly>
+        <FABContainer>
+          <BackToTopFAB />
+        </FABContainer>
+      </ClientOnly>
     </>
   )
 }