Marina's Bigfoot JSON frontend

package.json

@@ -3,8 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.15.7",
+    "axios": "^1.6.7",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1"
   },
   "scripts": {

src/App.css

@@ -1,3 +1,9 @@
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #282c34;
+}
+
 .App {
   text-align: center;
 }
@@ -8,7 +14,6 @@
 }
 
 .App-header {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -17,3 +22,18 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
+
+.page-title {
+  color: aliceblue;
+}
+
+.input {
+  line-height: 30px;
+  height: 30px;
+}
+
+.query {
+  color: aliceblue;
+  display: flex;
+  justify-content: center;
+}

src/App.js

@@ -1,20 +1,48 @@
 import React from "react";
-import logo from "./logo.png";
+import bigfoot from "./bigfoot.png";
 import "./App.css";
+import { Button } from "@mui/material";
+import { useNavigate, Link } from "react-router-dom";
+
+function AppWrapper() {
+  const navigate = useNavigate();
+
+  return <App navigate={navigate} />;
+}
 
 class App extends React.Component {
+  handleClick = () => {
+    const navigate = this.props.navigate;
+    navigate("/sightings");
+  };
+
+  linkStyle = {
+    textDecoration: "none",
+    color: "white",
+  };
+
   render() {
     return (
       <div className="App">
         <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
+          <h1>Bigfoot sightings</h1>
+          <img src={bigfoot} className="bigfoot" alt="bigfoot" width={400} />
+          <Link to={"/sightings"} style={this.linkStyle}>
+            <h4>Click here to view Bigfoot sightings</h4>
+          </Link>
+          <Button
+            variant="standard"
+            sx={{ backgroundColor: "orange" }}
+            onClick={this.handleClick}
+          >
+            View sightings
+          </Button>
         </header>
       </div>
     );
   }
 }
 
-export default App;
+// export default App;
+
+export default AppWrapper;

src/Components/GoBackButton.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@mui/material";
+
+export default function GoBackButton() {
+  const navigate = useNavigate();
+  const handleGoBack = () => {
+    navigate(-1);
+  };
+
+  return (
+    <div>
+      <Button
+        variant="standard"
+        sx={{
+          backgroundColor: "orange",
+          marginTop: 1,
+          marginLeft: 1,
+        }}
+        onClick={handleGoBack}
+      >
+        Go back
+      </Button>
+    </div>
+  );
+}

src/Components/SearchPage.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { Container } from "@mui/material";
+
+export default function SearchPage(props) {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const query = form.search.value;
+
+    if (isNaN(query)) {
+      props.setSearchParams({ state: query });
+    } else {
+      props.setSearchParams({ year: query });
+    }
+  };
+
+  return (
+    <div>
+      <p className="query">
+        Make your query either by year or by the name of a US state.{" "}
+      </p>
+      <Container
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          marginTop: 3,
+          marginBottom: 3,
+        }}
+      >
+        <form onSubmit={handleSubmit}>
+          <input
+            type="search"
+            name="search"
+            size="35"
+            className="input"
+            placeholder="Enter a year/state name"
+          ></input>
+          <input type="submit" value="Search" className="input"></input>
+        </form>
+      </Container>
+    </div>
+  );
+}

src/Components/SightingPage.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { Card, CardContent } from "@mui/material";
+import GoBackButton from "./GoBackButton";
+import { BACKEND_URL } from "../constants.js";
+
+export default function SightingPage() {
+  const { REPORT_NUMBER } = useParams();
+  const [sighting, setSighting] = useState();
+  useEffect(() => {
+    const fetchSightingData = async () => {
+      try {
+        const data = await axios.get(
+          `${BACKEND_URL}/sightings/${REPORT_NUMBER}`
+        );
+        setSighting(data.data);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    fetchSightingData();
+  }, [REPORT_NUMBER]);
+
+  const newSighting = sighting ? (
+    <Card
+      sx={{
+        width: 800,
+        minHeight: 300,
+        display: "flex",
+        justifyContent: "center",
+        marginTop: 20,
+        marginLeft: "auto",
+        marginRight: "auto",
+      }}
+    >
+      <CardContent>
+        <h4>
+          {sighting.STATE} {sighting.YEAR}
+        </h4>
+        <p>Season: {sighting.SEASON}</p>
+        <p>
+          Date: {sighting.MONTH} {sighting.DATE}{" "}
+        </p>
+        <p>County: {sighting.COUNTY}</p>
+        <p>Location: {sighting.LOCATION_DETAILS}</p>
+        <p>{sighting.OBSERVED}</p>
+        <p>Report number: {sighting.REPORT_NUMBER}</p>
+      </CardContent>
+    </Card>
+  ) : null;
+
+  return (
+    <div className="sighting-page">
+      <GoBackButton />
+      {newSighting}
+    </div>
+  );
+}

src/Components/SightingsList.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { useState, useEffect } from "react";
+import axios from "axios";
+import Card from "@mui/material/Card";
+import { CardContent, Container } from "@mui/material";
+import { Link, useSearchParams } from "react-router-dom";
+import GoBackButton from "./GoBackButton";
+import { BACKEND_URL } from "../constants.js";
+import SearchPage from "./SearchPage.js";
+
+export default function SightingsList() {
+  const [sightings, setSightings] = useState([]);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const stateQuery = searchParams.get("state") || "";
+  const yearQuery = searchParams.get("year") || "";
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const query = {};
+        if (stateQuery) {
+          query.state = stateQuery;
+        }
+        if (yearQuery) {
+          query.year = yearQuery;
+        }
+        const { data } = await axios.get(`${BACKEND_URL}/sightings`, {
+          params: query,
+        });
+        setSightings(data);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    fetchData();
+  }, [stateQuery, yearQuery]);
+
+  console.log(sightings);
+
+  const newSightings = sightings.map((sighting, index) =>
+    sighting.YEAR && sighting.STATE ? (
+      <Link to={`./${sighting.REPORT_NUMBER}`} key={index}>
+        <Container
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          <Card sx={{ marginBottom: 3, width: 300 }}>
+            <CardContent sx={{ display: "flex", justifyContent: "flex-start" }}>
+              <p>
+                {index + 1}. {sighting.STATE} {sighting.YEAR}
+              </p>
+            </CardContent>
+          </Card>
+        </Container>
+      </Link>
+    ) : null
+  );
+
+  return (
+    <div>
+      <GoBackButton />
+      <Container
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          marginTop: 3,
+          marginBottom: 3,
+        }}
+      >
+        <h1 className="page-title">Bigfoot sightings</h1>
+      </Container>
+      <SearchPage setSearchParams={setSearchParams} />
+      {newSightings}
+    </div>
+  );
+}

src/constants.js

@@ -0,0 +1 @@
+export const BACKEND_URL = "http://localhost:3000";

src/index.js

@@ -2,6 +2,20 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import SightingPage from "./Components/SightingPage";
+import SightingsList from "./Components/SightingsList";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(<App />);
+root.render(
+  <Router>
+    <Routes>
+      <Route path="/" element={<App />}></Route>
+      <Route path="/sightings">
+        <Route index element={<SightingsList />}></Route>
+        <Route path=":REPORT_NUMBER" element={<SightingPage />}></Route>
+      </Route>
+      <Route path="*" element={"Sorry, page not found!"} />
+    </Routes>
+  </Router>
+);