[kiworkshop#22] Remove annotations from browser codes

.babelrc

@@ -1,19 +1,5 @@
 {
   "presets": [
-    "next/babel",
-  ],
-  "plugins": [
-    [
-      "@babel/plugin-proposal-decorators",
-      {
-        "legacy": true
-      }
-    ],
-    [
-      "@babel/plugin-proposal-class-properties",
-      {
-        "loose": true
-      }
-    ]
+    "next/babel"
   ]
 }

package.json

@@ -47,8 +47,6 @@
     "winston": "^3.2.1"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-decorators": "^7.4.4",
     "@types/assert-plus": "^1.0.4",
     "@types/axios": "^0.14.0",
     "@types/enzyme": "^3.10.3",

pages/_app.tsx

@@ -16,9 +16,9 @@ import NotificationCenterContainer from 'src/common/presentation/container/organ
 import CmsLayoutContainer from 'src/common/presentation/container/templates/CmsLayoutContainer';
 import { setPaths } from 'src/common/presentation/state-module/common';
 import { rootReducer, rootSaga, RootState } from 'src/common/presentation/state-module/root';
-import inversifyServices from 'src/inversifyServices';
+import I18NService from 'src/common/service/I18NService';
 
-const { appWithTranslation } = inversifyServices.common.i18NService;
+const { appWithTranslation } = I18NService;
 
 const makeStore = (preloadedState = {} as RootState) => {
   const bindMiddleware = (middlewares: Middleware[]) => {

src/common/infrastructure/service/CommonErrorServiceImpl.ts

@@ -1,10 +1,10 @@
-import { injectable } from "inversify";
 import RepositoryError, { RepositoryErrorData } from "src/common/domain/RepositoryError";
 import CommonErrorService from "src/common/service/CommonErrorService";
 
-@injectable()
-export default class CommonErrorServiceImpl implements CommonErrorService {
+class CommonErrorServiceImpl implements CommonErrorService {
   public createRepositoryErrorFrom(e?: RepositoryErrorData): RepositoryError {
     return RepositoryError.of(e);
   }
-}
+}
+
+export default new CommonErrorServiceImpl();

src/common/presentation/components/atmos/ImmutableTextField.tsx

@@ -3,15 +3,15 @@ import { TextFieldProps } from '@material-ui/core/TextField';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx'
 import * as React from 'react';
-import inversifyServices from 'src/inversifyServices';
+import I18NService from 'src/common/service/I18NService';
 
 const useStyles = makeStyles(createStyles({
   root: {
     margin: 0
   }
 }));
 
-const { useTranslation } = inversifyServices.common.i18NService;
+const { useTranslation } = I18NService;
 
 const ImmutableTextField: React.FC<TextFieldProps> = (
   props

src/common/presentation/components/atmos/LanguageToggleButton.tsx

@@ -1,9 +1,9 @@
 import { Button } from '@material-ui/core';
 import * as React from 'react';
-import inversifyServices from 'src/inversifyServices';
+import I18NService from 'src/common/service/I18NService';
 import Maybe from './Maybe';
 
-const { i18n } = inversifyServices.common.i18NService;
+const { i18n } = I18NService;
 const toggleLanguage = () => i18n.changeLanguage(i18n.language === 'ko' ? 'en' : 'ko');
 
 const LanguageToggleButton: React.FC = () =>

src/common/presentation/components/molecules/Confirm.tsx

@@ -4,7 +4,7 @@ import { fade } from '@material-ui/core/styles';
 import { createStyles, makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import * as React from 'react';
-import inversifyServices from 'src/inversifyServices';
+import I18NService from 'src/common/service/I18NService';
 import { ConfirmPayload } from '../../state-module/common';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
@@ -31,7 +31,7 @@ interface Props {
   closeConfirmDialog(): void
 }
 
-const { useTranslation } = inversifyServices.common.i18NService;
+const { useTranslation } = I18NService;
 
 const Confirm: React.FC<Props> = ({ isConfirmOpened, confirmData, closeConfirmDialog }) => {
   const classes = useStyles();

src/common/presentation/components/templates/CmsLayout.tsx

@@ -18,7 +18,7 @@ import React, { Fragment } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { FirstDepthPath } from 'src/common/domain/constants/FIRST_DEPTH_PATHS';
 import SIDE_BAR_ITEMS from 'src/common/domain/constants/SIDE_BAR_ITEMS';
-import inversifyServices from 'src/inversifyServices';
+import I18NService from 'src/common/service/I18NService';
 import HorizontalMenuBarContainer from '../../container/molecules/HorizontalMenuBarContainer';
 import LanguageToggleButton from '../atmos/LanguageToggleButton';
 import Link from '../atmos/Link';
@@ -27,7 +27,7 @@ import NotificationCenterButton from '../atmos/NotificationCenterButton';
 const drawerWidth = 240;
 const horizontalMenuBarHeight = 31; /* manually calculate the height of horizonMenuBar */
 
-const { withTranslation } = inversifyServices.common.i18NService;
+const { withTranslation } = I18NService;
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   flex: {

src/common/presentation/container/molecules/SnackbarContainer.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { WithTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
-import inversifyServices from 'src/inversifyServices';
+import I18NService from 'src/common/service/I18NService';
 import { RootState } from '../../state-module/root';
 import * as snackbarModule from '../../state-module/snackbar';
 import { Snackbar } from '../../state-module/snackbar';
@@ -15,7 +15,7 @@ interface Props extends WithSnackbarProps, WithTranslation {
   dispatchers: typeof snackbarModule
 }
 
-const { withTranslation } = inversifyServices.common.i18NService;
+const { withTranslation } = I18NService;
 
 class SnackbarContainer extends React.Component<Props> {
   private displayed: string[] = [];

src/mother/notice/infrastructure/repository/NoticeRepositoryImpl.ts

@@ -1,18 +1,16 @@
 import Axios from 'axios';
-import { inject, injectable } from "inversify";
 import Id from 'src/common/domain/Id';
 import Page from 'src/common/domain/Page';
 import PageRequest from 'src/common/domain/PageRequest';
+import CommonErrorServiceImpl from 'src/common/infrastructure/service/CommonErrorServiceImpl';
 import CommonErrorService from 'src/common/service/CommonErrorService';
-import { inversifyIds } from "src/inversifyIds"
 import Notice from '../../domain/Notice';
 import NoticeRepository from '../../domain/NoticeRepository'
 
 const NOTICE_REPO_URL = `${process.env.REPOSITORY_URL}/notices`
 
-@injectable()
-export default class NoticeRepositoryImpl implements NoticeRepository {
-  @inject(inversifyIds.common.CommonErrorService) private commonErrorService!: CommonErrorService
+class NoticeRepositoryImpl implements NoticeRepository {
+  constructor(private commonErrorService: CommonErrorService) { }
 
   public findById = (id: Id): Promise<Notice> => new Promise((resolve, rejected) => {
     Axios.get<Notice>(`${NOTICE_REPO_URL}/${id}`)
@@ -55,4 +53,6 @@ export default class NoticeRepositoryImpl implements NoticeRepository {
       .then(() => resolve())
       .catch(e => rejected(this.commonErrorService.createRepositoryErrorFrom(e)));
   })
-}
+}
+
+export default new NoticeRepositoryImpl(CommonErrorServiceImpl);

src/mother/notice/infrastructure/service/NoticeServiceImpl.ts

@@ -1,15 +1,13 @@
-import { decorate, inject, injectable } from "inversify";
 import Id from 'src/common/domain/Id';
 import Page from "src/common/domain/Page";
 import PageRequest from "src/common/domain/PageRequest";
 import NoticeRequestDto from "../../api/dto/NoticeRequestDto";
 import Notice from "../../domain/Notice";
 import NoticeRepository from "../../domain/NoticeRepository";
-import { notice } from "../../inversify.id";
 import NoticeService from "../../service/NoticeService";
+import NoticeRepositoryImpl from '../repository/NoticeRepositoryImpl';
 
-@injectable()
-export default class NoticeServiceImpl implements NoticeService {
+class NoticeServiceImpl implements NoticeService {
   constructor(private noticeRepository: NoticeRepository) { }
 
   public getNotice = (id: Id): Promise<Notice> => this.noticeRepository.findById(id)
@@ -27,4 +25,4 @@ export default class NoticeServiceImpl implements NoticeService {
     this.noticeRepository.deleteById(id).then(() => { return });
 }
 
-decorate(inject(notice.NoticeRepository) as ParameterDecorator, NoticeServiceImpl, 0);
+export default new NoticeServiceImpl(NoticeRepositoryImpl);

src/mother/notice/presentation/components/organisms/NoticeDetail.tsx

@@ -7,11 +7,10 @@ import ImmutableTextField from 'src/common/presentation/components/atmos/Immutab
 import MarkdownPreview from 'src/common/presentation/components/atmos/previews/MarkdownPreview';
 import ErrorTypography from 'src/common/presentation/components/atmos/typographies/ErrorTypography';
 import MySpeedDial, { SpeedDialActionData } from 'src/common/presentation/components/molecules/MySpeedDial';
-import inversifyServices from 'src/inversifyServices';
+import I18NService from 'src/common/service/I18NService';
 import Notice from 'src/mother/notice/domain/Notice';
 import { createLinkClickHandler } from 'src/util/createLinkClickHandler';
 
-
 const useStyles = makeStyles((theme: Theme) => createStyles({
   spacing: { height: theme.spacing(1) },
   semiTransparent: {
@@ -28,7 +27,6 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
   }
 }))
 
-
 interface Props {
   notice: Notice
   pending: boolean
@@ -37,7 +35,7 @@ interface Props {
   deleteNotice(): void
 }
 
-const { useTranslation } = inversifyServices.common.i18NService;
+const { useTranslation } = I18NService;
 
 const NoticeDetail: React.FC<Props> = ({ notice, pending, rejected, deleteNotice }) => {
   const classes = useStyles();

src/mother/notice/presentation/components/organisms/NoticeList.tsx

@@ -5,7 +5,7 @@ import MyTable from "src/common/presentation/components/atmos/MyTable";
 import Spacer from 'src/common/presentation/components/atmos/Spacer';
 import ErrorTypography from 'src/common/presentation/components/atmos/typographies/ErrorTypography';
 import MySpeedDial, { SpeedDialActionData } from 'src/common/presentation/components/molecules/MySpeedDial';
-import inversifyServices from 'src/inversifyServices';
+import I18NService from 'src/common/service/I18NService';
 import Notice from 'src/mother/notice/domain/Notice';
 import { createLinkClickHandler } from 'src/util/createLinkClickHandler';
 
@@ -15,7 +15,7 @@ interface Props {
   rejected: boolean
 }
 
-const { useTranslation } = inversifyServices.common.i18NService;
+const { useTranslation } = I18NService;
 
 const onRowClick = (e?: React.MouseEvent, data?: Notice) => {
   if (!e || !data) {

src/mother/notice/presentation/components/templates/NoticeForm/NoticeForm.tsx

@@ -10,7 +10,7 @@ import Spacer from 'src/common/presentation/components/atmos/Spacer';
 import ErrorTypography from 'src/common/presentation/components/atmos/typographies/ErrorTypography';
 import MySpeedDial, { SpeedDialActionData } from 'src/common/presentation/components/molecules/MySpeedDial';
 import MarkdownEditor from 'src/common/presentation/components/organisms/MarkdownEditor';
-import inversifyServices from 'src/inversifyServices';
+import I18NService from 'src/common/service/I18NService';
 import NoticeFormDto from 'src/mother/notice/api/dto/NoticeFormDto';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
@@ -35,7 +35,7 @@ interface Props {
   rejected: boolean
 }
 
-const { useTranslation } = inversifyServices.common.i18NService;
+const { useTranslation } = I18NService;
 
 const NoticeForm: React.FC<InjectedFormProps<NoticeFormDto, Props> & Props> = ({
   handleSubmit,

src/mother/notice/presentation/containers/NoticeDetailContainer.tsx

@@ -4,7 +4,7 @@ import { bindActionCreators, Dispatch } from 'redux';
 import Id from 'src/common/domain/Id';
 import * as commonModule from "src/common/presentation/state-module/common"
 import { RootState } from 'src/common/presentation/state-module/root';
-import inversifyServices from 'src/inversifyServices';
+import I18NService from 'src/common/service/I18NService';
 import Notice from '../../domain/Notice';
 import NoticeDetail from '../components/organisms/NoticeDetail';
 import * as detailModule from "../state-module/detail"
@@ -20,7 +20,7 @@ interface Props {
   commonDispatchers: typeof commonModule
 }
 
-const { useTranslation } = inversifyServices.common.i18NService;
+const { useTranslation } = I18NService;
 
 const NoticeDetailContainer: React.FC<Props> = ({ id, notice, pending, rejected, dispatchers, commonDispatchers }) => {
   React.useEffect(() => {

src/mother/notice/presentation/containers/NoticeFormContainer.tsx

@@ -4,7 +4,7 @@ import { bindActionCreators, Dispatch } from 'redux';
 import Id from 'src/common/domain/Id';
 import * as commonModule from "src/common/presentation/state-module/common"
 import { RootState } from 'src/common/presentation/state-module/root';
-import inversifyServices from 'src/inversifyServices';
+import I18NService from 'src/common/service/I18NService';
 import NoticeFormDto from '../../api/dto/NoticeFormDto';
 import NoticeForm from '../components/templates/NoticeForm';
 import * as formModule from "../state-module/form";
@@ -21,7 +21,7 @@ interface Props {
   commonDispatchers: typeof commonModule
 }
 
-const { useTranslation } = inversifyServices.common.i18NService;
+const { useTranslation } = I18NService;
 const NoticeFormContainer: React.FC<Props> = ({
   id,
   isEditing,