🔎 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(
+    (searchQuery) => {
+      console.log(searchQuery);
       dispatch(
         comicinfoAPICall({
           callURIAction: "search",
           method: "GET",
           params: {
             api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69",
+            query: searchQuery,
             format: "json",
             limit: "10",
             offset: "0",
             field_list: "id,name,deck,api_detail_url",
+            resources: "volume",
           },
         }),
       );
-  }, [dispatch]);
+    },
+    [dispatch],
+  );
   return (
     <>
       <section className="container">
         <div className="section search">
-          <div className="columns">
-            <div className="column is-half">
           <h1 className="title">Search</h1>
+
+          <Form
+            onSubmit={getCVSearchResults}
+            initialValues={{
+              ...formData,
+            }}
+            render={({ handleSubmit, form, submitting, pristine, values }) => (
+              <form onSubmit={handleSubmit} className="form columns search">
+                <div className="column is-three-quarters search">
+                  <Field name="search">
+                    {({ input, meta }) => {
+                      return (
                         <input
-                className="main-search-bar input is-large"
+                          {...input}
-                type="text"
+                          className="input main-search-bar is-large"
-                placeholder="Enter a title, ComicVine ID or a series name"
+                        />
-              ></input>
+                      );
+                    }}
+                  </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">