84092 fb

packages/app/src/client/services/ContextExtractor.tsx

@@ -65,7 +65,7 @@ const ContextExtractorOnce: FC = () => {
   const targetAndAncestors = JSON.parse(document.getElementById('growi-pagetree-target-and-ancestors')?.textContent || jsonNull);
   const notFoundTargetPathOrId = JSON.parse(notFoundContent?.getAttribute('data-not-found-target-path-or-id') || jsonNull);
   const slackChannels = mainContent?.getAttribute('data-slack-channels') || '';
-  const isSearchPage = document.getElementById('search-page') || null;
+  const isSearchPage = document.getElementById('search-page') != null;
 
   /*
    * use static swr

packages/app/src/components/Navbar/GrowiNavbar.tsx

@@ -8,13 +8,13 @@ import { UncontrolledTooltip } from 'reactstrap';
 import AppContainer from '~/client/services/AppContainer';
 import { IUser } from '~/interfaces/user';
 import { useIsDeviceSmallerThanMd, useCreateModalStatus } from '~/stores/ui';
+import { useIsSearchPage } from '~/stores/context';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
 import GrowiLogo from '../Icons/GrowiLogo';
 
 import PersonalDropdown from './PersonalDropdown';
 import GlobalSearch from './GlobalSearch';
-import { useIsSearchPage } from '~/stores/context';
 
 type NavbarRightProps = {
   currentUser: IUser,
@@ -80,11 +80,12 @@ const Confidential: FC<ConfidentialProps> = memo((props: ConfidentialProps) => {
 
 const GrowiNavbar = (props) => {
 
-  const { appContainer, hideSearchInput } = props;
+  const { appContainer } = props;
   const { currentUser } = appContainer;
   const { crowi, isSearchServiceConfigured } = appContainer.config;
 
   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
+  const { data: isSearchPage } = useIsSearchPage();
 
   return (
     <>
@@ -106,7 +107,7 @@ const GrowiNavbar = (props) => {
         <Confidential confidential={crowi.confidential}></Confidential>
       </ul>
 
-      { isSearchServiceConfigured && !isDeviceSmallerThanMd && !hideSearchInput && (
+      { isSearchServiceConfigured && !isDeviceSmallerThanMd && !isSearchPage && (
         <div className="grw-global-search grw-global-search-top position-absolute">
           <GlobalSearch />
         </div>
@@ -119,19 +120,10 @@ const GrowiNavbar = (props) => {
 /**
  * Wrapper component for using unstated
  */
-const GrowiNavbarUnstatedWrapper = withUnstatedContainers(GrowiNavbar, [AppContainer]);
+const GrowiNavbarWrapper = withUnstatedContainers(GrowiNavbar, [AppContainer]);
 
 GrowiNavbar.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  hideSearchInput: PropTypes.bool.isRequired,
 };
 
-const UnstatedWrapperWithProps = (props) => {
-  return <GrowiNavbarUnstatedWrapper {...props}></GrowiNavbarUnstatedWrapper>;
-};
-
-const GrowiNavbarWrapper = () => {
-  const { data: isSearchPage } = useIsSearchPage();
-  return <UnstatedWrapperWithProps hideSearchInput={isSearchPage}></UnstatedWrapperWithProps>;
-};
 export default GrowiNavbarWrapper;

packages/app/src/components/Navbar/GrowiNavbarBottom.jsx

@@ -8,11 +8,11 @@ import { useCurrentPagePath, useIsSearchPage } from '~/stores/context';
 import GlobalSearch from './GlobalSearch';
 
 const GrowiNavbarBottom = (props) => {
-  const { hideSearchInput } = props;
   const { data: isDrawerOpened, mutate: mutateDrawerOpened } = useDrawerOpened();
   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
   const { open: openCreateModal } = useCreateModalStatus();
   const { data: currentPagePath } = useCurrentPagePath();
+  const { data: isSearchPage } = useIsSearchPage();
 
   const additionalClasses = ['grw-navbar-bottom'];
   if (isDrawerOpened) {
@@ -22,7 +22,7 @@ const GrowiNavbarBottom = (props) => {
   return (
     <div className="d-md-none d-edit-none fixed-bottom">
 
-      { isDeviceSmallerThanMd && (
+      { isDeviceSmallerThanMd && !isSearchPage && (
         <div id="grw-global-search-collapse" className="grw-global-search collapse bg-dark">
           <div className="p-3">
             <GlobalSearch dropup />
@@ -33,7 +33,7 @@ const GrowiNavbarBottom = (props) => {
       <div className={`navbar navbar-expand navbar-dark bg-primary px-0 ${additionalClasses.join(' ')}`}>
 
         <ul className="navbar-nav w-100">
-          <li className="nav-item">
+          <li className="nav-item mr-auto">
             <a
               role="button"
               className="nav-link btn-lg"
@@ -42,9 +42,9 @@ const GrowiNavbarBottom = (props) => {
               <i className="icon-menu"></i>
             </a>
           </li>
-          <li className="nav-item mx-auto">
-            {
-              !hideSearchInput && (
+          {
+            !isSearchPage && (
+              <li className="nav-item">
                 <a
                   role="button"
                   className="nav-link btn-lg"
@@ -53,11 +53,10 @@ const GrowiNavbarBottom = (props) => {
                 >
                   <i className="icon-magnifier"></i>
                 </a>
-
-              )
-            }
-          </li>
-          <li className="nav-item">
+              </li>
+            )
+          }
+          <li className="nav-item ml-auto">
             <a
               role="button"
               className="nav-link btn-lg"
@@ -72,13 +71,5 @@ const GrowiNavbarBottom = (props) => {
     </div>
   );
 };
-GrowiNavbarBottom.propTypes = {
-  hideSearchInput: PropTypes.bool.isRequired,
-};
-
-const GrowiNavbarBottomWrapper = () => {
-  const { data: isSeachPage } = useIsSearchPage();
-  return <GrowiNavbarBottom hideSearchInput={isSeachPage}></GrowiNavbarBottom>;
-};
 
-export default GrowiNavbarBottomWrapper;
+export default GrowiNavbarBottom;