fix(FeedbackCreateForm): change feedback api to trpc

src/components/FeedbackCreateForm/FeedbackCreateForm.tsx

@@ -7,13 +7,14 @@ import * as Sentry from '@sentry/nextjs';
 import { errorsProvider } from '../../utils/forms';
 import { createFeedbackSchema, CreateFeedback } from '../../schema/feedback';
 import { ModalEvent, dispatchModalEvent } from '../../utils/dispatchModal';
-import { dispatchErrorNotification } from '../../utils/dispatchNotification';
 import { notifyPromise } from '../../utils/notifyPromise';
+import { trpc } from '../../utils/trpcClient';
 
 import { tr } from './FeedbackCreateForm.i18n';
 
 const FeedbackCreateForm: React.FC = () => {
     const [formBusy, setFormBusy] = useState(false);
+    const createMutation = trpc.feedback.create.useMutation();
 
     const {
         register,
@@ -25,28 +26,25 @@ const FeedbackCreateForm: React.FC = () => {
 
     const errorsResolver = errorsProvider(errors, isSubmitted);
 
-    const onPending = useCallback(async (form: CreateFeedback) => {
-        setFormBusy(true);
-        const [res] = await notifyPromise(
-            fetch('/api/feedback', {
-                method: 'POST',
-                headers: {
-                    'content-type': 'application/json',
-                    accept: 'application/json',
-                },
-                body: JSON.stringify({
+    const onPending = useCallback(
+        async (form: CreateFeedback) => {
+            setFormBusy(true);
+            const [res] = await notifyPromise(
+                createMutation.mutateAsync({
                     title: form.title,
                     description: form.description,
                     href: window.location.href,
                 }),
-            }),
-            'sentFeedback',
-        );
-        if (res) {
-            dispatchModalEvent(ModalEvent.FeedbackCreateModal)();
-        }
-        setFormBusy(false);
-    }, []);
+                'sentFeedback',
+            );
+            if (res) {
+                dispatchModalEvent(ModalEvent.FeedbackCreateModal)();
+            }
+
+            setFormBusy(false);
+        },
+        [createMutation],
+    );
 
     const onError = useCallback((err: typeof errors) => {
         Sentry.captureException(err);

src/schema/criteria.ts

@@ -8,7 +8,11 @@ export const criteriaSchema = z.object({
             required_error: tr('Title is required'),
         })
         .min(1, {
-            message: tr('Title must be longer than 1 symbol'),
+            message: tr
+                .raw('Title must be longer than {upTo} symbol', {
+                    upTo: 1,
+                })
+                .join(''),
         }),
     weight: z.string().optional(),
     goalId: z.string(),

src/schema/feedback.ts

@@ -9,9 +9,14 @@ export const createFeedbackSchema = z.object({
             invalid_type_error: tr('Title must be a string'),
         })
         .min(3, {
-            message: tr('Title must be longer than 3 symbol'),
+            message: tr
+                .raw('Title must be longer than {upTo} symbol', {
+                    upTo: 3,
+                })
+                .join(''),
         }),
     description: z.string().optional(),
+    href: z.string().optional(),
 });
 
 export type CreateFeedback = z.infer<typeof createFeedbackSchema>;

src/schema/filter.ts

@@ -10,7 +10,11 @@ export const createFilterSchema = z.object({
             invalid_type_error: tr('Title must be a string'),
         })
         .min(1, {
-            message: tr('Title must be longer than 1 symbol'),
+            message: tr
+                .raw('Title must be longer than {upTo} symbol', {
+                    upTo: 1,
+                })
+                .join(''),
         }),
     mode: z.nativeEnum(FilterMode),
     params: z.string().min(1),

src/utils/declareSsrProps.ts

@@ -39,7 +39,14 @@ export function declareSsrProps<T = ExternalPageProps>(
             };
         }
 
-        const ssrHelpers = createServerSideHelpers({ router: trpcRouter, ctx: { session }, transformer: superjson });
+        const ssrHelpers = createServerSideHelpers({
+            router: trpcRouter,
+            ctx: {
+                session,
+                headers: req.headers,
+            },
+            transformer: superjson,
+        });
 
         const ssrTime = Date.now();
 

trpc/context.ts

@@ -7,7 +7,7 @@ import { authOptions } from '../src/utils/auth';
 export const createContext = async (opts: trpcNext.CreateNextContextOptions) => {
     const session = await getServerSession(opts.req, opts.res, authOptions);
 
-    return { session };
+    return { session, headers: opts.req.headers };
 };
 
 export type TrpcContext = inferAsyncReturnType<typeof createContext>;

trpc/router/feedback.ts

@@ -0,0 +1,29 @@
+import { protectedProcedure, router } from '../trpcBackend';
+import { createFeedbackSchema } from '../../src/schema/feedback';
+
+export const feedback = router({
+    create: protectedProcedure
+        .input(createFeedbackSchema)
+        .mutation(async ({ ctx, input: { title, description, href } }) => {
+            if (!process.env.FEEDBACK_URL) {
+                return;
+            }
+            const { name, email, image } = ctx.session.user;
+            const userAgent = ctx.headers['user-agent'];
+            await fetch(process.env.FEEDBACK_URL, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    title,
+                    description,
+                    href,
+                    userAgent,
+                    name,
+                    email,
+                    avatarUrl: image,
+                }),
+            });
+        }),
+});

trpc/router/index.ts

@@ -10,6 +10,7 @@ import { goal } from './goal';
 import { search } from './search';
 import { state } from './state';
 import { estimates } from './estimates';
+import { feedback } from './feedback';
 
 export const trpcRouter = router({
     filter,
@@ -22,6 +23,7 @@ export const trpcRouter = router({
     search,
     state,
     estimates,
+    feedback,
 });
 
 export type TrpcRouter = typeof trpcRouter;

trpc/trpcBackend.ts

@@ -17,7 +17,7 @@ const sessionCheck = t.middleware(({ next, ctx }) => {
     }
 
     return next({
-        ctx: { session },
+        ctx: { session, headers: ctx.headers },
     });
 });