activate GrowiNavbarBottom

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

@@ -1,40 +1,43 @@
 import React, {
   FC, useState, useCallback, useRef,
 } from 'react';
-import { useTranslation } from 'next-i18next';
+
 import assert from 'assert';
 
-import AppContainer from '~/client/services/AppContainer';
+import { useTranslation } from 'next-i18next';
+
 import { IFocusable } from '~/client/interfaces/focusable';
-import { useGlobalSearchFormRef } from '~/stores/ui';
-import { IPageSearchMeta } from '~/interfaces/search';
 import { IPageWithMeta } from '~/interfaces/page';
-
-import { withUnstatedContainers } from '../UnstatedUtils';
+import { IPageSearchMeta } from '~/interfaces/search';
+import {
+  useCurrentPagePath, useIsSearchScopeChildrenAsDefault, useIsSearchServiceReachable,
+} from '~/stores/context';
+import { useGlobalSearchFormRef } from '~/stores/ui';
 
 import SearchForm from '../SearchForm';
-import { useCurrentPagePath } from '~/stores/context';
 
 
 type Props = {
-  appContainer: AppContainer,
-
   dropup?: boolean,
 }
 
-const GlobalSearch: FC<Props> = (props: Props) => {
-  const { appContainer, dropup } = props;
+export const GlobalSearch = (props: Props): JSX.Element => {
   const { t } = useTranslation();
 
+  const { dropup } = props;
+
   const globalSearchFormRef = useRef<IFocusable>(null);
 
   useGlobalSearchFormRef(globalSearchFormRef);
 
+  const { data: isSearchServiceReachable } = useIsSearchServiceReachable();
+  const { data: isSearchScopeChildrenAsDefault } = useIsSearchScopeChildrenAsDefault();
+  const { data: currentPagePath } = useCurrentPagePath();
+
   const [text, setText] = useState('');
-  const [isScopeChildren, setScopeChildren] = useState<boolean>(appContainer.getConfig().isSearchScopeChildrenAsDefault);
+  const [isScopeChildren, setScopeChildren] = useState<boolean|undefined>(isSearchScopeChildrenAsDefault);
   const [isFocused, setFocused] = useState<boolean>(false);
 
-  const { data: currentPagePath } = useCurrentPagePath();
 
   const gotoPage = useCallback((data: IPageWithMeta<IPageSearchMeta>[]) => {
     assert(data.length > 0);
@@ -65,10 +68,12 @@ const GlobalSearch: FC<Props> = (props: Props) => {
     ? t('header_search_box.label.This tree')
     : t('header_search_box.label.All pages');
 
-  const isSearchServiceReachable = appContainer.getConfig().isSearchServiceReachable;
-
   const isIndicatorShown = !isFocused && (text.length === 0);
 
+  if (isScopeChildren == null || isSearchServiceReachable == null) {
+    return <></>;
+  }
+
   return (
     <div className={`form-group mb-0 d-print-none ${isSearchServiceReachable ? '' : 'has-error'}`}>
       <div className="input-group flex-nowrap">
@@ -118,10 +123,3 @@ const GlobalSearch: FC<Props> = (props: Props) => {
     </div>
   );
 };
-
-/**
- * Wrapper component for using unstated
- */
-const GlobalSearchWrapper = withUnstatedContainers(GlobalSearch, [AppContainer]);
-
-export default GlobalSearchWrapper;

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

@@ -0,0 +1,14 @@
+@use '~/styles/variables' as var;
+@use '~/styles/mixins';
+
+.grw-navbar-bottom {
+  height: var.$grw-navbar-bottom-height;
+
+  // apply transition
+  transition-property: bottom;
+  @include mixins.apply-navigation-transition();
+
+  &.grw-navbar-bottom-drawer-opened {
+    bottom: #{-1 * var.$grw-navbar-bottom-height};
+  }
+}

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

@@ -4,9 +4,12 @@ import { useCurrentPagePath, useIsSearchPage } from '~/stores/context';
 import { usePageCreateModal } from '~/stores/modal';
 import { useIsDeviceSmallerThanMd, useDrawerOpened } from '~/stores/ui';
 
-import GlobalSearch from './GlobalSearch';
+import { GlobalSearch } from './GlobalSearch';
 
-export const GrowiNavbarBottom = (props) => {
+import './GrowiNavbarBottom.scss';
+
+
+export const GrowiNavbarBottom = (): JSX.Element => {
 
   const { data: isDrawerOpened, mutate: mutateDrawerOpened } = useDrawerOpened();
   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();

packages/app/src/pages/[[...path]].page.tsx

@@ -39,7 +39,7 @@ import {
   useIsForbidden, useIsNotFound, useIsTrashPage, useShared, useShareLinkId, useIsSharedUser, useIsAbleToDeleteCompletely,
   useAppTitle, useSiteUrl, useConfidential, useIsEnabledStaleNotification,
   useIsSearchServiceConfigured, useIsSearchServiceReachable, useIsMailerSetup,
-  useAclEnabled, useHasSlackConfig, useDrawioUri, useHackmdUri, useMathJax, useNoCdn, useEditorConfig, useCsrfToken,
+  useAclEnabled, useHasSlackConfig, useDrawioUri, useHackmdUri, useMathJax, useNoCdn, useEditorConfig, useCsrfToken, useIsSearchScopeChildrenAsDefault,
 } from '../stores/context';
 
 import { CommonProps, getServerSideCommonProps, useCustomTitle } from './commons';
@@ -64,6 +64,7 @@ type Props = CommonProps & {
   // isAbleToDeleteCompletely: boolean,
   isSearchServiceConfigured: boolean,
   isSearchServiceReachable: boolean,
+  isSearchScopeChildrenAsDefault: boolean,
   // isMailerSetup: boolean,
   // isAclEnabled: boolean,
   // hasSlackConfig: boolean,
@@ -109,6 +110,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
 
   useIsSearchServiceConfigured(props.isSearchServiceConfigured);
   useIsSearchServiceReachable(props.isSearchServiceReachable);
+  useIsSearchScopeChildrenAsDefault(props.isSearchScopeChildrenAsDefault);
   // useIsMailerSetup(props.isMailerSetup);
   // useAclEnabled(props.isAclEnabled);
   // useHasSlackConfig(props.hasSlackConfig);
@@ -285,6 +287,7 @@ export const getServerSideProps: GetServerSideProps = async(context: GetServerSi
 
   props.isSearchServiceConfigured = searchService.isConfigured;
   props.isSearchServiceReachable = searchService.isReachable;
+  props.isSearchScopeChildrenAsDefault = configManager.getConfig('crowi', 'customize:isSearchScopeChildrenAsDefault');
   // props.isMailerSetup = mailService.isMailerSetup;
   // props.isAclEnabled = aclService.isAclEnabled();
   // props.hasSlackConfig = slackNotificationService.hasSlackConfig();

packages/app/src/stores/context.tsx

@@ -160,6 +160,10 @@ export const useIsSearchServiceReachable = (initialData?: boolean) : SWRResponse
   return useStaticSWR<boolean, Error>('isSearchServiceReachable', initialData);
 };
 
+export const useIsSearchScopeChildrenAsDefault = (initialData?: boolean) : SWRResponse<boolean, Error> => {
+  return useStaticSWR<boolean, Error>('isSearchScopeChildrenAsDefault', initialData);
+};
+
 export const useIsEnabledAttachTitleHeader = (initialData?: boolean) : SWRResponse<boolean, Error> => {
   return useStaticSWR<boolean, Error>('isEnabledAttachTitleHeader', initialData);
 };

packages/app/src/styles/_navbar.scss

@@ -1,15 +1,3 @@
-.grw-navbar-bottom {
-  height: $grw-navbar-bottom-height;
-
-  // apply transition
-  transition-property: bottom;
-  @include apply-navigation-transition();
-
-  &.grw-navbar-bottom-drawer-opened {
-    bottom: -$grw-navbar-bottom-height;
-  }
-}
-
 .grw-custom-nav-tab,
 .grw-custom-nav-dropdown {
   svg {