Donor request

Arlet2 · Feb 24, 2024 · 1cd7bab · 1cd7bab
1 parent 2112d61
commit 1cd7bab
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 19 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -372,3 +372,9 @@ button {
 .semibold{
   font-weight: 500;
 }
+
+.textarea {
+  width: 400px;
+  height: 100px;
+  resize: none;
+}
diff --git a/app/redux/services/api.ts b/app/redux/services/api.ts
@@ -31,6 +31,15 @@ interface BloodType {
   bloodType: string;
 }
 
+interface DonorRequests {
+  description: string;
+  vetAddress: string;
+  petTypeID: number;
+  bloodTypeID: number;
+  bloodAmountMl: number;
+  availableUntil: string;
+}
+
 export const api = createApi({
   reducerPath: 'api',
   baseQuery: fetchBaseQuery({
@@ -39,6 +48,7 @@ export const api = createApi({
       let accessToken = localStorage.getItem("accessToken");
 
       if (accessToken) {
+        console.log(accessToken)
         headers.set('authorization', `Bearer ${accessToken}`)
       }
 
@@ -65,18 +75,18 @@ export const api = createApi({
         params: { typeName: petType }
       })
     }),
-    addSomething: builder.mutation<ISomeType, Partial<ISomeType>>({
-        query: (body) => ({
-          url: `something/create`,
-          method: 'POST',
-          body,
-        }),
+    addDonorRequest: builder.mutation<void, DonorRequest>({
+      query: (body) => ({
+        url: `donor_requests/`,
+        method: 'POST',
+        body,
       }),
+    }),
   }),
 })
 
 /* хуки, которые потом используем в компонентах, генерируются автоматически */
-export const { useGetCitiesQuery, useGetDistrictsQuery, useGetPetTypesQuery, useGetBloodTypesQuery } = api
+export const { useGetCitiesQuery, useGetDistrictsQuery, useGetPetTypesQuery, useGetBloodTypesQuery, useAddDonorRequestMutation } = api
 
 async function postData(url: string, data: object): Promise<object> {
   let headers: Record<string, string> = {
@@ -85,7 +95,7 @@ async function postData(url: string, data: object): Promise<object> {
   };
   let accessToken = localStorage.getItem("accessToken");
   if (accessToken) {
-    headers['authorization'] = `Bearer ${accessToken}`
+    headers['Authorization'] = `Bearer ${accessToken}`
   }
   const response = await fetch(API_URL + url, {
     headers,

diff --git a/app/search/page.tsx b/app/search/page.tsx
@@ -4,17 +4,42 @@ import { useState } from "react";
 import styles from './styles.module.css';
 import cn from 'classnames';
 import { CitySelector, DistrictSelector, PetTypeSelector, BloodTypeSelector } from '@components/Selector';
+import * as api from '@/app/redux/services/api';
+import { useRouter } from 'next/navigation';
 
 function Modal() {
+    const router = useRouter();
+    const [ description, setDescription ] = useState("");
+    const [ vetAddress, setVetAddress ] = useState("");
     const [ petType, setPetType ] = useState({id: 0, type: "Кошка"});
     const [ bloodType, setBloodType ] = useState(0);
+    const [ bloodAmountMl, setBloodAmountMl ] = useState(0);
+    const [ availableUntil, setAvailableUntil ] = useState("");
 
-    const [ city, setCity ] = useState({id: 0, city: "Санкт-Петербург"});
-    const [ district, setDistrict ] = useState(0);
+    const [ addDonorRequest, result ] = api.useAddDonorRequestMutation()
+
+    function submit(e) {
+        e.preventDefault()
+
+        addDonorRequest({
+            description,
+            vetAddress,
+            petTypeID: petType.id,
+            bloodTypeID: bloodType,
+            bloodAmountMl,
+            availableUntil
+        })
+
+        router.push(`/applications`);
+    }
 
     return (
-        <form className={styles.modal}>
+        <form className={styles.modal} onSubmit={submit}>
             <h1>Данные для поиска</h1>
+            <div className={styles.inputContainer}>
+                <label className={styles.label}>Причина </label>
+                <textarea required className="input textarea" placeholder="..." value={description} onChange={e => setDescription(e.target.value)}/>
+            </div>
             <div className={styles.inputContainer}>
                 <label className={styles.label}>Тип животного</label>
                 <PetTypeSelector value={petType} onChange={(v) => setPetType(v)}/>
@@ -24,20 +49,16 @@ function Modal() {
                 <BloodTypeSelector petType={petType} value={bloodType} onChange={(v) => setBloodType(v)}/>
             </div>
             <div className={styles.inputContainer}>
-                <label className={styles.label}>Город</label>
-                <CitySelector value={city} onChange={(v) => setCity(v)}/>
-            </div>
-            <div className={styles.inputContainer}>
-                <label className={styles.label}>Район</label>
-                <DistrictSelector city={city} value={district} onChange={(v) => setDistrict(v)}/>
+                <label className={styles.label}>Адрес вет. клиники</label>
+                <input required type="text" className="input" placeholder="ул.Пушкина, д.Колотушкина" value={vetAddress} onChange={e => setVetAddress(e.target.value)}/>
             </div>
             <div className={styles.inputContainer}>
                 <label className={styles.label}>Количество крови (мл)</label>
-                <input type="number" className="input" placeholder="0"/>
+                <input required type="number" className="input" placeholder="0" value={bloodAmountMl} onChange={e => setBloodAmountMl(e.target.value) }/>
             </div>
             <div className={styles.inputContainer}>
                 <label className={styles.label}>Дата окончания поиска</label>
-                <input required type="date" className="input"/>
+                <input required type="date" className="input" value={availableUntil} onChange={e => setAvailableUntil(e.target.value)}/>
             </div>
             <button className={cn("button", styles.modalButton)} type='submit'>Создать заявку</button>
         </form>