beautified

client/assets/js/bubble.js

@@ -1,4 +1,4 @@
-var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
+let width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
 
 // Main
 export function bubble() {

client/assets/scss/Content.scss

@@ -2,15 +2,14 @@
     flex: 1;
     flex-wrap: wrap;
     min-width: 0;
-    .post + .post {
+    .post+ .post {
         margin-top: 2em;
     }
     .date {
         display: block;
         margin: 0;
         opacity: 0.7;
-
+        @media (min-width: 1200px) {
-        @media (min-width: 1200px){
             position: absolute;
             width: 7em;
             text-align: right;
@@ -29,7 +28,7 @@
     pre {
         white-space: pre-wrap;
     }
-    .btn{
+    .btn {
         width: 100%;
     }
 }

client/assets/scss/Sidebar.scss

@@ -33,7 +33,7 @@ $transitionDuration: 0.4s;
             &:before {
                 content: " ";
                 display: block;
-                background: rgba(0,0,0,0.4);
+                background: rgba(0, 0, 0, 0.4);
                 position: absolute;
                 height: 100%;
                 width: 100vw;

client/assets/scss/main.scss

@@ -1,14 +1,13 @@
 @import './utils.scss';
-
 $linkColor: #3598db;
 $backgroundColor: #FFFFFF;
-
 html {
     font-family: 'Roboto Slab', serif;
     max-width: 100%;
     overflow-x: hidden;
     overflow-y: scroll;
 }
+
 body {
     background-color: $backgroundColor;
     max-width: 100%;
@@ -17,6 +16,7 @@ body {
     -webkit-font-smoothing: subpixel-antialiased;
     font-weight: 300;
 }
+
 h1,
 h2,
 h3,
@@ -27,9 +27,11 @@ h6 {
     font-weight: 400;
     line-height: 1em;
 }
+
 p {
     font-weight: 300;
 }
+
 *,
 *:after,
 *:before {
@@ -37,6 +39,7 @@ p {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
+
 a {
     background-color: transparent;
     color: $linkColor;
@@ -45,11 +48,13 @@ a {
         color: $linkColor;
     }
 }
+
 hr {
     margin: 1em;
     border: 0;
     border-top: 1px solid #eee;
 }
+
 .Footer,
 .Main {
     display: flex;
@@ -61,9 +66,11 @@ hr {
         width: 1em;
     }
 }
+
 .Main {
     padding-top: 1em;
 }
+
 .Header {
     width: 100%;
     background: url("../images/header.jpg");
@@ -76,19 +83,20 @@ hr {
         text-align: center;
     }
 }
-.Loading{
+
+.Loading {
     display: flex;
     flex: 1;
     justify-content: center;
 }
-.btn{
+
+.btn {
     background-color: $backgroundColor;
     border: 1px solid #DADADA;
     border-radius: .2em;
     cursor: pointer;
     padding: .5em;
-    
+    &:hover {
-    &:hover{
         background-color: #F3F3F3;
     }
 }

client/js/app.js

@@ -13,22 +13,22 @@ import * as actions from './redux/actions';
 
 import Index from './pages/Index';
 
-class Main extends React.Component{
+class Main extends React.Component {
-    render(){
+    render() {
-        return(
+        return (
             <div>{React.cloneElement(this.props.children, this.props)}</div>
         );
     }
 }
 
-function mapStateToProps(state){
+function mapStateToProps(state) {
     return {
         redux: state.reducer
     }
 }
 
-function mapDispatchToProps(dispatch){
+function mapDispatchToProps(dispatch) {
-    return{
+    return {
         actions: bindActionCreators(actions, dispatch)
     }
 }
@@ -44,4 +44,4 @@ ReactDOM.render((
             </Route>
         </Router>
     </Provider>
-),document.getElementById('app'));
+), document.getElementById('app'));

client/js/components/Footer.js

@@ -2,10 +2,10 @@ import React from 'react';
 
 import '../../assets/scss/Footer.scss';
 
-export default class Footer extends React.Component{
+export default class Footer extends React.Component {
 
-  render(){
+  render() {
-    return(
+    return (
       <div class="Footer">
         Site created and maintained by Mitchell Gerber
       </div>

client/js/components/Header.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import {bubble} from '../../assets/js/bubble';
 
-export default class Header extends React.Component{
+export default class Header extends React.Component {
-  componentDidMount(){
+  componentDidMount() {
     bubble();
   }
 
-  render(){
+  render() {
-    return(
+    return (
       <header id="header" class="Header">
         <canvas id="canvas" width="854" height="709"></canvas>
       </header>

client/js/components/Post.js

@@ -1,7 +1,7 @@
+import hljs from 'highlight.js';
+import marked from 'marked';
 import React from 'react';
 import {Link} from 'react-router';
-import marked from 'marked';
-import hljs from 'highlight.js';
 
 import '../../assets/scss/Content.scss';
 
@@ -14,10 +14,10 @@ marked.setOptions({
   }
 });
 
-export default class Post extends React.Component{
+export default class Post extends React.Component {
 
-  render(){
+  render() {
-    return(
+    return (
       <div class="Content">
         <div dangerouslySetInnerHTML={{__html : marked(this.props.content, {renderer : renderer})}}>
         </div>

client/js/components/Preview.js

@@ -3,11 +3,11 @@ import {Link} from 'react-router';
 
 import '../../assets/scss/Content.scss';
 
-export default class Preview extends React.Component{
+export default class Preview extends React.Component {
 
-  insertPosts(posts){
+  insertPosts(posts) {
     let elements = [];
-    for (let i = 0; i < this.props.postLimit && i < posts.length; i++){
+    for (let i = 0; i < this.props.postLimit && i < posts.length; i++) {
       elements.push(
         <div class="post" key={i}>
           <div class="date">
@@ -27,7 +27,7 @@ export default class Preview extends React.Component{
     return elements;
   }
 
-  render(){
+  render() {
     const posts = this.props.posts;
 
     return (

client/js/components/Sidebar.js

@@ -7,9 +7,9 @@ import SensorList from './sensors/SensorList';
 import me from '../../assets/images/me.jpg';
 import '../../assets/scss/Sidebar.scss';
 
-export default class Sidebar extends React.Component{
+export default class Sidebar extends React.Component {
 
-  constructor(){
+  constructor() {
     super();
 
     this.state = {
@@ -19,7 +19,7 @@ export default class Sidebar extends React.Component{
     this.onToggle = this.onToggle.bind(this);
   }
 
-  onToggle(){
+  onToggle() {
     let temp = this.state.toggler;
     temp = temp === "open" ? "" : "open";
 
@@ -28,8 +28,8 @@ export default class Sidebar extends React.Component{
     });
   }
 
-  render(){
+  render() {
-    return(
+    return (
       <div class={"Sidebar " + this.state.toggler}>
         <a onClick={this.onToggle} class="toggler">
           <i

client/js/components/sensors/SensorList.js

@@ -3,21 +3,21 @@ import 'whatwg-fetch';
 
 export default class SensorList extends React.Component {
 
-  constructor(){
+  constructor() {
     super();
 
     this.state = {
-      sensors : {},
+      sensors: {},
       fetching: false,
       fetched: false
     }
   }
 
-  componentDidMount(){
+  componentDidMount() {
     this.loadSensorData();
   }
 
-  loadSensorData(){
+  loadSensorData() {
     this.setState({
       fetching: true
     });
@@ -49,7 +49,7 @@ export default class SensorList extends React.Component {
       </div>
     );
   }
-  render(){
+  render() {
     return (
       <div>
         {this.state.fetched ? this.state.sensors.map(this.insertSensorData) : null}

client/js/pages/Index.js

@@ -24,12 +24,12 @@ export default class Index extends React.Component {
   }
 
 
-    componentWillReceiveProps(nextProps){
+  componentWillReceiveProps(nextProps) {
-        if(this.props.params !== nextProps.params){
+    if (this.props.params !== nextProps.params) {
       const params = nextProps.params;
       this.page = params.page;
 
-            if(typeof params.post !== 'undefined' && typeof params.category !== 'undefined'){
+      if (typeof params.post !== 'undefined' && typeof params.category !== 'undefined') {
         this.props.actions.fetchPost(params.category, params.post);
       }
     }
@@ -41,7 +41,7 @@ export default class Index extends React.Component {
 
     return (
       <div>
-            <Header />
+            <Header/>
               <div class="Main">
                   {typeof this.page === 'undefined' && !fetching
                     ? <Preview posts={this.props.redux.preview.posts}
@@ -50,9 +50,9 @@ export default class Index extends React.Component {
                     : null}
                   {this.page === 'post' && !fetching ? <Post content={this.props.redux.post}/> : null}
                   {fetching ? loadingElement : null}
-                <Sidebar />
+                <Sidebar/>
               </div>
-            <Footer />
+            <Footer/>
           </div>
     );
   }

client/js/redux/actions.js

@@ -2,7 +2,7 @@ import * as types from "./constants";
 import marked from 'marked';
 import 'whatwg-fetch';
 
-export function increasePostLimit(){
+export function increasePostLimit() {
     return {
         type: types.INCREASE_POST_LIMIT
     }
@@ -15,15 +15,15 @@ function initPreview(posts) {
     }
 }
 
-function loadPost(post){
+function loadPost(post) {
     return {
         type: types.LOAD_POST,
         post
     }
 }
 
-function fetching(){
+function fetching() {
-    return{
+    return {
         type: types.FETCHING
     }
 }

client/js/redux/constants.js

@@ -1,6 +1,6 @@
 //constants
+export const INCREASE_POST_LIMIT = 'INCREASE_POST_LIMIT';
 export const INIT_PREVIEW = 'INIT_PREVIEW';
+export const FETCHING = 'FETCHING';
 export const FILTER_PREVIEW = 'FILTER_PREVIEW';
 export const LOAD_POST = 'LOAD_POST';
-export const FETCHING = 'FETCHING';
-export const INCREASE_POST_LIMIT = 'INCREASE_POST_LIMIT';

client/js/redux/reducers.js

@@ -1,10 +1,6 @@
 //just using one reducer - use combineReducers from redux to modularize things
-import {
+import {combineReducers} from 'redux';
-    combineReducers
+import {routerReducer} from 'react-router-redux';
-} from 'redux';
-import {
-    routerReducer
-} from 'react-router-redux';
 
 //import typs
 import * as types from './constants';
@@ -38,12 +34,12 @@ function reducer(state = defaultState, action) {
             });
         case types.FETCHING:
             return Object.assign({}, state, {
-                fetched : false,
+                fetched: false,
                 fetching: true
             });
         case types.INCREASE_POST_LIMIT:
             return Object.assign({}, state, {
-                postLimit : state.postLimit + 10
+                postLimit: state.postLimit + 10
             });
     }
 

client/js/redux/store.js

@@ -1,8 +1,8 @@
-import {applyMiddleware, createStore} from 'redux';
-import {syncHistoryWithStore} from 'react-router-redux';
-import {browserHistory} from 'react-router';
-import thunk from 'redux-thunk';
 import logger from 'redux-logger';
+import thunk from 'redux-thunk';
+import {applyMiddleware, createStore} from 'redux';
+import {browserHistory} from 'react-router';
+import {syncHistoryWithStore} from 'react-router-redux';
 
 import reducers from './reducers';