Refactor(frontend): use default export instead of named export

Author: Armour

frontend/src/App.tsx

@@ -4,15 +4,15 @@ import * as React from 'react';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
 
-import { router } from 'router';
+import router from 'router';
 import { IGlobalState } from 'types/global';
 
 interface IAppProps {
   store: Store<IGlobalState>;
   history: History;
 }
 
-export const App = (props: IAppProps) => (
+export default (props: IAppProps) => (
   <Provider store={props.store}>
     <ConnectedRouter history={props.history}>
       {router}

frontend/src/components/Dropdown/dropdown.tsx

@@ -12,7 +12,7 @@ const dropdownConfig: Partial<M.DropdownOptions> = {
   coverTrigger: false,
 };
 
-export class Dropdown extends React.Component<IDropdownProps> {
+export default class Dropdown extends React.Component<IDropdownProps> {
   public componentDidMount() {
     const elems = document.querySelectorAll('.dropdown-button');
     M.Dropdown.init(elems, dropdownConfig);

frontend/src/components/Dropdown/index.tsx

@@ -1 +1 @@
-export * from './dropdown';
+export {default} from './dropdown';

frontend/src/components/Footer/footer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export class Footer extends React.Component {
+export default class Footer extends React.Component {
   public render() {
     return (
       <footer className='page-footer'>

frontend/src/components/Footer/index.tsx

@@ -1 +1 @@
-export * from './footer';
+export {default} from './footer';

frontend/src/components/Header/header.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import { Dropdown } from 'components/Dropdown';
+import Dropdown from 'components/Dropdown';
 import { IGlobalState } from 'types/global';
 
 // Component
@@ -12,7 +12,7 @@ interface IHeaderProps {
   pathname: string;
 }
 
-class HeaderComponent extends React.Component<IHeaderProps> {
+class Header extends React.Component<IHeaderProps> {
   public checkActive(urls: string[]) {
     let active = false;
     urls.forEach((url) => {
@@ -67,7 +67,7 @@ const mapStateToProps = (state: IGlobalState): IHeaderProps => ({
   pathname: state.router!.location.pathname,
 });
 
-export const Header = connect(
+export default connect(
   mapStateToProps,
   null,
-)(HeaderComponent);
+)(Header);

frontend/src/components/Header/index.tsx

@@ -1 +1 @@
-export * from './header';
+export {default} from './header';

frontend/src/index.tsx

@@ -4,8 +4,8 @@ import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
 
-import { App } from 'App';
-import { configureStore } from 'store';
+import App from 'App';
+import configureStore from 'store';
 import { isProduction } from 'utils';
 
 // Webpack offline plugin
@@ -40,7 +40,7 @@ render(App);
 // Hot Reload Module API
 if (module.hot) {
   module.hot.accept('./App', () => {
-    const NextApp = require('App').App;
+    const NextApp = require('App').default;
     render(NextApp);
   });
 }

frontend/src/pages/HomePage/components/Carousel/carousel.tsx

@@ -20,7 +20,7 @@ const toastConfig: Partial<M.ToastOptions> = {
   html: 'I am a toast!',
 };
 
-export class Carousel extends React.Component {
+export default class Carousel extends React.Component {
   public timer: number = 0;
 
   public componentDidMount() {

frontend/src/pages/HomePage/components/Carousel/index.tsx

@@ -1 +1 @@
-export * from './carousel';
+export {default} from './carousel';