refactor: migrate website info api to trpc

src/client/api/model/monitor.ts

@@ -1,6 +1,10 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { getQueryKey } from '@trpc/react-query';
-import { defaultErrorHandler, defaultSuccessHandler, trpc } from '../trpc';
+import {
+  defaultErrorHandler,
+  defaultSuccessHandler,
+  getQueryKey,
+  trpc,
+} from '../trpc';
 
 export function useMonitorUpsert() {
   const queryClient = useQueryClient();

src/client/api/model/website.ts

@@ -19,19 +19,6 @@ export async function getWorkspaceWebsites(
   return data.websites;
 }
 
-export async function getWorkspaceWebsiteInfo(
-  workspaceId: string,
-  websiteId: string
-): Promise<WebsiteInfo | null> {
-  const { data } = await request.get(`/api/workspace/website/${websiteId}`, {
-    params: {
-      workspaceId,
-    },
-  });
-
-  return data.website;
-}
-
 export async function deleteWorkspaceWebsite(
   workspaceId: string,
   websiteId: string
@@ -52,21 +39,6 @@ export function useWorspaceWebsites(workspaceId: string) {
   return { websites, isLoading };
 }
 
-export function useWorkspaceWebsiteInfo(
-  workspaceId: string,
-  websiteId: string
-) {
-  const { data: website = null, isLoading } = useQuery(
-    ['website', workspaceId, websiteId],
-    () => {
-      return getWorkspaceWebsiteInfo(workspaceId, websiteId);
-    },
-    { cacheTime: 0 }
-  );
-
-  return { website, isLoading };
-}
-
 export function refreshWorkspaceWebsites(workspaceId: string) {
   queryClient.refetchQueries(['websites', workspaceId]);
 }

src/client/api/trpc.ts

@@ -1,4 +1,4 @@
-import { createTRPCReact } from '@trpc/react-query';
+import { createTRPCReact, getQueryKey } from '@trpc/react-query';
 import type { AppRouter } from '../../server/trpc/routers';
 import { httpBatchLink, loggerLink, TRPCClientErrorLike } from '@trpc/client';
 import { getJWT } from './auth';
@@ -6,6 +6,8 @@ import { message } from 'antd';
 import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server';
 import { isDev } from '../utils/env';
 
+export { getQueryKey };
+
 export const trpc = createTRPCReact<AppRouter>();
 
 export type RouterInput = inferRouterInputs<AppRouter>;

src/client/components/WebsiteInfo.tsx

@@ -1,17 +1,19 @@
 import { Button, Form, Input, message, Popconfirm, Tabs } from 'antd';
 import React from 'react';
 import { useNavigate, useParams } from 'react-router';
-import {
-  deleteWorkspaceWebsite,
-  useWorkspaceWebsiteInfo,
-} from '../api/model/website';
+import { deleteWorkspaceWebsite } from '../api/model/website';
 import { useRequest } from '../hooks/useRequest';
 import { useCurrentWorkspaceId } from '../store/user';
 import { ErrorTip } from './ErrorTip';
 import { Loading } from './Loading';
 import { NoWorkspaceTip } from './NoWorkspaceTip';
 import { MonitorPicker } from './monitor/MonitorPicker';
-import { defaultErrorHandler, defaultSuccessHandler, trpc } from '../api/trpc';
+import {
+  defaultErrorHandler,
+  defaultSuccessHandler,
+  getQueryKey,
+  trpc,
+} from '../api/trpc';
 import { useQueryClient } from '@tanstack/react-query';
 import { useEvent } from '../hooks/useEvent';
 
@@ -20,16 +22,17 @@ export const WebsiteInfo: React.FC = React.memo(() => {
   const { websiteId } = useParams<{
     websiteId: string;
   }>();
-  const { website, isLoading } = useWorkspaceWebsiteInfo(
-    workspaceId,
-    websiteId!
-  );
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
+  const { data: website, isLoading } = trpc.website.info.useQuery({
+    workspaceId,
+    websiteId: websiteId!,
+  });
+
   const updateMutation = trpc.website.updateInfo.useMutation({
     onSuccess: () => {
-      queryClient.resetQueries(['websites', workspaceId]); // TODO: translation to trpc
+      queryClient.resetQueries(getQueryKey(trpc.website.info));
       defaultSuccessHandler();
     },
     onError: defaultErrorHandler,

src/server/model/workspace.ts

@@ -52,20 +52,6 @@ export async function getWorkspaceWebsites(workspaceId: string) {
   return workspace?.websites ?? [];
 }
 
-export async function getWorkspaceWebsiteInfo(
-  workspaceId: string,
-  websiteId: string
-) {
-  const websiteInfo = await prisma.website.findUnique({
-    where: {
-      id: websiteId,
-      workspaceId,
-    },
-  });
-
-  return websiteInfo;
-}
-
 export async function addWorkspaceWebsite(
   workspaceId: string,
   name: string,

src/server/router/workspace.ts

@@ -61,21 +61,6 @@ workspaceRouter.post(
   }
 );
 
-workspaceRouter.get(
-  '/website/:websiteId',
-  validate(query('workspaceId').isString(), param('websiteId').isString()),
-  auth(),
-  workspacePermission(),
-  async (req, res) => {
-    const workspaceId = req.query.workspaceId as string;
-    const websiteId = req.params.websiteId;
-
-    const website = await getWorkspaceWebsiteInfo(workspaceId, websiteId);
-
-    res.json({ website });
-  }
-);
-
 workspaceRouter.delete(
   '/:workspaceId/website/:websiteId',
   validate(param('workspaceId').isString(), param('websiteId').isString()),

src/server/trpc/routers/website.ts

@@ -31,11 +31,12 @@ export const websiteRouter = router({
       })
     )
     .query(async ({ input }) => {
-      const { websiteId } = input;
+      const { workspaceId, websiteId } = input;
 
       const website = await prisma.website.findUnique({
         where: {
           id: websiteId,
+          workspaceId,
         },
       });