feat: implementation of search section

.env.example

@@ -1 +1,2 @@
-NESHAN_MAP_API_KEY=
+NESHAN_MAP_API_KEY=
+NESHAN_SERVICES_API_KEY=

package.json

@@ -14,9 +14,12 @@
   "dependencies": {
     "@neshan-maps-platform/mapbox-gl": "^1.1.3",
     "@neshan-maps-platform/mapbox-gl-react": "^1.0.2",
+    "axios": "^1.7.2",
+    "classnames": "^2.5.1",
     "css-loader": "^7.1.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-query": "^3.39.3",
     "style-loader": "^4.0.0"
   },
   "devDependencies": {
@@ -39,4 +42,4 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
   }
-}
+}

src/App.tsx

@@ -1,11 +1,16 @@
 import { FC } from "react";
 import { HomePage } from "./pages";
+import { QueryClient, QueryClientProvider } from "react-query";
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: 2 } },
+});
 
 const App: FC = () => {
   return (
-    <div>
+    <QueryClientProvider client={queryClient}>
       <HomePage />
-    </div>
+    </QueryClientProvider>
   );
 };
 

src/components/icon/icons.tsx

@@ -0,0 +1,41 @@
+import type { SVGProps } from "react";
+
+const Menu = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20.5 6C20.5 6.27614 20.2761 6.5 20 6.5H4C3.72386 6.5 3.5 6.27614 3.5 6C3.5 5.72386 3.72386 5.5 4 5.5H20C20.2761 5.5 20.5 5.72386 20.5 6ZM20.5 12C20.5 12.2761 20.2761 12.5 20 12.5H10C9.72386 12.5 9.5 12.2761 9.5 12C9.5 11.7239 9.72386 11.5 10 11.5H20C20.2761 11.5 20.5 11.7239 20.5 12ZM20 18.5C20.2761 18.5 20.5 18.2761 20.5 18C20.5 17.7239 20.2761 17.5 20 17.5H4C3.72386 17.5 3.5 17.7239 3.5 18C3.5 18.2761 3.72386 18.5 4 18.5H20Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const Close = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M19 5.00006L5.00006 19M5 5L18.9999 18.9999"
+      stroke="currentColor"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export const Icons = {
+  Menu,
+  Close,
+};

src/components/icon/index.tsx

@@ -0,0 +1,15 @@
+import type { FC, SVGProps } from "react";
+import { Icons } from "./icons";
+
+export type AvailableIcons = keyof typeof Icons;
+
+type IIcon = {
+  name: AvailableIcons;
+  size?: string;
+} & SVGProps<SVGSVGElement>;
+
+export const Icon: FC<IIcon> = ({ name, size = "1em", ...rest }) => {
+  const sizes = { width: size, height: size };
+  const IconName = Icons[name];
+  return <IconName role="img" aria-label={name} {...sizes} {...rest} />;
+};

src/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./input";
+export { Icon, type AvailableIcons } from "./icon";
+export * from "./loading";

src/components/input/index.tsx

