create ts file

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

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Card, CardBody } from 'reactstrap';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import LineBreakForm from './LineBreakForm';
-import IndentForm from './IndentForm';
-import PresentationForm from './PresentationForm';
-import XssForm from './XssForm';
-
-
-class MarkDownSettingContents extends React.Component {
-
-  render() {
-    const { t } = this.props;
-    return (
-      <div data-testid="admin-markdown">
-        {/* Line Break Setting */}
-        <h2 className="admin-setting-header">{t('admin:markdown_setting.lineBreak_header')}</h2>
-        <Card className="card well my-3">
-          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.lineBreak_desc') }</CardBody>
-        </Card>
-        <LineBreakForm />
-
-        {/* Indent Setting */}
-        <h2 className="admin-setting-header">{t('admin:markdown_setting.indent_header')}</h2>
-        <Card className="card well my-3">
-          <CardBody className="px-0 py-2">{t('admin:markdown_setting.indent_desc') }</CardBody>
-        </Card>
-        <IndentForm />
-
-        {/* Presentation Setting */}
-        <h2 className="admin-setting-header">{ t('admin:markdown_setting.presentation_header') }</h2>
-        <Card className="card well my-3">
-          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.presentation_desc') }</CardBody>
-        </Card>
-        <PresentationForm />
-
-        {/* XSS Setting */}
-        <h2 className="admin-setting-header">{ t('admin:markdown_setting.xss_header') }</h2>
-        <Card className="card well my-3">
-          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.xss_desc') }</CardBody>
-        </Card>
-        <XssForm />
-      </div>
-    );
-  }
-
-}
-
-MarkDownSettingContents.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-};
-
-export default withTranslation()(MarkDownSettingContents);

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

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+
+import { useTranslation } from 'react-i18next';
+import { Card, CardBody } from 'reactstrap';
+
+import IndentForm from './IndentForm';
+import LineBreakForm from './LineBreakForm';
+import PresentationForm from './PresentationForm';
+import XssForm from './XssForm';
+
+type Props = {
+
+};
+
+
+const MarkDownSettingContents: FC<Props> = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div data-testid="admin-markdown">
+      {/* Line Break Setting */}
+      <h2 className="admin-setting-header">{t('admin:markdown_setting.lineBreak_header')}</h2>
+      <Card className="card well my-3">
+        <CardBody className="px-0 py-2">{ t('admin:markdown_setting.lineBreak_desc') }</CardBody>
+      </Card>
+      <LineBreakForm />
+
+      {/* Indent Setting */}
+      <h2 className="admin-setting-header">{t('admin:markdown_setting.indent_header')}</h2>
+      <Card className="card well my-3">
+        <CardBody className="px-0 py-2">{t('admin:markdown_setting.indent_desc') }</CardBody>
+      </Card>
+      <IndentForm />
+
+      {/* Presentation Setting */}
+      <h2 className="admin-setting-header">{ t('admin:markdown_setting.presentation_header') }</h2>
+      <Card className="card well my-3">
+        <CardBody className="px-0 py-2">{ t('admin:markdown_setting.presentation_desc') }</CardBody>
+      </Card>
+      <PresentationForm />
+
+      {/* XSS Setting */}
+      <h2 className="admin-setting-header">{ t('admin:markdown_setting.xss_header') }</h2>
+      <Card className="card well my-3">
+        <CardBody className="px-0 py-2">{ t('admin:markdown_setting.xss_desc') }</CardBody>
+      </Card>
+      <XssForm />
+    </div>
+  );
+};
+
+export default MarkDownSettingContents;