refactor: prevent usage of this.state inside setState calls

.eslintrc.json

@@ -21,6 +21,7 @@
     "no-console": 0,
     "no-case-declarations": 0,
     "quotes": ["error", "single"],
-    "eol-last": ["error", "always"]
+    "eol-last": ["error", "always"],
+    "react/no-access-state-in-setstate": 1
   }
 }

src/components/BrowserCell/BrowserCell.react.js

@@ -172,7 +172,7 @@ export default class BrowserCell extends Component {
       classes.push(styles.required);
     }
 
-    this.setState({ ...this.state, content, classes })
+    this.setState({ content, classes })
   }
 
   componentDidUpdate(prevProps) {

src/components/Calendar/Calendar.react.js

@@ -35,15 +35,15 @@ export default class Calendar extends React.Component {
   }
 
   handlePrev() {
-    this.setState({
-      currentMonth: prevMonth(this.state.currentMonth)
-    });
+    this.setState((prev) => ({
+      currentMonth: prevMonth(prev.currentMonth)
+    }));
   }
 
   handleNext() {
-    this.setState({
-      currentMonth: nextMonth(this.state.currentMonth)
-    });
+    this.setState((prev) => ({
+      currentMonth: nextMonth(prev.currentMonth)
+    }));
   }
 
   renderMonth() {

src/components/CascadingView/CascadingView.react.js

@@ -38,7 +38,7 @@ export default class CascadingView extends React.Component {
         <div
           className={classes.join(' ')}
           style={style}
-          onClick={() => this.setState({ expanded: !this.state.expanded })}>
+          onClick={() => this.setState((prev) => ({ expanded: !prev.expanded }))}>
           <span className={styles.left}>{content}</span>
           {expander}
         </div>

src/components/ChromeDatePicker/ChromeDatePicker.react.js

@@ -30,8 +30,8 @@ export default class ChromeDatePicker extends React.Component {
   }
 
   toggle() {
-    this.setState(() => {
-      if (this.state.open) {
+    this.setState((prev) => {
+      if (prev.open) {
         return { open: false };
       }
       let pos = Position.inWindow(this.wrapRef.current);

src/components/ColumnsConfiguration/ColumnsConfiguration.react.js

@@ -31,9 +31,9 @@ export default class ColumnsConfiguration extends React.Component {
   }
 
   toggle() {
-    this.setState({
-      open: !this.state.open
-    })
+    this.setState((prev) => ({
+      open: !prev.open
+    }))
   }
 
   showAll() {

src/components/DatePicker/DatePicker.react.js

@@ -25,8 +25,8 @@ export default class DatePicker extends React.Component {
   }
 
   toggle() {
-    this.setState(() => {
-      if (this.state.open) {
+    this.setState((prev) => {
+      if (prev.open) {
         return { open: false };
       }
       return {

src/components/DateRange/DateRange.react.js

@@ -36,8 +36,8 @@ export default class DateRange extends React.Component {
   }
 
   toggle() {
-    this.setState(() => {
-      if (this.state.open) {
+    this.setState((prev) => {
+      if (prev.open) {
         return { open: false };
       }
       let pos = Position.inWindow(this.wrapRef.current);
@@ -52,19 +52,23 @@ export default class DateRange extends React.Component {
   }
 
   setStart(start) {
-    let end = this.state.end;
-    if (start > end) {
-      end = daysFrom(start, 1);
-    }
-    this.setState({ start, end });
+    this.setState((prev) => {
+      let end = prev.end;
+      if (start > end) {
+        end = daysFrom(start, 1);
+      }
+      return { start, end };
+    });
   }
 
   setEnd(end) {
-    let start = this.state.start;
-    if (start > end) {
-      start = daysFrom(end, -1);
-    }
-    this.setState({ start, end });
+    this.setState((prev) => {
+      let start = prev.start;
+      if (start > end) {
+        start = daysFrom(end, -1);
+      }
+      return { start, end };
+    });
   }
 
   close() {

src/components/DateTimeInput/DateTimeInput.react.js

@@ -25,8 +25,8 @@ export default class DateTimeInput extends React.Component {
   }
 
   toggle() {
-    this.setState(() => {
-      if (this.state.open) {
+    this.setState((prev) => {
+      if (prev.open) {
         return { open: false };
       }
       let node = this.inputRef.current;

src/components/Dropdown/Dropdown.react.js

@@ -25,8 +25,8 @@ export default class Dropdown extends React.Component {
   }
 
   toggle() {
-    this.setState(() => {
-      if (this.state.open) {
+    this.setState((prev) => {
+      if (prev.open) {
         return { open: false };
       }
       let pos = Position.inDocument(this.dropdownRef.current);

src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js

@@ -30,10 +30,10 @@ export default class ExplorerActiveChartButton extends React.Component {
   }
 
   handleCheckbox() {
-    let nextActiveState = !this.state.active;
-    this.props.onToggle(nextActiveState);
-    this.setState({
-      active: nextActiveState
+    this.setState((prev) => ({
+      active: !prev.active
+    }), () => {
+      this.props.onToggle(this.state.active);
     });
   }
 
@@ -67,11 +67,11 @@ export default class ExplorerActiveChartButton extends React.Component {
               position.x += this.wrapRef.current.clientWidth;
               align = Directions.RIGHT;
             }
-            this.setState({
-              open: !this.state.open,
+            this.setState((prev) => ({
+              open: !prev.open,
               position,
               align
-            });
+            }));
           }} />
       );
     }

src/components/ExplorerMenuButton/ExplorerMenuButton.react.js

@@ -28,8 +28,8 @@ export default class ExplorerMenuButton extends React.Component {
   }
 
   toggle() {
-    this.setState(() => {
-      if (this.state.currentView) {
+    this.setState((prev) => {
+      if (prev.currentView) {
         return { currentView: null };
       }
       let position = Position.inDocument(this.wrapRef.current);