Merge pull request #10 from mohammad00alavi/branch-10_search_autocomp…

…lete

Branch 10 search autocomplete

.env

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_WEATHER_API_KEY=c140b0fcb1cd436a9f3f757823397c1d
-NEXT_PUBLIC_UNSPLASH_API_KEY=M4KxGszn25i0ppP2jAfck3-YgWxt-0OdlZfgmfIZGrk
+NEXT_PUBLIC_UNSPLASH_API_KEY=M4KxGszn25i0ppP2jAfck3-YgWxt-0OdlZfgmfIZGrk
+NEXT_PUBLIC_GOOGLE_API_KEY=AIzaSyB8-GYZov3FeO9z1B_y3LH7J_d_2k95Q7Q

package.json

@@ -28,8 +28,12 @@
     "postcss": "8.4.26",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-google-autocomplete": "^2.7.3",
     "react-plotly.js": "^2.6.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
+  },
+  "devDependencies": {
+    "@types/googlemaps": "^3.43.3"
   }
 }

src/components/Search/SeachModalList.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { SearchModalItem } from "./SearchModalItem";
+
+export interface SeachModalListProps {
+    itemList: google.maps.places.AutocompletePrediction[];
+    searchClickHandler: () => void;
+}
+
+const SeachModalList = ({
+    itemList,
+    searchClickHandler,
+}: SeachModalListProps) => {
+    return (
+        <ul className="bg-gray-500">
+            {itemList?.map((item) => (
+                <SearchModalItem
+                    href={item.structured_formatting.main_text}
+                    key={item.place_id}
+                    clickHandler={searchClickHandler}
+                    text={item.description}
+                />
+            ))}
+        </ul>
+    );
+};
+
+export default SeachModalList;

src/components/Search/SearchCity.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { SearchFormProps } from "@/types/SearchFormProps";
+import SearchModalContainer from "./SearchModalContainer";
+import SearchForm from "./SearchForm";
+
+const SearchCity: React.FC<SearchFormProps> = ({ onTestSubmit }) => {
+    return (
+        <div className="w-full m-auto absolute z-50">
+            <SearchForm onTestSubmit={onTestSubmit} />
+            <SearchModalContainer />
+        </div>
+    );
+};
+
+export default SearchCity;

src/components/Search/SearchForm.tsx

@@ -0,0 +1,45 @@
+import { useSearch } from "@/hooks/useSearch";
+import { SearchFormProps } from "@/types/SearchFormProps";
+import { useRouter } from "next/router";
+import React from "react";
+
+const SearchForm = ({ onTestSubmit }: SearchFormProps) => {
+    const { handleInputChange, inputText, setInputText } = useSearch();
+    const router = useRouter();
+
+    const onSubmitHandler = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        // Only for passing the test
+        if (onTestSubmit) {
+            onTestSubmit({
+                city: inputText.toLowerCase(),
+            });
+        }
+        router.push(`/${inputText.toLowerCase()}`, undefined, {
+            shallow: false,
+        });
+        setInputText("");
+    };
+    return (
+        <form
+            onSubmit={onSubmitHandler}
+            className="flex flex-row justify-between w-full relative opacity-40"
+        >
+            <input
+                aria-label="search"
+                className="py-4 px-4 outline-none w-full"
+                type="text"
+                value={inputText}
+                onChange={handleInputChange}
+                required
+                placeholder="Enter city name here... :)"
+            />
+
+            <button className="py-2 px-4 bg-white" type="submit">
+                Search
+            </button>
+        </form>
+    );
+};
+
+export default SearchForm;

src/components/Search/SearchModal.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import SeachModalList, { SeachModalListProps } from "./SeachModalList";
+
+interface SearchModalProps extends SeachModalListProps {
+    closeModalHandler: () => void;
+}
+
+const SearchModal = ({
+    itemList,
+    searchClickHandler,
+    closeModalHandler,
+}: SearchModalProps) => {
+    return (
+        <div className="relative">
+            <SeachModalList
+                itemList={itemList}
+                searchClickHandler={searchClickHandler}
+            />
+            <div
+                className="absolute w-full h-screen bg-transparent z-50"
+                onClick={closeModalHandler}
+            />
+        </div>
+    );
+};
+
+export default SearchModal;

