Handling Forms/Problem Set: Forms and APIs refactoring wave solution

src/App.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import axios from 'axios';
+import LocationIQ from './api/LocationIQ';
 import SearchForm from './components/SearchForm';
 import SearchResult from './components/SearchResult';
 import SearchError from './components/SearchError';
@@ -8,7 +8,6 @@ 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 [results, setResults] = useState([]);
@@ -24,27 +23,25 @@ function App() {
 
   const performSearchAsync = (location) => {
     clearError();
-    return axios.get(
-      `${BASE_URL}${SEARCH_URL}`, { params:
-        {
-          key: API_KEY,
-          q: location,
-          format: 'json',
-        }})
-    .then(response => {
-      const { lat, lon } = response.data[0];
-      addResult({ 
-        location,
-        latitude: Number(lat),
-        longitude: Number(lon),
-      });
-    })
-    .catch(error => {
-      const message = error.response.data.error;
-      setError(message);
-    });
+    const api = new LocationIQ(API_KEY, BASE_URL);
+
+    return api.getLatLonAsync(location)
+      .then(result => addResult(result))
+      .catch(error => setError(error.message));
   };
 
+  // same method in async/await style
+  // const performSearchAsync = async (location) => {
+  //   clearError();
+  //   const api = new LocationIQ(API_KEY);
+  //   try {
+  //     const result = await api.getLatLonAsync(location);
+  //     addResult(result);
+  //   } catch (error) {
+  //     setError(error.message);
+  //   }
+  // };
+
   const locationSubmitted = (location) => {
     performSearchAsync(location);
   };

src/api/LocationIQ.js

@@ -0,0 +1,51 @@
+import axios from 'axios';
+
+const US_BASE_URL = "https://us1.locationiq.com/v1/";
+const SEARCH_URL = 'search.php';
+
+class LocationIQ {
+
+  constructor(apiKey, baseUrl) {
+    this.apiKey = apiKey;
+    this.baseUrl = baseUrl || US_BASE_URL;
+  }
+
+  getLatLonAsync(location) {
+    return axios.get(
+      `${this.baseUrl}${SEARCH_URL}`, { params:
+        {
+          key: this.apiKey,
+          q: location,
+          format: 'json'
+        }})
+    .then(response => {
+      const { lat, lon } = response.data[0];
+      return { location, latitude: Number(lat), longitude: Number(lon) };
+    })
+    .catch(error => {
+      const message = error.response.data.error;
+      throw { message };
+    });
+  }
+
+  // same method in async/await style
+  // async getLatLonAsync(location) {
+  //   try {
+  //     const response = await axios.get(
+  //       `${this.baseUrl}${SEARCH_URL}`, { params:
+  //       {
+  //         key: this.apiKey,
+  //         q: location,
+  //         format: 'json'
+  //       }});
+
+  //     const { lat: latitude, lon: longitude } = response.data[0];
+  //     return { location, latitude, longitude };
+  //   } catch (error) {
+  //     const message = error.response.data.error;
+  //     throw { message };
+  //   }
+  // }
+}
+
+export default LocationIQ;

src/components/History.jsx

@@ -1,9 +1,7 @@
-import PropTypes from 'prop-types';
+import { ResultType } from '../types';
 import './History.css';
 
-const History = (props) => {
-  const entry = props.entry;
-
+const History = ({ entry }) => {
   return (
     <li className="History">
       <h3>{ entry.location }</h3>
@@ -14,11 +12,7 @@ const History = (props) => {
 };
 
 History.propTypes = {
-  entry: PropTypes.shape({
-    location: PropTypes.string.isRequired,
-    latitude: PropTypes.number.isRequired,
-    longitude: PropTypes.number.isRequired,
-  }).isRequired,
+  entry: ResultType.isRequired,
 };
 
 export default History;

src/components/HistoryList.jsx

@@ -1,10 +1,9 @@
 import PropTypes from 'prop-types';
 import History from './History';
+import { ResultType } from '../types';
 import './HistoryList.css';
 
-const HistoryList = (props) => {
-  const entries = props.entries;
-
+const HistoryList = ({ entries }) => {
   return (
     <div className="HistoryList">
       <h2>Search History</h2>
@@ -21,11 +20,7 @@ const HistoryList = (props) => {
 };
 
 HistoryList.propTypes = {
-  entries: PropTypes.arrayOf(PropTypes.shape({
-    location: PropTypes.string.isRequired,
-    latitude: PropTypes.number.isRequired,
-    longitude: PropTypes.number.isRequired,
-  })).isRequired,
+  entries: PropTypes.arrayOf(ResultType).isRequired,
 };
 
 export default HistoryList;

src/components/SearchError.jsx

@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import './SearchError.css';
 
-const SearchError = (props) => {
-  const error = props.error;
-
+const SearchError = ({ error }) => {
   if (!error) {
     return null;
   }

src/components/SearchForm.jsx

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import './SearchForm.css';
 
 const DEFAULT_STATE = {
-    location: '',
-  };
+  location: '',
+};
 
-const SearchForm = (props) => {
+const SearchForm = ({ onLocationSubmit }) => {
   const [formValues, setFormValues] = useState(DEFAULT_STATE);
 
   const textInput = (e) => {
@@ -19,7 +19,7 @@ const SearchForm = (props) => {
 
   const formSubmitted = (event) => {
     event.preventDefault();
-    props.onLocationSubmit(formValues.location);
+    onLocationSubmit(formValues.location);
   };
 
   return (

src/components/SearchResult.jsx

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

src/types/index.js

@@ -0,0 +1,7 @@
+import { shape, string, number } from 'prop-types';
+
+export const ResultType = shape({
+  location: string.isRequired,
+  latitude: number.isRequired,
+  longitude: number.isRequired,
+});