Merge pull request #2 from Thorfin69/main

Updated functions
s-shemmee · Jul 12, 2024 · 09a447a · 09a447a
2 parents ccd2b08 + 8564e56
commit 09a447a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -6,9 +6,8 @@ import Forecast from "./Forecast";
 import "../styles.css";
 import '@fortawesome/fontawesome-free/css/all.min.css';
 
-
 function App() {
-  const [query, setQuery] = useState();
+  const [query, setQuery] = useState("");
   const [weather, setWeather] = useState({
     loading: true,
     data: {},
@@ -27,7 +26,7 @@ function App() {
       "August",
       "September",
       "October",
-      "Nocvember",
+      "November",
       "December"
     ];
     const days = [
@@ -41,16 +40,14 @@ function App() {
     ];
 
     const currentDate = new Date();
-    const date = `${days[currentDate.getDay()]} ${currentDate.getDate()} ${
-      months[currentDate.getMonth()]
-    }`;
+    const date = `${days[currentDate.getDay()]} ${currentDate.getDate()} ${months[currentDate.getMonth()]
+      }`;
     return date;
   };
-
+  //new search function
   const search = async (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      setQuery("");
+    event.preventDefault();
+    if (event.type === "click" || (event.type === "keypress" && event.key === "Enter")) {
       setWeather({ ...weather, loading: true });
       const apiKey = "b03a640e5ef6980o4da35b006t5f2942";
       const url = `https://api.shecodes.io/weather/v1/current?query=${query}&key=${apiKey}`;
@@ -63,7 +60,6 @@ function App() {
         })
         .catch((error) => {
           setWeather({ ...weather, data: {}, error: true });
-          setQuery("");
           console.log("error", error);
         });
     }
@@ -76,7 +72,6 @@ function App() {
 
       try {
         const response = await axios.get(url);
-
         setWeather({ data: response.data, loading: false, error: false });
       } catch (error) {
         setWeather({ data: {}, loading: false, error: true });

diff --git a/src/components/SearchEngine.js b/src/components/SearchEngine.js
@@ -1,6 +1,13 @@
 import React from "react";
 
 function SearchEngine({ query, setQuery, search }) {
+  //handler function
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      search(e);
+    }
+  };
+
   return (
     <div className="SearchEngine">
       <input
@@ -10,9 +17,9 @@ function SearchEngine({ query, setQuery, search }) {
         name="query"
         value={query}
         onChange={(e) => setQuery(e.target.value)}
-        onKeyPress={search}
+        onKeyPress={handleKeyPress}
       />
-      <button><i className="fas fa-search" style={{ fontSize: "18px" }}></i></button>
+      <button onClick={search}><i className="fas fa-search" style={{ fontSize: "18px" }}></i></button>
     </div>
   );
 }