Fix linting issues.
This commit is contained in:
parent
96ba089d89
commit
3e8190537e
|
@ -63,8 +63,8 @@
|
|||
"react/jsx-filename-extension": 0,
|
||||
"react/jsx-equals-spacing": 1,
|
||||
"react/jsx-handler-names": 1,
|
||||
"react/jsx-indent-props": 1,
|
||||
"react/jsx-indent": 1,
|
||||
"react/jsx-indent-props": [1, 2],
|
||||
"react/jsx-indent": [1, 2],
|
||||
"react/jsx-key": 1,
|
||||
"react/jsx-max-props-per-line": 0,
|
||||
"react/jsx-no-bind": 1,
|
||||
|
|
|
@ -35,34 +35,34 @@ class App extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Container>
|
||||
{/*TODO Extract as header container.*/}
|
||||
<Row className="justify-content-around">
|
||||
<Col lg="4">
|
||||
<ConnectedUserLogin />
|
||||
</Col>
|
||||
<Col lg="4">
|
||||
<ConnectedThemeSwitchView />
|
||||
</Col>
|
||||
</Row>
|
||||
<Container>
|
||||
{/*TODO Extract as header container.*/}
|
||||
<Row className="justify-content-around">
|
||||
<Col lg="4">
|
||||
<ConnectedUserLogin />
|
||||
</Col>
|
||||
<Col lg="4">
|
||||
<ConnectedThemeSwitchView />
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/*TODO Extract as site header container.*/}
|
||||
<SiteHeader siteName={ this.props.siteName } logo={ this.props.logo } tagline={ this.props.tagline } />
|
||||
{/*TODO Extract as site header container.*/}
|
||||
<SiteHeader siteName={ this.props.siteName } logo={ this.props.logo } tagline={ this.props.tagline } />
|
||||
|
||||
{/*TODO Extract as Main body and navigation sidebar containers.*/}
|
||||
<Row className="justify-content-center">
|
||||
<ConnectedNavigationMenu />
|
||||
<Col lg="8" className="ice-floe">
|
||||
<Switch>
|
||||
<Route exact path="/" component={ ConnectedArticle } />
|
||||
<Route path="/:pageId" component={ ConnectedArticle } />
|
||||
</Switch>
|
||||
</Col>
|
||||
</Row>
|
||||
{/*TODO Extract as Main body and navigation sidebar containers.*/}
|
||||
<Row className="justify-content-center">
|
||||
<ConnectedNavigationMenu />
|
||||
<Col lg="8" className="ice-floe">
|
||||
<Switch>
|
||||
<Route exact path="/" component={ ConnectedArticle } />
|
||||
<Route path="/:pageId" component={ ConnectedArticle } />
|
||||
</Switch>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/*TODO Extract as site footer container.*/}
|
||||
<SiteFooter footer={ this.props.footer } />
|
||||
</Container>
|
||||
{/*TODO Extract as site footer container.*/}
|
||||
<SiteFooter footer={ this.props.footer } />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
10
src/entry.js
10
src/entry.js
|
@ -24,11 +24,11 @@ const location = window.location.pathname.substring(1);
|
|||
appStore.dispatch(fetchPage(location));
|
||||
|
||||
const RookeriesWiredApp = (
|
||||
<Provider store={ appStore }>
|
||||
<BrowserRouter>
|
||||
<WiredApp />
|
||||
</BrowserRouter>
|
||||
</Provider>
|
||||
<Provider store={ appStore }>
|
||||
<BrowserRouter>
|
||||
<WiredApp />
|
||||
</BrowserRouter>
|
||||
</Provider>
|
||||
);
|
||||
|
||||
render(RookeriesWiredApp, document.getElementById("ui-target"));
|
||||
|
|
|
@ -24,11 +24,11 @@ export function renderReactComponentsToString() {
|
|||
const context = {};
|
||||
return {
|
||||
bodyContent: render(h(
|
||||
<Provider store={ serverSideStore }>
|
||||
<StaticRouter location={ url } context={ context }>
|
||||
<WiredApp />
|
||||
</StaticRouter>
|
||||
</Provider>
|
||||
<Provider store={ serverSideStore }>
|
||||
<StaticRouter location={ url } context={ context }>
|
||||
<WiredApp />
|
||||
</StaticRouter>
|
||||
</Provider>
|
||||
))
|
||||
};
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@ import PropTypes from "prop-types";
|
|||
see issue https://github.com/JedWatson/react-codemirror/issues/34
|
||||
Also add in the themes in the CSS to get proper theming support.
|
||||
*/
|
||||
import CodeMirror from "react-codemirror";
|
||||
import CodeMirror from "react-codemirror2";
|
||||
// TODO: Figure out how to work around this import.
|
||||
|
||||
// Workaround for rendering CodeMirror server-side
|
||||
|
|
|
@ -146,22 +146,22 @@ export class JournalMarkdownView extends Component {
|
|||
|
||||
// # TODO Factor the view into something nicer.
|
||||
let showEditorButton = (
|
||||
<Button onClick={ this.handleToggleEditorPane }>
|
||||
<FontAwesome name="edit"/> Edit
|
||||
</Button>
|
||||
<Button onClick={ this.handleToggleEditorPane }>
|
||||
<FontAwesome name="edit"/> Edit
|
||||
</Button>
|
||||
);
|
||||
|
||||
// # TODO Add in ability to display mhessages outside the collapsible pane
|
||||
let showPanel = (
|
||||
<Collapse isOpen={ this.isEditorPaneOpen() }>
|
||||
<CodeMirror
|
||||
autoFocus="true"
|
||||
value={ code }
|
||||
onChange={ this.handleUpdateCode }
|
||||
options={{ mode: "markdown", theme: this.props.editorTheme }} />
|
||||
<Button onClick={ this.handleSaveContent }><FontAwesome name="save"/> Save </Button>
|
||||
<Button onClick={ this.handleResetContent }><FontAwesome name="undo"/> Reset </Button>
|
||||
</Collapse>
|
||||
<Collapse isOpen={ this.isEditorPaneOpen() }>
|
||||
<CodeMirror
|
||||
autoFocus="true"
|
||||
value={ code }
|
||||
onChange={ this.handleUpdateCode }
|
||||
options={{ mode: "markdown", theme: this.props.editorTheme }} />
|
||||
<Button onClick={ this.handleSaveContent }><FontAwesome name="save"/> Save </Button>
|
||||
<Button onClick={ this.handleResetContent }><FontAwesome name="undo"/> Reset </Button>
|
||||
</Collapse>
|
||||
);
|
||||
if (this.state.editorPaneState === EditorPaneState.hidden) {
|
||||
showEditorButton = (<div />);
|
||||
|
@ -169,12 +169,12 @@ export class JournalMarkdownView extends Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>{ this.props.title }</h1>
|
||||
<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />
|
||||
{ showEditorButton }
|
||||
{ showPanel }
|
||||
</div>
|
||||
<div>
|
||||
<h1>{ this.props.title }</h1>
|
||||
<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />
|
||||
{ showEditorButton }
|
||||
{ showPanel }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -25,11 +25,11 @@ class NavigationMenuItem extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<NavItem>
|
||||
<NavLink>
|
||||
<Link to={ this.props.url }>{ this.props.title }</Link>
|
||||
</NavLink>
|
||||
</NavItem>);
|
||||
<NavItem>
|
||||
<NavLink>
|
||||
<Link to={ this.props.url }>{ this.props.title }</Link>
|
||||
</NavLink>
|
||||
</NavItem>);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -52,17 +52,17 @@ class NavigationMenu extends Component {
|
|||
let menuId = `${menuItem.title.toLowerCase()}_${menuItem.url.substring(1, menuItem.url.length)}`;
|
||||
// TODO Fix API for application menu.
|
||||
let menu = (
|
||||
<NavigationMenuItem key={ menuId } title={ menuItem.title } url={ menuItem.url }/>
|
||||
<NavigationMenuItem key={ menuId } title={ menuItem.title } url={ menuItem.url }/>
|
||||
);
|
||||
navigationMenuItems.push(menu);
|
||||
}
|
||||
|
||||
return (
|
||||
<Col lg="3">
|
||||
<Nav pills vertical className="ice-menu">
|
||||
{ navigationMenuItems }
|
||||
</Nav>
|
||||
</Col>
|
||||
<Col lg="3">
|
||||
<Nav pills vertical className="ice-menu">
|
||||
{ navigationMenuItems }
|
||||
</Nav>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -22,11 +22,11 @@ export class SiteFooter extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Row className="justify-content-end">
|
||||
<Col lg="8">
|
||||
<footer>{ this.props.footer }</footer>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="justify-content-end">
|
||||
<Col lg="8">
|
||||
<footer>{ this.props.footer }</footer>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -24,20 +24,20 @@ export class SiteHeader extends Component {
|
|||
render() {
|
||||
let headerLogoAltText = `${this.props.siteName} logo`;
|
||||
return (
|
||||
<Row className="justify-content-around">
|
||||
<Col lg="11">
|
||||
<Row className="sea-header justify-content-center align-items-center">
|
||||
<Col lg="2">
|
||||
<img className="header_logo" src={ this.props.logo } alt={ headerLogoAltText }/>
|
||||
</Col>
|
||||
<Col lg="4">
|
||||
<h1 className="header_title">{ this.props.siteName }</h1>
|
||||
|
||||
<h2 className="header_tagline">{ this.props.tagline }</h2>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="justify-content-around">
|
||||
<Col lg="11">
|
||||
<Row className="sea-header justify-content-center align-items-center">
|
||||
<Col lg="2">
|
||||
<img className="header_logo" src={ this.props.logo } alt={ headerLogoAltText }/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Col lg="4">
|
||||
<h1 className="header_title">{ this.props.siteName }</h1>
|
||||
|
||||
<h2 className="header_tagline">{ this.props.tagline }</h2>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -31,10 +31,10 @@ export class ThemeSwitchView extends Component {
|
|||
render() {
|
||||
let changeThemeText = `Change to ${this.props.alternativeTheme} theme`;
|
||||
return (
|
||||
<div className="text-center muted hoverable" onClick={ this.handleSwitchTheme }>
|
||||
<FontAwesome name="eye" />
|
||||
{ changeThemeText }
|
||||
</div>
|
||||
<div className="text-center muted hoverable" onClick={ this.handleSwitchTheme }>
|
||||
<FontAwesome name="eye" />
|
||||
{ changeThemeText }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -116,9 +116,9 @@ export class UserLoginView extends Component {
|
|||
let loginButtonDisabled = this.state.username === "" || this.state.password === "";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="text-center muted hoverable" onClick={ loginOperation }>
|
||||
<FontAwesome name="user"/>
|
||||
<div>
|
||||
<div className="text-center muted hoverable" onClick={ loginOperation }>
|
||||
<FontAwesome name="user"/>
|
||||
|
||||
Hello { this.props.fullName }!
|
||||
 
|
||||
|
@ -126,41 +126,41 @@ export class UserLoginView extends Component {
|
|||
|
||||
Do you want to { loginMessage }?
|
||||
</div>
|
||||
<Modal isOpen={ this.state.displayLoginModal } toggle={ this.handleHideLoginModal } onKeyPress={ this.handleKeyboardLogin }>
|
||||
<ModalHeader toggle={ this.handleHideLoginModal }>
|
||||
<Modal isOpen={ this.state.displayLoginModal } toggle={ this.handleHideLoginModal } onKeyPress={ this.handleKeyboardLogin }>
|
||||
<ModalHeader toggle={ this.handleHideLoginModal }>
|
||||
User Login
|
||||
</ModalHeader>
|
||||
|
||||
<ModalBody>
|
||||
{errorDisplay}
|
||||
<Form horizontal>
|
||||
<FormGroup row>
|
||||
<Col xs="2">
|
||||
<Label for="username">Username</Label>
|
||||
</Col>
|
||||
<Col xs="10" >
|
||||
<Input id="username" type="text" placeholder="Username"
|
||||
value={ this.state.username } onChange={ this.handleUsernameUpdate } />
|
||||
</Col>
|
||||
</FormGroup>
|
||||
<FormGroup row>
|
||||
<Col xs="2">
|
||||
<Label for="password">Password</Label>
|
||||
</Col>
|
||||
<Col xs="10">
|
||||
<Input id="password" type="password" placeholder="***"
|
||||
value={ this.state.password } onChange={ this.handlePasswordUpdate } />
|
||||
</Col>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</ModalBody>
|
||||
<ModalBody>
|
||||
{errorDisplay}
|
||||
<Form horizontal>
|
||||
<FormGroup row>
|
||||
<Col xs="2">
|
||||
<Label for="username">Username</Label>
|
||||
</Col>
|
||||
<Col xs="10" >
|
||||
<Input id="username" type="text" placeholder="Username"
|
||||
value={ this.state.username } onChange={ this.handleUsernameUpdate } />
|
||||
</Col>
|
||||
</FormGroup>
|
||||
<FormGroup row>
|
||||
<Col xs="2">
|
||||
<Label for="password">Password</Label>
|
||||
</Col>
|
||||
<Col xs="10">
|
||||
<Input id="password" type="password" placeholder="***"
|
||||
value={ this.state.password } onChange={ this.handlePasswordUpdate } />
|
||||
</Col>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<Button color="warning" onClick={ this.handleHideLoginModal }>Cancel</Button>
|
||||
<Button color="primary" onClick={ this.handleLoginAttempt } disabled={ loginButtonDisabled }>Login</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
</div>
|
||||
<ModalFooter>
|
||||
<Button color="warning" onClick={ this.handleHideLoginModal }>Cancel</Button>
|
||||
<Button color="primary" onClick={ this.handleLoginAttempt } disabled={ loginButtonDisabled }>Login</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue