Add post type selector to comment permlink search

components/home/searches/CommentPermlinkSearch.tsx

-import { useState } from "react";
+import { useState, ChangeEvent } from "react";
 import { Loader2 } from "lucide-react";
 import Explorer from "@/types/Explorer";
 import { trimAccountName } from "@/utils/StringUtils";
@@ -9,6 +9,7 @@ import AutocompleteInput from "@/components/ui/AutoCompleteInput";
 import { useSearchesContext } from "@/contexts/SearchesContext";
 import usePermlinkSearch from "@/hooks/api/common/usePermlinkSearch";
 import { startCommentPermlinkSearch } from "./utils/commentPermlinkSearchHelpers";
+import PostTypeSelector from "./PostTypeSelector";
 
 const CommentsPermlinkSearch = () => {
   const {
@@ -16,7 +17,6 @@ const CommentsPermlinkSearch = () => {
     setPermlinkSearchProps,
     setCommentPaginationPage,
     setCommentType,
-    commentType,
     setLastSearchKey,
     searchRanges,
   } = useSearchesContext();
@@ -24,6 +24,8 @@ const CommentsPermlinkSearch = () => {
   const { permlinkSearchDataLoading } = usePermlinkSearch(permlinkSearchProps);
 
   const [accountName, setAccountName] = useState<string>("");
+  const [localCommentType, setLocalCommentType] =
+    useState<Explorer.CommentType>("post");
 
   const { getRangesValues } = searchRanges;
 
@@ -49,8 +51,9 @@ const CommentsPermlinkSearch = () => {
         lastTime: searchRanges.lastTimeUnitValue,
         rangeSelectKey: searchRanges.rangeSelectKey,
         timeUnit: searchRanges.timeUnitSelectKey,
-        commentType,
+        commentType: localCommentType,
       };
+
       startCommentPermlinkSearch(
         commentPermlinksSearchProps,
         setPermlinkSearchProps,
@@ -61,6 +64,14 @@ const CommentsPermlinkSearch = () => {
     }
   };
 
+  const handleChangeCommentType = (e: ChangeEvent<HTMLSelectElement>) => {
+    const {
+      target: { value },
+    } = e;
+
+    setLocalCommentType(value as Explorer.CommentType);
+  };
+
   return (
     <>
       <p className="ml-2">Find comments permlinks by account name</p>
@@ -78,6 +89,14 @@ const CommentsPermlinkSearch = () => {
         rangesProps={searchRanges}
         safeTimeRangeDisplay
       />
+
+      <div className="flex justify-start">
+        <PostTypeSelector
+          showLabel
+          handleChange={handleChangeCommentType}
+          commentType={localCommentType}
+        />
+      </div>
       <div className="flex items-center">
         <Button
           data-testid="search-button"

components/home/searches/searchesResults/CommentPermlinkSearchResults.tsx

@@ -2,8 +2,7 @@ import usePermlinkSearch from "@/hooks/api/common/usePermlinkSearch";
 import CommentPermlinkResultTable from "../CommentPermlinkResultTable";
 import { useSearchesContext } from "@/contexts/SearchesContext";
 import { getCommentPageLink } from "../utils/commentSearchHelpers";
-
-const COMMENT_TYPES = ["all", "post", "comment"];
+import PostTypeSelector from "../PostTypeSelector";
 
 const CommentPermlinkSearchResults = () => {
   const {
@@ -48,20 +47,10 @@ const CommentPermlinkSearchResults = () => {
       {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>
+            <PostTypeSelector
+              handleChange={handleChangeCommentType}
+              commentType={commentType}
+            />
           </div>
 
           <div className="flex flex-wrap">

components/home/searches/utils/commentPermlinkSearchHelpers.ts

@@ -14,6 +14,6 @@ export function startCommentPermlinkSearch(
   };
   setPermlinkSearchProps(props);
   setCommentPaginationPage(1);
-  setCommentType("post");
+  setCommentType(params.commentType);
   setLastSearchKey("comment-permlink");
 }