Refactor(frontend): better project structure for scale

* merge container and its corresponding component file * move related reducer, action, api, and saga files into one service folder * add css-modules support * add *.spec.tsx test files
Armour · Aug 11, 2018 · e235c45 · e235c45
1 parent d4a0012
commit e235c45
Show file tree

Hide file tree

Showing 107 changed files with 957 additions and 1,048 deletions.
diff --git a/.appveyor.yml b/.appveyor.yml
@@ -1,6 +1,5 @@
 environment:
   nodejs_version: "10"
-  NODE_ENV: production
 
 install:
   - ps: Install-Product node $env:nodejs_version

diff --git a/backend/server.js b/backend/server.js
@@ -77,7 +77,7 @@ server.listen(port, (error) => {
   if (isProduction) {
     console.info(`\nExpress: Listening on port ${port}, open up http://localhost:${port}/ in your broswer!\n`.green);
   } else {
-    console.info(`\nExpress: Listening on port ${port}, now you can access api on http://localhost:${port}/ \n`.green);
+    console.info(`\nExpress: Serve api on http://localhost:${port}/ \n`);
   }
 });
 

diff --git a/frontend/public/index.ejs b/frontend/public/index.ejs
@@ -5,7 +5,6 @@
   <meta content="ie=edge" http-equiv="x-ua-compatible">
   <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
   <meta content="Full-stack boilerplate that using express with webpack, react and typescirpt!" name="description">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
@@ -24,5 +23,20 @@
     To begin the development, run `yarn dev`.
     To run in production mode, use `yarn prod`.
   -->
+  <script>
+    // Async load Google Material Icons, eliminate render-blocking resources.
+    // See https://github.com/typekit/webfontloader#get-started for details.
+    WebFontConfig = {
+      google: {
+        families: ['Material Icons']
+      }
+    };
+    (function (d) {
+      var wf = d.createElement('script'), s = d.scripts[0];
+      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
+      wf.async = true;
+      s.parentNode.insertBefore(wf, s);
+    })(document);
+  </script>
 </body>
 </html>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,17 +1,11 @@
+import { ConnectedRouter } from 'connected-react-router';
+import { History } from 'history';
 import * as React from 'react';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
 
-import { ConnectedRouter } from 'connected-react-router';
-import { History } from 'history';
-
 import { router } from 'router';
-import { IGlobalState } from 'types';
-
-import 'materialize-css';
-import 'prismjs/prism.js';
-import 'prismjs/themes/prism.css';
-import 'sass/index.scss';
+import { IGlobalState } from 'types/global';
 
 interface IAppProps {
   store: Store<IGlobalState>;

diff --git a/frontend/src/actions/index.tsx b/frontend/src/actions/index.tsx
diff --git a/frontend/src/apis/index.tsx b/frontend/src/apis/index.tsx
diff --git a/frontend/src/components/Dropdown.tsx → ...tend/src/components/Dropdown/dropdown.tsx b/frontend/src/components/Dropdown.tsx → ...tend/src/components/Dropdown/dropdown.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import { Link } from 'react-router-dom';
 
 import { upperCaseFirstChar } from 'utils';

diff --git a/frontend/src/components/Dropdown/index.tsx b/frontend/src/components/Dropdown/index.tsx
@@ -0,0 +1 @@
+export * from './dropdown';
diff --git a/frontend/src/components/FetchNote.tsx b/frontend/src/components/FetchNote.tsx
diff --git a/frontend/src/sass/components/footer.scss → frontend/src/components/Footer/footer.scss b/frontend/src/sass/components/footer.scss → frontend/src/components/Footer/footer.scss
@@ -1,3 +1,5 @@
-footer.page-footer {
+@import 'sass/variables';
+
+.footer {
   background-color: $primary-color;
 }
diff --git a/frontend/src/components/Footer.tsx → frontend/src/components/Footer/footer.tsx b/frontend/src/components/Footer.tsx → frontend/src/components/Footer/footer.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 
+const styles = require('./footer.scss');
+
 export class Footer extends React.Component {
   public render() {
     return (
-      <footer className='page-footer'>
+      <footer className={`page-footer ${styles.footer}`}>
         <div className='container'>
           <div className='row'>
             <div className='col l6 s12'>

diff --git a/frontend/src/components/Footer/index.tsx b/frontend/src/components/Footer/index.tsx
@@ -0,0 +1 @@
+export * from './footer';
diff --git a/frontend/src/sass/components/header.scss → frontend/src/components/Header/header.scss b/frontend/src/sass/components/header.scss → frontend/src/components/Header/header.scss
@@ -1,3 +1,5 @@
-nav {
+@import 'sass/variables';
+
+.header {
   background-color: $primary-color;
 }
diff --git a/frontend/src/components/Header.tsx → frontend/src/components/Header/header.tsx b/frontend/src/components/Header.tsx → frontend/src/components/Header/header.tsx
@@ -1,14 +1,20 @@
 import * as React from 'react';
+import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import { Dropdown } from './Dropdown';
+import { Dropdown } from 'components/Dropdown';
+import { IGlobalState } from 'types/global';
 
-export interface IHeaderProps {
+const styles = require('./header.scss');
+
+// Component
+
+interface IHeaderProps {
   dropdownLists: string[];
   pathname: string;
 }
 
-export class Header extends React.Component<IHeaderProps> {
+class HeaderComponent extends React.Component<IHeaderProps> {
   public checkActive(urls: string[]) {
     let active = false;
     urls.forEach((url) => {
@@ -27,7 +33,7 @@ export class Header extends React.Component<IHeaderProps> {
   public render() {
     return (
       <div>
-        <nav>
+        <nav className={styles.header}>
           <div className='nav-wrapper'>
             <div className='container'>
               <a className='brand-logo'><Link to='/'>Logo</Link></a>
@@ -55,3 +61,15 @@ export class Header extends React.Component<IHeaderProps> {
     );
   }
 }
+
+// Container
+
+const mapStateToProps = (state: IGlobalState): IHeaderProps => ({
+  dropdownLists: ['parallax'],
+  pathname: state.router!.location.pathname,
+});
+
+export const Header = connect(
+  mapStateToProps,
+  null,
+)(HeaderComponent);
diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
@@ -0,0 +1 @@
+export * from './header';
diff --git a/frontend/src/components/TodoFilter.tsx b/frontend/src/components/TodoFilter.tsx
diff --git a/frontend/src/components/TodoFooter.tsx b/frontend/src/components/TodoFooter.tsx
diff --git a/frontend/src/components/TodoLayout.tsx b/frontend/src/components/TodoLayout.tsx
diff --git a/frontend/src/components/TodoList.tsx b/frontend/src/components/TodoList.tsx
diff --git a/frontend/src/containers/FetchNoteContainer.tsx b/frontend/src/containers/FetchNoteContainer.tsx
diff --git a/frontend/src/containers/HeaderContainer.tsx b/frontend/src/containers/HeaderContainer.tsx