Pesquisa-por-nome-de-estação

Permite buscar pelo nome da estação, disparando a busca se o nome buscado tiver mais que 4 caracteres.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "base-project",
   "private": true,
-  "version": "2.3.8",
+  "version": "2.4.8",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/assets/styles/globals.scss

@@ -66,4 +66,7 @@ a {
 }
 .leaflet-pane{
     margin-top: -100px;
+}
+.leaflet-top{
+    z-index: 400 !important;
 }

src/components/Header/Header.jsx

@@ -10,6 +10,8 @@ import { ShapeContext } from '../../hooks/getShape'
 import { useNavigate } from 'react-router-dom'
 import { ThemeContext } from '../../hooks/getTheme'
 import { RoutesContext } from '../../hooks/getRoutes'
+import { NameContext } from '../../hooks/getName'
+import { api } from '../../services/api'
 
 export function Header(props) {
     let navigate = useNavigate()
@@ -19,14 +21,17 @@ export function Header(props) {
     const {theme} = useContext(ThemeContext)
     const [newCode, setNewCode] = useState("")
     const [value, setValue] = useState('')
+    const [codeIdentifier, setCodeIdentifier] = useState()
     const { setRoutes, setPlataforms} = useContext(RoutesContext)
+    const { setResults, results, similarNames } = useContext(NameContext)
     function clearInfo() {
         setTrip('')
         setCode("")
         navigate('/')
         setPoints("")
         setPlataforms([])
         setRoutes()
+        setResults()
 
     }
 
@@ -41,14 +46,31 @@ export function Header(props) {
         setPlataforms([])
         setRoutes()
         setPoints("")
+        if (event.target.value.length == 0) {
+            setResults()
+        }
 
     }
+    useEffect(() => {
+        api.get("/stops/?stop_code=" + newCode.toUpperCase())
+            .then(response => {
+                if (response.data.count == 0) {
+                    similarNames('/stops/?stop_name=' + newCode)
+                    setCodeIdentifier(false)
+                    console.log(newCode)
+                } else {
+                    setCodeIdentifier(true)
+                    setResults()
+                }
+            })
+    }, [newCode])
 
     useEffect(() => {
-        if (newCode.length == 4) {
+        if (newCode.length == 4 && codeIdentifier === true && !/^[a-zA-Z]+$/.test(newCode)) {
             navigate(`/${newCode}`)
         }
-    }, [newCode])
+    }, [codeIdentifier])
+
 
     return (
         <>
@@ -66,7 +88,21 @@ export function Header(props) {
                                 <button className='absolute right-[12px] top-0 bottom-0' onClick={() => clearInfo()}>
                                     <GrFormClose />
                                 </button>
-                                <input type="text" className="rounded-lg py-3.5 px-3 w-full inputShadow uppercase" maxLength={4} onChange={searchNewCode} value={value}/>
+                                <input type="text" placeholder='Selecione a estação de origem' className="rounded-lg py-3.5 px-3 w-full inputShadow" onKeyUp={searchNewCode} onPaste={searchNewCode} value={value} />
+                                {code.length === 0 || !results ? <></> :
+                                    <ul className='bg-white border-[1px] rounded-lg absolute max-h-[120px] z-[1001] py-3.5 px-3 overflow-scroll'>
+                                        {results.length == 0 ? <li>
+                                            Não foi possível encontrar a estação
+                                        </li> :
+                                            results.map((e, index) => {
+                                                return <li className={index === 0 ? 'border-t-0' : "" + 'py-2 border-t-2 border-gray-300'} onClick={() => navigate(`/${e.stop_code}`)}>
+                                                    {e.stop_name}
+                                                </li>
+                                            })
+                                        }
+
+                                    </ul>
+                                }
                             </div>
                         </div>
                     </div>

src/components/InfoCard/InfoCard.jsx

@@ -11,20 +11,20 @@ import { ThemeContext } from '../../hooks/getTheme'
 import { api } from '../../services/api'
 import { GrClose } from 'react-icons/gr'
 
-export function InfoCard(){
+export function InfoCard() {
     const [name, setName] = useState()
-    const {theme} = useContext(ThemeContext)
-    const {code} = useContext(CodeContext)
-    const {routes, isParent, getMultiplePages, plataforms, setRoutes} = useContext(RoutesContext)
+    const { theme } = useContext(ThemeContext)
+    const { code } = useContext(CodeContext)
+    const { routes, isParent, getMultiplePages, plataforms, setRoutes, stopId, locationType } = useContext(RoutesContext)
     const { setTrip } = useContext(TripContext);
 
 
     useEffect(() => {
         api.get('/stops/?stop_code=' + code.toUpperCase())
-               .then(response => setName(response.data.results[0].stop_name)) 
+            .then(response => setName(response.data.results[0].stop_name))
     }, [code])
-    
-    return(
+
+    return (
 
         <>
             {isParent ? <div className="fixed bottom-0 translate-x-1/2 right-1/2 w-11/12 z-[401]">
@@ -62,7 +62,7 @@ export function InfoCard(){
                                     </li>
                                 }))
 
-                            }</>:
+                            }</> :
                             routes.map((e) => {
                                 return <li key={e.id} onClick={() => setTrip(e.trip_id.trip_id)} className="flex justify-between border-b py-2.5">
                                     <div className={styles.routeName}>
@@ -77,46 +77,46 @@ export function InfoCard(){
                                 </li>
                             })
                         }
-                       
-                    
+
+
                     </ul>
                 </div>
-            </div> 
-            : 
-        // FINAL CARD COM PARENT STATION
-            <div className="fixed bottom-0 translate-x-1/2 right-1/2 w-11/12 z-[401]">
-                <div className={styles.routesCard}>
-                    <p className='text-[#707070] text-sm'>Você está em</p>
-                    <h1 className="text-xl font-semibold mb-3">{name}</h1>
-                    <ul className={styles.routeList}>
-                        {!routes ? <>
-                            <Oval
-                                height={40}
-                                width={40}
-                                color="#707070"
-                                wrapperStyle={{}}
-                                visible={true}
-                                ariaLabel='oval-loading'
-                                secondaryColor="#707070"
-                                strokeWidth={4}
-                                strokeWidthSecondary={4}
+            </div>
+                :
+                // FINAL CARD COM PARENT STATION
+                <div className="fixed bottom-0 translate-x-1/2 right-1/2 w-11/12 z-[401]">
+                    <div className={styles.routesCard}>
+                        <p className='text-[#707070] text-sm'>Você está em</p>
+                        <h1 className="text-xl font-semibold mb-3">{name}</h1>
+                        <ul className={styles.routeList}>
+                            {!routes ? <>
+                                <Oval
+                                    height={40}
+                                    width={40}
+                                    color="#707070"
+                                    wrapperStyle={{}}
+                                    visible={true}
+                                    ariaLabel='oval-loading'
+                                    secondaryColor="#707070"
+                                    strokeWidth={4}
+                                    strokeWidthSecondary={4}
 
-                            /></> :  routes.map((e) => {
-                                return <li key={e.id} onClick={() => setTrip(e.trip_id.trip_id)} className="flex justify-between border-b py-2.5">
-                                    <div className={styles.routeName}>
-                                        <div className={styles.shortName}>
-                                            {theme ? <img src={busSppo} alt="" /> :
-                                                <img src={bus} alt="" />
-                                            }
-                                            <p className='ml-2 font-semibold leading-none'>{e.trip_id.trip_short_name}</p>
+                                /></> : routes.map((e) => {
+                                    return <li key={e.id} onClick={() => setTrip(e.trip_id.trip_id)} className="flex justify-between border-b py-2.5">
+                                        <div className={styles.routeName}>
+                                            <div className={styles.shortName}>
+                                                {theme ? <img src={busSppo} alt="" /> :
+                                                    <img src={bus} alt="" />
+                                                }
+                                                <p className='ml-2 font-semibold leading-none'>{e.trip_id.trip_short_name}</p>
+                                            </div>
+                                            <p className="text-sm ml-2.5">{e.trip_id?.trip_headsign ?? 'Circular'}</p>
                                         </div>
-                                        <p className="text-sm ml-2.5">{e.trip_id?.trip_headsign ?? 'Circular'}</p>
-                                    </div>
-                                </li>
-                            })}
-                    </ul>
-                </div>
-            </div> }
+                                    </li>
+                                })}
+                        </ul>
+                    </div>
+                </div>}
         </>
     )
 

src/hooks/getCode.jsx

@@ -15,14 +15,10 @@ export function CodeProvider({ children }) {
     const [active, setActive] = useState(false)
 
 
-    // const searchHandler = (query) => {
-    //     setCode(query);
-    // }
-
     useEffect(() => {
         const urlCode = searchParams.get('code');
         if(urlCode !== null){
-            setCode(urlCode.toUpperCase)
+            setCode(urlCode.toUpperCase())
         }
     }, [])
     // CHECA SE CÓDIGO PESQUISADO EXISTE

src/hooks/getName.jsx

@@ -0,0 +1,73 @@
+import { createContext, useEffect, useState } from "react";
+import { toast } from 'react-toastify'
+import { api } from "../services/api";
+import { useNavigate } from "react-router-dom";
+
+export const NameContext = createContext()
+
+export function NameProvider({ children }) {
+    const navigate = useNavigate()
+    const [firstCode, setFirstCode] = useState("")
+    const [results, setResults] = useState()
+    const [codeR, setCodeR] = useState()
+
+
+
+
+    const searchCode = event => {
+        setFirstCode(event.target.value)
+        if(event.target.value.length == 0){
+            setResults()
+        }
+    }
+
+    let allSimilar = []
+    async function similarNames(url) {
+        await api
+            .get(url)
+            .then(({ data }) => {
+                data.results.forEach((item) => {
+                    if (item.stop_code != null && !allSimilar.some(i => i.stop_code === item.stop_code)) {
+                        allSimilar.push(item)
+                    } else {
+                        setResults()
+                    }
+                })
+                if (data.next) {
+                    similarNames(data.next)
+                }
+                setResults([...allSimilar])
+            })
+    }
+
+
+    useEffect(() => {
+        api.get("/stops/?stop_code=" + firstCode.toUpperCase())
+            .then(response => {
+                if (response.data.count == 0 ) {
+                    similarNames('/stops/?stop_name=' + firstCode)
+                    setCodeR(false)
+                    console.log(firstCode)
+                } else {
+                    setCodeR(true)
+                    setResults()
+                }
+            })
+    }, [firstCode])
+
+    useEffect(() => {
+        if (firstCode.length == 4 && codeR === true && !/^[a-zA-Z]+$/.test(firstCode)) {
+            navigate(`/${firstCode}`)
+        }
+    }, [codeR])
+
+
+
+
+
+    return (
+        <NameContext.Provider value={{ setFirstCode, searchCode, results, setResults,codeR, setCodeR, similarNames }}>
+            {children}
+        </NameContext.Provider>
+    )
+}

src/hooks/getRoutes.jsx

@@ -13,16 +13,18 @@ export function RoutesProvider({ children }) {
     const [plataforms, setPlataforms] = useState([])
     const [locationType, setLocationType] = useState()
     const [stations, setStations] = useState()
-    const [isParent, setIsParent] = useState(false)
+    const [isParent, setIsParent] = useState()
 
 
     useEffect(() => {
-        api
-            .get("/stops/?stop_code=" + code.toUpperCase())
-            .then(response => setStopId(response.data.results[0].stop_id))
-        api.get("/stops/?stop_code=" + code.toUpperCase())
-            .then(response => setLocationType(response.data.results[0].location_type))
-
+        if (code != undefined) {
+            api
+                .get("/stops/?stop_code=" + code.toUpperCase())
+                .then(response => {
+                    setStopId(response.data.results[0].stop_id)
+                    setLocationType(response.data.results[0].location_type)
+                })
+        }
     }, [code])
 
     let allTrips = []
@@ -34,7 +36,7 @@ export function RoutesProvider({ children }) {
                 if (data.next) {
                     getMultiplePages(data.next)
                 }
-                    setRoutes([...allTrips])
+                        setRoutes([...allTrips])
             })
 
     }
@@ -53,23 +55,21 @@ export function RoutesProvider({ children }) {
 
     }
 
-    function checkParent(){
-        if (locationType === 1){
-            setIsParent(true)
-        } else if (locationType === 0) {
-            setIsParent(false)
-        }
-    }
+
     useEffect(() => {
-        if(stopId != undefined || stopId != null){
-            if(locationType ===1){
+        if (code && locationType != undefined) {
+            if (locationType === 1) {
                 getStations("/stop_times/?stop_id=" + stopId)
-            } else if(locationType === 0){
+                setIsParent(true)
+            } else if (locationType === 0) {
                 getMultiplePages("/stop_times/?stop_id=" + stopId)
+                setIsParent(false)
             }
-            checkParent()
         }
     }, [stopId, locationType])
+
+
+
     useEffect(() => {
         if (locationType != null || locationType != undefined || stations != undefined) {
             const iteratee =  stations.map((e) => e.stop_id)
@@ -83,7 +83,7 @@ export function RoutesProvider({ children }) {
     }, [stations]);
 
     return (
-        <RoutesContext.Provider value={{ routes, stopId, setRoutes, getMultiplePages, isParent, plataforms, setPlataforms, stations }}>
+        <RoutesContext.Provider value={{ routes, stopId, setRoutes, getMultiplePages, isParent, plataforms, setPlataforms, stations}}>
             {children}
         </RoutesContext.Provider>
     )