Created an action creator to handle the coordinates recieved from the…

… openstreetmap api

src/components/SearchField.tsx

@@ -2,18 +2,19 @@ import { useState, useEffect } from "react";
 import { MdSearch, MdClose, MdLocationOn } from "react-icons/md";
 import { useActions } from "../components/hooks/useActions";
 import { useTypedSelector } from "./hooks/useTypedSelector";
+import { locationDataset } from "../store/reducers/weatherReducer";
 
 interface Props {
   openSearch: boolean;
   setOpenSearch: (search: boolean) => void;
 }
 
 const SearchField: React.FC<Props> = ({ setOpenSearch }) => {
-  const { getLocationFromMap } = useActions();
+  const { getLocationFromMap, clearLocationFromMap, getLocationCoords } =
+    useActions();
   const { mapLocation } = useTypedSelector((state) => state.weather);
 
   const [inputText, setInputText] = useState("");
-  const [autoComplete, setAutoComplete] = useState([]);
 
   const handleInputChange = (
     event: React.ChangeEvent<HTMLInputElement>
@@ -25,13 +26,16 @@ const SearchField: React.FC<Props> = ({ setOpenSearch }) => {
     event.preventDefault();
 
     if (!inputText) {
-      setAutoComplete([]);
       return;
     }
   };
 
   useEffect(() => {
-    getLocationFromMap(inputText);
+    if (inputText) {
+      getLocationFromMap(inputText);
+    } else {
+      clearLocationFromMap();
+    }
 
     // eslint-disable-next-line
   }, [inputText]);
@@ -58,8 +62,12 @@ const SearchField: React.FC<Props> = ({ setOpenSearch }) => {
       </form>
       {mapLocation.length > 0 && (
         <ul className="search__list">
-          {mapLocation.map((location) => (
-            <li className="search__list__item" key={location.placeId}>
+          {mapLocation.map((location: locationDataset, index: number) => (
+            <li
+              className="search__list__item"
+              key={index}
+              onClick={() => getLocationCoords(location)}
+            >
               <MdLocationOn className="search__list__item__icon" />{" "}
               <span className="search__list__item__text">
                 {location.display_name}

src/sass/abstracts/_variables.scss

@@ -13,6 +13,7 @@ $color-dark-grey: #616475;
 $color-light-blue: #3c47e9;
 $color-light-blue-1: #3a44d8;
 $color-light-blue-2: #343ec5;
+$color-light-blue-3: #bfc3fc;
 $color-dark-blue: #110e3c;
 $color-dark-blue-1: #0f0b53;
 $color-yellow: #ffec65;

src/sass/components/_searchField.scss

@@ -64,6 +64,7 @@
   &__list {
     width: 100%;
     background: $color-white;
+    margin-top: 0.5em;
 
     &__item {
       display: flex;
@@ -73,6 +74,10 @@
       &:not(:last-of-type) {
         border-bottom: 1px solid $color-grey-light;
       }
+
+      &:hover {
+        background: rgba($color-light-blue-1, 0.2);
+      }
     }
 
     &__item__icon {

src/store/action-creators/index.ts

@@ -31,6 +31,7 @@ export const fetchWeatherData =
     }
   };
 
+//   This fetches data corresponding to the input text from openstreetmap api
 export const getLocationFromMap =
   (position: string) => async (dispatch: Dispatch) => {
     const location = position.split(" ").join("+");
@@ -48,6 +49,24 @@ export const getLocationFromMap =
     }
   };
 
+//   This clears off the data from openstreetmap api
+export const clearLocationFromMap = () => (dispatch: Dispatch) => {
+  dispatch({
+    type: ActionTypes.CLEAR_LOCATION_FROM_MAP,
+  });
+};
+
+export const getLocationCoords =
+  (coords: { lat: string; lon: string }) => (dispatch: Dispatch) => {
+    dispatch({
+      type: ActionTypes.GET_LOCATION_COORDINATES,
+      payload: {
+        lat: coords.lat,
+        long: coords.lon,
+      },
+    });
+  };
+
 export const getDegreeCelsius = () => (dispatch: Dispatch) =>
   dispatch({
     type: ActionTypes.WEATHER_DEGREE_IS_CELSIUS,

src/store/action-types/index.ts

@@ -7,4 +7,6 @@ export enum ActionTypes {
   WEATHER_DEGREE_IS_CELSIUS = "WEATHER_DEGREE_IS_CELSIUS",
   WEATHER_DEGREE_IS_FAHRENHEIT = "WEATHER_DEGREE_IS_FAHRENHEIT",
   GET_LOCATION_FROM_MAP = "GET_LOCATION_FROM_MAP",
+  CLEAR_LOCATION_FROM_MAP = "CLEAR_LOCATION_FROM_MAP",
+  GET_LOCATION_COORDINATES = "GET_LOCATION_COORDINATES",
 }

src/store/actions/index.ts

@@ -33,11 +33,25 @@ interface getLocationFromMapAction {
   payload: locationDataset[];
 }
 
+interface clearLocationFromMapAction {
+  type: ActionTypes.CLEAR_LOCATION_FROM_MAP;
+}
+
+interface getLocationCoordsAction {
+  type: ActionTypes.GET_LOCATION_COORDINATES;
+  payload: {
+    lat: string;
+    lon: string;
+  };
+}
+
 export type Action =
   | GetWeatherDataAction
   | GetWeatherDataSuccessAction
   | GetWeatherDataFailureAction
   | WeatherDegreeIsCelsiusAction
   | weatherDegreeIsFahrenheitAction
   | SearchedWeatherDataSuccessAction
-  | getLocationFromMapAction;
+  | getLocationFromMapAction
+  | clearLocationFromMapAction
+  | getLocationCoordsAction;

src/store/reducers/weatherReducer.ts

@@ -27,22 +27,27 @@ export interface locationDataset {
   display_name: string;
 }
 
+interface WeatherState {
+  loading: boolean;
+  weatherData: WeatherDataset | null;
+  error: string | null;
+  isCelsius: boolean;
+  mapLocation: locationDataset[] | [];
+  coords: {
+    lat: string;
+    lon: string;
+  } | null;
+}
+
 const initialState = {
   loading: false,
   weatherData: null,
   error: null,
   isCelsius: true,
+  coords: null,
   mapLocation: [],
 };
 
-interface WeatherState {
-  loading: boolean;
-  weatherData: WeatherDataset | null;
-  error: string | null;
-  isCelsius: boolean;
-  mapLocation: locationDataset[];
-}
-
 const weatherReducer = (
   state: WeatherState = initialState,
   action: Action
@@ -86,6 +91,20 @@ const weatherReducer = (
         error: null,
         mapLocation: action.payload,
       };
+    case ActionTypes.CLEAR_LOCATION_FROM_MAP:
+      return {
+        ...state,
+        loading: false,
+        error: null,
+        mapLocation: [],
+      };
+    case ActionTypes.GET_LOCATION_COORDINATES:
+      return {
+        ...state,
+        loading: false,
+        error: null,
+        coords: action.payload,
+      };
     default:
       return state;
   }