src/components/Search/SearchModalContainer.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import SearchModal from "./SearchModal";
+import { useSearch } from "@/hooks/useSearch";
+
+const SearchModalContainer = () => {
+    const {
+        inputText,
+        setInputText,
+        isModalOpen,
+        setIsModalOpen,
+        predictions: uniquePredictions,
+        isPlacePredictionsLoading,
+    } = useSearch();
+
+    return (
+        <>
+            {inputText &&
+                isModalOpen &&
+                (isPlacePredictionsLoading ? (
+                    <p className="text-white p-4 bg-gray-500">loading...</p>
+                ) : (
+                    <SearchModal
+                        closeModalHandler={() => setIsModalOpen(false)}
+                        itemList={uniquePredictions}
+                        searchClickHandler={() => setInputText("")}
+                    />
+                ))}
+        </>
+    );
+};
+
+export default SearchModalContainer;

src/components/Search/SearchModalItem.tsx

@@ -0,0 +1,26 @@
+import Link from "next/link";
+import React from "react";
+
+interface SearchModalItemProps {
+    href: string;
+    clickHandler: () => void;
+    text: string;
+}
+
+export const SearchModalItem = ({
+    href,
+    clickHandler,
+    text,
+}: SearchModalItemProps) => {
+    return (
+        <Link
+            href={`/${href.toLowerCase()}`}
+            className="text-white"
+            onClick={clickHandler}
+        >
+            <li className="text-white p-4 lg:p-2 border-b-[1px] border-gray-400">
+                {text}
+            </li>
+        </Link>
+    );
+};

src/context/SearchContext/Provider.tsx

@@ -0,0 +1,36 @@
+import { usePlacePredictions } from "@/hooks/usePlacePredictions";
+import React, { createContext } from "react";
+
+interface Props {
+    children: React.ReactNode;
+}
+
+export const SearchContext = createContext({});
+const Provider = ({ children }: Props) => {
+    const {
+        inputText,
+        setInputText,
+        isModalOpen,
+        setIsModalOpen,
+        predictions: uniquePredictions,
+        isPlacePredictionsLoading,
+        handleInputChange,
+    } = usePlacePredictions();
+    return (
+        <SearchContext.Provider
+            value={{
+                inputText,
+                setInputText,
+                isModalOpen,
+                setIsModalOpen,
+                predictions: uniquePredictions,
+                isPlacePredictionsLoading,
+                handleInputChange,
+            }}
+        >
+            {children}
+        </SearchContext.Provider>
+    );
+};
+
+export default Provider;

src/elements/CityElement/CityElement.tsx

@@ -5,8 +5,9 @@ import Layout from "@/components/Layout/Layout";
 import DateAndLocation from "./DateAndLocation";
 import TempContainer from "./TempContainer";
 import CityTemplate from "./CityTemplate";
-import CityInput from "@/components/CityInput/CityInput";
+import SearchCity from "@/components/Search/SearchCity";
 import CustomHead from "@/components/CustomHead/CustomHead";
+import SearchProvider from "@/context/SearchContext/Provider";
 
 interface CityElementProps {
     pageProps: PagePropsTypes;
@@ -22,7 +23,9 @@ const CityElement: React.FC<CityElementProps> = ({ pageProps }) => {
             />
             <Provider<PagePropsTypes> appProps={pageProps}>
                 <Layout>
-                    <CityInput />
+                    <SearchProvider>
+                        <SearchCity />
+                    </SearchProvider>
                     <CityTemplate>
                         <DateAndLocation />
                         <TempContainer />

src/elements/CityElement/CityTemplate.tsx

@@ -16,7 +16,7 @@ const CityTemplate: React.FC<ComponentWithChildren> = ({ children }) => {
                     }}
                 >
                     <div className="absolute inset-0 bg-teal-950 opacity-80 z-10" />
-                    <div className="w-full h-full flex flex-col justify-between z-50">
+                    <div className="w-full h-full flex flex-col justify-between z-10">
                         {children}
                     </div>
                 </div>

src/elements/HomeElement/HomeElement.tsx

@@ -1,17 +1,20 @@
-import CityInput from "@/components/CityInput/CityInput";
+import SearchCity from "@/components/Search/SearchCity";
 import Layout from "@/components/Layout/Layout";
 import HomeTemplate from "./HomeTemplate";
 import Heading from "@/components/Heading/Heading";
 import AppInfo from "@/components/AppInfo/AppInfo";
 import CustomHead from "@/components/CustomHead/CustomHead";
 import Board from "./Board";
+import SearchProvider from "@/context/SearchContext/Provider";
 
 const HomeElement = () => {
     return (
         <>
             <CustomHead title="Weather App" description="The Weather App" />
             <Layout>
-                <CityInput />
+                <SearchProvider>
+                    <SearchCity />
+                </SearchProvider>
                 <HomeTemplate>
                     <Board />
                     <AppInfo />