@@ -0,0 +1,45 @@
+import cn from "classnames";
+import { FC, InputHTMLAttributes } from "react";
+import { Icon } from "../icon";
+
+export interface IInput extends InputHTMLAttributes<HTMLInputElement> {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Input: FC<IInput> = ({ className, value, onChange, ...rest }) => {
+  const handleClear = () => {
+    onChange({ target: { value: "" } } as React.ChangeEvent<HTMLInputElement>);
+  };
+
+  return (
+    <div className="relative">
+      <div
+        className={cn(
+          "px-4 py-2 border border-gray-300 rounded-xl w-full text-gray-500 bg-white focus-within:bg-gray-100",
+          value && "pl-8"
+        )}
+      >
+        <input
+          type="text"
+          value={value}
+          onChange={onChange}
+          className={cn(
+            "focus:outline-none w-full focus:bg-gray-100",
+            className
+          )}
+          {...rest}
+        />
+        {value && (
+          <button
+            type="button"
+            onClick={handleClear}
+            className="absolute left-2 top-2"
+          >
+            <Icon name="Close" size="24" className="text-gray-500" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/loading/index.tsx

@@ -0,0 +1,12 @@
+export function Loading() {
+  return (
+    <div className="h-full flex items-center justify-center flex-col text-center">
+      <div className="flex gap-2 mt-4">
+        <span className="w-2 h-2 rounded-full bg-sky-500 animate-jump [animation-delay:0.2s]"></span>
+        <span className="w-2 h-2 rounded-full bg-red-500 animate-jump [animation-delay:0.4s]"></span>
+        <span className="w-2 h-2 rounded-full bg-yellow-500 animate-jump [animation-delay:0.6s]"></span>
+        <span className="w-2 h-2 rounded-full bg-blue-500 animate-jump [animation-delay:0.8s]"></span>
+      </div>
+    </div>
+  );
+}

src/pages/home/components/search/index.tsx

@@ -0,0 +1,55 @@
+import { FC, useState, useEffect, useRef, ChangeEvent } from "react";
+import { Input, Loading } from "../../../../components";
+import { useSearch } from "../../../../services/search/useSearch";
+import { debounce } from "../../../../utility";
+
+type SearchProps = {
+  userLocation: [number, number];
+};
+
+const Search: FC<SearchProps> = ({ userLocation }) => {
+  const [searchText, setSearchText] = useState<string>("");
+  const [debouncedText, setDebouncedText] = useState<string>("");
+
+  const { data, isLoading } = useSearch({
+    lat: userLocation[1].toString(),
+    lng: userLocation[0].toString(),
+    term: debouncedText,
+  });
+
+  const handleSearch = useRef(
+    debounce((text: string) => setDebouncedText(text), 1500)
+  ).current;
+
+  useEffect(() => {
+    handleSearch(searchText);
+  }, [searchText, handleSearch]);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearchText(e.target.value);
+  };
+
+  return (
+    <div className="fixed right-0 top-0 z-10 w-80 bg-gray-100 max-h-screen overflow-auto">
+      <div className="bg-white p-4 shadow sticky top-0">
+        <Input
+          value={searchText}
+          placeholder="دنبال چی میگردی؟ رستوران ، شهر یا ..."
+          onChange={handleChange}
+        />
+        {isLoading && <Loading />}
+      </div>
+      <div className="flex flex-col gap-2">
+        {data?.items.map((item) => (
+          <div key={item.title} className="bg-white p-3">
+            <p className="text-xl font-bold">{item.title}</p>
+            <p className="text-zinc-500">{item.region}</p>
+            <p className="text-zinc-500">{item.address}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Search;

src/pages/home/index.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import "@neshan-maps-platform/mapbox-gl/dist/NeshanMapboxGl.css";
 import { MapComponent, MapTypes } from "@neshan-maps-platform/mapbox-gl-react";
 import nmp_mapboxgl from "@neshan-maps-platform/mapbox-gl";
+import Search from "./components/search";
 
 export const HomePage = () => {
   const mapKey = process.env.NESHAN_MAP_API_KEY as string;
@@ -52,7 +53,9 @@ export const HomePage = () => {
         }}
         className="h-dvh"
         mapSetter={(mapInstance) => setMap(mapInstance)}
-      />
+      >
+        <Search userLocation={userLocation} />
+      </MapComponent>
     </div>
   );
 };

src/services/http/index.ts

@@ -0,0 +1,82 @@
+import axios from "axios";
+
+class HttpClient {
+  private static instance: HttpClient;
+  private http;
+
+  private constructor() {
+    const API_KEY = process.env.NESHAN_SERVICES_API_KEY as string;
+
+    this.http = axios.create({
+      baseURL: "https://api.neshan.org/v1/",
+      headers: {
+        "Api-Key": API_KEY,
+      },
+    });
+
+    this.http.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (error.response) {
+          const status = error.response.status;
+          switch (status) {
+            case 470:
+              console.error(
+                "Error 470: CoordinateParseError - Invalid coordinates."
+              );
+              break;
+            case 480:
+              console.error(
+                "Error 480: KeyNotFound - Invalid or missing API key."
+              );
+              break;
+            case 481:
+              console.error("Error 481: LimitExceeded - Call limit exceeded.");
+              break;
+            case 482:
+              console.error("Error 482: RateExceeded - Rate limit exceeded.");
+              break;
+            case 483:
+              console.error(
+                "Error 483: ApiKeyTypeError - API key type mismatch."
+              );
+              break;
+            case 484:
+              console.error(
+                "Error 484: ApiWhiteListError - Access not allowed."
+              );
+              break;
+            case 485:
+              console.error(
+                "Error 485: ApiServiceListError - Service access mismatch."
+              );
+              break;
+            case 500:
+              console.error("Error 500: GenericError - General error.");
+              break;
+            default:
+              console.error("Unexpected error:", error.response.data);
+          }
+        } else if (error.request) {
+          console.error("No response received:", error.request);
+        } else {
+          console.error("Error setting up request:", error.message);
+        }
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  public static getInstance(): HttpClient {
+    if (!HttpClient.instance) {
+      HttpClient.instance = new HttpClient();
+    }
+    return HttpClient.instance;
+  }
+
+  public getHttpClient() {
+    return this.http;
+  }
+}
+
+export default HttpClient.getInstance().getHttpClient();

src/services/search/model.d.ts

@@ -0,0 +1,22 @@
+interface SearchRequestType {
+  lat: string;
+  lng: string;
+  term: string;
+}
+
+interface SearchItemResponseType {
+  title: string;
+  address: string;
+  neighbourhood: string;
+  region: string;
+  type: string;
+  category: string;
+  location: {
+    x: number;
+    y: number;
+  };
+}
+interface SearchResponseType {
+  count: number;
+  items: SearchItemResponseType[];
+}

src/services/search/search.service.ts

@@ -0,0 +1,35 @@
+import http from "../http";
+
+class SearchService {
+  private static instance: SearchService;
+
+  private constructor() {}
+
+  public static getInstance(): SearchService {
+    if (!SearchService.instance) {
+      SearchService.instance = new SearchService();
+    }
+    return SearchService.instance;
+  }
+
+  public async search(
+    searchRequest: SearchRequestType
+  ): Promise<SearchResponseType> {
+    try {
+      const response = await http.get("/search", {
+        params: {
+          lat: searchRequest.lat,
+          lng: searchRequest.lng,
+          term: searchRequest.term,
+        },
+      });
+
+      return response.data;
+    } catch (error) {
+      console.error("Error performing search:", error);
+      throw error;
+    }
+  }
+}
+
+export default SearchService.getInstance();