🔎 Glorious universal library search first draft

src/client/components/Carda.tsx

@@ -12,6 +12,7 @@ interface ICardProps {
   backgroundColor?: string;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   cardContainerStyle?: PropTypes.object;
+  imageStyle?: PropTypes.object;
 }
 
 const renderCard = (props): ReactElement => {
@@ -23,6 +24,7 @@ const renderCard = (props): ReactElement => {
             <div className="is-horizontal">
               <div className="card-image">
                 <img
+                  style={props.imageStyle}
                   src={props.imageUrl}
                   alt="Placeholder image"
                   className="cropped-image"
@@ -54,7 +56,11 @@ const renderCard = (props): ReactElement => {
                 }
               >
                 <figure>
-                  <img src={props.imageUrl} alt="Placeholder image" />
+                  <img
+                    src={props.imageUrl}
+                    style={props.imageStyle}
+                    alt="Placeholder image"
+                  />
                 </figure>
               </div>
               {props.hasDetails && (

src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx

@@ -6,7 +6,6 @@ import { withAsyncPaginate } from "react-select-async-paginate";
 const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
 
 export const AsyncSelectPaginate = (props): ReactElement => {
-//   console.log(props);
   const [value, setValue] = useState(null);
   const [isAddingInProgress, setIsAddingInProgress] = useState(false);
 

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -36,7 +36,6 @@ export const EditMetadataPanel = (props): ReactElement => {
     (state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name,
   );
   const dispatch = useDispatch();
-  console.log(rawFileDetails);
 
   return (
     <>

src/client/components/GlobalSearchBar/SearchBar.tsx

@@ -0,0 +1,71 @@
+import { debounce, isEmpty, isUndefined, map } from "lodash";
+import React, { ReactElement, useCallback, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import Card from "../Carda";
+
+import { searchIssue } from "../../actions/fileops.actions";
+import MetadataPanel from "../shared/MetadataPanel";
+
+interface ISearchBarProps {
+  data: any;
+}
+
+export const SearchBar = (data: ISearchBarProps): ReactElement => {
+  const dispatch = useDispatch();
+  const searchResults = useSelector(
+    (state: RootState) => state.fileOps.librarySearchResultsFormatted,
+  );
+
+  const performSearch = useCallback(
+    (e) => {
+      dispatch(
+        searchIssue(
+          {
+            query: {
+              volumeName: e.target.value,
+            },
+          },
+          {
+            pagination: {
+              size: 25,
+              from: 0,
+            },
+            type: "volumeName",
+          },
+        ),
+      );
+    },
+    [data],
+  );
+  return (
+    <>
+      <div className="control has-icons-right">
+        <input
+          className="input mt-2"
+          placeholder="Search Library"
+          onChange={(e) => performSearch(e)}
+        />
+
+        <span className="icon is-right mt-2">
+          <i className="fa-solid fa-magnifying-glass"></i>
+        </span>
+      </div>
+
+      {!isEmpty(searchResults) ? (
+        <div
+          className="columns box is-multiline"
+          style={{
+            padding: 4,
+            position: "absolute",
+            width: 360,
+            margin: "60px 0 0 350px",
+          }}
+        >
+          {map(searchResults, (result) => (
+            <MetadataPanel data={result} />
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+};

src/client/components/Navbar.tsx

@@ -1,49 +1,11 @@
-import React, { ReactElement } from "react";
+import { debounce } from "lodash";
+import React, { ReactElement, useCallback } from "react";
+import { SearchBar } from "./GlobalSearchBar/SearchBar";
+import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
-import Select, {
-  components,
-  DropdownIndicatorProps,
-  IndicatorSeparatorProps,
-} from "react-select";
 
 const Navbar: React.FunctionComponent = (props) => {
-  const DropdownIndicator = (
-    props: DropdownIndicatorProps<ColourOption, true>,
-  ) => {
-    return (
-      <components.DropdownIndicator {...props}>
-        <></>
-      </components.DropdownIndicator>
-    );
-  };
-
-  const IndicatorSeparator = ({
-    innerProps,
-  }: IndicatorSeparatorProps<ColourOption, true>) => {
-    return <></>;
-  };
-
-  const searchPlaceholder = (): ReactElement => (
-    <>
-      Search Library...{" "}
-      <i className="fa-solid fa-magnifying-glass is-pulled-right mt-1"></i>
-    </>
-  );
-
-  const performSearch = (searchQuery) => {
-    
-  }
-
-  const customStyles = {
-    control: () => ({
-      width: 250,
-      marginTop: 0,
-      border: "1px solid #CCC",
-      height: 40,
-      borderRadius: 8,
-    }),
-  };
-
+  
   return (
     <nav className="navbar is-fixed-top">
       <div className="navbar-brand">
@@ -93,22 +55,7 @@ const Navbar: React.FunctionComponent = (props) => {
             Downloads
           </Link>
 
-          <Select
-            className="basic-single mt-2"
-            classNamePrefix="select"
-            styles={customStyles}
-            components={{ DropdownIndicator, IndicatorSeparator }}
-            placeholder={searchPlaceholder()}
-            // defaultValue={colourOptions[0]}
-            // isDisabled={isDisabled}
-            // isLoading={isLoading}
-            isClearable={true}
-            // isRtl={isRtl}
-            // isSearchable={isSearchable}
-            name="color"
-            // options={colourOptions}
-          />
-
+          <SearchBar/>
           <Link to="/search" className="navbar-item">
             Search ComicVine
           </Link>