Merge pull request #755 from mrfelton/refactor/consolidate-containers-and-components

refactor(fs): consolidate containers & components

.flowconfig

@@ -37,6 +37,5 @@ module.name_mapper='^components/\(.*\)$' -> '<PROJECT_ROOT>/app/components/\1'
 module.name_mapper='^containers/\(.*\)$' -> '<PROJECT_ROOT>/app/containers/\1'
 module.name_mapper='^lib/\(.*\)$' -> '<PROJECT_ROOT>/app/lib/\1'
 module.name_mapper='^reducers/\(.*\)$' -> '<PROJECT_ROOT>/app/reducers/\1'
-module.name_mapper='^routes/\(.*\)$' -> '<PROJECT_ROOT>/app/routes/\1'
 module.name_mapper='^store/\(.*\)$' -> '<PROJECT_ROOT>/app/store/\1'
 module.name_mapper='^icons/\(.*\)$' -> '<PROJECT_ROOT>/app/icons/\1'

app/routes/activity/components/Activity.js → app/components/Activity/Activity.js

@@ -7,9 +7,9 @@ import FaRepeat from 'react-icons/lib/fa/repeat'
 
 import Wallet from 'components/Wallet'
 import LoadingBolt from 'components/LoadingBolt'
-import Invoice from './components/Invoice'
-import Payment from './components/Payment'
-import Transaction from './components/Transaction'
+import Invoice from './Invoice'
+import Payment from './Payment'
+import Transaction from './Transaction'
 
 import styles from './Activity.scss'
 

app/routes/activity/components/Activity.scss → app/components/Activity/Activity.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import '../../styles/variables.scss';
 
 .search {
   height: 55px;
@@ -197,3 +197,171 @@
     text-align: right;
   }
 }
+
+.container {
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  height: 76px;
+  align-items: center;
+  font-size: 14px;
+  transition: background-color 0.1s linear;
+  transition-delay: 0.1s;
+  color: $white;
+  position: relative;
+
+  &.unpaid {
+    opacity: 0.5;
+  }
+
+  .activityTypeIcon {
+    position: absolute;
+    left: -5%;
+    top: 37%;
+
+    svg {
+      width: 16px;
+      height: 16px;
+      opacity: 0.5;
+    }
+  }
+}
+
+.clock {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: -100px;
+  width: 100px;
+  height: 77px;
+
+  svg {
+    font-size: 18px;
+  }
+}
+
+.date {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-right: 50px;
+  min-width: 90px;
+
+  section {
+    margin: 2.5px 0;
+  }
+
+  svg {
+    width: 12.5px;
+    height: 12.5px;
+  }
+
+  time {
+    font-size: 12px;
+  }
+}
+
+.data {
+  display: flex;
+  flex-direction: column;
+  flex: 6;
+  justify-content: space-evenly;
+
+  &:nth-child(2) {
+    font-size: 10px;
+  }
+
+  .title {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+
+  .subtitle {
+    opacity: 0.5;
+    font-size: 10px;
+  }
+
+  .icon,
+  h3,
+  span {
+    vertical-align: middle;
+  }
+
+  h3,
+  span {
+    font-size: 14px;
+    font-weight: bold;
+    letter-spacing: 1.2px;
+  }
+
+  .icon {
+    display: inline-block;
+    flex: none;
+    position: relative;
+    width: 20px;
+    height: 20px;
+    background: #31343f;
+    border-radius: 50%;
+    margin-right: 5px;
+
+    svg {
+      color: $white;
+      font-size: 10px;
+      vertical-align: middle;
+      display: flex;
+      top: 0;
+      left: 50%;
+      height: 100%;
+      margin: 0 auto;
+    }
+  }
+
+  h3 {
+    display: inline-block;
+
+    &::after {
+      content: ' ';
+      display: inline-block;
+      width: 3px;
+    }
+  }
+
+  span {
+    text-transform: uppercase;
+  }
+}
+
+.amount {
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+  font-size: 12px;
+  color: $white;
+
+  span {
+    &:nth-child(1) {
+      margin-bottom: 10px;
+    }
+
+    &:nth-child(2) {
+      font-size: 10px;
+      opacity: 0.5;
+    }
+
+    .plus,
+    .minus {
+      margin-right: 2px;
+    }
+
+    .plus {
+      color: $green;
+    }
+
+    .minus {
+      color: $red;
+    }
+  }
+}

app/routes/activity/components/components/Transaction/Transaction.scss → app/components/Activity/Transaction/Transaction.scss

@@ -10,8 +10,8 @@
   align-items: center;
   border-bottom: 1px solid $grey;
   font-size: 14px;
-  transition: background-color .1s linear;
-  transition-delay: .1s;
+  transition: background-color 0.1s linear;
+  transition-delay: 0.1s;
   color: $darkestgrey;
   position: relative;
 }
@@ -53,7 +53,8 @@
   }
 }
 
-.subtitle, .date {
+.subtitle,
+.date {
   text-align: center;
 }
 
@@ -91,4 +92,3 @@
     }
   }
 }
-

app/components/Activity/index.js

@@ -0,0 +1,3 @@
+import Activity from './Activity'
+
+export default Activity

app/components/App/App.scss

@@ -0,0 +1,16 @@
+@import '../../styles/variables.scss';
+
+.content {
+  position: relative;
+  width: 70%;
+  display: inline-block;
+  vertical-align: top;
+  overflow-y: auto;
+}
+
+.titleBar {
+  background: $spacegrey;
+  height: 20px;
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
+}

app/components/App/index.js

@@ -0,0 +1,3 @@
+import App from './App'
+
+export default App

app/routes/activity/containers/ActivityContainer.js → app/containers/Activity.js

