From 55a41dd3b53fac5f0c2f6453cb3b17d935cfee7d Mon Sep 17 00:00:00 2001
From: Justin Lin <wancat@wancat.cc>
Date: Wed, 16 Apr 2025 16:02:23 +0800
Subject: [PATCH] feat: integrate trpc to app

---
 app/package.json                                 |  1 +
 .../components/header/GameHeaderComponents.vue   | 13 +++++++++----
 app/src/utils/trpc.ts                            | 16 ++++++++++++++++
 app/vite.config.ts                               |  5 +++++
 server/src/routers/index.ts                      |  5 +++--
 server/src/routers/linkRouter.ts                 | 11 +++++++++++
 yarn.lock                                        |  5 +++++
 7 files changed, 50 insertions(+), 6 deletions(-)
 create mode 100644 app/src/utils/trpc.ts
 create mode 100644 server/src/routers/linkRouter.ts

diff --git a/app/package.json b/app/package.json
index e689a4d..9d70fd4 100644
--- a/app/package.json
+++ b/app/package.json
@@ -20,6 +20,7 @@
     "@linux-odyssey/file-graph": "*",
     "@linux-odyssey/models": "*",
     "@linux-odyssey/utils": "*",
+    "@trpc/client": "^11.1.0",
     "@types/dompurify": "^3.0.5",
     "axios": "^1.6.0",
     "dompurify": "^3.0.6",
diff --git a/app/src/components/header/GameHeaderComponents.vue b/app/src/components/header/GameHeaderComponents.vue
index 3789c10..1987895 100644
--- a/app/src/components/header/GameHeaderComponents.vue
+++ b/app/src/components/header/GameHeaderComponents.vue
@@ -3,7 +3,7 @@ import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { logout } from '../../utils/auth'
-import { surveyUrl } from '../../config'
+import { trpc } from '../../utils/trpc'
 import { openBugReport } from '../../utils/formbricks'
 import useSession from '../../store/session'
 import useUserProfile from '../../store/userProfile'
@@ -26,6 +26,11 @@ const handleLogout = async () => {
   }
 }
 
+const openSurvey = async () => {
+  const surveyUrl = await trpc.links.surveyLink.query()
+  window.open(surveyUrl, '_blank')
+}
+
 onMounted(async () => {
   try {
     await userStore.loadUserProfile()
@@ -61,18 +66,18 @@ onMounted(async () => {
   >
     {{ userStore.username }}
   </p>
-  <a
+  <button
     title="Survey"
-    :href="surveyUrl"
     target="_blank"
     class="md:h-5 md:w-5 px-1.5 w-auto"
+    @click="openSurvey"
   >
     <font-awesome-icon
       :icon="['fas', 'file-invoice']"
       class="text-text-primary inline"
     />
     <span class="text-text sm:hidden px-2">Survey</span>
-  </a>
+  </button>
   <RouterLink
     title="LeaderBoard"
     to="/leaderboard"
diff --git a/app/src/utils/trpc.ts b/app/src/utils/trpc.ts
new file mode 100644
index 0000000..9c64f60
--- /dev/null
+++ b/app/src/utils/trpc.ts
@@ -0,0 +1,16 @@
+import { createTRPCClient, httpBatchLink } from '@trpc/client'
+import type { AppRouter } from 'server/src/routers'
+
+export const trpc = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: '/trpc',
+      // You can pass any HTTP headers you wish here
+      // async headers() {
+      //   return {
+      //     authorization: getAuthCookie(),
+      //   }
+      // },
+    }),
+  ],
+})
diff --git a/app/vite.config.ts b/app/vite.config.ts
index 433a916..f1811bb 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -6,6 +6,11 @@ export default defineConfig({
   plugins: [vue()],
   server: {
     proxy: {
+      '/trpc': {
+        target: process.env.API_TARGET || 'http://localhost:3000',
+        changeOrigin: false,
+        xfwd: true,
+      },
       '/api': {
         target: process.env.API_TARGET || 'http://localhost:3000',
         changeOrigin: false,
diff --git a/server/src/routers/index.ts b/server/src/routers/index.ts
index 1cd5c2a..2d7bd5f 100644
--- a/server/src/routers/index.ts
+++ b/server/src/routers/index.ts
@@ -1,11 +1,12 @@
 import { router, publicProcedure } from '../trpc.js'
+import { linkRouter } from './linkRouter.js'
 
 export const appRouter = router({
   userList: publicProcedure.query(async (opts) => {
     // Retrieve users from a datasource, this is an imaginary database
     return opts.ctx
   }),
+  links: linkRouter,
 })
-// Export type router type signature,
-// NOT the router itself.
+
 export type AppRouter = typeof appRouter
diff --git a/server/src/routers/linkRouter.ts b/server/src/routers/linkRouter.ts
new file mode 100644
index 0000000..d3221bb
--- /dev/null
+++ b/server/src/routers/linkRouter.ts
@@ -0,0 +1,11 @@
+import config from '../config.js'
+import { publicProcedure, router } from '../trpc.js'
+
+export const linkRouter = router({
+  surveyLink: publicProcedure.query(() => {
+    return config.surveyUrl
+  }),
+  bugReportLink: publicProcedure.query(() => {
+    return config.bugReportUrl
+  }),
+})
diff --git a/yarn.lock b/yarn.lock
index 61a3994..1ecf491 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1711,6 +1711,11 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
+"@trpc/client@^11.1.0":
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/@trpc/client/-/client-11.1.0.tgz#102ec1f14aa39c4caf5106c51f38a3d4bee293b0"
+  integrity sha512-Q3pL4p7AddxI/ZJTEFo1utKSdasDFjZPECIPsKDkthEt52k530JkYVltTdLkYFKrNWXKKBo8MN7NwchelczoRw==
+
 "@trpc/server@^11.1.0":
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/@trpc/server/-/server-11.1.0.tgz#8169fa8b944beddf65a95f376d4afea5732be254"