Skip to content
Snippets Groups Projects
Commit 6750894e authored by Lukas's avatar Lukas
Browse files

Create separate component for each search section

parent 886b9c97
No related branches found
No related tags found
1 merge request!494Lbudginas/#392 part1 reduce searches component
Hide whitespace changes
Inline Side-by-side
components/home/searches/AccountSearch.tsx
+ 30
− 21
View file @ 6750894e
import { useState } from "react";
import { Loader2 } from "lucide-react";
import Hive from "@/types/Hive";
import Explorer from "@/types/Explorer";
import { getOperationButtonTitle } from "@/utils/UI";
import { trimAccountName } from "@/utils/StringUtils";
import { SearchRangesResult } from "@/hooks/common/useSearchRanges";
import { Input } from "@/components/ui/input";
import SearchRanges from "@/components/searchRanges/SearchRanges";
import OperationTypesDialog from "@/components/OperationTypesDialog";
import { Button } from "@/components/ui/button";
import AutocompleteInput from "@/components/ui/AutoCompleteInput";
interface AccountSearchProps {
startAccountOperationsSearch: (
accountSearchOperationsProps: Explorer.AccountSearchOperationsProps
) => Promise<void>;
operationsTypes?: Hive.OperationPattern[];
loading?: boolean;
searchRanges: SearchRangesResult;
}
import { startAccountOperationsSearch } from "./utils/accountSearchHelpers";
import { useSearchesContext } from "@/contexts/SearchesContext";
import useOperationsTypes from "@/hooks/api/common/useOperationsTypes";
import useAccountOperations from "@/hooks/api/accountPage/useAccountOperations";
const AccountSearch = () => {
const {
setLastSearchKey,
setAccountOperationsPage,
accountOperationsSearchProps,
setAccountOperationsSearchProps,
setPreviousAccountOperationsSearchProps,
searchRanges,
} = useSearchesContext();
const { isAccountOperationsLoading } = useAccountOperations(
accountOperationsSearchProps
);
const { operationsTypes } = useOperationsTypes();
const AccountSearch: React.FC<AccountSearchProps> = ({
startAccountOperationsSearch,
operationsTypes,
loading,
searchRanges,
}) => {
const [accountName, setAccountName] = useState<string>("");
const [selectedOperationTypes, setSelectedOperationTypes] = useState<
number[]
......@@ -53,7 +55,13 @@ const AccountSearch: React.FC<AccountSearchProps> = ({
? selectedOperationTypes
: undefined,
};
startAccountOperationsSearch(accountOperationsSearchProps);
startAccountOperationsSearch(
accountOperationsSearchProps,
(val: "account") => setLastSearchKey(val),
setAccountOperationsPage,
setAccountOperationsSearchProps,
setPreviousAccountOperationsSearchProps
);
}
};
......@@ -67,8 +75,7 @@ const AccountSearch: React.FC<AccountSearchProps> = ({
inputType="account_name"
className="w-1/2 bg-theme dark:bg-theme border-0 border-b-2"
required={true}
/>
/>
</div>
<SearchRanges
rangesProps={searchRanges}
......@@ -93,7 +100,9 @@ const AccountSearch: React.FC<AccountSearchProps> = ({
disabled={!accountName}
>
Search
{loading && <Loader2 className="ml-2 animate-spin h-4 w-4 ..." />}
{isAccountOperationsLoading && (
<Loader2 className="ml-2 animate-spin h-4 w-4 ..." />
)}
</Button>
{!accountName && (
<label className="ml-2 text-muted-foreground">Set account name</label>
......
components/home/searches/BlockSearch.tsx
+ 28
− 23
View file @ 6750894e
import { useState } from "react";
import { Loader2, HelpCircle } from "lucide-react";
import { Loader2 } from "lucide-react";
import { config } from "@/Config";
import Hive from "@/types/Hive";
import Explorer from "@/types/Explorer";
import { getOperationButtonTitle } from "@/utils/UI";
import useSearchRanges from "@/hooks/common/useSearchRanges";
import useOperationKeys from "@/hooks/api/homePage/useOperationKeys";
import SearchRanges from "@/components/searchRanges/SearchRanges";
import OperationTypesDialog from "@/components/OperationTypesDialog";
......@@ -22,23 +20,26 @@ import {
SelectItem,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { trimAccountName } from "@/utils/StringUtils";
import AutocompleteInput from "@/components/ui/AutoCompleteInput";
interface BlockSearchProps {
startBlockSearch: (
blockSearchProps: Explorer.BlockSearchProps
) => Promise<void>;
operationsTypes?: Hive.OperationPattern[];
loading?: boolean;
}
import { useSearchesContext } from "@/contexts/SearchesContext";
import useBlockSearch from "@/hooks/api/homePage/useBlockSearch";
import useOperationsTypes from "@/hooks/api/common/useOperationsTypes";
import { startBlockSearch } from "./utils/blockSearchHelpers";
const BlockSearch = () => {
const {
blockSearchProps,
setBlockSearchProps,
setLastSearchKey,
searchRanges,
} = useSearchesContext();
const { operationsTypes } = useOperationsTypes();
const { blockSearchDataLoading } = useBlockSearch(blockSearchProps);
const BlockSearch: React.FC<BlockSearchProps> = ({
startBlockSearch,
operationsTypes,
loading,
}) => {
const [accountName, setAccountName] = useState<string>("");
const [selectedOperationTypes, setSelectedOperationTypes] = useState<
number[]
......@@ -52,7 +53,6 @@ const BlockSearch: React.FC<BlockSearchProps> = ({
);
const [selectedIndex, setSelectedIndex] = useState<string>("");
const searchRanges = useSearchRanges("lastBlocks");
const { operationKeysData } = useOperationKeys(singleOperationTypeId);
const { getRangesValues } = searchRanges;
......@@ -82,7 +82,7 @@ const BlockSearch: React.FC<BlockSearchProps> = ({
setKeysForProperty(Number(newValue));
};
const onButtonClick = async () => {
const handleStartBlockSearch = async () => {
const {
payloadFromBlock,
payloadToBlock,
......@@ -105,18 +105,21 @@ const BlockSearch: React.FC<BlockSearchProps> = ({
content: fieldContent !== "" ? fieldContent : undefined,
},
};
startBlockSearch(blockSearchProps);
startBlockSearch(blockSearchProps, setBlockSearchProps, (val: "block") =>
setLastSearchKey(val)
);
};
return (
<>
<div className="flex flex-col">
<AutocompleteInput
<AutocompleteInput
value={accountName}
onChange={setAccountName}
placeholder="Account name"
inputType="account_name"
className="w-1/2 bg-theme dark:bg-theme border-0 border-b-2"
className="w-1/2 bg-theme border-0 border-b-2"
/>
</div>
<SearchRanges
......@@ -233,10 +236,12 @@ const BlockSearch: React.FC<BlockSearchProps> = ({
<div className="flex items-center ">
<Button
data-testid="block-search-btn"
onClick={onButtonClick}
onClick={handleStartBlockSearch}
>
Search
{loading && <Loader2 className="ml-2 animate-spin h-4 w-4 ..." />}
{blockSearchDataLoading && (
<Loader2 className="ml-2 animate-spin h-4 w-4 ..." />
)}
</Button>
</div>
</>
......
components/home/searches/CommentPermlinkSearch.tsx
+ 28
− 33
View file @ 6750894e
import { useEffect, useState } from "react";
import { useState } from "react";
import { Loader2 } from "lucide-react";
import Explorer from "@/types/Explorer";
import { trimAccountName } from "@/utils/StringUtils";
import { SearchRangesResult } from "@/hooks/common/useSearchRanges";
import { Input } from "@/components/ui/input";
import SearchRanges from "@/components/searchRanges/SearchRanges";
import { Button } from "@/components/ui/button";
import AutocompleteInput from "@/components/ui/AutoCompleteInput";
interface CommentsPermlinkSearchProps {
startCommentPermlinkSearch: (
accountSearchOperationsProps: Explorer.CommentPermlinSearchParams
) => Promise<void>;
data?: Explorer.PermlinkSearchProps;
loading?: boolean;
searchRanges: SearchRangesResult;
}
import { useSearchesContext } from "@/contexts/SearchesContext";
import usePermlinkSearch from "@/hooks/api/common/usePermlinkSearch";
import { startCommentPermlinkSearch } from "./utils/commentPermlinkSearchHelpers";
const CommentsPermlinkSearch = () => {
const {
permlinkSearchProps,
setPermlinkSearchProps,
setCommentPaginationPage,
setCommentType,
setLastSearchKey,
searchRanges,
} = useSearchesContext();
const { permlinkSearchDataLoading } = usePermlinkSearch(permlinkSearchProps);
const CommentsPermlinkSearch: React.FC<CommentsPermlinkSearchProps> = ({
startCommentPermlinkSearch,
loading,
data,
searchRanges,
}) => {
const [accountName, setAccountName] = useState<string>("");
const { getRangesValues } = searchRanges;
const setSearchValues = (data: Explorer.PermlinkSearchProps | any) => {
data.accountName && setAccountName(data.accountName);
searchRanges.setRangesValues(data);
};
const onButtonClick = async () => {
if (accountName !== "") {
const {
......@@ -51,26 +46,24 @@ const CommentsPermlinkSearch: React.FC<CommentsPermlinkSearchProps> = ({
? searchRanges.lastBlocksValue
: undefined,
lastTime: searchRanges.lastTimeUnitValue,
page: data?.page || 1,
rangeSelectKey: searchRanges.rangeSelectKey,
timeUnit: searchRanges.timeUnitSelectKey,
};
startCommentPermlinkSearch(commentPermlinksSearchProps);
startCommentPermlinkSearch(
commentPermlinksSearchProps,
setPermlinkSearchProps,
setCommentPaginationPage,
setCommentType,
(val: "comment-permlink") => setLastSearchKey(val)
);
}
};
useEffect(() => {
if (!!data) {
setSearchValues(data);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data]);
return (
<>
<p className="ml-2">Find comments permlinks by account name</p>
<div className="flex flex-col">
<AutocompleteInput
<AutocompleteInput
value={accountName}
onChange={setAccountName}
placeholder="Author"
......@@ -91,7 +84,9 @@ const CommentsPermlinkSearch: React.FC<CommentsPermlinkSearchProps> = ({
disabled={!accountName}
>
Search
{loading && <Loader2 className="ml-2 animate-spin h-4 w-4 ..." />}
{permlinkSearchDataLoading && (
<Loader2 className="ml-2 animate-spin h-4 w-4 ..." />
)}
</Button>
{!accountName && (
<label className="text-gray-300 dark:text-gray-500 ">
......
components/home/searches/CommentsSearch.tsx
+ 33
− 45
View file @ 6750894e
import { useEffect, useState } from "react";
import { useState } from "react";
import { Loader2 } from "lucide-react";
import { config } from "@/Config";
import Hive from "@/types/Hive";
import Explorer from "@/types/Explorer";
import { getOperationButtonTitle } from "@/utils/UI";
import { trimAccountName } from "@/utils/StringUtils";
import {
convertBooleanArrayToIds,
convertIdsToBooleanArray,
} from "@/lib/utils";
import { SearchRangesResult } from "@/hooks/common/useSearchRanges";
import { convertIdsToBooleanArray } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import SearchRanges from "@/components/searchRanges/SearchRanges";
import OperationTypesDialog from "@/components/OperationTypesDialog";
import { Button } from "@/components/ui/button";
import AutocompleteInput from "@/components/ui/AutoCompleteInput";
interface CommentsSearchProps {
startCommentsSearch: (
accountSearchOperationsProps: Explorer.CommentSearchParams
) => Promise<void>;
operationsTypes?: Hive.OperationPattern[];
data?: Explorer.CommentSearchParams;
loading?: boolean;
searchRanges: SearchRangesResult;
}
import { startCommentSearch } from "./utils/commentSearchHelpers";
import { useSearchesContext } from "@/contexts/SearchesContext";
import useOperationsTypes from "@/hooks/api/common/useOperationsTypes";
import useCommentSearch from "@/hooks/api/common/useCommentSearch";
const CommentsSearch = () => {
const {
setCommentSearchProps,
commentSearchProps,
setCommentPaginationPage,
commentPaginationPage,
setPreviousCommentSearchProps,
setLastSearchKey,
searchRanges,
} = useSearchesContext();
const { commentSearchDataLoading } = useCommentSearch(commentSearchProps);
const { operationsTypes } = useOperationsTypes();
const CommentsSearch: React.FC<CommentsSearchProps> = ({
startCommentsSearch,
operationsTypes,
loading,
data,
searchRanges,
}) => {
const [accountName, setAccountName] = useState<string>("");
const [permlink, setPermlink] = useState<string>("");
const [
......@@ -42,16 +39,6 @@ const CommentsSearch: React.FC<CommentsSearchProps> = ({
const { getRangesValues } = searchRanges;
const setSearchValues = (data: Explorer.CommentSearchParams) => {
data.accountName && setAccountName(Array.isArray(data.accountName) ? data.accountName[0] : data.accountName);
data.permlink && setPermlink(data.permlink);
data.filters &&
setSelectedCommentSearchOperationTypes(
convertBooleanArrayToIds(data.filters)
);
searchRanges.setRangesValues(data);
};
const onButtonClick = async () => {
if (accountName !== "") {
const {
......@@ -76,21 +63,20 @@ const CommentsSearch: React.FC<CommentsSearchProps> = ({
? searchRanges.lastBlocksValue
: undefined,
lastTime: searchRanges.lastTimeUnitValue,
page: data?.page || 1,
page: commentPaginationPage,
rangeSelectKey: searchRanges.rangeSelectKey,
timeUnit: searchRanges.timeUnitSelectKey,
};
startCommentsSearch(commentSearchProps);
startCommentSearch(
commentSearchProps,
setCommentSearchProps,
setCommentPaginationPage,
setPreviousCommentSearchProps,
(val: "comment") => setLastSearchKey(val)
);
}
};
useEffect(() => {
if (!!data) {
setSearchValues(data);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data]);
return (
<>
<p className="ml-2">
......@@ -98,7 +84,7 @@ const CommentsSearch: React.FC<CommentsSearchProps> = ({
permlink.
</p>
<div className="flex flex-col">
<AutocompleteInput
<AutocompleteInput
value={accountName}
onChange={setAccountName}
placeholder="Author"
......@@ -140,7 +126,9 @@ const CommentsSearch: React.FC<CommentsSearchProps> = ({
disabled={!accountName || !permlink}
>
Search
{loading && <Loader2 className="ml-2 animate-spin h-4 w-4 ..." />}
{commentSearchDataLoading && (
<Loader2 className="ml-2 animate-spin h-4 w-4 ..." />
)}
</Button>
{!accountName && (
<label className="text-gray-300 dark:text-gray-500 ">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment