feat: integrate trpc to app

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",

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"

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(),
+      //   }
+      // },
+    }),
+  ],
+})

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,