🦟 Fixed 404s upon page refresh

src/client/components/Library/SearchBar.tsx

@@ -1,30 +1,47 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useCallback } from "react";
 import PropTypes from "prop-types";
 import { Form, Field } from "react-final-form";
 import { Link } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { searchIssue } from "../../actions/fileops.actions";
 
 export const SearchBar = (): ReactElement => {
-  const foo = () => {};
+  const dispatch = useDispatch();
+  const handleSubmit = useCallback((e) => {
+    console.log(e);
+    dispatch(
+      searchIssue({
+        queryObject: {
+          volumeName: e.search,
+        },
+      }),
+    );
+  }, []);
   return (
     <div className="box sticky">
       <Form
-        onSubmit={foo}
+        onSubmit={handleSubmit}
         initialValues={{}}
         render={({ handleSubmit, form, submitting, pristine, values }) => (
-          <div className="column is-three-quarters search">
-            <label>Search</label>
-            <Field name="search">
-              {({ input, meta }) => {
-                return (
-                  <input
-                    {...input}
-                    className="input main-search-bar is-medium"
-                    placeholder="Type an issue/volume name"
-                  />
-                );
-              }}
-            </Field>
-          </div>
+          <form onSubmit={handleSubmit}>
+            <div className="column is-three-quarters search">
+              <label>Search</label>
+              <Field name="search">
+                {({ input, meta }) => {
+                  return (
+                    <input
+                      {...input}
+                      className="input main-search-bar is-medium"
+                      placeholder="Type an issue/volume name"
+                    />
+                  );
+                }}
+              </Field>
+              <button className="button" type="submit">
+                Search
+              </button>
+            </div>
+          </form>
         )}
       />
       <div className="column one-fifth">