feat: trpc integration

packages/client/screens/SpendScreen/SpendScreen.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { PieCircle } from '@/components';
 import { type Theme } from '@/lib/theme';
 import { useAppStore } from '@/lib/storage';
 import { type PieCircleData } from '@/lib/types';
+import { trpc } from '../../trpc';
 
 export const SpendScreen = (): JSX.Element => {
   const userSpendData = useAppStore((state) => state.userSpendData);
@@ -16,6 +17,23 @@ export const SpendScreen = (): JSX.Element => {
     [key, values.reduce((acc: number, { value }: { value: number }) => acc + value, 0)],
     { backgroundColor: values[0].category.backgroundColor, label: values[0].category.label },
   ]);
+  useEffect(() => {
+    trpc.userCreate
+      .mutate({ name: 'ABC' })
+      .then(() => {
+        trpc.userList
+          .query()
+          .then((a) => {
+            console.log(a);
+          })
+          .catch((e) => {
+            console.log(e);
+          });
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }, []);
   return (
     <SpendScreenContainer>
       <PieCircle pieCircleData={combinedUserData} />