feat: starting to hooks to avoid deprecation warnings (#1687)

* feat(hooks): add react hooks rules and plugins to eslint * feat(hooks): upgrade react and react-dom * feat(hooks): update Agenda.js to hooks * feat(hooks): unnecessary line specified react-hooks plugin * feat(hooks): destructuring props on top level
jquense · Jun 24, 2020 · b8368f9 · b8368f9
1 parent 62132eb
commit b8368f9
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 96 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -2,6 +2,8 @@ parser: babel-eslint
 extends:
   - jason/react
   - prettier
+plugins:
+  - react-hooks
 env:
   es6: true
 rules:
@@ -15,3 +17,5 @@ rules:
     varsIgnorePattern: ^_,
     argsIgnorePattern: ^_,
   }]
+  react-hooks/rules-of-hooks: error
+  react-hooks/exhaustive-deps: warn
diff --git a/package.json b/package.json
@@ -95,6 +95,7 @@
     "eslint-import-resolver-webpack": "^0.10.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-react": "^7.11.1",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "font-awesome": "^4.7.0",
     "globalize": "^0.1.1",
     "husky": "^0.14.3",
@@ -108,10 +109,10 @@
     "postcss": "^7.0.16",
     "postcss-cli": "^6.1.2",
     "prettier": "^1.15.1",
-    "react": "^16.6.1",
+    "react": "^16.13.1",
     "react-bootstrap": "^0.32.4",
     "react-docgen": "^3.0.0-rc.1",
-    "react-dom": "^16.6.1",
+    "react-dom": "^16.13.1",
     "react-tackle-box": "^2.1.0",
     "rimraf": "^2.4.2",
     "rollup": "^1.1.0",

diff --git a/src/Agenda.js b/src/Agenda.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
 import addClass from 'dom-helpers/addClass'
 import removeClass from 'dom-helpers/removeClass'
 import getWidth from 'dom-helpers/width'
@@ -10,75 +10,28 @@ import { navigate } from './utils/constants'
 import { inRange } from './utils/eventLevels'
 import { isSelected } from './utils/selection'
 
