From 4ec45352e9be374b710b998353eadbf6e2223d86 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Thu, 26 May 2022 22:52:07 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8E=20Glorious=20universal=20library?= =?UTF-8?q?=20search=20first=20draft?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/actions/fileops.actions.tsx | 5 ++ src/client/components/Carda.tsx | 8 ++- .../AsyncSelectPaginate.tsx | 1 - .../ComicDetail/EditMetadataPanel.tsx | 1 - .../components/GlobalSearchBar/SearchBar.tsx | 71 +++++++++++++++++++ src/client/components/Navbar.tsx | 65 ++--------------- src/client/constants/action-types.ts | 1 + src/client/reducers/fileops.reducer.ts | 20 +++++- src/client/shared/utils/metadata.utils.ts | 1 + 9 files changed, 108 insertions(+), 65 deletions(-) create mode 100644 src/client/components/GlobalSearchBar/SearchBar.tsx diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index 33db13b..1ab23e4 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -30,6 +30,7 @@ import { LS_IMPORT_CALL_IN_PROGRESS, LS_TOGGLE_IMPORT_QUEUE, SS_SEARCH_FAILED, + SS_SEARCH_RESULTS_FETCHED_SPECIAL, } from "../constants/action-types"; import { success } from "react-notification-system-redux"; import { removeLeadingPeriod } from "../shared/utils/formatting.utils"; @@ -298,6 +299,10 @@ export const searchIssue = (query, options) => async (dispatch) => { type: SS_SEARCH_RESULTS_FETCHED, data: response.data.body, }); + dispatch({ + type: SS_SEARCH_RESULTS_FETCHED_SPECIAL, + data: response.data.body, + }); }; export const analyzeImage = (imageFilePath: string | Buffer) => async (dispatch) => { diff --git a/src/client/components/Carda.tsx b/src/client/components/Carda.tsx index 2d975bd..562ac5e 100644 --- a/src/client/components/Carda.tsx +++ b/src/client/components/Carda.tsx @@ -12,6 +12,7 @@ interface ICardProps { backgroundColor?: string; onClick?: (event: React.MouseEvent) => void; cardContainerStyle?: PropTypes.object; + imageStyle?: PropTypes.object; } const renderCard = (props): ReactElement => { @@ -23,6 +24,7 @@ const renderCard = (props): ReactElement => {
Placeholder image { } >
- Placeholder image + Placeholder image
{props.hasDetails && ( diff --git a/src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx b/src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx index ed06c7c..a75ae99 100644 --- a/src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx +++ b/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); diff --git a/src/client/components/ComicDetail/EditMetadataPanel.tsx b/src/client/components/ComicDetail/EditMetadataPanel.tsx index 62508e7..3c27283 100644 --- a/src/client/components/ComicDetail/EditMetadataPanel.tsx +++ b/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 ( <> diff --git a/src/client/components/GlobalSearchBar/SearchBar.tsx b/src/client/components/GlobalSearchBar/SearchBar.tsx new file mode 100644 index 0000000..d7aec2c --- /dev/null +++ b/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 ( + <> +
+ performSearch(e)} + /> + + + + +
+ + {!isEmpty(searchResults) ? ( +
+ {map(searchResults, (result) => ( + + ))} +
+ ) : null} + + ); +}; diff --git a/src/client/components/Navbar.tsx b/src/client/components/Navbar.tsx index 2edfcba..c33473d 100644 --- a/src/client/components/Navbar.tsx +++ b/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, - ) => { - return ( - - <> - - ); - }; - - const IndicatorSeparator = ({ - innerProps, - }: IndicatorSeparatorProps) => { - return <>; - }; - - const searchPlaceholder = (): ReactElement => ( - <> - Search Library...{" "} - - - ); - - const performSearch = (searchQuery) => { - - } - - const customStyles = { - control: () => ({ - width: 250, - marginTop: 0, - border: "1px solid #CCC", - height: 40, - borderRadius: 8, - }), - }; - + return (