From c2da30def01a6964781e6c182830563907be0480 Mon Sep 17 00:00:00 2001
From: Ansel Rognlie <ansel.rognlie@gmail.com>
Date: Fri, 2 Feb 2024 10:40:09 -0800
Subject: [PATCH] add history behavior solution files

---
 src/App.jsx                    | 14 ++++++++++++--
 src/components/History.css     |  9 +++++++++
 src/components/History.jsx     | 24 ++++++++++++++++++++++++
 src/components/HistoryList.css |  3 +++
 src/components/HistoryList.jsx | 31 +++++++++++++++++++++++++++++++
 5 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 src/components/History.css
 create mode 100644 src/components/History.jsx
 create mode 100644 src/components/HistoryList.css
 create mode 100644 src/components/HistoryList.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 1e5e22e..1bcd4e1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,7 @@ 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;
@@ -10,9 +11,15 @@ 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>
   );
diff --git a/src/components/History.css b/src/components/History.css
new file mode 100644
index 0000000..39a91b8
--- /dev/null
+++ b/src/components/History.css
@@ -0,0 +1,9 @@
+.History {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+
+.History span {
+  margin-right: 1em;
+}
diff --git a/src/components/History.jsx b/src/components/History.jsx
new file mode 100644
index 0000000..58b1a63
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/HistoryList.css b/src/components/HistoryList.css
new file mode 100644
index 0000000..4808bec
--- /dev/null
+++ b/src/components/HistoryList.css
@@ -0,0 +1,3 @@
+.HistoryList ul {
+  padding: 0;
+}
\ No newline at end of file
diff --git a/src/components/HistoryList.jsx b/src/components/HistoryList.jsx
new file mode 100644
index 0000000..d8f82ea
--- /dev/null
+++ b/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;
\ No newline at end of file