feat: add search for list pages

src/pages/Station/StationListPage/index.tsx

@@ -5,8 +5,9 @@ import {
   languageStore,
   stationsStore,
   selectedCityStore,
+  SearchInput,
 } from "@shared";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { Pencil, Trash2, Minus, Route } from "lucide-react";
 import { useNavigate } from "react-router-dom";
@@ -36,6 +37,7 @@ export const StationListPage = observer(() => {
   });
   const { language } = languageStore;
   const canWriteStations = authStore.canWrite("stations");
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     const fetchStations = async () => {
@@ -121,21 +123,23 @@ export const StationListPage = observer(() => {
     },
   ];
 
-  const filteredStations = () => {
+  const rows = useMemo(() => {
     const { selectedCityId } = selectedCityStore;
-    if (!selectedCityId) {
-      return stationLists[language].data;
-    }
-    return stationLists[language].data.filter(
-      (station: any) => station.city_id === selectedCityId
-    );
-  };
-
-  const rows = filteredStations().map((station: any) => ({
-    id: station.id,
-    name: station.name,
-    description: station.description,
-  }));
+    const query = searchQuery.toLowerCase();
+    return stationLists[language].data
+      .filter((station: any) => !selectedCityId || station.city_id === selectedCityId)
+      .filter(
+        (station: any) =>
+          !query ||
+          (station.name ?? "").toLowerCase().includes(query) ||
+          (station.description ?? "").toLowerCase().includes(query)
+      )
+      .map((station: any) => ({
+        id: station.id,
+        name: station.name,
+        description: station.description,
+      }));
+  }, [stationLists[language].data, selectedCityStore.selectedCityId, searchQuery]);
 
   return (
     <>
@@ -161,6 +165,8 @@ export const StationListPage = observer(() => {
           </div>
         )}
 
+        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+
         <DataGrid
           rows={rows}
           columns={columns}