Handling Forms/Problem Set: Forms and APIs optional wave (history) solution

src/App.jsx

@@ -3,16 +3,23 @@ import axios from 'axios';
 import SearchForm from './components/SearchForm';
 import SearchResult from './components/SearchResult';
 import SearchError from './components/SearchError';
+import HistoryList from './components/HistoryList';
 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 [results, setResults] = useState([]);
   const [error, setError] = useState("");
 
+  const addResult = (result) => {
+    setResults(current => {
+      return [...current, result];
+    });
+  };
+
   const clearError = () => { setError(""); };
 
   const performSearchAsync = (location) => {
@@ -26,7 +33,7 @@ function App() {
         }})
     .then(response => {
       const { lat, lon } = response.data[0];
-      setResult({ 
+      addResult({ 
         location,
         latitude: Number(lat),
         longitude: Number(lon),
@@ -42,6 +49,8 @@ function App() {
     performSearchAsync(location);
   };
 
+  const result = results[results.length - 1];
+
   return (
     <div className="App">
       <header className="App-header">
@@ -51,6 +60,7 @@ function App() {
       <main>
         <SearchResult result={result} />
         <SearchError error={error} />
+        <HistoryList entries={results} />
       </main>
     </div>
   );

src/components/History.css

@@ -0,0 +1,9 @@
+.History {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+
+.History span {
+  margin-right: 1em;
+}

src/components/History.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import './History.css';
+
+const History = (props) => {
+  const entry = props.entry;
+
+  return (
+    <li className="History">
+      <h3>{ entry.location }</h3>
+      <span className="lat">Latitude: { entry.latitude }</span>
+      <span className="lon">Longitude: { entry.longitude }</span>
+    </li>
+  );
+};
+
+History.propTypes = {
+  entry: PropTypes.shape({
+    location: PropTypes.string.isRequired,
+    latitude: PropTypes.number.isRequired,
+    longitude: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default History;

src/components/HistoryList.css

@@ -0,0 +1,3 @@
+.HistoryList ul {
+  padding: 0;
+}

src/components/HistoryList.jsx

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import History from './History';
+import './HistoryList.css';
+
+const HistoryList = (props) => {
+  const entries = props.entries;
+
+  return (
+    <div className="HistoryList">
+      <h2>Search History</h2>
+      <ul>
+      { entries.map((entry, i) => (
+        <History
+          key={i}
+          entry={entry}
+          />
+      )) }
+      </ul>
+    </div>
+  );
+};
+
+HistoryList.propTypes = {
+  entries: PropTypes.arrayOf(PropTypes.shape({
+    location: PropTypes.string.isRequired,
+    latitude: PropTypes.number.isRequired,
+    longitude: PropTypes.number.isRequired,
+  })).isRequired,
+};
+
+export default HistoryList;