imprv ch admin translation

packages/app/public/static/locales/en_US/admin.json

@@ -269,7 +269,7 @@
     "toggle_notification": "Updated setting of {{path}}"
   },
   "customize": "Customize",
-  "ipmport_data": "Import Data",
+  "import_data": "Import Data",
   "export_archive_data": "Export Archive Data",
   "mailer_setup_required":"<a href='/admin/app'>Email settings</a> are required to send.",
   "admin_top": {

packages/app/public/static/locales/ja_JP/admin.json

@@ -269,7 +269,7 @@
     "toggle_notification": "{{path}}の通知設定を変更しました"
   },
   "customize": "カスタマイズ",
-  "ipmport_data": "データインポート",
+  "import_data": "データインポート",
   "export_archive_data": "データアーカイブ",
   "full_text_search_management": {
     "full_text_search_management": "全文検索管理",

packages/app/public/static/locales/zh_CN/admin.json

@@ -1,4 +1,7 @@
 {
+  "Update": "更新",
+  "Delete": "删除",
+  "User": "用户",
   "wiki_management_home_page": "Wiki管理首页",
   "app_settings": "系统设置",
   "public": "公共",
@@ -397,10 +400,9 @@
       "import_recommended": "导入建议 {{target}}"
     }
   },
-  "customize": "页面定制",
-  "import_data": "导入数据",
   "export_archive_data": "导出主题数据",
   "customize_setting": {
+    "customize_setting": "页面定制",
     "default_sidebar_mode": {
       "title": "默认的侧边栏模式",
       "desc": "你可以为新用户和访问该网页的客人设置侧边栏模式。",
@@ -479,6 +481,12 @@
     "delete_logo": "删除徽标"
   },
   "importer_management": {
+    "import_data": "导入数据",
+    "article": "主题",
+    "category": "分类",
+    "tag": "标签",
+    "page": "页面",
+    "page_path": "相对路径",
     "beta_warning": "这个函数是Beta。",
     "import_from": "Import from {{from}}",
     "import_growi_archive": "Import GROWI archive",
@@ -568,7 +576,7 @@
     "delete": "删除"
   },
   "external_notification": {
-    "external_notificatio"n: "外部通知",
+    "external_notification": "外部通知",
     "enabled": "Enabled",
     "disabled": "Disabled",
     "header_status": "Slack整合状态",

packages/app/public/static/locales/zh_CN/translation.json

@@ -27,7 +27,6 @@
   "Description": "描述",
 	"Admin": "管理",
 	"administrator": "管理员",
-	"Tag": "标签",
 	"Tags": "Tags",
   "New": "新建",
   "Close": "Close",
@@ -36,11 +35,6 @@
 	"eg": "e.g.",
 	"add": "添加",
 	"Undo": "撤销",
-	"Article": "主题",
-	"Page": "页面",
-	"Page Path": "相对路径",
-	"Category": "分类",
-	"User": "用户",
 	"status": "状态",
 	"account_id": "用户Id",
 	"Initialize": "初始化",

packages/app/src/components/Admin/Common/AdminNavigation.jsx

@@ -29,7 +29,7 @@ const AdminNavigation = (props) => {
       case 'security':                 return <><i className="icon-fw icon-shield"></i>          { t('security_settings.security_settings') }</>;
       case 'markdown':                 return <><i className="icon-fw icon-note"></i>            { t('markdown_settings.markdown_settings') }</>;
       case 'customize':                return <><i className="icon-fw icon-wrench"></i>          { t('customize') }</>;
-      case 'importer':                 return <><i className="icon-fw icon-cloud-upload"></i>    { t('ipmport_data') }</>;
+      case 'importer':                 return <><i className="icon-fw icon-cloud-upload"></i>    { t('importer_management.import_data') }</>;
       case 'export':                   return <><i className="icon-fw icon-cloud-download"></i>  { t('export_archive_data') }</>;
       case 'notification':             return <><i className="icon-fw icon-bell"></i>            { t('external_notification.external_notification')}</>;
       case 'slack-integration':        return <><i className="icon-fw icon-shuffle"></i>         { t('slack_integration.slack_integration') }</>;

packages/app/src/components/Admin/Common/AdminUpdateButtonRow.tsx

@@ -9,7 +9,7 @@ type Props = {
 }
 
 const AdminUpdateButtonRow = (props: Props): JSX.Element => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   return (
     <div className="row my-3">

packages/app/src/components/Admin/Customize/CustomizeLayoutSetting.tsx

@@ -7,7 +7,7 @@ import { apiv3Get, apiv3Put } from '~/client/util/apiv3-client';
 import { useNextThemes } from '~/stores/use-next-themes';
 
 const CustomizeLayoutSetting = (): JSX.Element => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   const { resolvedTheme } = useNextThemes();
 
@@ -32,7 +32,7 @@ const CustomizeLayoutSetting = (): JSX.Element => {
   const onClickSubmit = async() => {
     try {
       await apiv3Put('/customize-setting/layout', { isContainerFluid });
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.layout') }));
+      toastSuccess(t('toaster.update_successed', { target: t('customize_setting.layout') }));
       retrieveData();
     }
     catch (err) {
@@ -44,7 +44,7 @@ const CustomizeLayoutSetting = (): JSX.Element => {
     <React.Fragment>
       <div className="row">
         <div className="col-12">
-          <h2 className="admin-setting-header">{t('admin:customize_setting.layout')}</h2>
+          <h2 className="admin-setting-header">{t('customize_setting.layout')}</h2>
 
           <div className="d-flex justify-content-around mt-5">
             <div id="layoutOptions" className="card-deck">
@@ -55,7 +55,7 @@ const CustomizeLayoutSetting = (): JSX.Element => {
               >
                 <img src={`/images/customize-settings/default-${resolvedTheme}.svg`} />
                 <div className="card-body text-center">
-                  {t('admin:customize_setting.layout_options.default')}
+                  {t('customize_setting.layout_options.default')}
                 </div>
               </div>
               <div
@@ -65,7 +65,7 @@ const CustomizeLayoutSetting = (): JSX.Element => {
               >
                 <img src={`/images/customize-settings/fluid-${resolvedTheme}.svg`} />
                 <div className="card-body  text-center">
-                  {t('admin:customize_setting.layout_options.expanded')}
+                  {t('customize_setting.layout_options.expanded')}
                 </div>
               </div>
             </div>

packages/app/src/components/Admin/Customize/CustomizeSidebarSetting.tsx

@@ -8,7 +8,7 @@ import { useSWRxSidebarConfig } from '~/stores/ui';
 import { useNextThemes } from '~/stores/use-next-themes';
 
 const CustomizeSidebarsetting = (): JSX.Element => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
   const {
     update, isSidebarDrawerMode, isSidebarClosedAtDockMode, setIsSidebarDrawerMode, setIsSidebarClosedAtDockMode,
   } = useSWRxSidebarConfig();
@@ -20,7 +20,7 @@ const CustomizeSidebarsetting = (): JSX.Element => {
   const onClickSubmit = useCallback(async() => {
     try {
       await update();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.default_sidebar_mode.title') }));
+      toastSuccess(t('toaster.update_successed', { target: t('customize_setting.default_sidebar_mode.title') }));
     }
     catch (err) {
       toastError(err);
@@ -32,11 +32,11 @@ const CustomizeSidebarsetting = (): JSX.Element => {
       <div className="row">
         <div className="col-12">
 
-          <h2 className="admin-setting-header">{t('admin:customize_setting.default_sidebar_mode.title')}</h2>
+          <h2 className="admin-setting-header">{t('customize_setting.default_sidebar_mode.title')}</h2>
 
           <Card className="card well my-3">
             <CardBody className="px-0 py-2">
-              {t('admin:customize_setting.default_sidebar_mode.desc')}
+              {t('customize_setting.default_sidebar_mode.desc')}
             </CardBody>
           </Card>
 
@@ -67,7 +67,7 @@ const CustomizeSidebarsetting = (): JSX.Element => {
 
           <Card className="card well my-5">
             <CardBody className="px-0 py-2">
-              {t('admin:customize_setting.default_sidebar_mode.dock_mode_default_desc')}
+              {t('customize_setting.default_sidebar_mode.dock_mode_default_desc')}
             </CardBody>
           </Card>
 
@@ -83,7 +83,7 @@ const CustomizeSidebarsetting = (): JSX.Element => {
                 onChange={() => setIsSidebarClosedAtDockMode(false)}
               />
               <label className="custom-control-label" htmlFor="is-open">
-                {t('admin:customize_setting.default_sidebar_mode.dock_mode_default_open')}
+                {t('customize_setting.default_sidebar_mode.dock_mode_default_open')}
               </label>
             </div>
             <div className="custom-control custom-radio my-3">
@@ -97,7 +97,7 @@ const CustomizeSidebarsetting = (): JSX.Element => {
                 onChange={() => setIsSidebarClosedAtDockMode(true)}
               />
               <label className="custom-control-label" htmlFor="is-closed">
-                {t('admin:customize_setting.default_sidebar_mode.dock_mode_default_close')}
+                {t('customize_setting.default_sidebar_mode.dock_mode_default_close')}
               </label>
             </div>
           </div>

packages/app/src/components/Admin/Customize/CustomizeThemeOptions.jsx

@@ -52,14 +52,14 @@ const CustomizeThemeOptions = (props) => {
   const { adminCustomizeContainer, currentTheme } = props;
   const { currentLayout } = adminCustomizeContainer.state;
 
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
 
   return (
     <div id="themeOptions" className={`${currentLayout === 'kibela' && 'disabled'}`}>
       {/* Light and Dark Themes */}
       <div>
-        <h3>{t('admin:customize_setting.theme_desc.light_and_dark')}</h3>
+        <h3>{t('customize_setting.theme_desc.light_and_dark')}</h3>
         <div className="d-flex flex-wrap">
           {lightNDarkTheme.map((theme) => {
             return (
@@ -75,7 +75,7 @@ const CustomizeThemeOptions = (props) => {
       </div>
       {/* Unique Theme */}
       <div className="mt-3">
-        <h3>{t('admin:customize_setting.theme_desc.unique')}</h3>
+        <h3>{t('customize_setting.theme_desc.unique')}</h3>
         <div className="d-flex flex-wrap">
           {uniqueTheme.map((theme) => {
             return (

packages/app/src/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx

@@ -2,8 +2,8 @@
 
 import React from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 import {
   Modal,
   ModalHeader,
@@ -233,7 +233,7 @@ ImportCollectionConfigurationModal.propTypes = {
 };
 
 const ImportCollectionConfigurationModalWrapperFc = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   return <ImportCollectionConfigurationModal t={t} {...props} />;
 };

packages/app/src/components/Admin/ImportData/GrowiArchive/ImportForm.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 
 import AdminSocketIoContainer from '~/client/services/AdminSocketIoContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
@@ -505,7 +505,7 @@ ImportForm.propTypes = {
 };
 
 const ImportFormWrapperFc = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   return <ImportForm t={t} {...props} />;
 };

packages/app/src/components/Admin/ImportData/GrowiArchive/UploadForm.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 
 import { toastError } from '~/client/util/apiNotification';
 import { apiv3PostForm } from '~/client/util/apiv3-client';
@@ -98,7 +98,7 @@ UploadForm.propTypes = {
 };
 
 const UploadFormWrapperFc = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   return <UploadForm t={t} {...props} />;
 };

packages/app/src/components/Admin/ImportData/GrowiArchiveSection.jsx

@@ -95,7 +95,7 @@ class GrowiArchiveSection extends React.Component {
     const { t } = this.props;
     return (
       <div className="alert alert-warning mt-3">
-        {t('admin:importer_management.growi_settings.errors.different_versions')}
+        {t('importer_management.growi_settings.errors.different_versions')}
       </div>
     );
   }
@@ -110,17 +110,17 @@ class GrowiArchiveSection extends React.Component {
 
     return (
       <Fragment>
-        <h2>{t('admin:importer_management.import_growi_archive')}</h2>
+        <h2>{t('importer_management.import_growi_archive')}</h2>
         <div className="card well mb-4 small">
           <ul>
-            <li>{t('admin:importer_management.skip_username_and_email_when_overlapped')}</li>
-            <li>{t('admin:importer_management.prepare_new_account_for_migration')}</li>
+            <li>{t('importer_management.skip_username_and_email_when_overlapped')}</li>
+            <li>{t('importer_management.prepare_new_account_for_migration')}</li>
             <li>
               <a
-                href={`${t('admin:importer_management.admin_archive_data_import_guide_url')}`}
+                href={`${t('importer_management.admin_archive_data_import_guide_url')}`}
                 target="_blank"
                 rel="noopener noreferrer"
-              >{t('admin:importer_management.archive_data_import_detail')}
+              >{t('importer_management.archive_data_import_detail')}
               </a>
             </li>
           </ul>
@@ -154,7 +154,7 @@ GrowiArchiveSection.propTypes = {
 };
 
 const GrowiArchiveSectionWrapperFc = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   return <GrowiArchiveSection t={t} {...props} />;
 };

packages/app/src/components/Admin/ImportData/ImportDataPageContents.jsx

@@ -29,7 +29,7 @@ class ImportDataPageContents extends React.Component {
           role="form"
         >
           <fieldset>
-            <h2 className="admin-setting-header">{t('admin:importer_management.import_from', { from: 'esa.io' })}</h2>
+            <h2 className="admin-setting-header">{t('importer_management.import_from', { from: 'esa.io' })}</h2>
             <table className="table table-bordered table-mapping">
               <thead>
                 <tr>
@@ -40,14 +40,14 @@ class ImportDataPageContents extends React.Component {
               </thead>
               <tbody>
                 <tr>
-                  <th>{t('Article')}</th>
+                  <th>{t('importer_management.article')}</th>
                   <th><i className="icon-arrow-right-circle text-success"></i></th>
-                  <th>{t('Page')}</th>
+                  <th>{t('importer_management.page')}</th>
                 </tr>
                 <tr>
-                  <th>{t('Category')}</th>
+                  <th>{t('importer_management.category')}</th>
                   <th><i className="icon-arrow-right-circle text-success"></i></th>
-                  <th>{t('Page Path')}</th>
+                  <th>{t('importer_management.page_path')}</th>
                 </tr>
                 <tr>
                   <th>{t('User')}</th>
@@ -59,7 +59,7 @@ class ImportDataPageContents extends React.Component {
 
             <div className="card well mb-0 small">
               <ul>
-                <li>{t('admin:importer_management.page_skip')}</li>
+                <li>{t('importer_management.page_skip')}</li>
               </ul>
             </div>
 
@@ -69,7 +69,7 @@ class ImportDataPageContents extends React.Component {
 
             <div className="form-group row">
               <label htmlFor="settingForm[importer:esa:team_name]" className="text-left text-md-right col-md-3 col-form-label">
-                {t('admin:importer_management.esa_settings.team_name')}
+                {t('importer_management.esa_settings.team_name')}
               </label>
               <div className="col-md-6">
                 <input
@@ -85,7 +85,7 @@ class ImportDataPageContents extends React.Component {
 
             <div className="form-group row">
               <label htmlFor="settingForm[importer:esa:access_token]" className="text-left text-md-right col-md-3 col-form-label">
-                {t('admin:importer_management.esa_settings.access_token')}
+                {t('importer_management.esa_settings.access_token')}
               </label>
               <div className="col-md-6">
                 <input
@@ -106,7 +106,7 @@ class ImportDataPageContents extends React.Component {
                   className="btn btn-primary btn-esa"
                   name="Esa"
                   onClick={adminImportContainer.esaHandleSubmit}
-                  value={t('admin:importer_management.import')}
+                  value={t('importer_management.import')}
                 />
                 <input type="button" className="btn btn-secondary" onClick={adminImportContainer.esaHandleSubmitUpdate} value={t('Update')} />
                 <span className="offset-0 offset-sm-1">
@@ -116,7 +116,7 @@ class ImportDataPageContents extends React.Component {
                     name="Esa"
                     className="btn btn-secondary btn-esa"
                     onClick={adminImportContainer.esaHandleSubmitTest}
-                    value={t('admin:importer_management.esa_settings.test_connection')}
+                    value={t('importer_management.esa_settings.test_connection')}
                   />
                 </span>
 
@@ -131,7 +131,7 @@ class ImportDataPageContents extends React.Component {
           role="form"
         >
           <fieldset>
-            <h2 className="admin-setting-header">{t('admin:importer_management.import_from', { from: 'Qiita:Team' })}</h2>
+            <h2 className="admin-setting-header">{t('importer_management.import_from', { from: 'Qiita:Team' })}</h2>
             <table className="table table-bordered table-mapping">
               <thead>
                 <tr>
@@ -142,17 +142,17 @@ class ImportDataPageContents extends React.Component {
               </thead>
               <tbody>
                 <tr>
-                  <th>{t('Article')}</th>
+                  <th>{t('importer_management.article')}</th>
                   <th><i className="icon-arrow-right-circle text-success"></i></th>
-                  <th>{t('Page')}</th>
+                  <th>{t('page')}</th>
                 </tr>
                 <tr>
-                  <th>{t('Tag')}</th>
+                  <th>{t('importer_management.tag')}</th>
                   <th></th>
                   <th>-</th>
                 </tr>
                 <tr>
-                  <th>{t('admin:importer_management.Directory_hierarchy_tag')}</th>
+                  <th>{t('importer_management.Directory_hierarchy_tag')}</th>
                   <th></th>
                   <th>(TBD)</th>
                 </tr>
@@ -165,7 +165,7 @@ class ImportDataPageContents extends React.Component {
             </table>
             <div className="card well mb-0 small">
               <ul>
-                <li>{t('admin:importer_management.page_skip')}</li>
+                <li>{t('importer_management.page_skip')}</li>
               </ul>
             </div>
 
@@ -174,7 +174,7 @@ class ImportDataPageContents extends React.Component {
             </div>
             <div className="form-group row">
               <label htmlFor="settingForm[importer:qiita:team_name]" className="text-left text-md-right col-md-3 col-form-label">
-                {t('admin:importer_management.qiita_settings.team_name')}
+                {t('importer_management.qiita_settings.team_name')}
               </label>
               <div className="col-md-6">
                 <input
@@ -189,7 +189,7 @@ class ImportDataPageContents extends React.Component {
 
             <div className="form-group row">
               <label htmlFor="settingForm[importer:qiita:access_token]" className="text-left text-md-right col-md-3 col-form-label">
-                {t('admin:importer_management.qiita_settings.access_token')}
+                {t('importer_management.qiita_settings.access_token')}
               </label>
               <div className="col-md-6">
                 <input
@@ -211,7 +211,7 @@ class ImportDataPageContents extends React.Component {
                   className="btn btn-primary btn-qiita"
                   name="Qiita"
                   onClick={adminImportContainer.qiitaHandleSubmit}
-                  value={t('admin:importer_management.import')}
+                  value={t('importer_management.import')}
                 />
                 <input type="button" className="btn btn-secondary" onClick={adminImportContainer.qiitaHandleSubmitUpdate} value={t('Update')} />
                 <span className="offset-0 offset-sm-1">
@@ -221,7 +221,7 @@ class ImportDataPageContents extends React.Component {
                     id="importFromQiita"
                     className="btn btn-secondary btn-qiita"
                     onClick={adminImportContainer.qiitaHandleSubmitTest}
-                    value={t('admin:importer_management.qiita_settings.test_connection')}
+                    value={t('importer_management.qiita_settings.test_connection')}
                   />
                 </span>
 
@@ -245,7 +245,7 @@ ImportDataPageContents.propTypes = {
 };
 
 const ImportDataPageContentsWrapperFc = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   const { adminImportContainer } = props;
 

packages/app/src/components/Admin/MarkdownSetting/IndentForm.tsx

@@ -21,12 +21,12 @@ type Props = {
 }
 
 const IndentForm = (props: Props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   const onClickSubmit = useCallback(async(props) => {
     try {
       await props.adminMarkDownContainer.updateIndentSetting();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:markdown_setting.indent_header') }));
+      toastSuccess(t('toaster.update_successed', { target: t('markdown_settings.indent_header') }));
     }
     catch (err) {
       toastError(err);
@@ -41,7 +41,7 @@ const IndentForm = (props: Props) => {
     return (
       <div className="col">
         <div>
-          <label htmlFor="adminPreferredIndentSize">{t('admin:markdown_setting.indent_options.indentSize')}</label>
+          <label htmlFor="adminPreferredIndentSize">{t('markdown_settings.indent_options.indentSize')}</label>
           <UncontrolledDropdown id="adminPreferredIndentSize">
             <DropdownToggle caret className="col-3 col-sm-2 col-md-5 col-lg-5 col-xl-3 text-right">
               <span className="float-left">
@@ -60,7 +60,7 @@ const IndentForm = (props: Props) => {
           </UncontrolledDropdown>
         </div>
         <p className="form-text text-muted">
-          {t('admin:markdown_setting.indent_options.indentSize_desc')}
+          {t('markdown_settings.indent_options.indentSize_desc')}
         </p>
       </div>
     );
@@ -70,7 +70,7 @@ const IndentForm = (props: Props) => {
     const { adminMarkDownContainer } = props;
     const { isIndentSizeForced } = adminMarkDownContainer.state;
 
-    const helpIndentInComment = { __html: t('admin:markdown_setting.indent_options.disallow_indent_change_desc') };
+    const helpIndentInComment = { __html: t('markdown_settings.indent_options.disallow_indent_change_desc') };
 
     return (
       <div className="col">
@@ -85,7 +85,7 @@ const IndentForm = (props: Props) => {
             }}
           />
           <label className="custom-control-label" htmlFor="isIndentSizeForced">
-            {t('admin:markdown_setting.indent_options.disallow_indent_change')}
+            {t('markdown_settings.indent_options.disallow_indent_change')}
           </label>
         </div>
         <p className="form-text text-muted" dangerouslySetInnerHTML={helpIndentInComment} />

packages/app/src/components/Admin/MarkdownSetting/LineBreakForm.jsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 
 import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
@@ -27,7 +27,7 @@ class LineBreakForm extends React.Component {
 
     try {
       await this.props.adminMarkDownContainer.updateLineBreakSetting();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:markdown_setting.lineBreak_header') }));
+      toastSuccess(t('toaster.update_successed', { target: t('markdown_settings.lineBreak_header') }));
     }
     catch (err) {
       toastError(err);
@@ -39,7 +39,7 @@ class LineBreakForm extends React.Component {
     const { t, adminMarkDownContainer } = this.props;
     const { isEnabledLinebreaks } = adminMarkDownContainer.state;
 
-    const helpLineBreak = { __html: t('admin:markdown_setting.lineBreak_options.enable_lineBreak_desc') };
+    const helpLineBreak = { __html: t('markdown_settings.lineBreak_options.enable_lineBreak_desc') };
 
     return (
       <div className="col">
@@ -52,7 +52,7 @@ class LineBreakForm extends React.Component {
             onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaks: !isEnabledLinebreaks }) }}
           />
           <label className="custom-control-label" htmlFor="isEnabledLinebreaks">
-            {t('admin:markdown_setting.lineBreak_options.enable_lineBreak') }
+            {t('markdown_settings.lineBreak_options.enable_lineBreak') }
           </label>
         </div>
         <p className="form-text text-muted" dangerouslySetInnerHTML={helpLineBreak} />
@@ -64,7 +64,7 @@ class LineBreakForm extends React.Component {
     const { t, adminMarkDownContainer } = this.props;
     const { isEnabledLinebreaksInComments } = adminMarkDownContainer.state;
 
-    const helpLineBreakInComment = { __html: t('admin:markdown_setting.lineBreak_options.enable_lineBreak_for_comment_desc') };
+    const helpLineBreakInComment = { __html: t('markdown_settings.lineBreak_options.enable_lineBreak_for_comment_desc') };
 
     return (
       <div className="col">
@@ -77,7 +77,7 @@ class LineBreakForm extends React.Component {
             onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaksInComments: !isEnabledLinebreaksInComments }) }}
           />
           <label className="custom-control-label" htmlFor="isEnabledLinebreaksInComments">
-            {t('admin:markdown_setting.lineBreak_options.enable_lineBreak_for_comment') }
+            {t('markdown_settings.lineBreak_options.enable_lineBreak_for_comment') }
           </label>
         </div>
         <p className="form-text text-muted" dangerouslySetInnerHTML={helpLineBreakInComment} />
@@ -102,7 +102,7 @@ class LineBreakForm extends React.Component {
 }
 
 const LineBreakFormFC = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
   return <LineBreakForm t={t} {...props} />;
 };
 

packages/app/src/components/Admin/MarkdownSetting/MarkDownSettingContents.tsx

@@ -22,7 +22,7 @@ type Props ={
 }
 
 const MarkDownSettingContents = React.memo((props: Props): JSX.Element => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
   const { adminMarkDownContainer } = props;
 
   useEffect(() => {
@@ -43,30 +43,30 @@ const MarkDownSettingContents = React.memo((props: Props): JSX.Element => {
   return (
     <div data-testid="admin-markdown">
       {/* Line Break Setting */}
-      <h2 className="admin-setting-header">{t('admin:markdown_setting.lineBreak_header')}</h2>
+      <h2 className="admin-setting-header">{t('markdown_settings.lineBreak_header')}</h2>
       <Card className="card well my-3">
-        <CardBody className="px-0 py-2">{ t('admin:markdown_setting.lineBreak_desc') }</CardBody>
+        <CardBody className="px-0 py-2">{ t('markdown_settings.lineBreak_desc') }</CardBody>
       </Card>
       <LineBreakForm />
 
       {/* Indent Setting */}
-      <h2 className="admin-setting-header">{t('admin:markdown_setting.indent_header')}</h2>
+      <h2 className="admin-setting-header">{t('markdown_settings.indent_header')}</h2>
       <Card className="card well my-3">
-        <CardBody className="px-0 py-2">{t('admin:markdown_setting.indent_desc') }</CardBody>
+        <CardBody className="px-0 py-2">{t('markdown_settings.indent_desc') }</CardBody>
       </Card>
       <IndentForm />
 
       {/* Presentation Setting */}
-      <h2 className="admin-setting-header">{ t('admin:markdown_setting.presentation_header') }</h2>
+      <h2 className="admin-setting-header">{ t('markdown_settings.presentation_header') }</h2>
       <Card className="card well my-3">
-        <CardBody className="px-0 py-2">{ t('admin:markdown_setting.presentation_desc') }</CardBody>
+        <CardBody className="px-0 py-2">{ t('markdown_settings.presentation_desc') }</CardBody>
       </Card>
       <PresentationForm />
 
       {/* XSS Setting */}
-      <h2 className="admin-setting-header">{ t('admin:markdown_setting.xss_header') }</h2>
+      <h2 className="admin-setting-header">{ t('markdown_settings.xss_header') }</h2>
       <Card className="card well my-3">
-        <CardBody className="px-0 py-2">{ t('admin:markdown_setting.xss_desc') }</CardBody>
+        <CardBody className="px-0 py-2">{ t('markdown_settings.xss_desc') }</CardBody>
       </Card>
       <XssForm />
     </div>

packages/app/src/components/Admin/MarkdownSetting/PresentationForm.jsx

@@ -25,7 +25,7 @@ class PresentationForm extends React.Component {
 
     try {
       await this.props.adminMarkDownContainer.updatePresentationSetting();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:markdown_setting.presentation_header') }));
+      toastSuccess(t('toaster.update_successed', { target: t('markdown_settings.presentation_header') }));
     }
     catch (err) {
       toastError(err);
@@ -42,7 +42,7 @@ class PresentationForm extends React.Component {
       <fieldset className="form-group col-12 my-2">
 
         <label className="col-8 offset-4 col-form-label font-weight-bold text-left mt-3">
-          {t('admin:markdown_setting.presentation_options.page_break_setting')}
+          {t('markdown_settings.presentation_options.page_break_setting')}
         </label>
 
         <div className="form-group col-12 my-3">
@@ -57,13 +57,13 @@ class PresentationForm extends React.Component {
                   onChange={() => adminMarkDownContainer.switchPageBreakSeparator(1)}
                 />
                 <label className="custom-control-label w-100" htmlFor="pageBreakOption1">
-                  <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_one_separator') }</p>
+                  <p className="font-weight-bold">{ t('markdown_settings.presentation_options.preset_one_separator') }</p>
                   <div className="mt-3">
-                    { t('admin:markdown_setting.presentation_options.preset_one_separator_desc') }
+                    { t('markdown_settings.presentation_options.preset_one_separator_desc') }
                     <input
                       className="form-control"
                       type="text"
-                      value={t('admin:markdown_setting.presentation_options.preset_one_separator_value')}
+                      value={t('markdown_settings.presentation_options.preset_one_separator_value')}
                       readOnly
                     />
                   </div>
@@ -81,13 +81,13 @@ class PresentationForm extends React.Component {
                   onChange={() => adminMarkDownContainer.switchPageBreakSeparator(2)}
                 />
                 <label className="custom-control-label w-100" htmlFor="pageBreakOption2">
-                  <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_two_separator') }</p>
+                  <p className="font-weight-bold">{ t('markdown_settings.presentation_options.preset_two_separator') }</p>
                   <div className="mt-3">
-                    { t('admin:markdown_setting.presentation_options.preset_two_separator_desc') }
+                    { t('markdown_settings.presentation_options.preset_two_separator_desc') }
                     <input
                       className="form-control"
                       type="text"
-                      value={t('admin:markdown_setting.presentation_options.preset_two_separator_value')}
+                      value={t('markdown_settings.presentation_options.preset_two_separator_value')}
                       readOnly
                     />
                   </div>
@@ -104,9 +104,9 @@ class PresentationForm extends React.Component {
                   onChange={() => adminMarkDownContainer.switchPageBreakSeparator(3)}
                 />
                 <label className="custom-control-label w-100" htmlFor="pageBreakOption3">
-                  <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.custom_separator') }</p>
+                  <p className="font-weight-bold">{ t('markdown_settings.presentation_options.custom_separator') }</p>
                   <div className="mt-3">
-                    { t('admin:markdown_setting.presentation_options.custom_separator_desc') }
+                    { t('markdown_settings.presentation_options.custom_separator_desc') }
                     <input
                       className="form-control"
                       defaultValue={pageBreakCustomSeparator}
@@ -133,7 +133,7 @@ PresentationForm.propTypes = {
 };
 
 const PresentationFormWrapperFC = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   return <PresentationForm t={t} {...props} />;
 };

packages/app/src/components/Admin/MarkdownSetting/WhiteListInput.jsx

@@ -37,9 +37,9 @@ class WhiteListInput extends React.Component {
       <>
         <div className="mt-4">
           <div className="d-flex justify-content-between">
-            {t('admin:markdown_setting.xss_options.tag_names')}
+            {t('markdown_settings.xss_options.tag_names')}
             <p id="btn-import-tags" className="btn btn-sm btn-primary mb-0" onClick={this.onClickRecommendTagButton}>
-              {t('admin:markdown_setting.xss_options.import_recommended', { target: 'Tags' })}
+              {t('markdown_settings.xss_options.import_recommended', { target: 'Tags' })}
             </p>
           </div>
           <textarea
@@ -54,9 +54,9 @@ class WhiteListInput extends React.Component {
         </div>
         <div className="mt-4">
           <div className="d-flex justify-content-between">
-            {t('admin:markdown_setting.xss_options.tag_attributes')}
+            {t('markdown_settings.xss_options.tag_attributes')}
             <p id="btn-import-tags" className="btn btn-sm btn-primary mb-0" onClick={this.onClickRecommendAttrButton}>
-              {t('admin:markdown_setting.xss_options.import_recommended', { target: 'Attrs' })}
+              {t('markdown_settings.xss_options.import_recommended', { target: 'Attrs' })}
             </p>
           </div>
           <textarea
@@ -83,7 +83,7 @@ WhiteListInput.propTypes = {
 };
 
 const PresentationFormWrapperFC = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   return <WhiteListInput t={t} {...props} />;
 };

packages/app/src/components/Admin/MarkdownSetting/XssForm.jsx

@@ -28,7 +28,7 @@ class XssForm extends React.Component {
 
     try {
       await this.props.adminMarkDownContainer.updateXssSetting();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:markdown_setting.xss_header') }));
+      toastSuccess(t('toaster.update_successed', { target: t('markdown_settings.xss_header') }));
     }
     catch (err) {
       toastError(err);
@@ -54,9 +54,9 @@ class XssForm extends React.Component {
                 onChange={() => { adminMarkDownContainer.setState({ xssOption: 1 }) }}
               />
               <label className="custom-control-label w-100" htmlFor="xssOption1">
-                <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.remove_all_tags')}</p>
+                <p className="font-weight-bold">{t('markdown_settings.xss_options.remove_all_tags')}</p>
                 <div className="mt-4">
-                  {t('admin:markdown_setting.xss_options.remove_all_tags_desc')}
+                  {t('markdown_settings.xss_options.remove_all_tags_desc')}
                 </div>
               </label>
             </div>
@@ -73,10 +73,10 @@ class XssForm extends React.Component {
                 onChange={() => { adminMarkDownContainer.setState({ xssOption: 2 }) }}
               />
               <label className="custom-control-label w-100" htmlFor="xssOption2">
-                <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.recommended_setting')}</p>
+                <p className="font-weight-bold">{t('markdown_settings.xss_options.recommended_setting')}</p>
                 <div className="mt-4">
                   <div className="d-flex justify-content-between">
-                    {t('admin:markdown_setting.xss_options.tag_names')}
+                    {t('markdown_settings.xss_options.tag_names')}
                   </div>
                   <textarea
                     className="form-control xss-list"
@@ -89,7 +89,7 @@ class XssForm extends React.Component {
                 </div>
                 <div className="mt-4">
                   <div className="d-flex justify-content-between">
-                    {t('admin:markdown_setting.xss_options.tag_attributes')}
+                    {t('markdown_settings.xss_options.tag_attributes')}
                   </div>
                   <textarea
                     className="form-control xss-list"
@@ -115,7 +115,7 @@ class XssForm extends React.Component {
                 onChange={() => { adminMarkDownContainer.setState({ xssOption: 3 }) }}
               />
               <label className="custom-control-label w-100" htmlFor="xssOption3">
-                <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.custom_whitelist')}</p>
+                <p className="font-weight-bold">{t('markdown_settings.xss_options.custom_whitelist')}</p>
                 <WhiteListInput customizable />
               </label>
             </div>
@@ -144,7 +144,7 @@ class XssForm extends React.Component {
                   onChange={adminMarkDownContainer.switchEnableXss}
                 />
                 <label className="custom-control-label w-100" htmlFor="XssEnable">
-                  {t('admin:markdown_setting.xss_options.enable_xss_prevention')}
+                  {t('markdown_settings.xss_options.enable_xss_prevention')}
                 </label>
               </div>
             </div>
@@ -168,7 +168,7 @@ XssForm.propTypes = {
 };
 
 const XssFormWrapperFC = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('admin');
 
   return <XssForm t={t} {...props} />;
 };

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

@@ -124,11 +124,11 @@ const AdminMarkdownSettingsPage: NextPage<Props> = (props: Props) => {
       component: <MarkDownSettingContents />,
     },
     customize: {
-      title: t('Customize Settings'),
+      title: t('customize_setting.customize_setting'),
       component: <CustomizeSettingContents />,
     },
     importer: {
-      title: t('Import Data'),
+      title: t('importer_management.import_data'),
       component: <DataImportPageContents />,
     },
     export: {

packages/app/src/server/routes/apiv3/personal-setting.js

@@ -242,7 +242,6 @@ module.exports = (crowi) => {
       user.slackMemberId = req.body.slackMemberId;
 
       const updatedUser = await user.save();
-      req.i18n.changeLanguage(req.body.lang);
 
       const parameters = { action: SupportedAction.ACTION_USER_PERSONAL_SETTINGS_UPDATE };
       activityEvent.emit('update', res.locals.activity._id, parameters);

packages/app/src/server/views/admin/importer.html

@@ -1,9 +1,9 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('ipmport_data')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('importer_management.import_data')) }}{% endblock %}
 
 {% block content_header %}
-<h1 class="title">{{ t('ipmport_data') }}</h1>
+<h1 class="title">{{ t('importer_management.import_data') }}</h1>
 {% endblock %}
 
 {% block content_main %}

packages/app/src/stores/personal-settings.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'next-i18next';
 import useSWR, { SWRResponse } from 'swr';
 
 
@@ -27,6 +28,7 @@ export type IPersonalSettingsInfoOption = {
 }
 
 export const usePersonalSettings = (): SWRResponse<IUser, Error> & IPersonalSettingsInfoOption => {
+  const { i18n } = useTranslation();
   const { data: personalSettingsDataFromDB, mutate: revalidate } = useSWRxPersonalSettings();
   const key = personalSettingsDataFromDB != null ? 'personalSettingsInfo' : null;
 
@@ -54,9 +56,12 @@ export const usePersonalSettings = (): SWRResponse<IUser, Error> & IPersonalSett
       slackMemberId: data.slackMemberId,
     };
 
+    console.log({ updateData });
+
     // invoke API
     try {
       await apiv3Put('/personal-setting/', updateData);
+      i18n.changeLanguage(updateData.lang);
     }
     catch (err) {
       logger.error(err);