From 3bb2cc871513cc553adfd0e5014a121d098f2aa3 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Tue, 2 Apr 2024 01:12:44 +0800 Subject: [PATCH] refactor: replace all old router to new router --- src/client/api/model/user.ts | 7 +- src/client/components/CommonList.tsx | 3 + .../dashboard/items/WebsiteOverviewItem.tsx | 17 ++-- src/client/components/monitor/MonitorInfo.tsx | 12 ++- .../components/monitor/StatusPage/index.tsx | 23 ++++-- .../notification/NotificationPicker.tsx | 8 +- .../components/telemetry/TelemetryList.tsx | 10 ++- .../components/website/WebsiteConfig.tsx | 6 +- .../components/website/WebsiteOverview.tsx | 10 +-- src/client/pages/LayoutV2.tsx | 15 ++-- src/client/routeTree.gen.ts | 47 ++++++++--- src/client/routes/__root.tsx | 6 +- src/client/routes/login.tsx | 24 +++--- src/client/routes/monitor/$monitorId/edit.tsx | 79 +++++++++++++++++++ .../{$monitorId.tsx => $monitorId/index.tsx} | 2 +- src/client/routes/monitor/add.tsx | 8 +- src/client/routes/page/$slug.tsx | 31 ++++++-- src/client/routes/register.tsx | 12 +-- src/client/routes/settings/profile.tsx | 15 +++- src/client/routes/status/$slug.tsx | 33 ++++++++ src/client/routes/website/overview.tsx | 35 ++++---- 21 files changed, 298 insertions(+), 105 deletions(-) create mode 100644 src/client/routes/monitor/$monitorId/edit.tsx rename src/client/routes/monitor/{$monitorId.tsx => $monitorId/index.tsx} (95%) create mode 100644 src/client/routes/status/$slug.tsx diff --git a/src/client/api/model/user.ts b/src/client/api/model/user.ts index a8573f3..d48cf3a 100644 --- a/src/client/api/model/user.ts +++ b/src/client/api/model/user.ts @@ -1,8 +1,8 @@ import dayjs from 'dayjs'; import { useUserStore } from '../../store/user'; import { useEvent } from '../../hooks/useEvent'; -import { useNavigate } from 'react-router'; import { clearJWT } from '../auth'; +import { useNavigate } from '@tanstack/react-router'; /** * Mock @@ -18,7 +18,10 @@ export function useLogout() { const logout = useEvent(() => { useUserStore.setState({ info: null }); clearJWT(); - navigate('/login'); + navigate({ + to: '/login', + replace: true, + }); }); return logout; diff --git a/src/client/components/CommonList.tsx b/src/client/components/CommonList.tsx index aa40c64..3f35c83 100644 --- a/src/client/components/CommonList.tsx +++ b/src/client/components/CommonList.tsx @@ -6,6 +6,7 @@ import { useNavigate, useRouterState } from '@tanstack/react-router'; import { LuSearch } from 'react-icons/lu'; import { Input } from './ui/input'; import { useFuseSearch } from '@/hooks/useFuseSearch'; +import { Empty } from 'antd'; export interface CommonListItem { id: string; @@ -65,6 +66,8 @@ export const CommonList: React.FC = React.memo((props) => {
+ {finalList.length === 0 && } + {finalList.map((item) => { const isSelected = item.href === location.pathname; diff --git a/src/client/components/dashboard/items/WebsiteOverviewItem.tsx b/src/client/components/dashboard/items/WebsiteOverviewItem.tsx index a6d7025..8f37f1d 100644 --- a/src/client/components/dashboard/items/WebsiteOverviewItem.tsx +++ b/src/client/components/dashboard/items/WebsiteOverviewItem.tsx @@ -5,16 +5,15 @@ import { Loading } from '../../Loading'; import { NotFoundTip } from '../../NotFoundTip'; import { WebsiteOverview } from '../../website/WebsiteOverview'; import { Button } from 'antd'; -import { useNavigate } from 'react-router'; import { ArrowRightOutlined } from '@ant-design/icons'; import { useTranslation } from '@i18next-toolkit/react'; +import { Link } from '@tanstack/react-router'; export const WebsiteOverviewItem: React.FC<{ websiteId: string; }> = React.memo((props) => { const { t } = useTranslation(); const workspaceId = useCurrentWorkspaceId(); - const navigate = useNavigate(); const { data: websiteInfo, isLoading } = trpc.website.info.useQuery({ workspaceId, @@ -34,15 +33,11 @@ export const WebsiteOverviewItem: React.FC<{ website={websiteInfo} actions={ <> - + + + } /> diff --git a/src/client/components/monitor/MonitorInfo.tsx b/src/client/components/monitor/MonitorInfo.tsx index 5125e1e..9411abe 100644 --- a/src/client/components/monitor/MonitorInfo.tsx +++ b/src/client/components/monitor/MonitorInfo.tsx @@ -14,7 +14,6 @@ import { MonitorInfo as MonitorInfoType } from '../../../types'; import { MonitorHealthBar } from './MonitorHealthBar'; import { last } from 'lodash-es'; import { ColorTag } from '../ColorTag'; -import { useNavigate } from 'react-router'; import { MonitorEventList } from './MonitorEventList'; import { useEvent } from '../../hooks/useEvent'; import { MonitorDataMetrics } from './MonitorDataMetrics'; @@ -22,6 +21,7 @@ import { MonitorDataChart } from './MonitorDataChart'; import { DeleteOutlined, MoreOutlined } from '@ant-design/icons'; import { MonitorBadgeView } from './MonitorBadgeView'; import { useTranslation } from '@i18next-toolkit/react'; +import { useNavigate } from '@tanstack/react-router'; interface MonitorInfoProps { monitorId: string; @@ -109,7 +109,8 @@ export const MonitorInfo: React.FC = React.memo((props) => { }); await trpcUtils.monitor.all.refetch(); - navigate('/monitor', { + navigate({ + to: '/monitor', replace: true, }); }, @@ -198,7 +199,12 @@ export const MonitorInfo: React.FC = React.memo((props) => { - + {showBackBtn && ( + + + + )}
)} diff --git a/src/client/components/notification/NotificationPicker.tsx b/src/client/components/notification/NotificationPicker.tsx index 6efbda5..c4e0c51 100644 --- a/src/client/components/notification/NotificationPicker.tsx +++ b/src/client/components/notification/NotificationPicker.tsx @@ -3,9 +3,9 @@ import React from 'react'; import { trpc } from '../../api/trpc'; import { useCurrentWorkspaceId } from '../../store/user'; import { ColorTag } from '../ColorTag'; -import { useNavigate } from 'react-router'; import { PlusOutlined } from '@ant-design/icons'; import { useTranslation } from '@i18next-toolkit/react'; +import { useNavigate } from '@tanstack/react-router'; interface NotificationPickerProps extends SelectProps {} export const NotificationPicker: React.FC = React.memo( @@ -26,7 +26,11 @@ export const NotificationPicker: React.FC = React.memo(
{t('Not found any notification')}
diff --git a/src/client/components/telemetry/TelemetryList.tsx b/src/client/components/telemetry/TelemetryList.tsx index 3a5a3f6..2459ddc 100644 --- a/src/client/components/telemetry/TelemetryList.tsx +++ b/src/client/components/telemetry/TelemetryList.tsx @@ -26,11 +26,10 @@ import { PlusOutlined, DeleteOutlined, } from '@ant-design/icons'; -import { useNavigate } from 'react-router'; import { PageHeader } from '../PageHeader'; import { useEvent } from '../../hooks/useEvent'; import { TelemetryCounter } from './TelemetryCounter'; -import { LuDelete, LuTrash } from 'react-icons/lu'; +import { useNavigate } from '@tanstack/react-router'; type TelemetryInfo = AppRouterOutput['telemetry']['all'][number]; @@ -276,7 +275,12 @@ const TelemetryListTable: React.FC<{ + + } + /> + } + > + ); } diff --git a/src/client/routes/register.tsx b/src/client/routes/register.tsx index c67494e..0a041f8 100644 --- a/src/client/routes/register.tsx +++ b/src/client/routes/register.tsx @@ -1,11 +1,10 @@ import { Button, Form, Input, Typography } from 'antd'; -import { useNavigate } from 'react-router'; import { useRequest } from '../hooks/useRequest'; import { trpc } from '../api/trpc'; import { setJWT } from '../api/auth'; import { setUserInfo } from '../store/user'; import { useTranslation } from '@i18next-toolkit/react'; -import { createFileRoute } from '@tanstack/react-router'; +import { createFileRoute, useNavigate } from '@tanstack/react-router'; export const Route = createFileRoute('/register')({ component: RegisterComponent, @@ -25,14 +24,17 @@ function RegisterComponent() { setJWT(res.token); setUserInfo(res.info); - navigate('/dashboard'); + navigate({ + to: '/', + replace: true, + }); }); return ( -
+
- +
{t('Register Account')} diff --git a/src/client/routes/settings/profile.tsx b/src/client/routes/settings/profile.tsx index 0584b8c..4ece3f0 100644 --- a/src/client/routes/settings/profile.tsx +++ b/src/client/routes/settings/profile.tsx @@ -3,12 +3,14 @@ import { createFileRoute } from '@tanstack/react-router'; import { useTranslation } from '@i18next-toolkit/react'; import { CommonWrapper } from '@/components/CommonWrapper'; import { ScrollArea } from '@/components/ui/scroll-area'; -import { Button, Card, Form, Input, Modal, Typography } from 'antd'; +import { Card, Form, Input, Modal, Popconfirm, Typography } from 'antd'; import { useLogout } from '@/api/model/user'; import { trpc, defaultSuccessHandler, defaultErrorHandler } from '@/api/trpc'; import { useUserStore } from '@/store/user'; import { useState } from 'react'; import { CommonHeader } from '@/components/CommonHeader'; +import { Separator } from '@/components/ui/separator'; +import { Button } from '@/components/ui/button'; export const Route = createFileRoute('/settings/profile')({ beforeLoad: routeAuthBeforeLoad, @@ -45,13 +47,22 @@ function PageComponent() { + + + + logout()} + > + + (); + + const { data: pageInfo, isLoading } = trpc.monitor.getPageInfo.useQuery({ + slug, + }); + + if (!slug) { + return ; + } + + if (isLoading) { + return ; + } + + if (!pageInfo) { + return ; + } + + return ; +} diff --git a/src/client/routes/website/overview.tsx b/src/client/routes/website/overview.tsx index a82a2ce..104f641 100644 --- a/src/client/routes/website/overview.tsx +++ b/src/client/routes/website/overview.tsx @@ -1,29 +1,13 @@ import { routeAuthBeforeLoad } from '@/utils/route'; -import { createFileRoute, useNavigate } from '@tanstack/react-router'; -import { z } from 'zod'; -import { zodResolver } from '@hookform/resolvers/zod'; -import { useForm } from 'react-hook-form'; +import { Link, createFileRoute, useNavigate } from '@tanstack/react-router'; import { useTranslation } from '@i18next-toolkit/react'; import { Button } from '@/components/ui/button'; -import { - Form, - FormControl, - FormDescription, - FormField, - FormItem, - FormLabel, - FormMessage, -} from '@/components/ui/form'; -import { useEvent } from '@/hooks/useEvent'; -import { Input } from '@/components/ui/input'; import { useCurrentWorkspaceId } from '@/store/user'; import { trpc } from '@/api/trpc'; -import { hostnameRegex } from '@tianji/shared'; -import { Card, CardContent, CardFooter } from '@/components/ui/card'; import { CommonWrapper } from '@/components/CommonWrapper'; import { WebsiteOverview } from '@/components/website/WebsiteOverview'; import { Empty } from 'antd'; -import { LuPlus } from 'react-icons/lu'; +import { LuArrowRight, LuPlus } from 'react-icons/lu'; import { ScrollArea } from '@/components/ui/scroll-area'; export const Route = createFileRoute('/website/overview')({ @@ -46,6 +30,7 @@ function WebsiteOverviewComponent() { {websites.length === 0 && isLoading === false && (
@@ -68,7 +53,19 @@ function WebsiteOverviewComponent() {
{websites.map((website) => ( - + + + + } + /> ))}