implement using api

src/client/js/components/Admin/Customize/Customize.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 
 import loggerFactory from '@alias/logger';
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
+import AppContainer from '../../../services/AppContainer';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastError } from '../../../util/apiNotification';
@@ -18,7 +19,6 @@ import CustomizeCssSetting from './CustomizeCssSetting';
 import CustomizeScriptSetting from './CustomizeScriptSetting';
 import CustomizeHeaderSetting from './CustomizeHeaderSetting';
 import CustomizeTitle from './CustomizeTitle';
-import AppContainer from '../../../services/AppContainer';
 
 const logger = loggerFactory('growi:services:AdminCustomizePage');
 

src/client/js/components/Admin/Customize/CustomizeLayoutSetting.jsx

@@ -2,23 +2,34 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
+import AppContainer from '../../../services/AppContainer';
+
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 const CustomizeLayoutSetting = (props) => {
-  const { t } = props;
+  const { t, appContainer } = props;
 
   const [isContainerFluid, setIsContainerFluid] = useState(false);
 
   useEffect(() => {
-    const fetchData = () => {
-      // TODO implement
-      console.log('fetchData');
+    const fetchData = async() => {
+      const res = await appContainer.apiv3Get('/customize-setting/layout');
+      setIsContainerFluid(res.data.isContainerFluid);
     };
     fetchData();
   }, []);
 
-  const onClickSubmit = () => {};
-  console.log(isContainerFluid);
+  const onClickSubmit = async() => {
+    try {
+      await appContainer.apiv3Put('/customize-setting/layout', { isContainerFluid });
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.layout') }));
+    }
+    catch (err) {
+      toastError(err);
+    }
+  };
+
   return (
     <React.Fragment>
       <div className="row">
@@ -27,13 +38,13 @@ const CustomizeLayoutSetting = (props) => {
 
           <div className="d-flex justify-content-around mt-5">
             <div className="card-deck">
-              <div className="card" onClick={() => setIsContainerFluid(true)} role="button">
+              <div className={`card ${isContainerFluid ? 'border border-info' : ''}`} onClick={() => setIsContainerFluid(true)} role="button">
                 <img src="https://via.placeholder.com/350x150" />
                 <div className="card-body text-center">
                   {t('admin:customize_setting.layout_options.default')}
                 </div>
               </div>
-              <div className="card" onClick={() => setIsContainerFluid(false)} role="button">
+              <div className={`card ${!isContainerFluid ? 'border border-info' : ''}`} onClick={() => setIsContainerFluid(false)} role="button">
                 <img src="https://via.placeholder.com/350x150" />
                 <div className="card-body  text-center">
                   {t('admin:customize_setting.layout_options.expanded')}
@@ -51,6 +62,8 @@ const CustomizeLayoutSetting = (props) => {
 
 CustomizeLayoutSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next
+
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 };
 
 export default withTranslation()(CustomizeLayoutSetting);