Merge pull request #1025 from knod/clean-style-5

Cleans code style of '/src/components' through 'Surrounder`. #1018
codeforboston · Nov 28, 2018 · 15a2a67 · 15a2a67
2 parents a9c32ce + ae5e48b
commit 15a2a67
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 34 deletions.
diff --git a/src/components/MainMenu.js b/src/components/MainMenu.js
@@ -11,30 +11,30 @@ const MainMenu = function ({ translations }) {
  <Menu
  inverted
  secondary
- size='large'>
+ size = { `large` }>
 
  <Menu.Item>
  <Link
- className="main-nav"
- to="/">
+ className = { `main-nav` }
+ to = { `/` }>
  { translations.i_homeNav }
  </Link>
  </Menu.Item>
  <Menu.Item>
  <Link
- className="main-nav"
- to="/about">
+ className = { `main-nav` }
+ to = { `/about` }>
  { translations.i_aboutNav }
  </Link>
  </Menu.Item>
  <Menu.Item>{ translations.i_githubNav }</Menu.Item>
- <Menu.Item position='right'>
+ <Menu.Item position={ `right` }>
  {/*<Link to="/login"><Button inverted>Log in</Button></Link>*/}
  {/*<Button as='a' inverted style={{ marginLeft: '0.5em' }}>Sign Up</Button>*/}
  </Menu.Item>
  </Menu>
  );
-}; // End MainMenu(<>)
+}; // Ends <MainMenu>
 
 
 export { MainMenu };
diff --git a/src/components/PageLayout.js b/src/components/PageLayout.js
@@ -4,28 +4,32 @@ import {
  Segment,
 } from 'semantic-ui-react';
 
-const PageLayout = (props) => {
+
+const PageLayout = ({ children }) => {
  return (
  <div>
  <Segment
- className="pl-segment"
+ className = { `pl-segment` }
  vertical>
  <Grid
  container
  stackable
- verticalAlign='middle'>
+ verticalAlign = { `middle` }>
  <Grid.Row>
  <Grid.Column width={ 10 }>
- {props.children}
+
+ { children }
+
  </Grid.Column>
  <Grid.Column
- floated='right'
- width={ 6 } />
+ floated = { `right` }
+ width = { 6 } />
  </Grid.Row>
  </Grid>
  </Segment>
  </div>
  );
 };
 
+
 export { PageLayout };
diff --git a/src/components/StepBar.js b/src/components/StepBar.js
@@ -3,25 +3,29 @@ import { Step } from 'semantic-ui-react';
 
 import { STEP_VALS } from '../forms/STEP_VALS';
 
+
 const StepBar = ({ currentStepKey, goToStep, translations }) => {
 
  let cleanSteps = [];
 
  STEP_VALS.forEach((step, index) => {
  let newStep = { title: { content: translations[ `i_` + step.key ] }};
- newStep.active = step.key === currentStepKey;
- newStep.onClick = (e) => {
-  goToStep({ key: step.key });
- };
- newStep.key = index;
+
+ newStep.active = step.key === currentStepKey;
+ newStep.onClick = function (event) { goToStep({ key: step.key }); };
+ newStep.key = index;
+
  cleanSteps[ index ] = newStep;
  });
 
- return (<Step.Group
- className='six'
- size='mini'
- ordered
- items={ cleanSteps } />);
+ return (
+ <Step.Group
+ className = { `six` }
+ size = { `mini` }
+ items = { cleanSteps }
+ ordered />
+ );
 };
 
-export default StepBar;
+
+export { StepBar };
diff --git a/src/components/Surrounder.js b/src/components/Surrounder.js
@@ -6,26 +6,26 @@ const Surrounder = function ({ Top, Left, Right, Bottom, children }) {
  let contents = { top: null, left: null, right: null, bottom: null };
 
  if (Top) {
- contents.top = (<div className = { `top horizontal` } >{ Top }</div>);
+ contents.top = (<div className={ `top horizontal` }>{ Top }</div>);
  }
  if (Left) {
- contents.left = (<div className = { `left vertical` } >{ Left }</div>);
+ contents.left = (<div className={ `left vertical` }>{ Left }</div>);
  }
  if (Right) {
- contents.right = (<div className = { `right vertical` } >{ Right }</div>);
+ contents.right = (<div className={ `right vertical` }>{ Right }</div>);
  }
  if (Bottom) {
- contents.bottom = (<div className = { `bottom horizontal` } >{ Bottom }</div>);
+ contents.bottom = (<div className={ `bottom horizontal` }>{ Bottom }</div>);
  }
 
  return (
- <div className = { `surrounder` }>
+ <div className={ `surrounder` }>
  { contents.top }
 
- <div className = { `middle horizontal` } >
+ <div className={ `middle horizontal` }>
  { contents.left }
 
- <div className = { `center horizontal content` } >
+ <div className={ `center horizontal content` }>
  { children }
  </div>
 
@@ -36,7 +36,7 @@ const Surrounder = function ({ Top, Left, Right, Bottom, children }) {
  </div>
  );
 
-}; // End <Surrounder>
+}; // Ends <Surrounder>
 
 
 export { Surrounder };
diff --git a/src/containers/VisitPage.js b/src/containers/VisitPage.js
@@ -23,7 +23,7 @@ import ErrorListener from '../components/prompts/ErrorListener';
 import FeedbackPrompt from '../components/prompts/FeedbackPrompt';
 import FeedbackForm from '../components/prompts/FeedbackForm';
 import { FeedbackAnytime } from '../components/prompts/FeedbackAnytime';
-import StepBar from '../components/StepBar';
+import { StepBar } from '../components/StepBar';
 import { BigButton } from '../forms/inputs';
 import { ButtonReset } from '../forms/ButtonReset';
 import PredictionsWarning from '../components/prompts/PredictionsWarning';

diff --git a/src/test/components/StepBar.test.js b/src/test/components/StepBar.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import StepBar from '../../components/StepBar';
+import { StepBar } from '../../components/StepBar';
 import { STEP_VALS } from '../../forms/STEP_VALS';
 import { translations } from '../helpers';