-class Agenda extends React.Component {
-  constructor(props) {
-    super(props)
-    this.headerRef = React.createRef()
-    this.dateColRef = React.createRef()
-    this.timeColRef = React.createRef()
-    this.contentRef = React.createRef()
-    this.tbodyRef = React.createRef()
-  }
-
-  componentDidMount() {
-    this._adjustHeader()
-  }
-
-  componentDidUpdate() {
-    this._adjustHeader()
-  }
-
-  render() {
-    let { length, date, events, accessors, localizer } = this.props
-    let { messages } = localizer
-    let end = dates.add(date, length, 'day')
-
-    let range = dates.range(date, end, 'day')
-
-    events = events.filter(event => inRange(event, date, end, accessors))
-
-    events.sort((a, b) => +accessors.start(a) - +accessors.start(b))
-
-    return (
-      <div className="rbc-agenda-view">
-        {events.length !== 0 ? (
-          <React.Fragment>
-            <table ref={this.headerRef} className="rbc-agenda-table">
-              <thead>
-                <tr>
-                  <th className="rbc-header" ref={this.dateColRef}>
-                    {messages.date}
-                  </th>
-                  <th className="rbc-header" ref={this.timeColRef}>
-                    {messages.time}
-                  </th>
-                  <th className="rbc-header">{messages.event}</th>
-                </tr>
-              </thead>
-            </table>
-            <div className="rbc-agenda-content" ref={this.contentRef}>
-              <table className="rbc-agenda-table">
-                <tbody ref={this.tbodyRef}>
-                  {range.map((day, idx) => this.renderDay(day, events, idx))}
-                </tbody>
-              </table>
-            </div>
-          </React.Fragment>
-        ) : (
-          <span className="rbc-agenda-empty">{messages.noEventsInRange}</span>
-        )}
-      </div>
-    )
-  }
-
-  renderDay = (day, events, dayKey) => {
-    let {
-      selected,
-      getters,
-      accessors,
-      localizer,
-      components: { event: Event, date: AgendaDate },
-    } = this.props
+function Agenda({
+  selected,
+  getters,
+  accessors,
+  localizer,
+  components,
+  length,
+  date,
+  events,
+}) {
+  const headerRef = useRef(null)
+  const dateColRef = useRef(null)
+  const timeColRef = useRef(null)
+  const contentRef = useRef(null)
+  const tbodyRef = useRef(null)
+
+  useEffect(() => {
+    _adjustHeader()
+  })
+
+  const renderDay = (day, events, dayKey) => {
+    const { event: Event, date: AgendaDate } = components
 
     events = events.filter(e =>
       inRange(e, dates.startOf(day, 'day'), dates.endOf(day, 'day'), accessors)
@@ -117,9 +70,7 @@ class Agenda extends React.Component {
           style={userProps.style}
         >
           {first}
-          <td className="rbc-agenda-time-cell">
-            {this.timeRangeLabel(day, event)}
-          </td>
+          <td className="rbc-agenda-time-cell">{timeRangeLabel(day, event)}</td>
           <td className="rbc-agenda-event-cell">
             {Event ? <Event event={event} title={title} /> : title}
           </td>
@@ -128,9 +79,7 @@ class Agenda extends React.Component {
     }, [])
   }
 
-  timeRangeLabel = (day, event) => {
-    let { accessors, localizer, components } = this.props
-
+  const timeRangeLabel = (day, event) => {
     let labelClass = '',
       TimeComponent = components.time,
       label = localizer.messages.allDay
@@ -164,27 +113,25 @@ class Agenda extends React.Component {
     )
   }
 
-  _adjustHeader = () => {
-    if (!this.tbodyRef.current) return
+  const _adjustHeader = () => {
+    if (!tbodyRef.current) return
 
-    let header = this.headerRef.current
-    let firstRow = this.tbodyRef.current.firstChild
+    let header = headerRef.current
+    let firstRow = tbodyRef.current.firstChild
 
     if (!firstRow) return
 
     let isOverflowing =
-      this.contentRef.current.scrollHeight >
-      this.contentRef.current.clientHeight
-    let widths = this._widths || []
-
-    this._widths = [
-      getWidth(firstRow.children[0]),
-      getWidth(firstRow.children[1]),
-    ]
-
-    if (widths[0] !== this._widths[0] || widths[1] !== this._widths[1]) {
-      this.dateColRef.current.style.width = this._widths[0] + 'px'
-      this.timeColRef.current.style.width = this._widths[1] + 'px'
+      contentRef.current.scrollHeight > contentRef.current.clientHeight
+
+    let _widths = []
+    let widths = _widths
+
+    _widths = [getWidth(firstRow.children[0]), getWidth(firstRow.children[1])]
+
+    if (widths[0] !== _widths[0] || widths[1] !== _widths[1]) {
+      dateColRef.current.style.width = _widths[0] + 'px'
+      timeColRef.current.style.width = _widths[1] + 'px'
     }
 
     if (isOverflowing) {
@@ -194,6 +141,46 @@ class Agenda extends React.Component {
       removeClass(header, 'rbc-header-overflowing')
     }
   }
+
+  let { messages } = localizer
+  let end = dates.add(date, length, 'day')
+
+  let range = dates.range(date, end, 'day')
+
+  events = events.filter(event => inRange(event, date, end, accessors))
+
+  events.sort((a, b) => +accessors.start(a) - +accessors.start(b))
+
+  return (
+    <div className="rbc-agenda-view">
+      {events.length !== 0 ? (
+        <React.Fragment>
+          <table ref={headerRef} className="rbc-agenda-table">
+            <thead>
+              <tr>
+                <th className="rbc-header" ref={dateColRef}>
+                  {messages.date}
+                </th>
+                <th className="rbc-header" ref={timeColRef}>
+                  {messages.time}
+                </th>
+                <th className="rbc-header">{messages.event}</th>
+              </tr>
+            </thead>
+          </table>
+          <div className="rbc-agenda-content" ref={contentRef}>
+            <table className="rbc-agenda-table">
+              <tbody ref={tbodyRef}>
+                {range.map((day, idx) => renderDay(day, events, idx))}
+              </tbody>
+            </table>
+          </div>
+        </React.Fragment>
+      ) : (
+        <span className="rbc-agenda-empty">{messages.noEventsInRange}</span>
+      )}
+    </div>
+  )
 }
 
 Agenda.propTypes = {

diff --git a/yarn.lock b/yarn.lock
@@ -5065,6 +5065,11 @@ eslint-plugin-import@^2.14.0:
     read-pkg-up "^2.0.0"
     resolve "^1.10.0"
 
+eslint-plugin-react-hooks@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.4.tgz#aed33b4254a41b045818cacb047b81e6df27fa58"
+  integrity sha512-equAdEIsUETLFNCmmCkiCGq6rkSK5MoJhXFPFYeUebcjKgBmWWcgVOqZyQC8Bv1BwVCnTq9tBxgJFgAJTWoJtA==
+
 eslint-plugin-react@^7.11.1:
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.13.0.tgz#bc13fd7101de67996ea51b33873cd9dc2b7e5758"
@@ -10691,7 +10696,17 @@ react-docgen@^3.0.0, react-docgen@^3.0.0-rc.1:
     node-dir "^0.1.10"
     recast "^0.16.0"
 
-react-dom@^16.6.1, react-dom@^16.8.1:
+react-dom@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
+  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.19.1"
+
+react-dom@^16.8.1:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
   integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
@@ -10874,7 +10889,16 @@ react-transition-group@^2.0.0, react-transition-group@^2.2.0:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react@^16.6.1, react@^16.8.1:
+react@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
+react@^16.8.1:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
   integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
@@ -11654,6 +11678,14 @@ scheduler@^0.13.6:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.4.5:
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"