🔎 Search UI build

src/client/components/Search.tsx

@@ -9,40 +9,70 @@ import ellipsize from "ellipsize";
 
 import { useSelector, useDispatch } from "react-redux";
 import { comicinfoAPICall } from "../actions/comicinfo.actions";
+import { Form, Field } from "react-final-form";
 
 interface ISearchProps {}
 
 export const Search = ({}: ISearchProps): ReactElement => {
+  const formData = {
+    search: "",
+  };
   const dispatch = useDispatch();
-  const getCVSearchResults = useCallback(() => {
+  const getCVSearchResults = useCallback(
-    dispatch(
+    (searchQuery) => {
-      comicinfoAPICall({
+      console.log(searchQuery);
-        callURIAction: "search",
+      dispatch(
-        method: "GET",
+        comicinfoAPICall({
-        params: {
+          callURIAction: "search",
-          api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69",
+          method: "GET",
-          format: "json",
+          params: {
-          limit: "10",
+            api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69",
-          offset: "0",
+            query: searchQuery,
-          field_list: "id,name,deck,api_detail_url",
+            format: "json",
-        },
+            limit: "10",
-      }),
+            offset: "0",
-    );
+            field_list: "id,name,deck,api_detail_url",
-  }, [dispatch]);
+            resources: "volume",
+          },
+        }),
+      );
+    },
+    [dispatch],
+  );
   return (
     <>
       <section className="container">
         <div className="section search">
-          <div className="columns">
+          <h1 className="title">Search</h1>
-            <div className="column is-half">
+
-              <h1 className="title">Search</h1>
+          <Form
-              <input
+            onSubmit={getCVSearchResults}
-                className="main-search-bar input is-large"
+            initialValues={{
-                type="text"
+              ...formData,
-                placeholder="Enter a title, ComicVine ID or a series name"
+            }}
-              ></input>
+            render={({ handleSubmit, form, submitting, pristine, values }) => (
-            </div>
+              <form onSubmit={handleSubmit} className="form columns search">
-          </div>
+                <div className="column is-three-quarters search">
+                  <Field name="search">
+                    {({ input, meta }) => {
+                      return (
+                        <input
+                          {...input}
+                          className="input main-search-bar is-large"
+                        />
+                      );
+                    }}
+                  </Field>
+                </div>
+                <div className="column">
+                  <button type="submit" className="button is-medium">
+                    Search
+                  </button>
+                </div>
+              </form>
+            )}
+          />
+
           <article className="message is-dark is-half">
             <div className="message-body">
               <p className="mb-2">