Update comments page

pages/comments/[[...accountName]].tsx

-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 
-import { config } from "@/Config";
-import Hive from "@/types/Hive";
-import Explorer from "@/types/Explorer";
-import { formatAccountName } from "@/utils/StringUtils";
+import CommentsSearch from "@/components/home/searches/CommentsSearch";
+import { Card, CardContent } from "@/components/ui/card";
+import CommentSearchResults from "@/components/home/searches/searchesResults/CommentSearchResults";
+import { useRouter } from "next/router";
+import { useSearchesContext } from "@/contexts/SearchesContext";
+import { trimAccountName } from "@/utils/StringUtils";
 import {
   convertBooleanArrayToIds,
-  convertCommentsOperationResultToTableOperations,
+  parseUrlFlagsIntoBooleanArray,
 } from "@/lib/utils";
-import useCommentSearch from "@/hooks/api/common/useCommentSearch";
-import useOperationsFormatter from "@/hooks/common/useOperationsFormatter";
-import useURLParams from "@/hooks/common/useURLParams";
-import CustomPagination from "@/components/CustomPagination";
-import JumpToPage from "@/components/JumpToPage";
-import CommentsSearch from "@/components/home/searches/CommentsSearch";
-import OperationsTable from "@/components/OperationsTable";
-import { Card, CardContent } from "@/components/ui/card";
-
-const defaultSearchParams: Explorer.CommentSearchParams = {
-  accountName: "",
-  permlink: "",
-  fromBlock: undefined,
-  toBlock: undefined,
-  startDate: undefined,
-  endDate: undefined,
-  lastBlocks: undefined,
-  lastTime: undefined,
-  timeUnit: "days",
-  rangeSelectKey: "none",
-  page: 1,
-  filters: undefined,
-};
+import Explorer from "@/types/Explorer";
+import { ParsedUrlQuery } from "querystring";
 
 const Comments: React.FC = () => {
-  const [initialSearch, setInitialSearch] = useState(false);
-  const [commentSearchProps, setCommentSearchProps] = useState<
-    Explorer.CommentSearchProps | undefined
-  >(undefined);
-  const [previousCommentSearchProps, setPreviousCommentSearchProps] = useState<
-    Explorer.CommentSearchProps | undefined
-  >(undefined);
+  const router = useRouter();
 
-  const commentSearch = useCommentSearch(formatSearchProps(commentSearchProps));
-  const { paramsState, setParams } = useURLParams(defaultSearchParams, [
-    "accountName",
-    "permlink",
-  ]);
+  const {
+    commentSearchProps,
 
-  const formattedOperations = useOperationsFormatter(
-    commentSearch?.commentSearchData
-  ) as Hive.CommentOperationResponse;
+    setCommentSearchProps,
+  } = useSearchesContext();
 
-  const startCommentSearch = async (props: Explorer.CommentSearchParams) => {
+  const setCommentSearchPropsFromUrl = async (props: ParsedUrlQuery) => {
     if (!!props.accountName) {
       const searchProps = {
-        ...(props as Explorer.CommentSearchProps),
+        ...props,
         operationTypes: props.filters
-          ? convertBooleanArrayToIds(props.filters)
+          ? convertBooleanArrayToIds(
+              parseUrlFlagsIntoBooleanArray(props.filters as string)
+            )
           : undefined,
+        accountName: trimAccountName(router.query.accountName?.[0] as string),
+        permlink: router.query.permlink as string,
       };
       setCommentSearchProps(searchProps);
-      setPreviousCommentSearchProps(searchProps);
-      setParams({ ...paramsState, ...props });
-      setInitialSearch(true);
-    }
-  };
-
-  function formatSearchProps(props?: Explorer.CommentSearchProps) {
-    if (props) {
-      if (Array.isArray(props.accountName)) {
-        props.accountName = formatAccountName(props.accountName[0]);
-      } else {
-        props.accountName = formatAccountName(props.accountName);
-      }
-    }
-    return props;
-  }
-
-  const changeCommentSearchPagination = (newPageNum: number) => {
-    if (previousCommentSearchProps?.accountName) {
-      const newSearchProps: Explorer.CommentSearchProps = {
-        ...previousCommentSearchProps,
-        pageNumber: newPageNum,
-      };
-      setCommentSearchProps(newSearchProps);
-      setParams({ ...paramsState, page: newPageNum });
     }
   };
 
   useEffect(() => {
-    if (paramsState && !initialSearch) {
-      startCommentSearch(paramsState);
+    if (!commentSearchProps) {
+      setCommentSearchPropsFromUrl(router.query);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [paramsState]);
+  }, [router.query]);
 
   return (
     <div
@@ -105,39 +54,7 @@ const Comments: React.FC = () => {
           <CommentsSearch />
         </CardContent>
       </Card>
-      {commentSearch.commentSearchData && (
-        <>
-          <div className="w-full flex justify-center items-center mt-4 mb-2">
-            <CustomPagination
-              currentPage={paramsState.page}
-              totalCount={commentSearch.commentSearchData?.total_operations}
-              pageSize={config.standardPaginationSize}
-              onPageChange={changeCommentSearchPagination}
-            />
-            <div className="justify-self-end">
-              <JumpToPage
-                currentPage={paramsState.page}
-                onPageChange={changeCommentSearchPagination}
-              />
-            </div>
-          </div>
-          {formattedOperations?.operations_result ? (
-            <OperationsTable
-              operations={convertCommentsOperationResultToTableOperations(
-                formattedOperations?.operations_result
-              )}
-              unformattedOperations={convertCommentsOperationResultToTableOperations(
-                commentSearch.commentSearchData.operations_result
-              )}
-              className="text-white"
-            />
-          ) : (
-            <div className="flex justify-center w-full text-black">
-              No operations matching given criteria
-            </div>
-          )}
-        </>
-      )}
+      <CommentSearchResults />
     </div>
   );
 };

types/Explorer.ts

@@ -96,7 +96,7 @@ declare module Explorer {
     pageSize?: number;
     direction?: "asc" | "desc";
     dataSizeLimit?: number;
-    rangeSelectKey: string | undefined;
+    rangeSelectKey?: string | undefined;
     lastTimeUnitValue?: Date | string;
     lastBlocksValue?: string | number;
     timeUnitSelectKey?: number | string;