Add: fetch data by geolocation

Author: rustysym

README.md

@@ -23,7 +23,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 - Weekly weather report
 - Information bubble
-- Fetch by location
+- ~~Fetch by location~~
 - ~~Autocomplete input~~
 - Responsive design
 

src/components/utils/ApiContext.js

@@ -14,12 +14,17 @@ function ApiProvider({ children }) {
   const [searchText, setSearchText] = useState("");
   const [alert, setAlert] = useState(false);
   const [error, setError] = useState(null);
-
+  const [lat, setLat] = useState(0);
+  const [long, setLong] = useState(0);
+  console.log(lat,long)
   // you can change &lang parameter for your language
+  
   const apiKey = process.env.REACT_APP_API_KEY;
   const apiUrl = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q="${searchQuery}"&dt=2023-05-04&lang=tr&aqi=yes`;
+  const geoUrl = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${lat},${long}&dt=2023-05-04&lang=tr&aqi=yes`;
   const searchApiUrl = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q="${searchText}"`;
 
+  
   const fetchData = () => {
     const options = {
       method: "GET",
@@ -48,6 +53,7 @@ function ApiProvider({ children }) {
     }, 1000);
   }, []);
 
+  
   const fetchSearch = async () => {
     try {
       const res = await axios.get(searchApiUrl);
@@ -62,6 +68,17 @@ function ApiProvider({ children }) {
   useEffect(() => {
     fetchSearch();
   }, [searchApiUrl]);
+  
+  const fetchLocation = async () => {
+    try {
+      const res = await axios.get(geoUrl);
+      setData(res.data);
+    } catch (err) {
+      setAlert(true);
+      setError(err);
+      console.clear();
+    }
+  };
 
   return (
     <ApiContext.Provider
@@ -79,6 +96,11 @@ function ApiProvider({ children }) {
         setAlert,
         error,
         setError,
+        setLat,
+        setLong,
+        fetchLocation,
+        lat,
+        long
       }}
     >
       {children}

src/components/utils/Search.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState,useEffect } from "react";
 import { useApiContext } from "./ApiContext";
 
 import { Input } from "@material-tailwind/react";
@@ -10,6 +10,12 @@ const Search = () => {
     searchData,
     searchText,
     setSearchText,
+    setLat,
+    setLong,
+    fetchLocation,
+    setError,
+    lat,
+    long
   } = useApiContext();
 
   const [isTyping, setIsTyping] = useState(false);
@@ -48,12 +54,34 @@ const Search = () => {
       fetchData();
     }
   };
+  const getLocation = (e) =>{
+    e.preventDefault();
+    try {
+      navigator.geolocation.getCurrentPosition((position) => {
+            setLat(position.coords.latitude);
+            setLong(position.coords.longitude);
+            if(lat && long != 0 ){
+              fetchLocation()
+              }
+      })
+    }
+      catch (err) {
+        setError(err)
+      }
+    
+  }
+useEffect(() => {
+  if(lat && long != 0 ){
+    fetchLocation()
+    }
+}, [lat,long])
 
+ 
   return (
     <div>
       <div className="mt-10 flex align-center">
-        <a className="self-center">
-          <i className="ri-map-pin-2-line ri-xl text-white mr-8 ml-20"></i>
+        <a className="self-center cursor-pointer" onClick={getLocation}>
+          <i className="ri-map-pin-2-line ri-xl text-white mr-8 ml-20 hover:text-indigo-600"></i>
         </a>
         <Input
           variant="standard"