diff --git a/components/account/tabs/posts/AccountCommentsPermlinkSearch.tsx b/components/account/tabs/posts/AccountCommentsPermlinkSearch.tsx new file mode 100644 index 0000000000000000000000000000000000000000..6a7bac9f4a94d96e955f0b632ad7f9e8ff1c335b --- /dev/null +++ b/components/account/tabs/posts/AccountCommentsPermlinkSearch.tsx @@ -0,0 +1,158 @@ +import { useState, ChangeEvent, useEffect } from "react"; +import { useRouter } from "next/router"; +import { Loader2 } from "lucide-react"; +import moment from "moment"; + +import Explorer from "@/types/Explorer"; +import { trimAccountName } from "@/utils/StringUtils"; +import SearchRanges from "@/components/searchRanges/SearchRanges"; +import { Button } from "@/components/ui/button"; +import { useSearchesContext } from "@/contexts/SearchesContext"; +import usePermlinkSearch from "@/hooks/api/common/usePermlinkSearch"; +import { getSearchParams } from "@/components/home/searches/utils/getSearchParams"; +import PostTypeSelector from "@/components/home/searches/PostTypeSelector"; +import { + DEFAULT_LAST_TIME_UNIT_VALUE, + DEFAULT_TIME_UNIT_SELECT_KEY, +} from "@/hooks/common/useSearchRanges"; + +const AccountCommentsPermlinkSearch = () => { + const { + permlinkSearchProps, + setPermlinkSearchProps, + setPermlinkPaginationPage, + permlinkPaginationPage, + setCommentType, + searchRanges, + } = useSearchesContext(); + const router = useRouter(); + + const { permlinkSearchDataLoading } = usePermlinkSearch(permlinkSearchProps); + + const accountNameFromRoute = router.query.accountName as string; + + const [accountName, setAccountName] = useState<string>(""); + const [localCommentType, setLocalCommentType] = + useState<Explorer.CommentType>(permlinkSearchProps?.commentType || "post"); + + const { + setRangesValues, + setLastTimeUnitValue, + setRangeSelectKey, + setTimeUnitSelectKey, + setFromBlock, + setToBlock, + setStartDate, + setEndDate, + setLastBlocksValue, + } = searchRanges; + + const handleCommentPermlinkSearch = async () => { + if (!accountName) return; + + const searchParams = await getSearchParams(searchRanges); + + if (!searchParams) return; + + const commentPermlinksSearchProps = { + accountName: trimAccountName(accountName), + commentType: localCommentType, + pageNumber: permlinkPaginationPage, + ...searchParams, + }; + + setPermlinkSearchProps(commentPermlinksSearchProps); + setRangesValues(commentPermlinksSearchProps); + }; + + const handleChangeCommentType = (e: ChangeEvent<HTMLSelectElement>) => { + const { + target: { value }, + } = e; + + setLocalCommentType(value as Explorer.CommentType); + }; + + const onSearchButtonClick = () => { + setPermlinkPaginationPage(1); + setCommentType(localCommentType); + + handleCommentPermlinkSearch(); + }; + + const onResetButtonClick = async () => { + setFromBlock(undefined); + setToBlock(undefined); + setStartDate(undefined); + setEndDate(undefined); + setLastBlocksValue(undefined); + setLastTimeUnitValue(DEFAULT_LAST_TIME_UNIT_VALUE); + setRangeSelectKey("lastTime"); + setTimeUnitSelectKey(DEFAULT_TIME_UNIT_SELECT_KEY); + setLocalCommentType("post"); + setCommentType("post"); + + const commentPermlinksSearchProps = { + accountName: trimAccountName(accountName), + commentType: "post" as Explorer.CommentType, + pageNumber: 1, + fromBlock: undefined, + toBlock: undefined, + startDate: moment(Date.now()).subtract(30, "days").toDate(), + endDate: undefined, + lastBlocks: undefined, + lastTime: 30, + rangeSelectKey: "lastTime", + timeUnit: "days", + }; + setPermlinkSearchProps(commentPermlinksSearchProps); + setRangesValues(commentPermlinksSearchProps); + }; + + // Set account name and trigger initial search when + useEffect(() => { + if (!accountName) { + setAccountName(accountNameFromRoute); + } + }, [accountName, accountNameFromRoute]); + + useEffect(() => { + if (!accountName) return; + handleCommentPermlinkSearch(); + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [accountName]); + + return ( + <> + <SearchRanges + rangesProps={searchRanges} + safeTimeRangeDisplay + /> + + <div className={"flex justify-start my-4"}> + <PostTypeSelector + showLabel + handleChange={handleChangeCommentType} + commentType={localCommentType} + /> + </div> + <div className="flex justify-between items-center"> + <Button + data-testid="search-button" + className="mr-2 my-2" + onClick={onSearchButtonClick} + disabled={!accountName} + > + Search + {permlinkSearchDataLoading && ( + <Loader2 className="ml-2 animate-spin h-4 w-4 ..." /> + )} + </Button> + <Button onClick={onResetButtonClick}>Clear</Button> + </div> + </> + ); +}; + +export default AccountCommentsPermlinkSearch; diff --git a/components/account/tabs/posts/PostsTabContent.tsx b/components/account/tabs/posts/PostsTabContent.tsx index 613bc032760199ad71dc9af2a68e6365ce9714a0..6bf923747eac665be57b35d1ea3aca3171346da4 100644 --- a/components/account/tabs/posts/PostsTabContent.tsx +++ b/components/account/tabs/posts/PostsTabContent.tsx @@ -1,7 +1,7 @@ -import CommentsPermlinkSearch from "@/components/home/searches/CommentPermlinkSearch"; import CommentPermlinkSearchResults from "@/components/home/searches/searchesResults/CommentPermlinkSearchResults"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { TabsContent } from "@/components/ui/tabs"; +import AccountCommentsPermlinkSearch from "./AccountCommentsPermlinkSearch"; const PostsTabContent = () => { return ( @@ -11,7 +11,7 @@ const PostsTabContent = () => { <CardTitle>Post search</CardTitle> </CardHeader> <CardContent> - <CommentsPermlinkSearch /> + <AccountCommentsPermlinkSearch /> </CardContent> </Card> <CommentPermlinkSearchResults />