@@ -23,7 +23,7 @@ import { setWalletCurrencyFilters } from 'reducers/info'
 
 import { setSettingsOpen, setActiveSubMenu, disableSubMenu } from 'reducers/settings'
 
-import Activity from '../components/Activity'
+import Activity from 'components/Activity'
 
 const mapDispatchToProps = {
   setCurrency,

app/routes/app/containers/AppContainer.js → app/containers/App.js

@@ -78,7 +78,7 @@ import {
   activitySelectors
 } from 'reducers/activity'
 
-import App from '../components/App'
+import App from 'components/App'
 
 const mapDispatchToProps = {
   fetchTicker,

app/containers/Root.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Provider, connect } from 'react-redux'
 import { ConnectedRouter } from 'react-router-redux'
+import { Switch, Route } from 'react-router'
 import PropTypes from 'prop-types'
 import { hot } from 'react-hot-loader'
 
@@ -33,7 +34,9 @@ import { walletAddress } from 'reducers/address'
 import LoadingBolt from 'components/LoadingBolt'
 import Onboarding from 'components/Onboarding'
 import Syncing from 'components/Onboarding/Syncing'
-import Routes from '../routes'
+
+import App from './App'
+import Activity from './Activity'
 
 const mapDispatchToProps = {
   setConnectionType,
@@ -233,7 +236,11 @@ const Root = ({
   return (
     <Provider store={store}>
       <ConnectedRouter history={history}>
-        <Routes />
+        <App>
+          <Switch>
+            <Route path="/" component={Activity} />
+          </Switch>
+        </App>
       </ConnectedRouter>
     </Provider>
   )

app/routes.js

@@ -1,15 +0,0 @@
-/* eslint flowtype-errors/show-errors: 0 */
-import React from 'react'
-import { Switch, Route } from 'react-router-dom'
-import App from './routes/app'
-import Activity from './routes/activity'
-
-const routes = () => (
-  <App>
-    <Switch>
-      <Route path="/" component={Activity} />
-    </Switch>
-  </App>
-)
-
-export default routes

app/routes/activity/components/components/Activity.scss

@@ -1,169 +0,0 @@
-@import '../../../../styles/variables.scss';
-
-.container {
-  display: flex;
-  flex-direction: row;
-  cursor: pointer;
-  height: 76px;
-  align-items: center;
-  font-size: 14px;
-  transition: background-color 0.1s linear;
-  transition-delay: 0.1s;
-  color: $white;
-  position: relative;
-
-  &.unpaid {
-    opacity: 0.5;
-  }
-
-  .activityTypeIcon {
-    position: absolute;
-    left: -5%;
-    top: 37%;
-
-    svg {
-      width: 16px;
-      height: 16px;
-      opacity: 0.5;
-    }
-  }
-}
-
-.clock {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  left: -100px;
-  width: 100px;
-  height: 77px;
-
-  svg {
-    font-size: 18px;
-  }
-}
-
-.date {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding-right: 50px;
-  min-width: 90px;
-
-  section {
-    margin: 2.5px 0;
-  }
-
-  svg {
-    width: 12.5px;
-    height: 12.5px;
-  }
-
-  time {
-    font-size: 12px;
-  }
-}
-
-.data {
-  display: flex;
-  flex-direction: column;
-  flex: 6;
-  justify-content: space-evenly;
-
-  &:nth-child(2) {
-    font-size: 10px;
-  }
-
-  .title {
-    margin-bottom: 10px;
-    font-size: 14px;
-  }
-
-  .subtitle {
-    opacity: 0.5;
-    font-size: 10px;
-  }
-
-  .icon,
-  h3,
-  span {
-    vertical-align: middle;
-  }
-
-  h3,
-  span {
-    font-size: 14px;
-    font-weight: bold;
-    letter-spacing: 1.2px;
-  }
-
-  .icon {
-    display: inline-block;
-    flex: none;
-    position: relative;
-    width: 20px;
-    height: 20px;
-    background: #31343f;
-    border-radius: 50%;
-    margin-right: 5px;
-
-    svg {
-      color: $white;
-      font-size: 10px;
-      vertical-align: middle;
-      display: flex;
-      top: 0;
-      left: 50%;
-      height: 100%;
-      margin: 0 auto;
-    }
-  }
-
-  h3 {
-    display: inline-block;
-
-    &::after {
-      content: ' ';
-      display: inline-block;
-      width: 3px;
-    }
-  }
-
-  span {
-    text-transform: uppercase;
-  }
-}
-
-.amount {
-  display: flex;
-  flex-direction: column;
-  text-align: right;
-  font-size: 12px;
-  color: $white;
-
-  span {
-    &:nth-child(1) {
-      margin-bottom: 10px;
-    }
-
-    &:nth-child(2) {
-      font-size: 10px;
-      opacity: 0.5;
-    }
-
-    .plus,
-    .minus {
-      margin-right: 2px;
-    }
-
-    .plus {
-      color: $green;
-    }
-
-    .minus {
-      color: $red;
-    }
-  }
-}

app/routes/activity/index.js

@@ -1,3 +0,0 @@
-import ActivityContainer from './containers/ActivityContainer'
-
-export default ActivityContainer

app/routes/app/components/App.scss

@@ -1,16 +0,0 @@
-@import '../../../styles/variables.scss';
-
-.content {
-	position: relative;
-	width: 70%;
-	display: inline-block;
-	vertical-align: top;
-	overflow-y: auto;
-}
-
-.titleBar {
-  background: $spacegrey;
-  height: 20px;
-  -webkit-user-select: none;
-  -webkit-app-region: drag;
-}

app/routes/app/index.js

@@ -1,3 +0,0 @@
-import AppContainer from './containers/AppContainer'
-
-export default AppContainer