Changing filenames to use PascalCase for component files

frontend/src/Content.js

@@ -13,8 +13,8 @@ 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 { STATUS_TOGGLE, HELP_TOGGLE } from './components/SidePanel/reducers';
+import { MAIN_MENU_TOGGLE } from './components/MainMenu/reducers';
 import { MainMenu, StatusPanel, HelpPanel, PageHelp } from './components';
 import Routes from './routes';
 import './Content.css';
@@ -28,7 +28,7 @@ const mainMenu = [
   caches_menu,
   other_menu,
   settings_menu,
-  support_menu,
+  support_menu
 ];
 
 const toggleStatus = () => ({ type: STATUS_TOGGLE });

frontend/src/components/menus/dash-menu.jsx → frontend/src/components/DashMenu/DashMenu.jsx

@@ -1,6 +1,6 @@
 /*-----------------------------------------------------------------------------*/
 import React, { Fragment } from 'react';
-import './dash-menu.css';
+import './DashMenu.css';
 import * as ad from '../../pages/addresses/dispatchers';
 import * as ex from '../../pages/explore/dispatchers';
 import * as ind from '../../pages/indicies/dispatchers';

frontend/src/components/DashMenu/index.js

@@ -0,0 +1,2 @@
+import { DashMenu } from './DashMenu';
+export { DashMenu };

frontend/src/components/menus/main-menu/chevron.jsx → frontend/src/components/MainMenu/Chevron.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Icon } from '../../icon';
+import { Icon } from '../icon';
 
 //------------------------------------------------------------
-export default function Chevron ({ active }) {
+export default function Chevron({ active }) {
   return (
     <div>
       <Icon icon={active ? 'keyboard_arrow_down' : 'keyboard_arrow_right'} />
     </div>
   );
-};
+}

frontend/src/components/menus/main-menu/main-menu.jsx → frontend/src/components/MainMenu/MainMenu.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { ExpandShrinkIcon } from '../../';
+import { ExpandShrinkIcon } from '../';
 import MenuItem from './MenuItem';
