From 1a2a507cecee8d61ccfabe0d76f40b242bd8ebe5 Mon Sep 17 00:00:00 2001 From: Dawid Szlachta Date: Thu, 23 Jan 2020 19:42:32 +0100 Subject: [PATCH] 240: Added Content component, PageHelp, new layout, CSS Grid, separated routes Closes #240 Replaced Help with PageHelp for every page, minor fixes Bugix and CSS fixes Filename fixes Added ExpandShrinkIcon component --- frontend/src/App.css | 43 ++----- frontend/src/App.js | 56 ++------- frontend/src/Content.css | 90 +++++++++++++++ frontend/src/Content.js | 102 +++++++++++++++++ frontend/src/components/ExpandShrinkIcon.js | 17 +++ frontend/src/components/PageHelp.js | 107 ++++++++++++++++++ frontend/src/components/index.js | 6 +- .../components/menus/main-menu/main-menu.jsx | 24 +++- .../src/components/menus/main-menu/reducer.js | 14 +++ frontend/src/components/page.jsx | 3 - frontend/src/components/panels/help.jsx | 22 +--- frontend/src/components/panels/side-panel.jsx | 15 +-- frontend/src/components/panels/status.jsx | 22 +--- frontend/src/pages/addresses/index.js | 14 +-- frontend/src/pages/caches/index.js | 14 +-- frontend/src/pages/dashboard/index.js | 13 +-- frontend/src/pages/explore/index.js | 15 +-- frontend/src/pages/indicies/index.js | 15 +-- frontend/src/pages/other/index.js | 13 +-- frontend/src/pages/settings/index.js | 13 +-- frontend/src/pages/signatures/index.js | 14 +-- frontend/src/pages/support/index.js | 14 +-- .../pages/templates/blank-root-reducers.js | 2 + frontend/src/root-reducers.js | 2 + frontend/src/routes.js | 66 +++++++++++ frontend/src/store.js | 1 + 26 files changed, 469 insertions(+), 248 deletions(-) create mode 100644 frontend/src/Content.css create mode 100644 frontend/src/Content.js create mode 100644 frontend/src/components/ExpandShrinkIcon.js create mode 100644 frontend/src/components/PageHelp.js create mode 100644 frontend/src/components/menus/main-menu/reducer.js create mode 100644 frontend/src/routes.js diff --git a/frontend/src/App.css b/frontend/src/App.css index 02151496..e3a2314c 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,10 +1,12 @@ :root { - --color-background: #8d9cab; - --logo-width: 50px; - --logo-height: 70px; - --header-font-size: 1.8em; - --header-small-factor: 0.6; - --footer-height: 84px; + --color-background: #8d9cab; + --logo-width: 50px; + --logo-height: 70px; + --header-font-size: 1.8em; + --header-small-factor: 0.6; + --footer-height: 84px; + --color-border-primary: #777; + --color-border-seconary: #ddd; } /*------------------------------------------*/ @@ -20,8 +22,7 @@ } /*------------------------------------------*/ -.header-item, -.body-item { +.header-item { display: flex; flex-flow: row nowrap; align-content: flex-start; @@ -80,32 +81,11 @@ font-size: calc(var(--header-font-size) * var(--header-small-factor)); } -/*------------------------------------------*/ -.left-body-container { - display: flex; - flex-flow: column nowrap; - min-width: 7%; - padding: 3px 0px; -} - -.right-body-container { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - border: 1px solid #777; - background-color: white; -} - /*------------------------------------------*/ .menu-panel { border-right: 1px solid #ddd; } -/*------------------------------------------*/ -.status-panel { - border-right: 1px solid #ddd; -} - /*------------------------------------------*/ .inner-panel { flex-basis: auto; @@ -115,11 +95,6 @@ /* background-color: pink; */ } -/*------------------------------------------*/ -.help-panel { - border-left: 1px solid #ddd; -} - /*------------------------------------------*/ .logo { width: var(--logo-width); diff --git a/frontend/src/App.js b/frontend/src/App.js index 38eb8598..45487421 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,23 +1,17 @@ import React, { Fragment } from 'react'; -import { Route, Redirect } from 'react-router-dom'; +import { Redirect } from 'react-router-dom'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { history } from './store'; import { SET as SET_LAST_LOCATION } from './last-location-actions'; -import { MainMenu, PageHeader, PageFooter, TopScrollObserver } from './components'; +import Content from './Content'; +import { + PageHeader, + PageFooter, + TopScrollObserver +} from './components'; import './App.css'; -//------------------------------------------------------------ -import Dashboard, { dashboard_menu } from './pages/dashboard'; -import Addresses, { addresses_menu } from './pages/addresses'; -import Explore, { explore_menu } from './pages/explore'; -import Indicies, { indicies_menu } from './pages/indicies'; -import Signatures, { signatures_menu } from './pages/signatures'; -import Caches, { caches_menu } from './pages/caches'; -import Other, { other_menu } from './pages/other'; -import Settings, { settings_menu } from './pages/settings'; -import Support, { support_menu } from './pages/support'; - //------------------------------------------------------------ const setLastLocation = (lastLocation) => ({ type: SET_LAST_LOCATION, lastLocation }); @@ -63,7 +57,7 @@ class App extends React.Component {
- +
@@ -72,40 +66,6 @@ class App extends React.Component { } //------------------------------------------------------------ -class Body extends React.Component { - render = () => { - return ( -
- -
- - - - - - - - - - -
-
- ); - }; -} - -//------------------------------------------------------------ -var mainMenu = []; -mainMenu.push(dashboard_menu); -mainMenu.push(addresses_menu); -mainMenu.push(explore_menu); -mainMenu.push(indicies_menu); -mainMenu.push(signatures_menu); -mainMenu.push(caches_menu); -mainMenu.push(other_menu); -mainMenu.push(settings_menu); -mainMenu.push(support_menu); - const mapStateToProps = ({ reducer_LastLocation, router }) => ({ lastLocation: reducer_LastLocation.lastLocation, currentLocation: router.location diff --git a/frontend/src/Content.css b/frontend/src/Content.css new file mode 100644 index 00000000..e3573543 --- /dev/null +++ b/frontend/src/Content.css @@ -0,0 +1,90 @@ +.app-content { + display: grid; + align-content: flex-start; + + grid-template-columns: 1fr 1fr 81fr 1fr; +} + +.left-body-container { + display: flex; + flex-flow: column nowrap; + padding: 3px 0px; + overflow-x: hidden; +} + +.left-body-container.expanded { + min-width: 7%; +} + +.left-body-container .toggle-button { + background: transparent; + border: none; + color: white; + text-align: left; + padding: 0; +} + +.left-body-container.expanded .toggle-button { + text-align: right; +} + +.status-panel { + background: white; + border-width: 1px 0 1px 1px; + border-style: solid; + border-color: var(--color-border-primary) var(--color-border-seconary) var(--color-border-primary) var(--color-border-primary); + overflow-x: hidden; +} + +main { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + border: 1px solid var(--color-border-primary); + background-color: white; +} + +.help-panel { + background: white; + border-width: 1px 1px 1px 0; + border-style: solid; + border-color: var(--color-border-primary) var(--color-border-primary) var(--color-border-primary) var(--color-border-seconary); + overflow-x: hidden; +} + +/* Grid */ + +/* 1. Help expanded */ +.app-content.help-expanded { + grid-template-columns: 1fr 1fr 70fr 12fr; +} + +/* 2. Status expanded */ +.app-content.status-expanded { + grid-template-columns: 1fr 12fr 70fr 1fr; +} + +/* 3. Status and help expanded */ +.app-content.status-expanded.help-expanded { + grid-template-columns: 1fr 12fr 59fr 12fr; +} + +/* 4. Only menu expanded */ +.app-content.menu-expanded { + grid-template-columns: 6fr 1fr 76fr 1fr; +} + +/* 5. Menu and help expanded */ +.app-content.menu-expanded.help-expanded { + grid-template-columns: 6fr 1fr 65fr 12fr; +} + +/* 6. Menu and status expanded */ +.app-content.menu-expanded.status-expanded { + grid-template-columns: 6fr 12fr 65fr 1fr; +} + +/* 7. Everything expanded expanded */ +.app-content.menu-expanded.status-expanded.help-expanded { + grid-template-columns: 6fr 12fr 54fr 12fr; +} diff --git a/frontend/src/Content.js b/frontend/src/Content.js new file mode 100644 index 00000000..39f2c9c2 --- /dev/null +++ b/frontend/src/Content.js @@ -0,0 +1,102 @@ +import React from 'react'; +import { Route } from 'react-router-dom'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; + +import { dashboard_menu } from './pages/dashboard'; +import { addresses_menu } from './pages/addresses'; +import { explore_menu } from './pages/explore'; +import { indicies_menu } from './pages/indicies'; +import { signatures_menu } from './pages/signatures'; +import { caches_menu } from './pages/caches'; +import { other_menu } from './pages/other'; +import { settings_menu } from './pages/settings'; +import { support_menu } from './pages/support'; + +import { + STATUS_TOGGLE, + HELP_TOGGLE +} from './components/panels/side-panel-actions'; +import { MAIN_MENU_TOGGLE } from './components/menus/main-menu/reducer'; +import { + MainMenu, + StatusPanel, + HelpPanel, + PageHelp +} from './components'; +import Routes from './routes'; +import './Content.css'; + +const mainMenu = [ + dashboard_menu, + addresses_menu, + explore_menu, + indicies_menu, + signatures_menu, + caches_menu, + other_menu, + settings_menu, + support_menu, +]; + +const toggleStatus = () => ({ type: STATUS_TOGGLE }); +const toggleHelp = () => ({ type: HELP_TOGGLE }); +const toggleMainMenu = () => ({ type: MAIN_MENU_TOGGLE }); + +export function Content(props) { + const { + isStatusExpanded, + isHelpExpanded, + isMainMenuExpanded, + toggleStatus, + toggleHelp, + toggleMainMenu + } = props; + + const classNames = [ + 'app-content', + isMainMenuExpanded ? 'menu-expanded' : '', + isStatusExpanded ? 'status-expanded' : '', + isHelpExpanded ? 'help-expanded': '' + ].join(' '); + + return ( +
+ + +
+ {Routes.map((route, index) => ( + + ))} +
+ + + +
+ ); +} + +const mapStateToProps = ({ reducer_SidePanels, reducer_MainMenu }) => ({ + isStatusExpanded: reducer_SidePanels.isStatusExpanded, + isHelpExpanded: reducer_SidePanels.isHelpExpanded, + isMainMenuExpanded: reducer_MainMenu.isMainMenuExpanded +}); + +const mapDispatchToProps = (dispatch) => + bindActionCreators( + { + toggleStatus, + toggleHelp, + toggleMainMenu + }, + dispatch + ); + +export default connect( + mapStateToProps, + mapDispatchToProps +)(Content); diff --git a/frontend/src/components/ExpandShrinkIcon.js b/frontend/src/components/ExpandShrinkIcon.js new file mode 100644 index 00000000..51a99c89 --- /dev/null +++ b/frontend/src/components/ExpandShrinkIcon.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { Icon } from './'; + +const chevronDirectionByShrinkTo = new Map([ + ['left', { shrink: 'chevron_left', expand: 'chevron_right' }], + ['right', { shrink: 'chevron_right', expand: 'chevron_left' }] +]); + +const getIconsNames = (shrinkTo) => chevronDirectionByShrinkTo.get(shrinkTo); + +export default function ExpandShrinkIcon({ shrinkTo, isExpanded, toggleIcon, onClick }) { + const iconName = toggleIcon || getIconsNames(shrinkTo)[isExpanded ? 'shrink' : 'expand']; + + return ( + + ); +} diff --git a/frontend/src/components/PageHelp.js b/frontend/src/components/PageHelp.js new file mode 100644 index 00000000..3c8f801c --- /dev/null +++ b/frontend/src/components/PageHelp.js @@ -0,0 +1,107 @@ +import React from 'react'; +import { Route, Switch } from 'react-router-dom'; +import Routes from '../routes'; + +const helpToPage = new Map([ + [ + 'root', + () => ( + + Learn about the TrueBlocks project, our organization, our philosopy towards decentralization, and our team. + + ) + ], + [ + 'addresses', + () => ( + + Monitors are per-address index caches that enable fast reteival of transaction histories for any account. Note + that the transactions/logs/receipts/traces are not downloaded until you explore an address. + + ), + ], + [ + 'explore', + () => ( + + The Explore module allows one to view the details of every transactions for each previously monitored address. + Because TrueBlocks runs on a local machine not a server, this means that you are restricted to exploring only + addresses that youve previously monitored. + + ), + ], + [ + 'indicies', + () => ( + + TrueBlocks index of appearances greatly speed up access to the Ethereum data; however, they take up a lot of + space on your hard drive, so you have to keep any eye on them. Clean them out periodically so they dont get too + big. + + ), + ], + [ + 'signatures', + () => ( + + TrueBlocks Signatures greatly speed up access to the Ethereum data; however, they take up a lot of space on your + hard drive, so you have to keep any eye on them. Clean them out periodically so they dont get too big. + + ), + ], + [ + 'caches', + () => ( + + TrueBlocks Caches greatly speed up access to the Ethereum data; however, they take up a lot of space on your + hard drive, so you have to keep any eye on them. Clean them out periodically so they dont get too big. + + ), + ], + [ + 'other', + () => ( + + The Other panel allows you to configure various other items related to TrueBlocks. This panel allows for many things including some other stuff. + + ), + ], + [ + 'settings', + () => ( + + Monitors are per-address index caches that enable fast retreival of appearance histories for any account. + + ), + ], + [ + 'support', + () => ( + + We provide various support options ranging from online email/forum discussions to full enterprise-level support + plans to suit your needs. Weve got you covered. + + ), + ], + [ + 'dashboard', + () => (), + ], +]); + +// Dashboard and root share the same help +helpToPage.set('dashboard', helpToPage.get('root')); + +export default function PageHelp() { + return ( + + {Routes.map((route, index) => ( + + ))} + + ); +} diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js index 87ac04f3..ed824cb9 100644 --- a/frontend/src/components/index.js +++ b/frontend/src/components/index.js @@ -11,6 +11,8 @@ import { SidePanel } from './panels/side-panel'; import StatusPanel from './panels/status'; import HelpPanel from './panels/help'; import TopScrollObserver from './top-scroll-observer'; +import PageHelp from './PageHelp'; +import ExpandShrinkIcon from './ExpandShrinkIcon'; export { Page, @@ -32,5 +34,7 @@ export { SidePanel, StatusPanel, HelpPanel, - TopScrollObserver + TopScrollObserver, + PageHelp, + ExpandShrinkIcon }; diff --git a/frontend/src/components/menus/main-menu/main-menu.jsx b/frontend/src/components/menus/main-menu/main-menu.jsx index 48bf14e9..82e5e1cd 100644 --- a/frontend/src/components/menus/main-menu/main-menu.jsx +++ b/frontend/src/components/menus/main-menu/main-menu.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; +import { ExpandShrinkIcon } from '../../'; import MenuItem from './menu-item'; import './main-menu.css'; @@ -37,8 +38,19 @@ export class MainMenu extends React.Component { }; render = () => { + const { isExpanded } = this.props; + const className = [ + 'left-body-container', + isExpanded ? 'expanded' : '' + ].join(' '); + return ( -
+
+ {this.state.mainMenu.map((menu, index) => { return ( ({ +const mapStateToProps = ({ router, reducer_MainMenu }, ownProps) => ({ location: router.location, - mainMenu: ownProps.mainMenu + mainMenu: ownProps.mainMenu, + isExpanded: ownProps.isExpanded, + toggle: ownProps.toggle }); -export const ConnectedMainMenu = connect(mapStateToProps)(MainMenu); +export const ConnectedMainMenu = connect( + mapStateToProps +)(MainMenu); diff --git a/frontend/src/components/menus/main-menu/reducer.js b/frontend/src/components/menus/main-menu/reducer.js new file mode 100644 index 00000000..70f042f1 --- /dev/null +++ b/frontend/src/components/menus/main-menu/reducer.js @@ -0,0 +1,14 @@ +export const MAIN_MENU_TOGGLE = 'mainMenu/TOGGLE'; + +const initialState = { + isMainMenuExpanded: true +}; + +export default function reducer_MainMenu(state = initialState, action) { + if (action.type !== MAIN_MENU_TOGGLE) return state; + + return { + ...state, + isMainMenuExpanded: !state.isMainMenuExpanded + }; +} diff --git a/frontend/src/components/page.jsx b/frontend/src/components/page.jsx index 93995340..4ccba713 100644 --- a/frontend/src/components/page.jsx +++ b/frontend/src/components/page.jsx @@ -1,7 +1,6 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; -import { StatusPanel } from './'; import logo from '../img/logo.png'; import discord from '../img/discord.svg'; import github from '../img/github.svg'; @@ -16,9 +15,7 @@ export class Page extends React.Component { render = () => { return ( - {this.props.inner} - {this.props.help} ); }; diff --git a/frontend/src/components/panels/help.jsx b/frontend/src/components/panels/help.jsx index f1cab992..1427e708 100644 --- a/frontend/src/components/panels/help.jsx +++ b/frontend/src/components/panels/help.jsx @@ -1,10 +1,5 @@ import React from 'react'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; import { SidePanel } from '../'; -import { HELP_TOGGLE } from './side-panel-actions'; - -const toggle = () => ({ type: HELP_TOGGLE }); export const HelpPanel = (props) => { const { isExpanded, toggle } = props; @@ -22,19 +17,4 @@ export const HelpPanel = (props) => { ); }; -const mapStateToProps = ({ reducer_SidePanels }) => ({ - isExpanded: reducer_SidePanels.isHelpExpanded -}); - -const mapDispatchToProps = (dispatch) => - bindActionCreators( - { - toggle - }, - dispatch - ); - -export default connect( - mapStateToProps, - mapDispatchToProps -)(HelpPanel); +export default HelpPanel; diff --git a/frontend/src/components/panels/side-panel.jsx b/frontend/src/components/panels/side-panel.jsx index 5f863eb8..bc6eb836 100644 --- a/frontend/src/components/panels/side-panel.jsx +++ b/frontend/src/components/panels/side-panel.jsx @@ -1,19 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Icon } from '../'; +import { ExpandShrinkIcon } from '../'; import './side-panel.css'; -const chevronDirectionByShrinkTo = new Map([ - ['left', { shrink: 'chevron_left', expand: 'chevron_right' }], - ['right', { shrink: 'chevron_right', expand: 'chevron_left' }] -]); - const getShrinkToClass = (shrinkTo) => `shrink-to-${shrinkTo}`; -const getIconsNames = (shrinkTo) => chevronDirectionByShrinkTo.get(shrinkTo); export const SidePanel = (props) => { const { isExpanded, onToggle, toggleIcon, shrinkTo } = props; - const toggleIconName = toggleIcon || getIconsNames(shrinkTo)[isExpanded ? 'shrink' : 'expand']; const shrinkedClass = isExpanded ? '' : 'shrinked'; const classes = `side-panel ${shrinkedClass} ${getShrinkToClass(props.shrinkTo)} ${props.className}`; @@ -21,7 +14,11 @@ export const SidePanel = (props) => {
{props.title} - +
{isExpanded ? props.children : null}
diff --git a/frontend/src/components/panels/status.jsx b/frontend/src/components/panels/status.jsx index fc7f9e1f..e29a0a90 100644 --- a/frontend/src/components/panels/status.jsx +++ b/frontend/src/components/panels/status.jsx @@ -1,13 +1,8 @@ import React from 'react'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; -import { STATUS_TOGGLE } from './side-panel-actions'; import { SidePanel } from './side-panel'; import StatusInner from './status-inner'; import './status.css'; -const toggle = () => ({ type: STATUS_TOGGLE }); - export const StatusPanel = (props) => { const { isExpanded, toggle } = props; @@ -18,19 +13,4 @@ export const StatusPanel = (props) => { ); }; -const mapStateToProps = ({ reducer_SidePanels }) => ({ - isExpanded: reducer_SidePanels.isStatusExpanded -}); - -const mapDispatchToProps = (dispatch) => - bindActionCreators( - { - toggle - }, - dispatch - ); - -export default connect( - mapStateToProps, - mapDispatchToProps -)(StatusPanel); +export default StatusPanel; diff --git a/frontend/src/pages/addresses/index.js b/frontend/src/pages/addresses/index.js index 4c637c43..b1ff8185 100644 --- a/frontend/src/pages/addresses/index.js +++ b/frontend/src/pages/addresses/index.js @@ -1,6 +1,5 @@ import React from 'react'; import { Page } from '../../components'; -import { HelpPanel } from '../../components'; import AddressesInner from './inner'; import { dispatcher_Addresses, addresses_menu } from './dispatchers'; import * as utils from '../../utils'; @@ -12,18 +11,9 @@ class Addresses extends React.Component { return ; }; - getHelp = () => { - return ( - - Monitors are per-address index caches that enable fast reteival of transaction histories for any account. Note \ - that the transactions/logs/receipts/traces are not downloaded until you explore an address. - - ); - }; - render = () => { - return ; + return ; }; } export default Addresses; -export { dispatcher_Addresses, addresses_menu }; \ No newline at end of file +export { dispatcher_Addresses, addresses_menu }; diff --git a/frontend/src/pages/caches/index.js b/frontend/src/pages/caches/index.js index 1488d42c..f0edd882 100644 --- a/frontend/src/pages/caches/index.js +++ b/frontend/src/pages/caches/index.js @@ -1,6 +1,5 @@ import React from 'react'; import { Page } from '../../components'; -import { HelpPanel } from '../../components'; import CachesInner from './inner'; import { dispatcher_Caches, caches_menu } from './dispatchers'; import * as utils from '../../utils'; @@ -12,18 +11,9 @@ class Caches extends React.Component { return ; }; - getHelp = () => { - return ( - - TrueBlocks Caches greatly speed up access to the Ethereum data; however, they take up a lot of space on your \ - hard drive, so you have to keep any eye on them. Clean them out periodically so they dont get too big. - - ); - }; - render = () => { - return ; + return ; }; } export default Caches; -export { dispatcher_Caches, caches_menu }; \ No newline at end of file +export { dispatcher_Caches, caches_menu }; diff --git a/frontend/src/pages/dashboard/index.js b/frontend/src/pages/dashboard/index.js index 8d8e97e4..5fc59215 100644 --- a/frontend/src/pages/dashboard/index.js +++ b/frontend/src/pages/dashboard/index.js @@ -1,6 +1,5 @@ import React from 'react'; import { Page } from '../../components'; -import { HelpPanel } from '../../components'; import DashboardInner from './inner'; import { dispatcher_Dashboard, dashboard_menu } from './dispatchers'; import * as utils from '../../utils'; @@ -12,17 +11,9 @@ class Dashboard extends React.Component { return ; }; - getHelp = () => { - return ( - - Learn about the TrubBlocks project, our organization, our philosopy towards decentralization, and our team. - - ); - }; - render = () => { - return ; + return ; }; } export default Dashboard; -export { dispatcher_Dashboard, dashboard_menu }; \ No newline at end of file +export { dispatcher_Dashboard, dashboard_menu }; diff --git a/frontend/src/pages/explore/index.js b/frontend/src/pages/explore/index.js index 62aabcbe..4bcbe403 100644 --- a/frontend/src/pages/explore/index.js +++ b/frontend/src/pages/explore/index.js @@ -1,6 +1,5 @@ import React from 'react'; import { Page } from '../../components'; -import { HelpPanel } from '../../components'; import ExploreInner from './inner'; import { dispatcher_Explore, explore_menu } from './dispatchers'; import * as utils from '../../utils'; @@ -12,19 +11,9 @@ class Explore extends React.Component { return ; }; - getHelp = () => { - return ( - - The Explore module allows one to view the details of every transactions for each previously monitored address. \ - Because TrueBlocks runs on a local machine not a server, this means that you are restricted to exploring only \ - addresses that youve previously monitored. - - ); - }; - render = () => { - return ; + return ; }; } export default Explore; -export { dispatcher_Explore, explore_menu }; \ No newline at end of file +export { dispatcher_Explore, explore_menu }; diff --git a/frontend/src/pages/indicies/index.js b/frontend/src/pages/indicies/index.js index 043bf7b0..24b660c2 100644 --- a/frontend/src/pages/indicies/index.js +++ b/frontend/src/pages/indicies/index.js @@ -1,6 +1,5 @@ import React from 'react'; import { Page } from '../../components'; -import { HelpPanel } from '../../components'; import IndiciesInner from './inner'; import { dispatcher_Indicies, indicies_menu } from './dispatchers'; import * as utils from '../../utils'; @@ -12,19 +11,9 @@ class Indicies extends React.Component { return ; }; - getHelp = () => { - return ( - - TrueBlocks index of appearances greatly speed up access to the Ethereum data; however, they take up a lot of \ - space on your hard drive, so you have to keep any eye on them. Clean them out periodically so they dont get too \ - big. - - ); - }; - render = () => { - return ; + return ; }; } export default Indicies; -export { dispatcher_Indicies, indicies_menu }; \ No newline at end of file +export { dispatcher_Indicies, indicies_menu }; diff --git a/frontend/src/pages/other/index.js b/frontend/src/pages/other/index.js index 61658404..bb608381 100644 --- a/frontend/src/pages/other/index.js +++ b/frontend/src/pages/other/index.js @@ -1,6 +1,5 @@ import React from 'react'; import { Page } from '../../components'; -import { HelpPanel } from '../../components'; import OtherInner from './inner'; import { dispatcher_Other, other_menu } from './dispatchers'; import * as utils from '../../utils'; @@ -12,17 +11,9 @@ class Other extends React.Component { return ; }; - getHelp = () => { - return ( - - The Other panel allows you to configure various other items related to TrueBlocks. This panel allows for many things including some other stuff. - - ); - }; - render = () => { - return ; + return ; }; } export default Other; -export { dispatcher_Other, other_menu }; \ No newline at end of file +export { dispatcher_Other, other_menu }; diff --git a/frontend/src/pages/settings/index.js b/frontend/src/pages/settings/index.js index 775afddf..9940a4d5 100644 --- a/frontend/src/pages/settings/index.js +++ b/frontend/src/pages/settings/index.js @@ -1,6 +1,5 @@ import React from 'react'; import { Page } from '../../components'; -import { HelpPanel } from '../../components'; import SettingsInner from './inner'; import { dispatcher_Settings, settings_menu } from './dispatchers'; import * as utils from '../../utils'; @@ -12,17 +11,9 @@ class Settings extends React.Component { return ; }; - getHelp = () => { - return ( - - Monitors are per-address index caches that enable fast retreival of appearance histories for any account. - - ); - }; - render = () => { - return ; + return ; }; } export default Settings; -export { dispatcher_Settings, settings_menu }; \ No newline at end of file +export { dispatcher_Settings, settings_menu }; diff --git a/frontend/src/pages/signatures/index.js b/frontend/src/pages/signatures/index.js index 6ae0e40d..b3e9068c 100644 --- a/frontend/src/pages/signatures/index.js +++ b/frontend/src/pages/signatures/index.js @@ -1,6 +1,5 @@ import React from 'react'; import { Page } from '../../components'; -import { HelpPanel } from '../../components'; import SignaturesInner from './inner'; import { dispatcher_Signatures, signatures_menu } from './dispatchers'; import * as utils from '../../utils'; @@ -12,18 +11,9 @@ class Signatures extends React.Component { return ; }; - getHelp = () => { - return ( - - TrueBlocks Signatures greatly speed up access to the Ethereum data; however, they take up a lot of space on your \ - hard drive, so you have to keep any eye on them. Clean them out periodically so they dont get too big. - - ); - }; - render = () => { - return ; + return ; }; } export default Signatures; -export { dispatcher_Signatures, signatures_menu }; \ No newline at end of file +export { dispatcher_Signatures, signatures_menu }; diff --git a/frontend/src/pages/support/index.js b/frontend/src/pages/support/index.js index 00879705..a687b3cf 100644 --- a/frontend/src/pages/support/index.js +++ b/frontend/src/pages/support/index.js @@ -1,6 +1,5 @@ import React from 'react'; import { Page } from '../../components'; -import { HelpPanel } from '../../components'; import SupportInner from './inner'; import { dispatcher_Support, support_menu } from './dispatchers'; import * as utils from '../../utils'; @@ -12,18 +11,9 @@ class Support extends React.Component { return ; }; - getHelp = () => { - return ( - - We provide various support options ranging from online email/forum discussions to full enterprise-level support \ - plans to suit your needs. Weve got you covered. - - ); - }; - render = () => { - return ; + return ; }; } export default Support; -export { dispatcher_Support, support_menu }; \ No newline at end of file +export { dispatcher_Support, support_menu }; diff --git a/frontend/src/pages/templates/blank-root-reducers.js b/frontend/src/pages/templates/blank-root-reducers.js index 2391aee1..3e2d33bf 100644 --- a/frontend/src/pages/templates/blank-root-reducers.js +++ b/frontend/src/pages/templates/blank-root-reducers.js @@ -4,11 +4,13 @@ import { combineReducers } from 'redux'; import reducer_Status from './components/panels/status-actions'; import reducer_SidePanels from './components/panels/side-panel-actions'; import reducer_LastLocation from './last-location-actions'; +import reducer_MainMenu from './components/menus/main-menu/reducer'; [{IMPORTS}] //------------------------------------------------------------------------ export default combineReducers({ reducer_Status, reducer_SidePanels, reducer_LastLocation, + reducer_MainMenu, [{REDUCERS}] }); diff --git a/frontend/src/root-reducers.js b/frontend/src/root-reducers.js index 2a34274d..6b99e84c 100644 --- a/frontend/src/root-reducers.js +++ b/frontend/src/root-reducers.js @@ -4,6 +4,7 @@ import { combineReducers } from 'redux'; import reducer_Status from './components/panels/status-actions'; import reducer_SidePanels from './components/panels/side-panel-actions'; import reducer_LastLocation from './last-location-actions'; +import reducer_MainMenu from './components/menus/main-menu/reducer'; import reducer_Dashboard from './pages/dashboard/reducers'; import reducer_Addresses from './pages/addresses/reducers'; import reducer_Explore from './pages/explore/reducers'; @@ -19,6 +20,7 @@ export default combineReducers({ reducer_Status, reducer_SidePanels, reducer_LastLocation, + reducer_MainMenu, reducer_Dashboard, reducer_Addresses, reducer_Explore, diff --git a/frontend/src/routes.js b/frontend/src/routes.js new file mode 100644 index 00000000..b775ba35 --- /dev/null +++ b/frontend/src/routes.js @@ -0,0 +1,66 @@ +import React from 'react'; +import Dashboard from './pages/dashboard'; +import Addresses from './pages/addresses'; +import Explore from './pages/explore'; +import Indicies from './pages/indicies'; +import Signatures from './pages/signatures'; +import Caches from './pages/caches'; +import Other from './pages/other'; +import Settings from './pages/settings'; +import Support from './pages/support'; + +export const routes = [ + { + name: 'root', + component: (routeProps) => (), + exact: true, + path: '/' + }, + { + name: 'addresses', + component: (routeProps) => (), + path: '/addresses/:subpage?/:query?' + }, + { + name: 'explore', + component: (routeProps) => (), + path: '/explore/:subpage?/:query?' + }, + { + name: 'indicies', + component: (routeProps) => (), + path:'/indicies/:subpage?/:query?' + }, + { + name: 'signatures', + component: (routeProps) => (), + path:'/signatures/:subpage?/:query?' + }, + { + name: 'caches', + component: (routeProps) => (), + path:'/caches/:subpage?/:query?' + }, + { + name: 'other', + component: (routeProps) => (), + path:'/other/:subpage?/:query?' + }, + { + name: 'settings', + component: (routeProps) => (), + path:'/settings/:subpage?/:query?' + }, + { + name: 'support', + component: (routeProps) => (), + path:'/support/:subpage?/:query?' + }, + { + name: 'dashboard', + component: (routeProps) => (), + path:'/dashboard/:subpage/:query?' + } +]; + +export default routes; diff --git a/frontend/src/store.js b/frontend/src/store.js index 8b814637..a6492a85 100644 --- a/frontend/src/store.js +++ b/frontend/src/store.js @@ -30,6 +30,7 @@ const store = createStore(connectRouter(history)(rootReducer), initialAppState, store.subscribe(() => { PersistentStore.saveState({ reducer_SidePanels: store.getState().reducer_SidePanels, + reducer_MainMenu: store.getState().reducer_MainMenu, reducer_LastLocation: store.getState().reducer_LastLocation }); });