Handling Forms/Problem Set: Forms and APIs wave 1 (search) solution

src/App.jsx

@@ -1,8 +1,49 @@
+import { useState } from 'react';
+import axios from 'axios';
+import SearchForm from './components/SearchForm';
+import SearchResult from './components/SearchResult';
 import './App.css';
 
+const API_KEY = import.meta.env.VITE_API_KEY;
+const BASE_URL = import.meta.env.VITE_BASE_URL;
+const SEARCH_URL = 'search.php';
+
 function App() {
+  const [result, setResult] = useState(null);
+
+  const performSearchAsync = (location) => {
+    return axios.get(
+      `${BASE_URL}${SEARCH_URL}`, { params:
+        {
+          key: API_KEY,
+          q: location,
+          format: 'json',
+        }})
+    .then(response => {
+      const { lat, lon } = response.data[0];
+      setResult({ 
+        location,
+        latitude: Number(lat),
+        longitude: Number(lon),
+      });
+    });
+  };
+
+  const locationSubmitted = (location) => {
+    performSearchAsync(location);
+  };
 
-  return null;
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>Get Latitude and Longitude</h1>
+        <SearchForm onLocationSubmit={locationSubmitted} />
+      </header>
+      <main>
+        <SearchResult result={result} />
+      </main>
+    </div>
+  );
 }
 
-export default App;
+export default App;

src/components/SearchForm.jsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import './SearchForm.css';
+
+const DEFAULT_STATE = {
+    location: '',
+  };
+
+const SearchForm = (props) => {
+  const [formValues, setFormValues] = useState(DEFAULT_STATE);
+
+  const textInput = (e) => {
+    const fieldName = e.target.name;
+    const value = e.target.value;
+    setFormValues(current => {
+      return { ...current, [fieldName]: value };
+    });
+  };
+
+  const formSubmitted = (event) => {
+    event.preventDefault();
+    props.onLocationSubmit(formValues.location);
+  };
+
+  return (
+    <div className="SearchForm">
+      <form onSubmit={formSubmitted}>
+        <input type="text" name="location" value={formValues.location} onInput={textInput} />
+        <input type="submit" value="Search Now!" />
+      </form>
+    </div>
+  );
+};
+
+SearchForm.propTypes = {
+  onLocationSubmit: PropTypes.func.isRequired,
+};
+
+export default SearchForm;

src/components/SearchResult.jsx

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import './SearchResult.css';
+
+const SearchResult = (props) => {
+  const result = props.result;
+
+  return (
+    <div className="SearchResult">
+      <h2>Results for: { result && result.location }</h2>
+      <ul>
+        <li>Latitude: { result && result.latitude }</li>
+        <li>Longitude: { result && result.longitude }</li>
+      </ul>
+    </div>
+  );
+};
+
+SearchResult.propTypes = {
+  result: PropTypes.shape({
+    location: PropTypes.string.isRequired,
+    latitude: PropTypes.number.isRequired,
+    longitude: PropTypes.number.isRequired,
+  }),
+};
+
+export default SearchResult;