fix: 重构服务端渲染

besscroft · Apr 11, 2024 · 5cd62e7 · 5cd62e7
1 parent 80b606d
commit 5cd62e7
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 200 deletions.
diff --git a/app/admin/list/page.tsx b/app/admin/list/page.tsx
@@ -1,100 +1,16 @@
-'use client'
-
-import React from 'react'
 import { Card, CardHeader } from '@nextui-org/card'
-import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react'
-import { Table } from 'antd'
-import type { TableProps } from 'antd'
-import useSWR from 'swr'
-import { fetcher } from '~/utils/fetcher'
-import { toast } from 'sonner'
-import { DeleteDocumentBulkIcon, EditDocumentBulkIcon, SendFilledIcon, LinkIcon } from '@nextui-org/shared-icons'
-
-interface DataType {
-  id: number;
-  tag: string;
-  url: string;
-  exif: any;
-  rating: number;
-  detail: string;
-  show: number;
-  sort: number;
-}
-
-const iconClasses = 'text-xl text-default-500 pointer-events-none flex-shrink-0'
+import { fetchImagesList } from '~/server/lib/query'
+import RefreshButton from '~/components/RefreshButton'
 
-const columns: TableProps<DataType>['columns'] = [
-  {
-    title: '标签',
-    dataIndex: 'tag',
-  },
-  {
-    title: '评分',
-    dataIndex: 'rating',
-  },
-  {
-    title: '说明',
-    dataIndex: 'detail',
-  },
-  {
-    title: '显示',
-    dataIndex: 'show',
-  },
-  {
-    title: '排序',
-    dataIndex: 'sort',
-  },
-  {
-    title: '操作',
-    key: 'action',
-    render: (_, record) => (
-      <Dropdown>
-        <DropdownTrigger>
-          <Button
-            isIconOnly
-            variant="bordered"
-          >
-            <SendFilledIcon />
-          </Button>
-        </DropdownTrigger>
-        <DropdownMenu variant="faded" aria-label="图片操作选项卡">
-          <DropdownItem
-            key="edit"
-            description="编辑图片信息"
-            startContent={<EditDocumentBulkIcon className={iconClasses} />}
-            onClick={() => toast.warning('还没写！')}
-          >
-            编辑
-          </DropdownItem>
-          <DropdownItem
-            key="edit"
-            description="同步图片地址"
-            startContent={<LinkIcon className={iconClasses} />}
-            onClick={() => toast.warning('还没写！')}
-          >
-            同步
-          </DropdownItem>
-          <DropdownItem
-            key="delete"
-            description="删除图片"
-            startContent={<DeleteDocumentBulkIcon className={iconClasses + ' text-red-500'} />}
-            onClick={() => toast.warning('还没写！')}
-          >
-            删除
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    ),
-  },
-];
-
-export default function List() {
-  const { data, error, isLoading, isValidating, mutate  } = useSWR('/api/get-images', fetcher)
-
-  if (error) {
-    toast.error('数据获取失败！')
+export default async function List() {
+  const getData = async () => {
+    'use server'
+    const data = await fetchImagesList()
+    return data
   }
 
+  const data = await getData();
+
   return (
     <div className="flex flex-col space-y-2 h-full flex-1">
       <Card>
@@ -104,23 +20,9 @@ export default function List() {
               <h4 className="text-small font-semibold leading-none text-default-600 select-none">标签管理</h4>
             </div>
           </div>
-          <Button
-            color="primary"
-            radius="full"
-            size="sm"
-            isLoading={isValidating}
-            onClick={() => mutate()}
-          >
-            刷新
-          </Button>
+          <RefreshButton handleClick={getData} />
         </CardHeader>
       </Card>
-      <Table
-        bordered
-        columns={columns}
-        dataSource={data}
-        loading={isValidating}
-      />
     </div>
   )
 }
diff --git a/app/admin/tag/page.tsx b/app/admin/tag/page.tsx
@@ -1,83 +1,15 @@
-'use client'
-
-import React from 'react'
+import { fetchTagsList } from '~/server/lib/query'
+import TagList from '~/components/TagList'
 import { Card, CardHeader } from '@nextui-org/card'
-import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react'
-import { Table } from 'antd'
-import type { TableProps } from 'antd'
-import useSWR from 'swr'
-import { fetcher } from '~/utils/fetcher'
-import { toast } from 'sonner'
-import { DeleteDocumentBulkIcon, EditDocumentBulkIcon, SendFilledIcon } from '@nextui-org/shared-icons'
-
-interface DataType {
-  id: number;
-  name: string;
-  tag_value: string;
-  detail: string;
-  show: number;
-}
-
-const iconClasses = 'text-xl text-default-500 pointer-events-none flex-shrink-0'
-
-const columns: TableProps<DataType>['columns'] = [
-  {
-    title: '标签名称',
-    dataIndex: 'name',
-  },
-  {
-    title: '标签值',
-    dataIndex: 'tag_value',
-  },
-  {
-    title: '说明',
-    dataIndex: 'detail',
-  },
-  {
-    title: '显示',
-    dataIndex: 'show',
-  },
-  {
-    title: '操作',
-    key: 'action',
-    render: (_, record) => (
-      <Dropdown>
-        <DropdownTrigger>
-          <Button
-            isIconOnly
-            variant="bordered"
-          >
-            <SendFilledIcon />
-          </Button>
-        </DropdownTrigger>
-        <DropdownMenu variant="faded" aria-label="标签操作选项卡">
-          <DropdownItem
-            key="edit"
-            description="编辑标签信息"
-            startContent={<EditDocumentBulkIcon className={iconClasses} />}
-            onClick={() => toast.warning('还没写！')}
-          >
-            编辑
-          </DropdownItem>
-          <DropdownItem
-            key="delete"
-            description="删除标签"
-            startContent={<DeleteDocumentBulkIcon className={iconClasses + ' text-red-500'} />}
-            onClick={() => toast.warning('还没写！')}
-          >
-            删除
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    ),
-  },
-];
+import RefreshButton from '~/components/RefreshButton'
 
-export default function List(callback: any, deps: React.DependencyList) {
-  const { data, error, isLoading, isValidating, mutate  } = useSWR('/api/get-tags', fetcher)
+export default async function List() {
 
-  if (error) {
-    toast.error('数据获取失败！')
+  const getData = async () => {
+    'use server'
+    const data = await fetchTagsList()
+    console.log(data)
+    return data
   }
 
   return (
@@ -89,23 +21,10 @@ export default function List(callback: any, deps: React.DependencyList) {
               <h4 className="text-small font-semibold leading-none text-default-600 select-none">标签管理</h4>
             </div>
           </div>
-          <Button
-            color="primary"
-            radius="full"
-            size="sm"
-            isLoading={isValidating}
-            onClick={() => mutate()}
-          >
-            刷新
-          </Button>
+          <RefreshButton handleClick={getData}/>
         </CardHeader>
       </Card>
-      <Table
-        bordered
-        columns={columns}
-        dataSource={data}
-        loading={isValidating}
-      />
+      <TagList handleClick={getData} />
     </div>
   )
 }
diff --git a/components/RefreshButton.tsx b/components/RefreshButton.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { Button } from '@nextui-org/react'
+import React from 'react'
+import { useSWRConfig } from 'swr'
+
+export default function RefreshButton() {
+  const { mutate } = useSWRConfig()
+
+  return (
+    <Button
+      color="primary"
+      radius="full"
+      size="sm"
+      // isLoading={loading}
+      onClick={() => {
+        mutate('getTags')
+      }}
+    >
+      刷新
+    </Button>
+  )
+}
diff --git a/components/TagList.tsx b/components/TagList.tsx
@@ -0,0 +1,89 @@
+'use client'
+
+import React from 'react'
+import { Table, type TableProps } from 'antd'
+import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react'
+import { DeleteDocumentBulkIcon, EditDocumentBulkIcon, SendFilledIcon } from '@nextui-org/shared-icons'
+import { toast } from 'sonner'
+import useSWR from 'swr'
+
+interface DataType {
+  id: number;
+  name: string;
+  tag_value: string;
+  detail: string;
+  show: number;
+}
+
+const iconClasses = 'text-xl text-default-500 pointer-events-none flex-shrink-0'
+
+export default function TagList({handleClick: onClick}: any) {
+  const { data, error, isLoading, isValidating } = useSWR('getTags',
+    () => {
+    return onClick()
+  })
+
+  console.log(data)
+
+  const columns: TableProps<DataType>['columns'] = [
+    {
+      title: '标签名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '标签值',
+      dataIndex: 'tag_value',
+    },
+    {
+      title: '说明',
+      dataIndex: 'detail',
+    },
+    {
+      title: '显示',
+      dataIndex: 'show',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <Dropdown>
+          <DropdownTrigger>
+            <Button
+              isIconOnly
+              variant="bordered"
+            >
+              <SendFilledIcon/>
+            </Button>
+          </DropdownTrigger>
+          <DropdownMenu variant="faded" aria-label="标签操作选项卡">
+            <DropdownItem
+              key="edit"
+              description="编辑标签信息"
+              startContent={<EditDocumentBulkIcon className={iconClasses}/>}
+              onClick={() => toast.warning('还没写！')}
+            >
+              编辑
+            </DropdownItem>
+            <DropdownItem
+              key="delete"
+              description="删除标签"
+              startContent={<DeleteDocumentBulkIcon className={iconClasses + ' text-red-500'}/>}
+              onClick={() => toast.warning('还没写！')}
+            >
+              删除
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      ),
+    },
+  ];
+
+  return (
+    <Table
+      bordered
+      columns={columns}
+      loading={isValidating}
+      dataSource={data}
+    />
+  )
+}