Merge pull request #50 from anna-huang17/add_button

Add a button to load more dockets

frontend/src/App.css

@@ -41,3 +41,9 @@ h1{
 
 }
 
+.load-docket-button {
+    position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}

frontend/src/App.js

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useState, useEffect} from "react";
 import "./App.css";
 // import {getDummyDataDemo} from "./static/script";
 import {fetchDockets} from "./static/script";
@@ -7,29 +7,35 @@ import DocketList from "./components/DocketList";
 import EmailVisibleInvisible from "./components/emailVisibleInvisible";
 
 function App() {
- const [dockets, setDockets] = useState(); // Initialize docket state to false
+ const [dockets, setDockets] = useState([]); // Initialize docket state to false
  const [email, setEmail] = useState();
  const [validTerm, setValidTerm] = useState(false);
 
  const [totalResults, setTotalResults] = useState(0);
+ const [page, setPage] = useState(1);
+ const [term, setTerm] = useState("");
 
- const handleOnClick = async (term) => {
+ const handleOnClick = async (newTerm) => {
   try {
    // This will display a message if the search term is invalid or no results are found
    // It still has issues with some search terms such as ' ' (a single space)
-   if (!term) {
+
+   if (!newTerm) {
     alert("Please enter a valid search term.");
     return;
    } else {
-    const data = await fetchDockets(term);
+    const data = await fetchDockets(newTerm, page);
 
     if (data.data.dockets.length === 0) {
-     alert("No results found for: '" + term + "'");
+     alert("No results found for: '" + newTerm + "'");
      return;
     } else {
-     setDockets(data.data.dockets);
+     term === newTerm
+      ? setDockets([...dockets, ...data.data.dockets])
+      : setDockets([...data.data.dockets]);
      setValidTerm(true);
      setTotalResults(data.meta.total_results);
+     term !== newTerm ? setPage(page + 1) : setPage(1);
     }
    }
   } catch (error) {
@@ -52,13 +58,27 @@ function App() {
    /> */}
    <h1>Mirrulations Search</h1>
    <div>
-    <SearchBar handleOnClick={handleOnClick} />
+    <SearchBar
+     handleOnClick={handleOnClick}
+     setPage={setPage}
+     setDockets={setDockets}
+     setTerm={setTerm}
+    />
     <EmailVisibleInvisible isVisible={validTerm} handleInputChange={handleInputChange} />
     {/* list total number of dockets found for the term */}
     {totalResults > 0 && <h2>{totalResults} Results Found</h2>}
     {dockets && <DocketList dockets={dockets} email={email} />}{" "}
     {/* Render SearchResultsList only if dockets is true */}
    </div>
+   <div></div>
+   {dockets && dockets.length > 0 && (
+    <button
+     onClick={() => {
+      handleOnClick(term);
+     }}>
+     Show More Dockets
+    </button>
+   )}
   </div>
  );
 }

frontend/src/components/SearchBar.js

@@ -1,14 +1,15 @@
 import React, {useState} from "react";
 import "../styles/SearchBar.css";
 
-const SearchBar = ({handleOnClick}) => {
+const SearchBar = ({handleOnClick, setPage, setDockets, setTerm}) => {
  const [query, setQuery] = useState("");
 
  const handleInputChange = (event) => {
   setQuery(event.target.value);
  };
 
  const handleSearch = () => {
+  setTerm(query);
   handleOnClick(query);
  };
 

frontend/src/components/ZipButton.js

@@ -1,10 +1,14 @@
-import React, {useState} from "react";
+import React, {useState, useEffect} from "react";
 import "../styles/ZipButton.css";
 import {zipFiles} from "../static/script";
 
 const ZipButton = ({email, id}) => {
  const [clicked, setClicked] = useState(false);
 
+ useEffect(() => {
+  setClicked(false);
+ }, [id]);
+
  const handleClick = () => {
   alert(`An email containing a downloadable version of the docket has been sent`);
   setClicked(true);

frontend/src/static/script.js

@@ -1,11 +1,11 @@
 const URL = window.location.href;
 
 // api.js
-export const fetchDockets = async (searchTerm) => {
+export const fetchDockets = async (searchTerm, page) => {
  try {
   const search =
    URL +
-   `api/search_dockets?term=${searchTerm.replaceAll("/", "").replaceAll("'", "").replaceAll('"', "")}`;
+   `api/search_dockets?term=${searchTerm.replaceAll("/", "").replaceAll("'", "").replaceAll('"', "")}&page=${page}`;
   const response = await fetch(search);
 
   const data = await response.json();

frontend/src/styles/Docket.css

@@ -55,6 +55,7 @@
 .h-row2 {
     display: flex;
     flex-direction: row;
+    font-weight: bold;
     width: 100%;
     height: inherit;
     text-align: left;

frontend/src/styles/ZipButton.css

@@ -10,3 +10,4 @@
 button:hover {
  background-color: #45a049;
 }
+