Refactor

packages/app/src/components/Me/EditorSettings.tsx

@@ -1,5 +1,6 @@
 import React, {
-  FC, useEffect, useState,
+  Dispatch,
+  FC, SetStateAction, useEffect, useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
@@ -9,10 +10,29 @@ import { withUnstatedContainers } from '../UnstatedUtils';
 
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 
-type Props = {
-  appContainer: AppContainer,
+type EditorSettingsBodyProps = {
+  appContainer: AppContainer;
 }
 
+type RuleListGroupProps = {
+  title: string;
+  ruleList: RulesMenuItem[]
+  textlintRules: LintRule[]
+  setTextlintRules: Dispatch<SetStateAction<LintRule[]>>
+}
+
+type LintRule = {
+  name: string;
+  options?: unknown;
+  isEnabled?: boolean;
+}
+
+type RulesMenuItem = {
+  name: string;
+  description: string;
+}
+
+
 const commonRulesMenuItems = [
   {
     name: 'common-misspellings',
@@ -84,17 +104,67 @@ const japaneseRulesMenuItems = [
 
 ];
 
-type LintRules = {
-  name: string;
-  options?: unknown;
-  isEnabled?: boolean;
-}
 
+const RuleListGroup: FC<RuleListGroupProps> = ({
+  title, ruleList, textlintRules, setTextlintRules,
+}) => {
+  const { t } = useTranslation();
+
+  const isCheckedRule = (ruleName: string) => (
+    textlintRules.filter(stateRule => (
+      stateRule.name === ruleName
+    ))[0]?.isEnabled
+  );
+
+  const ruleCheckboxHandler = (isChecked: boolean, ruleName: string) => {
+    setTextlintRules(prevState => (
+      prevState.filter(rule => rule.name !== ruleName).concat({ name: ruleName, isEnabled: isChecked })
+    ));
+  };
+
+  return (
+    <>
+      <h2 className="border-bottom my-4">{t(title)}</h2>
+      <div className="form-group row">
+        <div className="offset-md-3 col-md-6 text-left">
+          {ruleList.map(rule => (
+            <div
+              key={rule.name}
+              className="custom-control custom-switch custom-checkbox-success"
+            >
+              <input
+                type="checkbox"
+                className="custom-control-input"
+                id={rule.name}
+                checked={isCheckedRule(rule.name)}
+                onChange={e => ruleCheckboxHandler(e.target.checked, rule.name)}
+              />
+              <label className="custom-control-label" htmlFor={rule.name}>
+                <strong>{rule.name}</strong>
+              </label>
+              <p className="form-text text-muted small">
+                {t(rule.description)}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+
+RuleListGroup.propTypes = {
+  title: PropTypes.string.isRequired,
+  ruleList: PropTypes.array.isRequired,
+  textlintRules: PropTypes.array.isRequired,
+  setTextlintRules: PropTypes.func.isRequired,
+};
 
-const EditorSettingsBody: FC<Props> = (props) => {
+const EditorSettingsBody: FC<EditorSettingsBodyProps> = (props) => {
   const { t } = useTranslation();
   const { appContainer } = props;
-  const [textlintRules, setTextlintRules] = useState<LintRules[]>([]);
+  const [textlintRules, setTextlintRules] = useState<LintRule[]>([]);
 
   const initializeEditorSettings = async() => {
     const { data } = await appContainer.apiv3Get('/personal-setting/editor-settings');
@@ -105,20 +175,16 @@ const EditorSettingsBody: FC<Props> = (props) => {
 
     // If database is empty, add default rules to state
     if (data?.textlintSettings?.textlintRules == null) {
-      const defaultCommonRules = commonRulesMenuItems.map(rule => (
-        {
-          name: rule.name,
-          isEnabled: true,
-        }
-      ));
 
-      const defaultJapaneseRules = japaneseRulesMenuItems.map(rule => (
+      const createRulesFromDefaultList = (rule: { name: string }) => (
         {
           name: rule.name,
           isEnabled: true,
         }
-      ));
+      );
 
+      const defaultCommonRules = commonRulesMenuItems.map(rule => createRulesFromDefaultList(rule));
+      const defaultJapaneseRules = japaneseRulesMenuItems.map(rule => createRulesFromDefaultList(rule));
       setTextlintRules([...defaultCommonRules, ...defaultJapaneseRules]);
     }
   };
@@ -127,12 +193,6 @@ const EditorSettingsBody: FC<Props> = (props) => {
     initializeEditorSettings();
   }, []);
 
-  const ruleCheckboxHandler = (isChecked: boolean, ruleName: string) => {
-    setTextlintRules(prevState => (
-      prevState.filter(rule => rule.name !== ruleName).concat({ name: ruleName, isEnabled: isChecked })
-    ));
-  };
-
   const updateRulesHandler = async() => {
     try {
       const { data } = await appContainer.apiv3Put('/personal-setting/editor-settings', { textlintSettings: textlintRules });
@@ -144,81 +204,32 @@ const EditorSettingsBody: FC<Props> = (props) => {
     }
   };
 
-  const isCheckedRule = (ruleName: string) => (
-    textlintRules.filter(stateRule => (
-      stateRule.name === ruleName
-    ))[0]?.isEnabled
-  );
-
-
   return (
     <>
-      <h2 className="border-bottom my-4">{t('editor_settings.common_settings.common_settings')}</h2>
-      <div className="form-group row">
-        <div className="offset-md-3 col-md-6 text-left">
-          {commonRulesMenuItems.map(rule => (
-            <div
-              key={rule.name}
-              className="custom-control custom-switch custom-checkbox-success"
-            >
-              <input
-                type="checkbox"
-                className="custom-control-input"
-                id={rule.name}
-                checked={isCheckedRule(rule.name)}
-                onChange={e => ruleCheckboxHandler(e.target.checked, rule.name)}
-              />
-              <label className="custom-control-label" htmlFor={rule.name}>
-                <strong>{rule.name}</strong>
-              </label>
-              <p className="form-text text-muted small">
-                {t(rule.description)}
-              </p>
-            </div>
-          ))}
+      <RuleListGroup
+        title="editor_settings.common_settings.common_settings"
+        ruleList={commonRulesMenuItems}
+        textlintRules={textlintRules}
+        setTextlintRules={setTextlintRules}
+      />
+      <RuleListGroup
+        title="editor_settings.japanese_settings.japanese_settings"
+        ruleList={japaneseRulesMenuItems}
+        textlintRules={textlintRules}
+        setTextlintRules={setTextlintRules}
+      />
+
+      <div className="row my-3">
+        <div className="offset-4 col-5">
+          <button
+            type="button"
+            className="btn btn-primary"
+            onClick={updateRulesHandler}
+          >
+            {t('Update')}
+          </button>
         </div>
       </div>
-
-
-      <h2 className="border-bottom my-4">{t('editor_settings.japanese_settings.japanese_settings')}</h2>
-      <div className="form-group row">
-        <div className="offset-md-3 col-md-6 text-left">
-          {japaneseRulesMenuItems.map(rule => (
-            <div
-              key={rule.name}
-              className="custom-control custom-switch custom-checkbox-success"
-            >
-              <input
-                type="checkbox"
-                className="custom-control-input"
-                id={rule.name}
-                checked={isCheckedRule(rule.name)}
-                onChange={e => ruleCheckboxHandler(e.target.checked, rule.name)}
-              />
-              <label className="custom-control-label" htmlFor={rule.name}>
-                <strong>{rule.name}</strong>
-              </label>
-              <p className="form-text text-muted small">
-                {t(rule.description)}
-              </p>
-            </div>
-          ))}
-          <div className="row my-3">
-            <div className="offset-4 col-5">
-              <button
-                type="button"
-                className="btn btn-primary"
-                onClick={updateRulesHandler}
-              >
-                {t('Update')}
-              </button>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-
     </>
   );
 };