feat: add user profile

src/app/(app)/(expenses)/wydatki/uzytkownik/[userId]/rozliczenie/page.tsx

@@ -12,6 +12,7 @@ interface ExpenseDetailsPageProps {
 
 export default async function ExpenseDetailsPage({ params }: ExpenseDetailsPageProps) {
   const session = await getServerAuthSession();
+
   if (!session) {
     return redirect('/logowanie');
   }
@@ -22,7 +23,7 @@ export default async function ExpenseDetailsPage({ params }: ExpenseDetailsPageP
     userId: session.user.id,
   });
 
-  if (!paramUser) {
+  if (!paramUser || !currentUser) {
     redirect('/');
   }
 

src/app/(app)/(settings)/ustawienia/page.tsx

@@ -2,7 +2,11 @@ import { AddUserToGroupForm } from 'components/forms/add-user-to-group-form';
 import { GroupSelect } from 'components/group-select';
 import { LogoutButton } from 'components/logout-button';
 import { Section } from 'components/section';
+import { buttonVariants } from 'components/ui/button';
 import { Separator } from 'components/ui/separator';
+import { cn } from 'lib/utils';
+import { User2 } from 'lucide-react';
+import Link from 'next/link';
 import { redirect } from 'next/navigation';
 import { createTrpcCaller } from 'server/api/caller';
 import { getServerAuthSession } from 'server/auth';
@@ -22,7 +26,12 @@ export default async function SettingsPage() {
   return (
     <Section title="Ustawienia">
       <div className="flex flex-col gap-6">
-        <LogoutButton />
+        <div className="flex flex-col gap-4">
+          <Link href={'/ustawienia/profil'} className={cn(buttonVariants({ variant: 'outline' }))}>
+            <User2 className="mr-2" /> Profil
+          </Link>
+          <LogoutButton />
+        </div>
         <Separator />
         <div className="space-y-2">
           <h2 className="text-xl font-bold">Aktywna grupa</h2>

src/app/(app)/(settings)/ustawienia/profil/page.tsx

@@ -0,0 +1,28 @@
+import { UserForm } from 'components/forms/user-form';
+import { Section } from 'components/section';
+import { redirect } from 'next/navigation';
+import { createTrpcCaller } from 'server/api/caller';
+import { getServerAuthSession } from 'server/auth';
+
+export default async function ProfilePage() {
+  const session = await getServerAuthSession();
+
+  if (!session) {
+    redirect('/logowanie');
+  }
+
+  const caller = await createTrpcCaller();
+  const user = await caller.user.getById({
+    userId: session.user.id,
+  });
+
+  if (!user) {
+    redirect('/');
+  }
+
+  return (
+    <Section title="Profil">
+      <UserForm user={user} />
+    </Section>
+  );
+}

src/components/expense-feed.tsx

@@ -13,7 +13,7 @@ import {
 } from 'components/ui/dialog';
 import { format } from 'date-fns';
 import { useInfiniteExpenses } from 'hooks/use-infinite-expenses';
-import { cn } from 'lib/utils';
+import { cn, getFirstName } from 'lib/utils';
 import { CircleDollarSign } from 'lucide-react';
 import Link from 'next/link';
 import { useSession } from 'next-auth/react';
@@ -31,7 +31,7 @@ export function ExpenseListItem({ expense }: ExpenseCardProps) {
   const { data: session } = useSession();
   const descriptionParts = expense.description?.split('\n');
   const hasDescription = descriptionParts?.length;
-  const [payerFirstName] = expense.payer.name?.split(' ') ?? '';
+  const payerFirstName = getFirstName(expense.payer.name);
   const formattedDate = format(expense.createdAt, 'EEEEEE, d MMMM');
 
   const getSettledStateIcon = () => {

src/components/expense-payment.tsx

@@ -6,7 +6,7 @@ import { NumberInput } from 'components/ui/number-input';
 import { Separator } from 'components/ui/separator';
 import { useDisclosure } from 'hooks/use-disclosure';
 import { useUpdateExpenseDebt } from 'hooks/use-update-expense-debt';
-import { cn } from 'lib/utils';
+import { cn, getFirstName } from 'lib/utils';
 import { Loader2, Square, XSquare } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
@@ -39,7 +39,7 @@ export function ExpensePayment({ debt }: ExpenseCardPaymentProps) {
     resolver: zodResolver(expenseCardPaymentFormSchema),
   });
 
-  const [debtorFirstName] = debt.debtor.name?.split(' ') ?? '';
+  const debtorFirstName = getFirstName(debt.debtor.name);
 
   const notHavePermission = session?.user?.id !== debt.debtorId && session?.user?.id !== debt.expense.payerId;
 

src/components/forms/user-form.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from 'components/ui/button';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from 'components/ui/form';
+import { Input } from 'components/ui/input';
+import { useUpdateUser } from 'hooks/use-update-user';
+import { useForm } from 'react-hook-form';
+import { GetUserById } from 'utils/api';
+import { z } from 'zod';
+
+const updateUserFormSchema = z.object({
+  name: z
+    .string({ required_error: 'Musisz podać imię i nazwisko' })
+    .min(3, 'Minimalna długość to 3 znaki')
+    .refine((value) => value.split(' ').length === 2, { message: 'Musisz podać imię i nazwisko' }),
+});
+
+type UpdateUserFormSchema = z.infer<typeof updateUserFormSchema>;
+
+interface UserFormProps {
+  user: GetUserById;
+}
+
+export function UserForm({ user }: UserFormProps) {
+  const defaultValues = user
+    ? {
+        name: user.name || '',
+      }
+    : {
+        name: '',
+      };
+
+  const form = useForm<UpdateUserFormSchema>({
+    resolver: zodResolver(updateUserFormSchema),
+    defaultValues,
+  });
+
+  const { mutate: updateUser } = useUpdateUser();
+
+  const handleUpdateUser = async (values: UpdateUserFormSchema) => {
+    if (user) {
+      updateUser({ userId: user.id, name: values.name });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(handleUpdateUser)}>
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Imię i nazwisko</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className="mt-6 flex justify-end">
+          <Button>Zapisz</Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

src/hooks/use-update-user.ts

@@ -0,0 +1,14 @@
+import { useRouter } from 'next/navigation';
+import { api } from 'utils/api';
+
+export function useUpdateUser() {
+  const router = useRouter();
+  const utils = api.useContext();
+
+  return api.user.update.useMutation({
+    async onSuccess(_, variables) {
+      await utils.user.getById.invalidate({ userId: variables.userId });
+      router.refresh();
+    },
+  });
+}

src/lib/utils.ts

@@ -5,6 +5,11 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
+export function getFirstName(name: string | null) {
+  const [firstName] = name?.split(' ') ?? '';
+  return firstName;
+}
+
 export function getInitials(name: string | null) {
   const words = name?.split(' ');
   const initials = words?.map((word) => word.charAt(0).toUpperCase()).join('');

src/server/api/routers/expense.ts

@@ -78,7 +78,7 @@ export const expenseRouter = createTRPCRouter({
     }),
 
   getById: protectedProcedure.input(z.object({ id: z.string().cuid2() })).query(({ input, ctx }) => {
-    return ctx.prisma.expense.findFirst({
+    return ctx.prisma.expense.findUnique({
       where: {
         id: input.id,
       },

src/server/api/routers/user.ts

@@ -8,7 +8,7 @@ export const userRouter = createTRPCRouter({
   }),
 
   getById: publicProcedure.input(z.object({ userId: z.string().cuid2() })).query(({ input, ctx }) => {
-    return ctx.prisma.user.findFirst({
+    return ctx.prisma.user.findUnique({
       where: {
         id: input.userId,
       },
@@ -143,4 +143,22 @@ export const userRouter = createTRPCRouter({
       },
     });
   }),
+
+  update: protectedProcedure
+    .input(
+      z.object({
+        userId: z.string().cuid2(),
+        name: z.string(),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      return ctx.prisma.user.update({
+        where: {
+          id: input.userId,
+        },
+        data: {
+          name: input.name,
+        },
+      });
+    }),
 });