Display currentPagePath

apps/app/src/features/search/client/components/SearchButtons.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { useTranslation } from 'next-i18next';
 
+import { useCurrentPagePath } from '~/stores/page';
 
 type SearchButtonProps = {
   children: React.ReactNode
@@ -21,20 +22,23 @@ const SearchButton = (props: SearchButtonProps): JSX.Element => {
 
 
 type SearchButtonsProps = {
-  searchText: string
+  searchKeyword: string
 }
 export const SearchButtons = (props: SearchButtonsProps): JSX.Element => {
   const { t } = useTranslation('commons');
-  const { searchText } = props;
 
-  const shouldShowButton = searchText.length > 0;
+  const { searchKeyword } = props;
+
+  const { data: currentPagePath } = useCurrentPagePath();
+
+  const shouldShowButton = searchKeyword.length > 0;
 
   return (
     <table className="table">
       <tbody>
         { shouldShowButton && (
           <SearchButton>
-            <span>{searchText}</span>
+            <span>{searchKeyword}</span>
             <div className="ms-auto">
               <span>{t('search_buttons.search_in_all')}</span>
             </div>
@@ -42,8 +46,8 @@ export const SearchButtons = (props: SearchButtonsProps): JSX.Element => {
         )}
 
         <SearchButton>
-          <code>~pagehoge/</code>
-          <span className="ms-2">{searchText}</span>
+          <code>{currentPagePath}</code>
+          <span className="ms-2">{searchKeyword}</span>
           <div className="ms-auto">
             <span>{t('search_buttons.only_children_of_this_tree')}</span>
           </div>
@@ -52,7 +56,7 @@ export const SearchButtons = (props: SearchButtonsProps): JSX.Element => {
 
         { shouldShowButton && (
           <SearchButton>
-            <span>{`"${searchText}"`}</span>
+            <span>{`"${searchKeyword}"`}</span>
             <div className="ms-auto">
               <span>{t('search_buttons.exact_mutch')}</span>
             </div>

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -38,7 +38,7 @@ const SearchModal = (): JSX.Element => {
           onClickClearButton={clickClearButtonHandler}
         />
         <div className="border-top mt-3 mb-3" />
-        <SearchButtons searchText={searchText} />
+        <SearchButtons searchKeyword={searchKeyword} />
         <div className="border-top mt-2 mb-2" />
         <SearchHelp />
       </ModalBody>