Create new directory for searhces results and have result component for each search performed

components/home/searches/searchesResults/AccountSearchResults.tsx

+import { useEffect } from "react";
+import Link from "next/link";
+
+import { config } from "@/Config";
+import { convertOperationResultsToTableOperations } from "@/lib/utils";
+import Explorer from "@/types/Explorer";
+import OperationsTable from "@/components/OperationsTable";
+import JumpToPage from "@/components/JumpToPage";
+import CustomPagination from "@/components/CustomPagination";
+import { Button } from "@/components/ui/button";
+import useOperationsFormatter from "@/hooks/common/useOperationsFormatter";
+import { useSearchesContext } from "@/contexts/SearchesContext";
+import useAccountOperations from "@/hooks/api/accountPage/useAccountOperations";
+import ErrorPage from "@/pages/ErrorPage";
+import { getAccountPageLink } from "../utils/accountSearchHelpers";
+
+const AccountSearchResults = () => {
+  const {
+    accountOperationsSearchProps,
+    setAccountOperationsPage,
+    accountOperationsPage,
+    previousAccountOperationsSearchProps,
+    setAccountOperationsSearchProps,
+    lastSearchKey,
+    searchRanges,
+  } = useSearchesContext();
+
+  const { accountOperations, isAccountOperationsError } = useAccountOperations(
+    accountOperationsSearchProps
+  );
+
+  const formattedAccountOperations = useOperationsFormatter(accountOperations);
+
+  useEffect(() => {
+    if (!accountOperationsPage && accountOperations) {
+      setAccountOperationsPage(accountOperations?.total_pages);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [accountOperations, accountOperationsPage]);
+
+  if (isAccountOperationsError) {
+    return <ErrorPage />;
+  }
+  if (!accountOperations) return;
+
+  const formattedOperations = convertOperationResultsToTableOperations(
+    formattedAccountOperations?.operations_result
+  );
+
+  const unformattedOperations = convertOperationResultsToTableOperations(
+    accountOperations.operations_result
+  );
+
+  const changeAccountOperationsPagination = (newPageNum: number) => {
+    if (previousAccountOperationsSearchProps?.accountName) {
+      const newSearchProps: Explorer.AccountSearchOperationsProps = {
+        ...previousAccountOperationsSearchProps,
+        pageNumber: newPageNum,
+      };
+      setAccountOperationsSearchProps(newSearchProps);
+      setAccountOperationsPage(newPageNum);
+    }
+  };
+
+  const totalOperations = accountOperations.total_operations;
+  const accountPageLink = getAccountPageLink(
+    accountOperationsSearchProps,
+    searchRanges
+  );
+
+  return (
+    <>
+      {accountOperations.total_operations > 0 ? (
+        <div data-testid="operations-card">
+          <Link href={accountPageLink}>
+            <Button data-testid="go-to-result-page">Go to result page</Button>
+          </Link>
+
+          <div className="flex justify-center items-center text-black dark:text-white">
+            <CustomPagination
+              currentPage={accountOperationsPage || 1}
+              totalCount={totalOperations}
+              pageSize={config.standardPaginationSize}
+              onPageChange={changeAccountOperationsPagination}
+              isMirrored={true}
+            />
+          </div>
+          <div className="flex justify-end items-center mb-4">
+            <JumpToPage
+              currentPage={accountOperationsPage || 1}
+              onPageChange={changeAccountOperationsPagination}
+            />
+          </div>
+          <OperationsTable
+            operations={formattedOperations}
+            unformattedOperations={unformattedOperations}
+          />
+        </div>
+      ) : (
+        <div className="flex justify-center w-full text-black dark:text-white">
+          No operations matching given criteria
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AccountSearchResults;

components/home/searches/searchesResults/BlockSearchResults.tsx

+import Link from "next/link";
+
+import { useSearchesContext } from "@/contexts/SearchesContext";
+import useBlockSearch from "@/hooks/api/homePage/useBlockSearch";
+import useOperationsTypes from "@/hooks/api/common/useOperationsTypes";
+import ErrorPage from "@/pages/ErrorPage";
+import { getBlockPageLink } from "../utils/blockSearchHelpers";
+
+const BlockSearchResults = () => {
+  const { blockSearchProps } = useSearchesContext();
+  const { operationsTypes } = useOperationsTypes();
+
+  const { blockSearchData, blockSearchDataError } =
+    useBlockSearch(blockSearchProps);
+
+  const blockPageLink = getBlockPageLink(blockSearchProps, operationsTypes);
+
+  if (blockSearchDataError) {
+    return <ErrorPage />;
+  }
+
+  if (!blockSearchData) return;
+
+  return (
+    <div className="bg-theme dark:bg-theme p-2 md: h-fit rounded">
+      <div className="text-center">Results:</div>
+      <div className="flex flex-wrap">
+        {blockSearchData.total_blocks > 0 ? (
+          blockSearchData.blocks_result.map(({ block_num }) => (
+            <Link
+              key={block_num}
+              href={blockPageLink(block_num)}
+            >
+              <div className="m-1 border border-solid p-1">{block_num}</div>
+            </Link>
+          ))
+        ) : (
+          <div className="flex justify-center w-full">
+            No blocks matching given criteria
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BlockSearchResults;

components/home/searches/searchesResults/CommentPermlinkSearchResults.tsx

+import usePermlinkSearch from "@/hooks/api/common/usePermlinkSearch";
+import CommentPermlinkResultTable from "../CommentPermlinkResultTable";
+import { useSearchesContext } from "@/contexts/SearchesContext";
+
+const COMMENT_TYPES = ["all", "post", "comment"];
+
+const CommentPermlinkSearchResults = () => {
+  const {
+    permlinkSearchProps,
+    commentType,
+    setCommentType,
+    setPermlinkSearchProps,
+    lastSearchKey,
+  } = useSearchesContext();
+
+  const { permlinkSearchData } = usePermlinkSearch(permlinkSearchProps);
+
+  const accountName = permlinkSearchProps?.accountName;
+
+  const handleChangeCommentType = (e: any) => {
+    const {
+      target: { value },
+    } = e;
+
+    setCommentType(value);
+    setPermlinkSearchProps((prev: any) => {
+      return {
+        ...prev,
+        commentType: value,
+      };
+    });
+  };
+
+  if (!permlinkSearchData) return;
+
+  return (
+    <>
+      {permlinkSearchData.total_permlinks ? (
+        <div>
+          <div className="flex justify-end my-4">
+            <select
+              onChange={handleChangeCommentType}
+              value={commentType}
+              className="border p-2 rounded bg-theme text-text"
+            >
+              {COMMENT_TYPES.map((type, index) => (
+                <option
+                  key={index}
+                  value={type}
+                >
+                  {type.charAt(0).toUpperCase() + type.slice(1)}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="flex flex-wrap">
+            <CommentPermlinkResultTable
+              data={permlinkSearchData.permlinks_result}
+              accountName={accountName}
+            />
+          </div>
+        </div>
+      ) : (
+        <div className="flex justify-center w-full">
+          No permlinks matching given criteria
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CommentPermlinkSearchResults;

components/home/searches/searchesResults/CommentSearchResults.tsx

+import Link from "next/link";
+
+import { config } from "@/Config";
+import Explorer from "@/types/Explorer";
+import { Button } from "@/components//ui/button";
+import CustomPagination from "@/components//CustomPagination";
+import JumpToPage from "@/components//JumpToPage";
+import OperationsTable from "@/components//OperationsTable";
+import { convertCommentsOperationResultToTableOperations } from "@/lib/utils";
+import useOperationsFormatter from "@/hooks/common/useOperationsFormatter";
+import useCommentSearch from "@/hooks/api/common/useCommentSearch";
+import { useSearchesContext } from "@/contexts/SearchesContext";
+import { getCommentPageLink } from "../utils/commentSearchHelpers";
+
+const CommentSearchResults = () => {
+  const {
+    commentSearchProps,
+    lastSearchKey,
+    commentPaginationPage,
+    previousCommentSearchProps,
+    setCommentSearchProps,
+    setCommentPaginationPage,
+    searchRanges,
+  } = useSearchesContext();
+
+  const { commentSearchData } = useCommentSearch(commentSearchProps);
+  const formattedCommentOperations = useOperationsFormatter(commentSearchData);
+
+  if (!commentSearchData) return;
+
+  const formattedOperations = convertCommentsOperationResultToTableOperations(
+    formattedCommentOperations?.operations_result
+  );
+
+  const unformattedOperations = convertCommentsOperationResultToTableOperations(
+    commentSearchData.operations_result
+  );
+  const commentPageLink = getCommentPageLink(commentSearchProps, searchRanges);
+
+  const changeCommentSearchPagination = (newPageNum: number) => {
+    if (previousCommentSearchProps?.accountName) {
+      const newSearchProps: Explorer.CommentSearchProps = {
+        ...previousCommentSearchProps,
+        pageNumber: newPageNum,
+      };
+      setCommentSearchProps(newSearchProps);
+      setCommentPaginationPage(newPageNum);
+    }
+  };
+
+  return (
+    <>
+      {commentSearchData.operations_result.length ? (
+        <div>
+          <Link href={commentPageLink}>
+            <Button data-testid="go-to-result-page">Go to result page</Button>
+          </Link>
+
+          <div className="flex justify-center items-center text-black dark:text-white">
+            <CustomPagination
+              currentPage={commentPaginationPage}
+              totalCount={commentSearchData.total_operations}
+              pageSize={config.standardPaginationSize}
+              onPageChange={changeCommentSearchPagination}
+            />
+          </div>
+          <div className="flex justify-end items-center mb-4">
+            <JumpToPage
+              currentPage={commentPaginationPage}
+              onPageChange={changeCommentSearchPagination}
+            />
+          </div>
+
+          <OperationsTable
+            operations={formattedOperations}
+            unformattedOperations={unformattedOperations}
+          />
+        </div>
+      ) : (
+        <div className="flex justify-center w-full text-black dark:text-white">
+          No operations matching given criteria
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CommentSearchResults;