fix: Form submission bugs

Author: VlO-OlV

admission-web/src/components/common/components/Loader.tsx

@@ -1,19 +1,23 @@
+import { cn } from '@/lib/utils/cn';
 import { Loader2 } from 'lucide-react';
 
 const sizeMapper = {
+  tiny: 25,
   small: 75,
   medium: 100,
   large: 160,
 };
 
 export function Loader({
   size = 'medium',
+  className,
 }: {
-  size?: 'small' | 'medium' | 'large';
+  size?: 'tiny' | 'small' | 'medium' | 'large';
+  className?: string;
 }) {
   return (
     <Loader2
-      className='mb-7 animate-spin text-violet-700'
+      className={cn('mb-7 animate-spin text-violet-700', className)}
       size={sizeMapper[size]}
     />
   );

admission-web/src/components/pages/auth/sign-in/components/login-form.tsx

@@ -17,6 +17,7 @@ import { useRouter } from 'next/navigation';
 import { isAxiosError } from 'axios';
 import { useCommonToast } from '@/components/ui/toast/use-common-toast';
 import { TSignIn, SignInSchema } from '@/lib/schemas/auth.schemas';
+import { Loader } from '@/components/common/components/Loader';
 
 export const LoginForm = () => {
   const { toastError } = useCommonToast();
@@ -68,7 +69,11 @@ export const LoginForm = () => {
           className='w-full'
           disabled={form.formState.isSubmitting}
         >
-          Увійти
+          {form.formState.isSubmitting ? (
+            <Loader size='tiny' className='mb-0 text-violet-950' />
+          ) : (
+            'Увійти'
+          )}
         </Button>
       </form>
     </Form>

admission-web/src/components/pages/auth/sign-up/components/register-form.tsx

@@ -17,6 +17,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
 import { isAxiosError } from 'axios';
 import { TSignUp, SignUpSchema } from '@/lib/schemas/auth.schemas';
+import { Loader } from '@/components/common/components/Loader';
 
 export const RegisterForm = () => {
   const { push } = useRouter();
@@ -123,7 +124,11 @@ export const RegisterForm = () => {
           className='w-full'
           disabled={form.formState.isSubmitting}
         >
-          Зареєструватись
+          {form.formState.isSubmitting ? (
+            <Loader size='tiny' className='mb-0 text-violet-950' />
+          ) : (
+            'Зареєструватись'
+          )}
         </Button>
       </form>
     </Form>

admission-web/src/components/pages/entrant/documents/components/DocumentsForm.tsx

@@ -38,6 +38,8 @@ import { EducationalDegree } from '$/utils/src/enums/EducationalDegreeEnum';
 import { StudyForm } from '$/utils/src/enums/StudyFormEnum';
 import { Specialty } from '$/utils/src/enums/SpecialtyEnum';
 import { PaymentType } from '$/utils/src/enums/PaymentTypeEnum';
+import { Loader } from '@/components/common/components/Loader';
+import { useQueryClient } from '@tanstack/react-query';
 
 export const DocumentsForm = () => {
   const { toastError, toastSuccess } = useCommonToast();
@@ -60,6 +62,7 @@ export const DocumentsForm = () => {
   const studyForm = form.watch('studyForm');
 
   const { push } = useRouter();
+  const queryClient = useQueryClient();
 
   const { user } = useAuth();
 
@@ -85,6 +88,9 @@ export const DocumentsForm = () => {
                 ] as string)
               : null,
         });
+        await queryClient.refetchQueries({
+          queryKey: ['personal-data', user!.id],
+        });
         push('/');
         toastSuccess(
           'Договір успішно створений!',
@@ -412,8 +418,16 @@ export const DocumentsForm = () => {
         {specialty === Specialty.F6 && degree !== EducationalDegree.MASTER && (
           <PriorityForm educationalPrograms={ISTeduPrograms} form={form} />
         )}
-        <Button type='submit' className='w-full md:w-[185px]'>
-          Надіслати договір
+        <Button
+          type='submit'
+          className='w-full md:w-[185px]'
+          disabled={form.formState.isSubmitting}
+        >
+          {form.formState.isSubmitting ? (
+            <Loader size='tiny' className='mb-0 text-violet-950' />
+          ) : (
+            'Надіслати договір'
+          )}
         </Button>
       </form>
     </Form>

admission-web/src/components/pages/entrant/documents/components/PriorityForm.tsx

@@ -64,7 +64,9 @@ const PriorityForm: FC<PriorityFormProps> = ({
               >
                 <FormControl>
                   <SelectTrigger className='w-[320px] md:w-[350px]'>
-                    <SelectValue placeholder='Вибери зі списку' />
+                    <div className='line-clamp-1 break-words text-start'>
+                      <SelectValue placeholder='Вибери зі списку' />
+                    </div>
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent className='w-[320px] md:w-auto'>

admission-web/src/components/pages/entrant/main/components/StudentPayerBlock.tsx

@@ -13,7 +13,10 @@ export function StudentPayerBlock({ payerData }: { payerData: PersonalData }) {
           <div className='mt-3 flex flex-col gap-3 text-sm font-light'>
             <h6>Номер телефону: {payerData.phoneNumber}</h6>
             <h6>Електронна пошта: {payerData.email}</h6>
-            <h6>Номер паспорту: {payerData.passportNumber}</h6>
+            <h6>
+              Номер паспорту: {payerData?.passportSeries}{' '}
+              {payerData.passportNumber}
+            </h6>
             <h6>Дата видачі: {payerData.passportDate}</h6>
             <h6>Орган видачі: {payerData.passportInstitute}</h6>
             <h6>РНОКПП: {payerData.idCode}</h6>

admission-web/src/components/pages/entrant/main/components/StudentPersonalDataBlock.tsx

@@ -36,7 +36,10 @@ export function StudentPersonalDataBlock({ userId }: { userId: string }) {
             <div className='mt-3 flex flex-col gap-3 text-sm font-light'>
               <h6>Номер телефону: {userData.entrantData.phoneNumber}</h6>
               <h6>Електронна пошта: {userData.entrantData.email}</h6>
-              <h6>Номер паспорту: {userData.entrantData.passportNumber}</h6>
+              <h6>
+                Номер паспорту: {userData.entrantData.passportSeries}{' '}
+                {userData.entrantData.passportNumber}
+              </h6>
               <h6>Дата видачі: {userData.entrantData.passportDate}</h6>
               <h6>Ким видано: {userData.entrantData.passportInstitute}</h6>
               <h6>РНОКПП: {userData.entrantData.idCode}</h6>

admission-web/src/components/pages/entrant/main/components/StudentRepresentativeBlock.tsx

@@ -17,7 +17,10 @@ export function StudentRepresentativeBlock({
           <div className='mt-3 flex flex-col gap-3 text-sm font-light'>
             <h6>Номер телефону: {representativeData.phoneNumber}</h6>
             <h6>Електронна пошта: {representativeData.email}</h6>
-            <h6>Номер паспорту: {representativeData.passportNumber}</h6>
+            <h6>
+              Номер паспорту: {representativeData.passportSeries}{' '}
+              {representativeData.passportNumber}
+            </h6>
             <h6>Дата видачі: {representativeData.passportDate}</h6>
             <h6>Орган видачі: {representativeData.passportInstitute}</h6>
             <h6>РНОКПП: {representativeData.idCode}</h6>

admission-web/src/components/pages/entrant/personal-data/components/SubmitPage.tsx

@@ -11,6 +11,7 @@ import { usePersonalDataContext } from '@/lib/contexts/PersonalDataContext';
 import { FundingSourceLabels } from '@/lib/constants/fundingSourceLabels';
 import { FundingSource } from '$/utils/src/enums/FundingSourceEnum';
 import { useToast } from '@/components/ui/toast/use-toast';
+import { useQueryClient } from '@tanstack/react-query';
 
 const SubmitPage: FC = () => {
   const { toast } = useToast();
@@ -29,6 +30,7 @@ const SubmitPage: FC = () => {
   const [adminCode, setAdminCode] = useState('');
   const { user } = useAuth();
   const { push } = useRouter();
+  const queryClient = useQueryClient();
 
   const onSubmit = async () => {
     if (isSubmittingInCorpus) {
@@ -44,6 +46,9 @@ const SubmitPage: FC = () => {
         },
         user!.id
       );
+      await queryClient.refetchQueries({
+        queryKey: ['personal-data', user!.id],
+      });
       toast({
         title: 'Особисті дані оновлено!',
         variant: 'success',
@@ -58,6 +63,7 @@ const SubmitPage: FC = () => {
       });
     }
   };
+
   return (
     <div className='flex flex-col gap-8'>
       {showPopup && (