Add selectors..................

Arlet2 · Feb 24, 2024 · 93fbcbb · 93fbcbb
1 parent 712085d
commit 93fbcbb
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 18 deletions.
diff --git a/app/components/Selector/index.tsx b/app/components/Selector/index.tsx
@@ -0,0 +1,47 @@
+import * as api from '@/app/redux/services/api';
+
+interface CitySelectorProps {
+  value: string
+  onChange: (v: string) => void
+}
+
+export const CitySelector = ({value, onChange}: CitySelectorProps) => {
+  const { data, isLoading } = api.useGetCitiesQuery();
+
+  return (
+    <select className="input" value={value} onChange={(e) => onChange(e.target.value)}>
+      {data && data.map((v, i) => <option value={v} key={i}>{v}</option>)}
+    </select>
+  )
+}
+
+interface DistrictSelectorProps {
+  city: string
+  value: number
+  onChange: (v: number) => void
+}
+
+export const DistrictSelector = ({city, value, onChange}: DistrictSelectorProps) => {
+  const { data, isLoading } = api.useGetDistrictsQuery(city);
+
+  return (
+    <select className="input" value={String(value)} onChange={(e) => onChange(Number(e.target.value))}>
+      {data && data.map((v, i) => <option value={String(v.id)} key={i}>{v.district}</option>)}
+    </select>
+  )
+}
+
+interface PetTypeSelectorProps {
+  value: string
+  onChange: (v: string) => void
+}
+
+export const PetTypeSelector = ({value, onChange}: PetTypeSelectorProps) => {
+  const { data, isLoading } = api.useGetPetTypesQuery();
+
+  return (
+    <select className="input" value={value} onChange={(e) => onChange(e.target.value)}>
+      {data && data.map((v, i) => <option value={v} key={i}>{v}</option>)}
+    </select>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -2,7 +2,6 @@
 
 import { useDispatch, useSelector } from "react-redux";
 import styles from "./page.module.css";
-import { useGetSomethingByNameQuery } from "@redux/services/api";
 import { Skeleton } from "@components/Skeleton";
 
 /* главная страница, которая будет открываться по / */

diff --git a/app/redux/services/api.ts b/app/redux/services/api.ts
@@ -10,6 +10,11 @@ interface ISomeType {
     name: string;
 }
 
+interface District {
+  id: number;
+  district: string;
+}
+
 export const api = createApi({
   reducerPath: 'api',
   baseQuery: fetchBaseQuery({
@@ -26,8 +31,17 @@ export const api = createApi({
   }),
   endpoints: (builder) => ({
     /* в дженерике первым аргументом передается тип, который мы получаем, вторым аргументом - тип, который передается в кверю*/
-    getSomethingByName: builder.query<string, string>({
-      query: (name) => `something/${name}`,
+    getCities: builder.query<string[], void>({
+      query: () => `location/cities`,
+    }),
+    getDistricts: builder.query<District[], string>({
+      query: (city) => ({
+        url: `location/districts`,
+        params: { city }
+      })
+    }),
+    getPetTypes: builder.query<string[], void>({
+      query: () => `pets/types`,
     }),
     addSomething: builder.mutation<ISomeType, Partial<ISomeType>>({
         query: (body) => ({
@@ -39,6 +53,9 @@ export const api = createApi({
   }),
 })
 
+/* хуки, которые потом используем в компонентах, генерируются автоматически */
+export const { useGetCitiesQuery, useGetDistrictsQuery, useGetPetTypesQuery } = api
+
 async function postData(url: string, data: object): Promise<object> {
   let headers: Record<string, string> = {
     'Accept': 'application/json',
@@ -70,6 +87,3 @@ export async function login(credentials: ILoginCredentials): Promise<IApiToken>
 export async function logout(): Promise<void> {
   await postData("auth/logout", {}) as IApiToken;
 }
-
-/* хуки, которые потом используем в компонентах, генерируются автоматически */
-export const { useGetSomethingByNameQuery } = api
diff --git a/app/search/page.tsx b/app/search/page.tsx
@@ -3,17 +3,19 @@
 import { useState } from "react";
 import styles from './styles.module.css';
 import cn from 'classnames';
+import { CitySelector, DistrictSelector, PetTypeSelector } from '@components/Selector';
 
 function Modal() {
+    const [ petType, setPetType ] = useState("Санкт-Петербург");
+    const [ city, setCity ] = useState("Санкт-Петербург");
+    const [ district, setDistrict ] = useState(0);
+
     return (
         <form className={styles.modal}>
             <h1>Данные для поиска</h1>
             <div className={styles.inputContainer}>
                 <label className={styles.label}>Тип животного</label>
-                <select className="input">
-                    <option>Кошка</option>
-                    <option>Собака</option>
-                </select>
+                <PetTypeSelector value={petType} onChange={(v) => setPetType(v)}/>
             </div>
             <div className={styles.inputContainer}>
                 <label className={styles.label}>Группа крови</label>
@@ -24,17 +26,11 @@ function Modal() {
             </div>
             <div className={styles.inputContainer}>
                 <label className={styles.label}>Город</label>
-                <select className="input">
-                    <option>Санкт-Петербург</option>
-                    <option>Москва</option>
-                </select>
+                <CitySelector value={city} onChange={(v) => setCity(v)}/>
             </div>
             <div className={styles.inputContainer}>
                 <label className={styles.label}>Район</label>
-                <select className="input">
-                    <option>Шушары</option>
-                    <option>Нижний Тагил</option>
-                </select>
+                <DistrictSelector city={city} value={district} onChange={(v) => setDistrict(v)}/>
             </div>
             <div className={styles.inputContainer}>
                 <label className={styles.label}>Количество крови (мл)</label>