inject IsMaintenanceMode bool

packages/app/src/components/Admin/App/AppSettingsPageContents.tsx

@@ -7,7 +7,6 @@ import { toastError } from '~/client/util/apiNotification';
 import { toArrayIfNot } from '~/utils/array-utils';
 import loggerFactory from '~/utils/logger';
 
-
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import AppSetting from './AppSetting';
@@ -18,6 +17,8 @@ import PluginSetting from './PluginSetting';
 import SiteUrlSetting from './SiteUrlSetting';
 import V5PageMigration from './V5PageMigration';
 
+import { useIsMaintenanceMode } from '~/stores/context';
+
 const logger = loggerFactory('growi:appSettings');
 
 type Props = {
@@ -27,6 +28,9 @@ type Props = {
 const AppSettingsPageContents = (props: Props) => {
   const { t } = useTranslation('admin');
   const { adminAppContainer } = props;
+
+  const { data: isMaintenanceModeData } = useIsMaintenanceMode();
+
   const { isV5Compatible } = adminAppContainer.state;
 
   useEffect(() => {
@@ -48,7 +52,7 @@ const AppSettingsPageContents = (props: Props) => {
     <div data-testid="admin-app-settings">
       {
         // Alert message will be displayed in case that the GROWI is under maintenance
-        adminAppContainer.state.isMaintenanceMode && (
+        isMaintenanceModeData && (
           <div className="alert alert-danger alert-link" role="alert">
             <h3 className="alert-heading">
               {t('admin:maintenance_mode.maintenance_mode')}

packages/app/src/components/Admin/App/MaintenanceMode.tsx

@@ -9,6 +9,10 @@ import { toastSuccess, toastError } from '~/client/util/apiNotification';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 
+import { apiv3Post } from '~/client/util/apiv3-client';
+
+import { useIsMaintenanceMode } from '~/stores/context';
+
 const logger = loggerFactory('growi:maintenanceMode');
 
 type Props = {
@@ -19,10 +23,22 @@ const MaintenanceMode: FC<Props> = (props: Props) => {
   const { t } = useTranslation();
   const { adminAppContainer } = props;
 
+  const { data: isMaintenanceMode, mutate: mutateIsMaintenanceMode } = useIsMaintenanceMode();
+
   const [isModalOpen, setModalOpen] = useState<boolean>(false);
-  const [isMaintenanceMode, setMaintenanceMode] = useState<boolean | undefined>(adminAppContainer.state.isMaintenanceMode);
+
+  const startMaintenanceMode = async() => {
+    await apiv3Post('/app-settings/maintenance-mode', { flag: true });
+    return;
+  }
+
+  const endMaintenanceMode = async() => {
+    await apiv3Post('/app-settings/maintenance-mode', { flag: false });
+    return;
+  }
 
   const openModal = () => { setModalOpen(true) };
+
   const closeModal = () => { setModalOpen(false) };
 
   const onConfirmHandler = useCallback(async() => {
@@ -30,12 +46,12 @@ const MaintenanceMode: FC<Props> = (props: Props) => {
 
     try {
       if (isMaintenanceMode) {
-        await adminAppContainer.endMaintenanceMode();
-        setMaintenanceMode(false);
+        await endMaintenanceMode();
+        mutateIsMaintenanceMode(false);
       }
       else {
-        await adminAppContainer.startMaintenanceMode();
-        setMaintenanceMode(true);
+        await startMaintenanceMode();
+        mutateIsMaintenanceMode(true);
       }
     }
     catch (err) {

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

@@ -34,7 +34,7 @@ import PluginUtils from '~/server/plugins/plugin-utils';
 import ConfigLoader from '~/server/service/config-loader';
 import {
   useCurrentUser, /* useSearchServiceConfigured, */ useIsAclEnabled, useIsMailerSetup, useIsSearchServiceReachable, useSiteUrl,
-  useAuditLogEnabled, useAuditLogAvailableActions,
+  useAuditLogEnabled, useAuditLogAvailableActions, useIsMaintenanceMode
 } from '~/stores/context';
 
 import {
@@ -68,6 +68,7 @@ const pluginUtils = new PluginUtils();
 type Props = CommonProps & {
   currentUser: any,
 
+  isMaintenanceMode: boolean,
   nodeVersion: string,
   npmVersion: string,
   yarnVersion: string,
@@ -189,6 +190,7 @@ const AdminMarkdownSettingsPage: NextPage<Props> = (props: Props) => {
 
   useCurrentUser(props.currentUser != null ? JSON.parse(props.currentUser) : null);
   useIsMailerSetup(props.isMailerSetup);
+  useIsMaintenanceMode(props.isMaintenanceMode);
 
   // useSearchServiceConfigured(props.isSearchServiceConfigured);
   useIsSearchServiceReachable(props.isSearchServiceReachable);
@@ -279,6 +281,7 @@ async function injectServerConfigurations(context: GetServerSidePropsContext, pr
   } = crowi;
 
   props.siteUrl = appService.getSiteUrl();
+  props.isMaintenanceMode = crowi.appService.isMaintenanceMode();
   props.nodeVersion = crowi.runtimeVersions.versions.node ? crowi.runtimeVersions.versions.node.version.version : null;
   props.npmVersion = crowi.runtimeVersions.versions.npm ? crowi.runtimeVersions.versions.npm.version.version : null;
   props.yarnVersion = crowi.runtimeVersions.versions.yarn ? crowi.runtimeVersions.versions.yarn.version.version : null;