Apply javascript formatting

src/newsreader/js/components/NavList.js

@@ -11,7 +11,9 @@ class NavList extends React.Component {
       );
     });
 
-    const className = this.props.includeBorder ? "nav-list nav-list--bordered": "nav-list";
+    const className = this.props.includeBorder
+      ? 'nav-list nav-list--bordered'
+      : 'nav-list';
 
     return <ol className={className}>{links}</ol>;
   }

src/newsreader/js/components/Sidebar.js

@@ -8,8 +8,10 @@ class Sidebar extends React.Component {
     return (
       <div className="sidebar">
         <div className="sidebar__nav">
-
+          <NavList
-          <NavList navLinks={this.props.navLinks} includeBorder={this.props.includeBorder} />
+            navLinks={this.props.navLinks}
+            includeBorder={this.props.includeBorder}
+          />
 
           {this.props.children}
         </div>

src/newsreader/js/pages/default/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import ReactDOM from "react-dom";
+import ReactDOM from 'react-dom';
 
-import Sidebar from "../../components/Sidebar";
+import Sidebar from '../../components/Sidebar';
 
 const mainElements = [...document.getElementsByClassName('main')];
 const mainElement = mainElements.find(element => element.dataset.renderSidebar);
@@ -11,10 +11,7 @@ if (mainElement) {
   let navLinks = JSON.parse(linkScript.textContent);
 
   ReactDOM.render(
-    ReactDOM.createPortal(
+    ReactDOM.createPortal(<Sidebar navLinks={navLinks} />, mainElement),
-      <Sidebar navLinks={navLinks} />,
-      mainElement
-    ),
     document.createElement('div')
   );
 }

src/newsreader/js/pages/homepage/App.js

@@ -13,12 +13,12 @@ import PostModal from './components/PostModal.js';
 import Messages from '../../components/Messages.js';
 
 class App extends React.Component {
-  state = { postListNode: null }
+  state = { postListNode: null };
 
   constructor(props) {
     super(props);
 
-    this.postListRef = node =>  {
+    this.postListRef = node => {
       this.setState({ postListNode: node });
     };
   }
@@ -65,7 +65,7 @@ class App extends React.Component {
 
 const mapStateToProps = state => {
   const { error } = state.error;
-  const postsByType = filterPosts(state)
+  const postsByType = filterPosts(state);
 
   if (!isEqual(state.selected.post, {})) {
     const ruleId = state.selected.post.rule.id;
@@ -83,7 +83,7 @@ const mapStateToProps = state => {
     };
   }
 
-  return { error, post: state.selected.post, postsByType: postsByType, };
+  return { error, post: state.selected.post, postsByType: postsByType };
 };
 
 const mapDispatchToProps = dispatch => ({

src/newsreader/js/pages/homepage/components/PostModal.js

@@ -47,7 +47,9 @@ class PostModal extends React.Component {
     const titleClassName = post.read ? 'post__title post__title--read' : 'post__title';
     const readButtonDisabled =
       post.read || this.props.isUpdating || this.props.selectedType === SAVED_TYPE;
-    const savedIconClass = post.saved ? 'post__save post__save--saved saved-icon saved-icon--saved' : 'post__save saved-icon';
+    const savedIconClass = post.saved
+      ? 'post__save post__save--saved saved-icon saved-icon--saved'
+      : 'post__save saved-icon';
 
     let ruleUrl = '';
 
@@ -68,7 +70,7 @@ class PostModal extends React.Component {
               <div className="post__actions">
                 <button
                   className={`button read-button ${readButtonDisabled &&
-'button--disabled'}`}
+                    'button--disabled'}`}
                   onClick={() =>
                     !readButtonDisabled && this.props.markPostRead(post, token)
                   }
@@ -92,7 +94,10 @@ class PostModal extends React.Component {
 
                   <div className="post__buttons">
                     {this.props.category && (
-                      <span className="badge post__category" title={this.props.category.name}>
+                      <span
+                        className="badge post__category"
+                        title={this.props.category.name}
+                      >
                         <a
                           href={`${this.props.categoriesUrl}/${this.props.category.id}/`}
                           target="_blank"

src/newsreader/js/pages/homepage/components/ScrollTop.js

@@ -3,10 +3,10 @@ import React from 'react';
 export default class ScrollTop extends React.Component {
   scrollListener = ::this.scrollListener;
 
-  state = { 
+  state = {
     listenerAttached: false,
     showTop: false,
-    showBottom: false 
+    showBottom: false,
   };
 
   componentDidUpdate() {
@@ -19,9 +19,8 @@ export default class ScrollTop extends React.Component {
 
   scrollListener() {
     const postList = this.props.postListNode;
-    const elementEnd = (
+    const elementEnd =
-      postList.scrollTop + postList.offsetHeight>= postList.scrollHeight
+      postList.scrollTop + postList.offsetHeight >= postList.scrollHeight;
-    );
 
     this.setState({
       showTop: postList.scrollTop > window.innerHeight,
@@ -32,22 +31,24 @@ export default class ScrollTop extends React.Component {
   render() {
     const postList = this.props.postListNode;
 
-    return postList && (
+    return (
-      <div className="scroll-to-top">
+      postList && (
-        {this.state.showTop && (
+        <div className="scroll-to-top">
-          <i
+          {this.state.showTop && (
-            className="scroll-to-top__icon scroll-to-top__icon--top"
+            <i
-            onClick={() => postList.scroll({ top: 0 })}
+              className="scroll-to-top__icon scroll-to-top__icon--top"
-          />
+              onClick={() => postList.scroll({ top: 0 })}
-        )}
+            />
+          )}
 
-        {this.state.showBottom && (
+          {this.state.showBottom && (
-          <i
+            <i
-            className="scroll-to-top__icon scroll-to-top__icon--bottom"
+              className="scroll-to-top__icon scroll-to-top__icon--bottom"
-            onClick={() => postList.scroll({ top: postList.scrollHeight })}
+              onClick={() => postList.scroll({ top: postList.scrollHeight })}
-          />
+            />
-        )}
+          )}
-      </div>
+        </div>
+      )
     );
   }
 }

src/newsreader/js/pages/homepage/components/postlist/PostList.js

@@ -116,4 +116,6 @@ const mapDispatchToProps = dispatch => ({
   fetchSavedPosts: (next = false) => dispatch(fetchSavedPosts(next)),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(PostList);
+export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(
+  PostList
+);

src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import Sidebar from "../../../../components/Sidebar.js";
+import Sidebar from '../../../../components/Sidebar.js';
 import LoadingIndicator from '../../../../components/LoadingIndicator.js';
 import { CATEGORY_TYPE, RULE_TYPE } from '../../constants.js';
 
@@ -11,10 +11,10 @@ import ReadButton from './ReadButton.js';
 
 import { filterCategories, filterRules } from './filters.js';
 
-
 class HomepageSidebar extends React.Component {
   render() {
-    const categoryItems = this.props.categories.items.map(category => { const rules = this.props.rules.items.filter(rule => {
+    const categoryItems = this.props.categories.items.map(category => {
+      const rules = this.props.rules.items.filter(rule => {
         return rule.category === category.id;
       });
 
@@ -32,9 +32,8 @@ class HomepageSidebar extends React.Component {
       this.props.selected.item &&
       [CATEGORY_TYPE, RULE_TYPE].includes(this.props.selected.item.type);
 
-
     return (
-      <Sidebar navLinks={this.props.navLinks} includeBorder={true} >
+      <Sidebar navLinks={this.props.navLinks} includeBorder={true}>
         {(this.props.categories.isFetching || this.props.rules.isFetching) && (
           <LoadingIndicator />
         )}
@@ -48,8 +47,7 @@ class HomepageSidebar extends React.Component {
       </Sidebar>
     );
   }
-};
+}
-
 
 const mapStateToProps = state => ({
   categories: { ...state.categories, items: filterCategories(state.categories.items) },