fix: toast not avaliable and online status check immediatly

VaalaCat · Dec 7, 2024 · 3562b8b · 3562b8b
1 parent 0cf9b69
commit 3562b8b
Show file tree

Hide file tree

Showing 20 changed files with 150 additions and 457 deletions.
diff --git a/www/components/frpc/client_create_dialog.tsx b/www/components/frpc/client_create_dialog.tsx
@@ -7,7 +7,6 @@ import { initClient, listClient } from '@/api/client'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
-import { useToast } from '@/components/ui/use-toast'
 import { RespCode } from '@/lib/pb/common'
 import {
   Dialog,
@@ -19,27 +18,31 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 
 export const CreateClientDialog = ({refetchTrigger}: {refetchTrigger?: (randStr: string) => void}) => {
   const { t } = useTranslation()
   const [clientID, setClientID] = useState<string | undefined>()
   const newClient = useMutation({
     mutationFn: initClient,
   })
-  const { toast } = useToast()
 
   const handleNewClient = async () => {
-    toast({ title: t('client.create.submitting') })
+    toast(t('client.create.submitting'))
     try {
       let resp = await newClient.mutateAsync({ clientId: clientID })
       if (resp.status?.code !== RespCode.SUCCESS) {
-        toast({ title: t('client.create.error') })
+        toast(t('client.create.error'),{
+          description: resp.status?.message
+        })
         return
       }
-      toast({ title: t('client.create.success') })
+      toast(t('client.create.success'))
       refetchTrigger && refetchTrigger(JSON.stringify(Math.random()))
     } catch (error) {
-      toast({ title: t('client.create.error') })
+      toast(t('client.create.error'), {
+        description: JSON.stringify(error)
+      })
     }
   }
 

diff --git a/www/components/frpc/client_item.tsx b/www/components/frpc/client_item.tsx
@@ -20,7 +20,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { useToast } from '@/components/ui/use-toast'
 import React, { useState } from 'react'
 import { ClientEnvFile, ExecCommandStr, LinuxInstallCommand, WindowsInstallCommand } from '@/lib/consts'
 import { useMutation, useQuery } from '@tanstack/react-query'
@@ -38,6 +37,7 @@ import { Label } from '@/components/ui/label'
 import { ClientDetail } from '../base/client_detail'
 import { Input } from '../ui/input'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 
 export type ClientTableSchema = {
   id: string
@@ -141,11 +141,11 @@ export const ClientID = ({ client }: { client: ClientTableSchema }) => {
             <div className="grid grid-cols-2 items-center gap-4">
               <Input
                 readOnly
-                value={WindowsInstallCommand('frpc', client, platformInfo)}
+                value={WindowsInstallCommand('client', client, platformInfo)}
                 className="flex-1"
               />
               <Button
-                onClick={() => navigator.clipboard.writeText(WindowsInstallCommand('frpc', client, platformInfo))}
+                onClick={() => navigator.clipboard.writeText(WindowsInstallCommand('client', client, platformInfo))}
                 disabled={!platformInfo}
                 size="sm"
                 variant="outline"
@@ -156,11 +156,11 @@ export const ClientID = ({ client }: { client: ClientTableSchema }) => {
             <div className="grid grid-cols-2 items-center gap-4">
               <Input
                 readOnly
-                value={LinuxInstallCommand('frpc', client, platformInfo)}
+                value={LinuxInstallCommand('client', client, platformInfo)}
                 className="flex-1"
               />
               <Button
-                onClick={() => navigator.clipboard.writeText(LinuxInstallCommand('frpc', client, platformInfo))}
+                onClick={() => navigator.clipboard.writeText(LinuxInstallCommand('client', client, platformInfo))}
                 disabled={!platformInfo}
                 size="sm"
                 variant="outline"
@@ -282,7 +282,6 @@ export interface ClientItemProps {
 
 export const ClientActions: React.FC<ClientItemProps> = ({ client, table }) => {
   const { t } = useTranslation()
-  const { toast } = useToast()
   const router = useRouter()
   const platformInfo = useStore($platformInfo)
 
@@ -292,33 +291,39 @@ export const ClientActions: React.FC<ClientItemProps> = ({ client, table }) => {
   const removeClient = useMutation({
     mutationFn: deleteClient,
     onSuccess: () => {
-      toast({ description: t('client.delete.success') })
+      toast(t('client.delete.success'))
       refetchList()
     },
-    onError: () => {
-      toast({ description: t('client.delete.failed') })
+    onError: (e) => {
+      toast(t('client.delete.failed'), {
+        description: e.message,
+      })
     },
   })
 
   const stopClient = useMutation({
     mutationFn: stopFrpc,
     onSuccess: () => {
-      toast({ description: t('client.operation.stop_success') })
+      toast(t('client.operation.stop_success'))
       refetchList()
     },
-    onError: () => {
-      toast({ description: t('client.operation.stop_failed') })
+    onError: (e) => {
+      toast(t('client.operation.stop_failed'), {
+        description: e.message,
+      })
     },
   })
 
   const startClient = useMutation({
     mutationFn: startFrpc,
     onSuccess: () => {
-      toast({ description: t('client.operation.start_success') })
+      toast(t('client.operation.start_success'))
       refetchList()
     },
-    onError: () => {
-      toast({ description: t('client.operation.start_failed') })
+    onError: (e) => {
+      toast(t('client.operation.start_failed'), {
+        description: e.message,
+      })
     },
   })
 
@@ -347,12 +352,14 @@ export const ClientActions: React.FC<ClientItemProps> = ({ client, table }) => {
               try {
                 if (platformInfo) {
                   navigator.clipboard.writeText(ExecCommandStr('client', client, platformInfo))
-                  toast({ description: t('client.actions_menu.copy_success') })
+                  toast(t('client.actions_menu.copy_success'))
                 } else {
-                  toast({ description: t('client.actions_menu.copy_failed') })
+                  toast(t('client.actions_menu.copy_failed'))
                 }
               } catch (error) {
-                toast({ description: t('client.actions_menu.copy_failed') })
+                toast(t('client.actions_menu.copy_failed'),{
+                  description: JSON.stringify(error)
+                })
               }
             }}
           >
@@ -373,7 +380,9 @@ export const ClientActions: React.FC<ClientItemProps> = ({ client, table }) => {
                   createAndDownloadFile('.env', ClientEnvFile(client, platformInfo))
                 }
               } catch (error) {
-                toast({ description: t('client.actions_menu.download_failed') })
+                toast(t('client.actions_menu.download_failed'), {
+                  description: JSON.stringify(error)
+                })
               }
             }}
           >

diff --git a/www/components/frpc/frpc_editor.tsx b/www/components/frpc/frpc_editor.tsx
@@ -5,13 +5,12 @@ import { useMutation } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { updateFRPC } from '@/api/frp'
-import { useToast } from '@/components/ui/use-toast'
 import { RespCode } from '@/lib/pb/common'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 
 export const FRPCEditor: React.FC<FRPCFormProps> = ({ clientID, serverID, client, refetchClient }) => {
   const { t } = useTranslation()
-  const { toast } = useToast()
 
   const [configContent, setConfigContent] = useState<string>('{}')
   const [clientComment, setClientComment] = useState<string>('')
@@ -28,12 +27,16 @@ export const FRPCEditor: React.FC<FRPCFormProps> = ({ clientID, serverID, client
         comment: clientComment,
       })
       if (res.status?.code !== RespCode.SUCCESS) {
-        toast({ title: t('client.operation.update_failed') })
+        toast(t('client.operation.update_failed', {
+          error: res.status?.message,
+        }))
         return
       }
-      toast({ title: t('client.operation.update_success') })
+      toast(t('client.operation.update_success'))
     } catch (error) {
-      toast({ title: t('client.operation.update_failed') })
+      toast(t('client.operation.update_failed'), {
+        description: JSON.stringify(error),
+      })
     }
   }
 

diff --git a/www/components/frpc/frpc_form.tsx b/www/components/frpc/frpc_form.tsx
@@ -11,12 +11,12 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
 import { Input } from '@/components/ui/input'
 import { AccordionHeader } from '@radix-ui/react-accordion'
-import { useToast } from '@/components/ui/use-toast'
 import { QueryObserverResult, RefetchOptions, useMutation } from '@tanstack/react-query'
 import { updateFRPC } from '@/api/frp'
 import { Card, CardContent } from '@/components/ui/card'
 import { GetClientResponse } from '@/lib/pb/api_client'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 
 export interface FRPCFormProps {
   clientID: string
@@ -32,8 +32,7 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID, client,
   const { t } = useTranslation()
   const [proxyType, setProxyType] = useState<ProxyType>('http')
   const [proxyName, setProxyName] = useState<string | undefined>()
-  const { toast } = useToast()
-
+
   const handleTypeChange = (value: string) => {
     setProxyType(value as ProxyType)
   }
@@ -43,9 +42,8 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID, client,
     if (!proxyName) return
     if (!proxyType) return
     if (clientProxyConfigs.findIndex((proxy) => proxy.name === proxyName) !== -1) {
-      toast({ 
-        title: t('proxy.status.create'), 
-        description: t('proxy.status.name_exists') 
+      toast(t('proxy.status.create'), {
+        description: t('proxy.status.name_exists')
       })
       return
     }
@@ -76,15 +74,13 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID, client,
         clientId: clientID,
       })
       await refetchClient()
-      toast({ 
-        title: t('proxy.status.update'), 
-        description: res.status?.code === RespCode.SUCCESS ? t('proxy.status.success') : t('proxy.status.error') 
+      toast(t('proxy.status.update'), {
+        description: res.status?.code === RespCode.SUCCESS ? t('proxy.status.success') : t('proxy.status.error')
       })
     } catch (error) {
       console.error(error)
-      toast({ 
-        title: t('proxy.status.update'), 
-        description: t('proxy.status.error') 
+      toast(t('proxy.status.update'), {
+        description: t('proxy.status.error') + JSON.stringify(error)
       })
     }
   }

diff --git a/www/components/frps/frps_editor.tsx b/www/components/frps/frps_editor.tsx
@@ -2,17 +2,16 @@ import { Label } from '@radix-ui/react-label'
 import { Textarea } from '@/components/ui/textarea'
 import { FRPSFormProps } from './frps_form'
 import { Button } from '@/components/ui/button'
-import { useToast } from '@/components/ui/use-toast'
 import { useMutation, useQuery } from '@tanstack/react-query'
 import { getServer } from '@/api/server'
 import { useEffect, useState } from 'react'
 import { updateFRPS } from '@/api/frp'
 import { RespCode } from '@/lib/pb/common'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 
 export const FRPSEditor: React.FC<FRPSFormProps> = ({ server, serverID }) => {
   const { t } = useTranslation()
-  const { toast } = useToast()
   const { data: serverResp, refetch: refetchServer } = useQuery({
     queryKey: ['getServer', serverID],
     queryFn: () => {
@@ -34,12 +33,16 @@ export const FRPSEditor: React.FC<FRPSFormProps> = ({ server, serverID }) => {
         comment: serverComment,
       })
       if (res.status?.code !== RespCode.SUCCESS) {
-        toast({ title: t('server.operation.update_failed') })
+        toast(t('server.operation.update_failed', {
+          description: res.status?.message,
+        }))
         return
       }
-      toast({ title: t('server.operation.update_success') })
+      toast(t('server.operation.update_success'))
     } catch (error) {
-      toast({ title: t('server.operation.update_failed') })
+      toast(t('server.operation.update_failed', {
+        description: JSON.stringify(error),
+      }))
     }
     refetchServer()
   }

diff --git a/www/components/frps/frps_form.tsx b/www/components/frps/frps_form.tsx
@@ -10,9 +10,9 @@ import { ZodIPSchema, ZodPortSchema, ZodStringSchema } from '@/lib/consts'
 import { RespCode, Server } from '@/lib/pb/common'
 import { updateFRPS } from '@/api/frp'
 import { useMutation } from '@tanstack/react-query'
-import { useToast } from '@/components/ui/use-toast'
 import { Label } from '@radix-ui/react-label'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 
 const ServerConfigSchema = z.object({
   bindAddr: ZodIPSchema.default('0.0.0.0').optional(),
@@ -35,7 +35,6 @@ const FRPSForm: React.FC<FRPSFormProps> = ({ serverID, server }) => {
   const form = useForm<z.infer<typeof ServerConfigZodSchema>>({
     resolver: zodResolver(ServerConfigZodSchema),
   })
-  const { toast } = useToast()
 
   const updateFrps = useMutation({ mutationFn: updateFRPS })
 
@@ -60,14 +59,12 @@ const FRPSForm: React.FC<FRPSFormProps> = ({ serverID, server }) => {
           } as ServerConfig),
         ),
       })
-      toast({
-        title: resp.status?.code === RespCode.SUCCESS ? t('server.operation.update_success') : t('server.operation.update_failed'),
+      toast(resp.status?.code === RespCode.SUCCESS ? t('server.operation.update_success') : t('server.operation.update_failed'),{
         description: resp.status?.message,
       })
     } catch (error) {
       console.error(error)
-      toast({ 
-        title: t('server.operation.update_title'), 
+      toast(t('server.operation.update_title'), {
         description: t('server.operation.update_failed')
       })
     }

diff --git a/www/components/frps/server_create_dialog.tsx b/www/components/frps/server_create_dialog.tsx
@@ -6,7 +6,6 @@ import { initServer } from '@/api/server'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
-import { useToast } from '@/components/ui/use-toast'
 import { RespCode } from '@/lib/pb/common'
 import {
   Dialog,
@@ -18,6 +17,7 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 
 export const CreateServerDialog = ({refetchTrigger}: {refetchTrigger?: (randStr: string) => void}) => {
   const { t } = useTranslation()
@@ -26,20 +26,23 @@ export const CreateServerDialog = ({refetchTrigger}: {refetchTrigger?: (randStr:
   const newServer = useMutation({
     mutationFn: initServer,
   })
-  const { toast } = useToast()
 
   const handleNewServer = async () => {
-    toast({ title: t('server.create.submitting') })
+    toast(t('server.create.submitting'))
     try {
       let resp = await newServer.mutateAsync({ serverId: serverID, serverIp: serverIP })
       if (resp.status?.code !== RespCode.SUCCESS) {
-        toast({ title: t('server.create.error') })
+        toast(t('server.create.error'), {
+          description: resp.status?.message,
+        })
         return
       }
-      toast({ title: t('server.create.success') })
+      toast(t('server.create.success'))
       refetchTrigger && refetchTrigger(JSON.stringify(Math.random()))
     } catch (error) {
-      toast({ title: t('server.create.error') })
+      toast(t('server.create.error'), {
+        description: JSON.stringify(error),
+      })
     }
   }