-import './main-menu.css';
+import './MainMenu.css';
 
 /**
  * Check which main menu matches loaded page and returns its index
@@ -17,7 +17,7 @@ function getInitialActiveMenuIndex(pathname, menus) {
   return menus.findIndex((menu) => menu.page === pageToMatch);
 }
 
-export class MainMenu extends React.Component {
+class MainMenu extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -39,17 +39,12 @@ export class MainMenu extends React.Component {
 
   render = () => {
     const { isExpanded } = this.props;
-    const className = [
-      'left-body-container',
-      isExpanded ? 'expanded' : ''
-    ].join(' ');
+    const className = ['left-body-container', isExpanded ? 'expanded' : ''].join(' ');
 
     return (
       <div className={className}>
         <button className="toggle-button" onClick={this.props.toggle}>
-          <ExpandShrinkIcon
-            shrinkTo="left"
-            isExpanded={isExpanded} />
+          <ExpandShrinkIcon shrinkTo="left" isExpanded={isExpanded} />
         </button>
         {this.state.mainMenu.map((menu, index) => {
           return (
@@ -76,6 +71,4 @@ const mapStateToProps = ({ router, reducer_MainMenu }, ownProps) => ({
   toggle: ownProps.toggle
 });
 
-export const ConnectedMainMenu = connect(
-  mapStateToProps
-)(MainMenu);
+export default connect(mapStateToProps)(MainMenu);

frontend/src/components/menus/main-menu/MenuItem.jsx → frontend/src/components/MainMenu/MenuItem.jsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { NavLink } from 'react-router-dom';
 import SubmenuItem from './SubmenuItem';
-import Chevron from './chevron';
+import Chevron from './Chevron';
 
 export default function MenuItem({ id, active: mainMenuActive, page, items, onClick }) {
   const hasSubMenu = items && items.length > 0;

frontend/src/components/MainMenu/index.js

@@ -0,0 +1,2 @@
+import MainMenu from './MainMenu';
+export { MainMenu };

frontend/src/components/panels/side-panel.jsx → frontend/src/components/SidePanel/SidePanel.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ExpandShrinkIcon } from '../';
-import './side-panel.css';
+import './SidePanel.css';
 
 const getShrinkToClass = (shrinkTo) => `shrink-to-${shrinkTo}`;
 
@@ -14,11 +14,7 @@ export const SidePanel = (props) => {
     <div className={classes}>
       <div className="title">
         <span>{props.title}</span>
-        <ExpandShrinkIcon
-          shrinkTo={shrinkTo}
-          isExpanded={isExpanded}
-          toggleIcon={toggleIcon}
-          onClick={onToggle} />
+        <ExpandShrinkIcon shrinkTo={shrinkTo} isExpanded={isExpanded} toggleIcon={toggleIcon} onClick={onToggle} />
       </div>
       {isExpanded ? props.children : null}
     </div>

frontend/src/components/SidePanel/index.js

@@ -0,0 +1,2 @@
+import { SidePanel } from './SidePanel';
+export { SidePanel };

frontend/src/components/top-scroll-observer.jsx → frontend/src/components/TopScrollObserver.jsx

@@ -1,21 +1,19 @@
 import React from 'react';
 
-export default class TopScrollObserver extends React.Component {
+export class TopScrollObserver extends React.Component {
   constructor(props) {
     super(props);
 
     this.targetRef = React.createRef();
-    this.observer = new IntersectionObserver(entries => {
-      const [ firstEntry ] = entries;
+    this.observer = new IntersectionObserver((entries) => {
+      const [firstEntry] = entries;
 
       props.onTopScroll(firstEntry.intersectionRatio < 1);
     });
   }
 
   render() {
-    return (
-      <div ref={this.targetRef}></div>
-    );
+    return <div ref={this.targetRef}></div>;
   }
 
   componentDidMount() {

frontend/src/components/breadcrumb.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 
-function BreadCrumb({ page, menu }) {
+export function BreadCrumb({ page, menu }) {
   var text = menu ? page + ' : ' + menu.subpage.replace('_', ' ') : page;
   return <div className="title inner-page">{text}</div>;
 }
-
-export default BreadCrumb;

frontend/src/components/data-tables/old-data-table.js

@@ -1,7 +1,7 @@
 //----------------------------------------------------------------------
 import React, { Fragment } from 'react';
 import './old-data-table.css';
-import Identicon from '../identicons';
+import Identicon from './identicons';
 import { Icon } from '../icon';
 var Utils = require('../../utils');
 

frontend/src/components/index.js

@@ -1,16 +1,17 @@
-import { Page, PageHeader, PageFooter } from './page';
+import { Page, PageHeader, PageFooter } from './Page';
 import { DataTable } from './data-tables';
 import { OldDataTable } from './data-tables/old-data-table';
 import { ObjectTable } from './data-tables/object-data-table';
 import { Icon } from './icon';
 import { Loading } from './loading';
 import { isReady, isError, NotReady, isEmpty, EmptyQuery } from './not-ready';
-import BreadCrumb from './breadcrumb';
-import { MainMenu, DashMenu } from './menus';
-import { SidePanel } from './panels/side-panel';
+import { BreadCrumb } from './BreadCrumb';
+import { DashMenu } from './DashMenu';
+import { TopScrollObserver } from './TopScrollObserver';
+import { MainMenu } from './MainMenu';
+import { SidePanel } from './SidePanel';
 import StatusPanel from './panels/status';
 import HelpPanel from './panels/help';
-import TopScrollObserver from './top-scroll-observer';
 import PageHelp from './PageHelp';
 import ExpandShrinkIcon from './ExpandShrinkIcon';
 

frontend/src/components/page.jsx

@@ -8,16 +8,12 @@ import medium from '../img/medium.svg';
 import twitter from '../img/twitter.svg';
 // import facebook from '../img/facebook.svg';
 // import linkedin from '../img/linkedin.svg';
-import './page.css';
+import './Page.css';
 
 //----------------------------------------------------------------------
 export class Page extends React.Component {
   render = () => {
-    return (
-      <Fragment>
-        {this.props.inner}
-      </Fragment>
-    );
+    return <Fragment>{this.props.inner}</Fragment>;
   };
 
   static propTypes = {
@@ -27,10 +23,7 @@ export class Page extends React.Component {
 
 //------------------------------------------------------------
 export function PageHeader({ small }) {
-  const className = [
-    'header-item',
-    (small ? 'small' : '')
-  ].join(' ');
+  const className = ['header-item', small ? 'small' : ''].join(' ');
 
   return (
     <div className={className}>

frontend/src/components/panels/status.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SidePanel } from './side-panel';
+import { SidePanel } from '../SidePanel';
 import StatusInner from './status-inner';
 import './status.css';
 

frontend/src/pages/templates/blank-content.js

@@ -3,15 +3,14 @@ import { Route } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-[{IMPORTS1}]
-import { STATUS_TOGGLE, HELP_TOGGLE } from './components/panels/side-panel-actions';
-import { MAIN_MENU_TOGGLE } from './components/menus/main-menu/reducer';
+[{ IMPORTS1 }];
+import { STATUS_TOGGLE, HELP_TOGGLE } from './components/SidePanel/reducers';
+import { MAIN_MENU_TOGGLE } from './components/MainMenu/reducers';
 import { MainMenu, StatusPanel, HelpPanel, PageHelp } from './components';
 import Routes from './routes';
 import './Content.css';
 
-const mainMenu = [
-[{NAVLINKS}]];
+const mainMenu = [[{ NAVLINKS }]];
 
 const toggleStatus = () => ({ type: STATUS_TOGGLE });
 const toggleHelp = () => ({ type: HELP_TOGGLE });

frontend/src/pages/templates/blank-root-reducers.js

@@ -2,9 +2,9 @@ import { combineReducers } from 'redux';
 
 //------------------------------------------------------------------------
 import reducer_Status from './components/panels/status-actions';
-import reducer_SidePanels from './components/panels/side-panel-actions';
+import reducer_SidePanels from './components/SidePanel/reducers';
 import reducer_LastLocation from './last-location-actions';
-import reducer_MainMenu from './components/menus/main-menu/reducer';
+import reducer_MainMenu from './components/MainMenu/reducers';
 [{REDIMPORTS}]
 //------------------------------------------------------------------------
 export default combineReducers({

frontend/src/root-reducers.js

@@ -2,9 +2,9 @@ import { combineReducers } from 'redux';
 
 //------------------------------------------------------------------------
 import reducer_Status from './components/panels/status-actions';
-import reducer_SidePanels from './components/panels/side-panel-actions';
+import reducer_SidePanels from './components/SidePanel/reducers';
 import reducer_LastLocation from './last-location-actions';
-import reducer_MainMenu from './components/menus/main-menu/reducer';
+import reducer_MainMenu from './components/MainMenu/reducers';
 import reducer_Dashboard from './pages/dashboard/reducers';
 import reducer_Addresses from './pages/addresses/reducers';
 import reducer_Explore from './pages/explore/reducers';