84092 added isSearchPage context

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

@@ -6,7 +6,7 @@ import {
   useIsDeletable, useIsDeleted, useIsNotCreatable, useIsPageExist, useIsTrashPage, useIsUserPage, useLastUpdateUsername,
   useCurrentPageId, usePageIdOnHackmd, usePageUser, useCurrentPagePath, useRevisionCreatedAt, useRevisionId, useRevisionIdHackmdSynced,
   useShareLinkId, useShareLinksNumber, useTemplateTagData, useUpdatedAt, useCreator, useRevisionAuthor, useCurrentUser, useTargetAndAncestors,
-  useSlackChannels, useNotFoundTargetPathOrId,
+  useSlackChannels, useNotFoundTargetPathOrId, useIsSearchPage,
 } from '../../stores/context';
 import {
   useIsDeviceSmallerThanMd,
@@ -65,6 +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;
 
   /*
    * use static swr
@@ -108,6 +109,7 @@ const ContextExtractorOnce: FC = () => {
   useRevisionAuthor(revisionAuthor);
   useTargetAndAncestors(targetAndAncestors);
   useNotFoundTargetPathOrId(notFoundTargetPathOrId);
+  useIsSearchPage(isSearchPage);
 
   // Navigation
   usePreferDrawerModeByUser();

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

@@ -14,6 +14,7 @@ import GrowiLogo from '../Icons/GrowiLogo';
 
 import PersonalDropdown from './PersonalDropdown';
 import GlobalSearch from './GlobalSearch';
+import { useIsSearchPage } from '~/stores/context';
 
 type NavbarRightProps = {
   currentUser: IUser,
@@ -79,14 +80,12 @@ const Confidential: FC<ConfidentialProps> = memo((props: ConfidentialProps) => {
 
 const GrowiNavbar = (props) => {
 
-  const { appContainer } = props;
+  const { appContainer, hideSearchInput } = props;
   const { currentUser } = appContainer;
   const { crowi, isSearchServiceConfigured } = appContainer.config;
 
   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
 
-  const isNotSearchPage = document.getElementById('search-page') == null;
-
   return (
     <>
       {/* Brand Logo  */}
@@ -107,7 +106,7 @@ const GrowiNavbar = (props) => {
         <Confidential confidential={crowi.confidential}></Confidential>
       </ul>
 
-      { isSearchServiceConfigured && !isDeviceSmallerThanMd && isNotSearchPage && (
+      { isSearchServiceConfigured && !isDeviceSmallerThanMd && !hideSearchInput && (
         <div className="grw-global-search grw-global-search-top position-absolute">
           <GlobalSearch />
         </div>
@@ -120,11 +119,19 @@ const GrowiNavbar = (props) => {
 /**
  * Wrapper component for using unstated
  */
-const GrowiNavbarWrapper = withUnstatedContainers(GrowiNavbar, [AppContainer]);
-
+const GrowiNavbarUnstatedWrapper = 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

@@ -1,12 +1,14 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
 
 import { useCreateModalStatus, useIsDeviceSmallerThanMd, useDrawerOpened } from '~/stores/ui';
-import { useCurrentPagePath } from '~/stores/context';
+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();
@@ -17,8 +19,6 @@ const GrowiNavbarBottom = (props) => {
     additionalClasses.push('grw-navbar-bottom-drawer-opened');
   }
 
-  const isNotSearchPage = document.getElementById('search-page') == null;
-
   return (
     <div className="d-md-none d-edit-none fixed-bottom">
 
@@ -43,17 +43,19 @@ const GrowiNavbarBottom = (props) => {
             </a>
           </li>
           <li className="nav-item mx-auto">
-            {isNotSearchPage
-            && (
-              <a
-                role="button"
-                className="nav-link btn-lg"
-                data-target="#grw-global-search-collapse"
-                data-toggle="collapse"
-              >
-                <i className="icon-magnifier"></i>
-              </a>
-            )}
+            {
+              !hideSearchInput && (
+                <a
+                  role="button"
+                  className="nav-link btn-lg"
+                  data-target="#grw-global-search-collapse"
+                  data-toggle="collapse"
+                >
+                  <i className="icon-magnifier"></i>
+                </a>
+
+              )
+            }
           </li>
           <li className="nav-item">
             <a
@@ -70,6 +72,13 @@ const GrowiNavbarBottom = (props) => {
     </div>
   );
 };
+GrowiNavbarBottom.propTypes = {
+  hideSearchInput: PropTypes.bool.isRequired,
+};
 
+const GrowiNavbarBottomWrapper = () => {
+  const { data: isSeachPage } = useIsSearchPage();
+  return <GrowiNavbarBottom hideSearchInput={isSeachPage}></GrowiNavbarBottom>;
+};
 
-export default GrowiNavbarBottom;
+export default GrowiNavbarBottomWrapper;

packages/app/src/stores/context.tsx

@@ -124,6 +124,9 @@ export const useSlackChannels = (initialData?: Nullable<any>): SWRResponse<Nulla
   return useStaticSWR<Nullable<any>, Error>('slackChannels', initialData ?? null);
 };
 
+export const useIsSearchPage = (initialData?: Nullable<any>) : SWRResponse<Nullable<any>, Error> => {
+  return useStaticSWR<Nullable<any>, Error>('isSearchPage', initialData ?? null);
+};
 /** **********************************************************
  *                     Computed contexts
  *********************************************************** */