Remove function binding usage

babel.config.js

@@ -1,23 +1,21 @@
 module.exports = api => {
   const isTest = api.env('test');
 
-	const preset = [
+  const preset = [
-    "@babel/preset-env" , { targets: 'defaults' }
+    "@babel/preset-env", { targets: 'defaults' }
+  ];
+  const testPreset = [
+    "@babel/preset-env", { targets: { node: process.versions.node } }
   ];
-	const testPreset = [
-		"@babel/preset-env", { targets: { node: process.versions.node } }
-	];
 
-	const plugins = [
+  const plugins = [
-		"@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-dynamic-import",
-		"@babel/plugin-transform-react-jsx",
+    "@babel/plugin-transform-react-jsx",
-		"@babel/plugin-syntax-function-bind",
+    "@babel/plugin-proposal-class-properties"
-		"@babel/plugin-proposal-function-bind",
+  ]
-		"@babel/plugin-proposal-class-properties"
-	]
 
-	return {
+  return {
-		"presets": [isTest ? testPreset: preset],
+    "presets": [isTest ? testPreset : preset],
-		"plugins": plugins
+    "plugins": plugins
-	}
+  }
 }

src/newsreader/js/components/Selector.js

@@ -1,6 +1,4 @@
 class Selector {
-  onClick = ::this.onClick;
-
   inputs = [];
 
   constructor() {
@@ -11,7 +9,7 @@ class Selector {
     selectAllInput.onchange = this.onClick;
   }
 
-  onClick(e) {
+  onClick = (e) => {
     const targetValue = e.target.checked;
 
     this.inputs.forEach(input => {

src/newsreader/js/pages/categories/App.js

@@ -9,10 +9,6 @@ import Messages from '../../components/Messages.js';
 import Sidebar from '../../components/Sidebar.js';
 
 class App extends React.Component {
-  selectCategory = ::this.selectCategory;
-  deselectCategory = ::this.deselectCategory;
-  deleteCategory = ::this.deleteCategory;
-
   constructor(props) {
     super(props);
 
@@ -24,15 +20,15 @@ class App extends React.Component {
     };
   }
 
-  selectCategory(categoryId) {
+  selectCategory = (categoryId) => {
     this.setState({ selectedCategoryId: categoryId });
   }
 
-  deselectCategory() {
+  deselectCategory = () => {
     this.setState({ selectedCategoryId: null });
   }
 
-  deleteCategory(categoryId) {
+  deleteCategory = (categoryId) => {
     const url = `/api/categories/${categoryId}/`;
     const options = {
       method: 'DELETE',

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

@@ -1,8 +1,6 @@
 import React from 'react';
 
 export default class ScrollTop extends React.Component {
-  scrollListener = ::this.scrollListener;
-
   state = {
     listenerAttached: false,
     showTop: false,
@@ -17,7 +15,7 @@ export default class ScrollTop extends React.Component {
     }
   }
 
-  scrollListener() {
+  scrollListener = () => {
     const postList = this.props.postListNode;
     const elementEnd =
       postList.scrollTop + postList.offsetHeight >= postList.scrollHeight;

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

@@ -4,13 +4,11 @@ import { isEqual } from 'lodash';
 
 import { fetchPostsBySection, fetchSavedPosts } from '../../actions/posts.js';
 import { SAVED_TYPE } from '../../constants.js';
-import { filterPosts } from './filters.js';
 
 import LoadingIndicator from '../../../../components/LoadingIndicator.js';
 import PostItem from './PostItem.js';
 
 class PostList extends React.Component {
-  handleIntersect = ::this.handleIntersect;
   lastPostRef = null;
   observer = null;
 
@@ -33,7 +31,7 @@ class PostList extends React.Component {
     this.observer.disconnect();
   }
 
-  handleIntersect(entries) {
+  handleIntersect = (entries) => {
     entries.every(entry => {
       if (entry.isIntersecting) {
         this.observer.unobserve(entry.target);

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

@@ -5,9 +5,7 @@ import Cookies from 'js-cookie';
 import { markRead } from '../../actions/selected.js';
 
 class ReadButton extends React.Component {
-  markSelectedRead = ::this.markSelectedRead;
+  markSelectedRead = () => {
-
-  markSelectedRead() {
     const token = Cookies.get('csrftoken');
 
     if (this.props.selected.unread > 0) {