From c00321845c07d2b2a528336fcdb138e3f9658161 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Wed, 12 Sep 2018 19:48:15 +0200 Subject: [PATCH] refactor(fs): consolidate containers & components Move all presentational components to the top level components directory and all container components to the top level containers directory. --- .flowconfig | 1 - .../Activity}/Activity.js | 6 +- .../Activity}/Activity.scss | 170 +++++++++++++++++- .../Activity}/Invoice/Invoice.js | 0 .../Activity}/Invoice/Invoice.scss | 0 .../Activity}/Invoice/index.js | 0 .../Activity}/Payment/Payment.js | 0 .../Activity}/Payment/Payment.scss | 0 .../Activity}/Payment/index.js | 0 .../Activity}/Transaction/Transaction.js | 0 .../Activity}/Transaction/Transaction.scss | 8 +- .../Activity}/Transaction/index.js | 0 app/components/Activity/index.js | 3 + .../app/components => components/App}/App.js | 0 app/components/App/App.scss | 16 ++ app/components/App/index.js | 3 + .../Activity.js} | 2 +- .../AppContainer.js => containers/App.js} | 2 +- app/containers/Root.js | 11 +- app/routes.js | 15 -- .../components/components/Activity.scss | 169 ----------------- app/routes/activity/index.js | 3 - app/routes/app/components/App.scss | 16 -- app/routes/app/index.js | 3 - 24 files changed, 209 insertions(+), 219 deletions(-) rename app/{routes/activity/components => components/Activity}/Activity.js (98%) rename app/{routes/activity/components => components/Activity}/Activity.scss (57%) rename app/{routes/activity/components/components => components/Activity}/Invoice/Invoice.js (100%) rename app/{routes/activity/components/components => components/Activity}/Invoice/Invoice.scss (100%) rename app/{routes/activity/components/components => components/Activity}/Invoice/index.js (100%) rename app/{routes/activity/components/components => components/Activity}/Payment/Payment.js (100%) rename app/{routes/activity/components/components => components/Activity}/Payment/Payment.scss (100%) rename app/{routes/activity/components/components => components/Activity}/Payment/index.js (100%) rename app/{routes/activity/components/components => components/Activity}/Transaction/Transaction.js (100%) rename app/{routes/activity/components/components => components/Activity}/Transaction/Transaction.scss (93%) rename app/{routes/activity/components/components => components/Activity}/Transaction/index.js (100%) create mode 100644 app/components/Activity/index.js rename app/{routes/app/components => components/App}/App.js (100%) create mode 100644 app/components/App/App.scss create mode 100644 app/components/App/index.js rename app/{routes/activity/containers/ActivityContainer.js => containers/Activity.js} (98%) rename app/{routes/app/containers/AppContainer.js => containers/App.js} (99%) delete mode 100644 app/routes.js delete mode 100644 app/routes/activity/components/components/Activity.scss delete mode 100644 app/routes/activity/index.js delete mode 100644 app/routes/app/components/App.scss delete mode 100644 app/routes/app/index.js diff --git a/.flowconfig b/.flowconfig index a2cefb98..2ac819ff 100644 --- a/.flowconfig +++ b/.flowconfig @@ -37,6 +37,5 @@ module.name_mapper='^components/\(.*\)$' -> '/app/components/\1' module.name_mapper='^containers/\(.*\)$' -> '/app/containers/\1' module.name_mapper='^lib/\(.*\)$' -> '/app/lib/\1' module.name_mapper='^reducers/\(.*\)$' -> '/app/reducers/\1' -module.name_mapper='^routes/\(.*\)$' -> '/app/routes/\1' module.name_mapper='^store/\(.*\)$' -> '/app/store/\1' module.name_mapper='^icons/\(.*\)$' -> '/app/icons/\1' diff --git a/app/routes/activity/components/Activity.js b/app/components/Activity/Activity.js similarity index 98% rename from app/routes/activity/components/Activity.js rename to app/components/Activity/Activity.js index 5199fe93..f9821644 100644 --- a/app/routes/activity/components/Activity.js +++ b/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' diff --git a/app/routes/activity/components/Activity.scss b/app/components/Activity/Activity.scss similarity index 57% rename from app/routes/activity/components/Activity.scss rename to app/components/Activity/Activity.scss index cb7d6328..de780487 100644 --- a/app/routes/activity/components/Activity.scss +++ b/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; + } + } +} diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/components/Activity/Invoice/Invoice.js similarity index 100% rename from app/routes/activity/components/components/Invoice/Invoice.js rename to app/components/Activity/Invoice/Invoice.js diff --git a/app/routes/activity/components/components/Invoice/Invoice.scss b/app/components/Activity/Invoice/Invoice.scss similarity index 100% rename from app/routes/activity/components/components/Invoice/Invoice.scss rename to app/components/Activity/Invoice/Invoice.scss diff --git a/app/routes/activity/components/components/Invoice/index.js b/app/components/Activity/Invoice/index.js similarity index 100% rename from app/routes/activity/components/components/Invoice/index.js rename to app/components/Activity/Invoice/index.js diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/components/Activity/Payment/Payment.js similarity index 100% rename from app/routes/activity/components/components/Payment/Payment.js rename to app/components/Activity/Payment/Payment.js diff --git a/app/routes/activity/components/components/Payment/Payment.scss b/app/components/Activity/Payment/Payment.scss similarity index 100% rename from app/routes/activity/components/components/Payment/Payment.scss rename to app/components/Activity/Payment/Payment.scss diff --git a/app/routes/activity/components/components/Payment/index.js b/app/components/Activity/Payment/index.js similarity index 100% rename from app/routes/activity/components/components/Payment/index.js rename to app/components/Activity/Payment/index.js diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/components/Activity/Transaction/Transaction.js similarity index 100% rename from app/routes/activity/components/components/Transaction/Transaction.js rename to app/components/Activity/Transaction/Transaction.js diff --git a/app/routes/activity/components/components/Transaction/Transaction.scss b/app/components/Activity/Transaction/Transaction.scss similarity index 93% rename from app/routes/activity/components/components/Transaction/Transaction.scss rename to app/components/Activity/Transaction/Transaction.scss index 24b297ab..31c760ed 100644 --- a/app/routes/activity/components/components/Transaction/Transaction.scss +++ b/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 @@ } } } - diff --git a/app/routes/activity/components/components/Transaction/index.js b/app/components/Activity/Transaction/index.js similarity index 100% rename from app/routes/activity/components/components/Transaction/index.js rename to app/components/Activity/Transaction/index.js diff --git a/app/components/Activity/index.js b/app/components/Activity/index.js new file mode 100644 index 00000000..6f4b9319 --- /dev/null +++ b/app/components/Activity/index.js @@ -0,0 +1,3 @@ +import Activity from './Activity' + +export default Activity diff --git a/app/routes/app/components/App.js b/app/components/App/App.js similarity index 100% rename from app/routes/app/components/App.js rename to app/components/App/App.js diff --git a/app/components/App/App.scss b/app/components/App/App.scss new file mode 100644 index 00000000..c7bd8a33 --- /dev/null +++ b/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; +} diff --git a/app/components/App/index.js b/app/components/App/index.js new file mode 100644 index 00000000..f22feb83 --- /dev/null +++ b/app/components/App/index.js @@ -0,0 +1,3 @@ +import App from './App' + +export default App diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/containers/Activity.js similarity index 98% rename from app/routes/activity/containers/ActivityContainer.js rename to app/containers/Activity.js index 1d3e404e..24e7bc58 100644 --- a/app/routes/activity/containers/ActivityContainer.js +++ b/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, diff --git a/app/routes/app/containers/AppContainer.js b/app/containers/App.js similarity index 99% rename from app/routes/app/containers/AppContainer.js rename to app/containers/App.js index dcc99d9e..3dd8a8f6 100644 --- a/app/routes/app/containers/AppContainer.js +++ b/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, diff --git a/app/containers/Root.js b/app/containers/Root.js index bd9018d9..bade49bc 100644 --- a/app/containers/Root.js +++ b/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 ( - + + + + + ) diff --git a/app/routes.js b/app/routes.js deleted file mode 100644 index a1701d7b..00000000 --- a/app/routes.js +++ /dev/null @@ -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 = () => ( - - - - - -) - -export default routes diff --git a/app/routes/activity/components/components/Activity.scss b/app/routes/activity/components/components/Activity.scss deleted file mode 100644 index d118ec02..00000000 --- a/app/routes/activity/components/components/Activity.scss +++ /dev/null @@ -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; - } - } -} diff --git a/app/routes/activity/index.js b/app/routes/activity/index.js deleted file mode 100644 index d35508e9..00000000 --- a/app/routes/activity/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import ActivityContainer from './containers/ActivityContainer' - -export default ActivityContainer diff --git a/app/routes/app/components/App.scss b/app/routes/app/components/App.scss deleted file mode 100644 index fd5bbbb2..00000000 --- a/app/routes/app/components/App.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/app/routes/app/index.js b/app/routes/app/index.js deleted file mode 100644 index 5e909bbf..00000000 --- a/app/routes/app/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import AppContainer from './containers/AppContainer' - -export default AppContainer