Modernize client/components

client/components/AutocompleteInputBox/AutocompleteInputBox.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import cx from 'classnames'
 
 import { WithClassName } from '../../../types'
@@ -8,18 +8,15 @@ type AutocompleteInputBoxProps = React.PropsWithChildren &
     footer?: React.ReactNode
   }
 
-class AutocompleteInputBox extends Component<AutocompleteInputBoxProps> {
-  render() {
-    const { children, footer, className } = this.props
-    return (
-      <div className={cx('autocomplete-input-box', className)}>
-        {children}
-        {footer && (
-          <div className="autocomplete-input-box__footer">{footer}</div>
-        )}
-      </div>
-    )
-  }
+export function AutocompleteInputBox({
+  children,
+  footer,
+  className,
+}: AutocompleteInputBoxProps) {
+  return (
+    <div className={cx('autocomplete-input-box', className)}>
+      {children}
+      {footer && <div className="autocomplete-input-box__footer">{footer}</div>}
+    </div>
+  )
 }
-
-export default AutocompleteInputBox

client/components/AutocompleteInputBox/index.ts

@@ -1,3 +1 @@
-import AutocompleteInputBox from './AutocompleteInputBox'
-
-export default AutocompleteInputBox
+export { AutocompleteInputBox } from './AutocompleteInputBox'

client/components/BarGraph/BarGraph.tsx

@@ -1,73 +1,70 @@
-import React, { PureComponent } from 'react'
+import React, { useMemo } from 'react'
 
 import { formatSize } from '../../../utils'
 import TreeShakeIcon from '../Icons/TreeShakeIcon'
 import SideEffectIcon from '../Icons/SideEffectIcon'
-import { BarVersion } from '../BarVersion/BarVersion'
+import { BarVersion } from '../BarVersion'
+import { Reading } from './types'
+import { useBarGraph } from './hooks/useBarGraph'
 
-export type Reading = {
-  version: string
-  size: number
-  gzip: number
-  disabled: boolean
-  hasSideEffects: boolean
-  hasJSModule: boolean
-  hasJSNext: boolean
-  isModuleType: boolean
-}
-
-type BarGraphProps = {
+interface BarGraphProps {
   readings: Reading[]
   onBarClick: (reading: Reading) => void
 }
 
-export default class BarGraph extends PureComponent<BarGraphProps> {
-  getScale = () => {
-    const { readings } = this.props
-
-    const gzipValues = readings
-      .filter(reading => !reading.disabled)
-      .map(reading => reading.gzip)
-
-    const sizeValues = readings
-      .filter(reading => !reading.disabled)
-      .map(reading => reading.size)
-
-    const maxValue = Math.max(...[...gzipValues, ...sizeValues])
-    return 100 / maxValue
-  }
-
-  getFirstSideEffectFreeIndex = () => {
-    const { readings } = this.props
-    const sideEffectFreeIntroducedRecently = !readings.every(
-      reading => !reading.hasSideEffects
-    )
-    const firstSideEffectFreeIndex = readings.findIndex(
-      reading => !(reading.disabled || reading.hasSideEffects)
-    )
-
-    return sideEffectFreeIntroducedRecently ? firstSideEffectFreeIndex : -1
-  }
-
-  getFirstTreeshakeableIndex = () => {
-    const { readings } = this.props
-    const treeshakingIntroducedRecently = !readings.every(
-      reading => reading.hasJSModule
-    )
-    const firstTreeshakingIndex = readings.findIndex(
-      reading =>
-        !reading.disabled &&
-        (reading.hasJSModule || reading.hasJSNext || reading.isModuleType)
-    )
+export function BarGraph({ onBarClick, readings }: BarGraphProps) {
+  const { firstSideEffectFreeIndex, firstTreeshakeableIndex, graphScale } =
+    useBarGraph({ readings })
+
+  return (
+    <div className="bar-graph-container">
+      <figure className="bar-graph">
+        {readings.map((reading, index) =>
+          reading.disabled ? (
+            <DisabledBar
+              key={reading.version}
+              reading={reading}
+              onBarClick={onBarClick}
+            />
+          ) : (
+            <ActiveBar
+              key={reading.version}
+              reading={reading}
+              graphScale={graphScale}
+              options={{
+                isFirstTreeshakeable: index === firstTreeshakeableIndex,
+                isFirstSideEffectFree: index === firstSideEffectFreeIndex,
+              }}
+              onBarClick={onBarClick}
+            />
+          )
+        )}
+      </figure>
+      <div className="bar-graph__legend">
+        <div className="bar-graph__legend__bar1">
+          <div className="bar-graph__legend__colorbox" />
+          Min
+        </div>
+        <div className="bar-graph__legend__bar2">
+          <div className="bar-graph__legend__colorbox" />
+          GZIP
+        </div>
+      </div>
+    </div>
+  )
+}
 
-    return treeshakingIntroducedRecently ? firstTreeshakingIndex : -1
-  }
+interface DisabledBarProps {
+  reading: Reading
+  onBarClick: (reading: Reading) => void
+}
 
-  renderDisabledBar = (reading: Reading) => (
+function DisabledBar({ reading, onBarClick }: DisabledBarProps) {
+  return (
     <div
       key={reading.version}
       className="bar-graph__bar-group bar-graph__bar-group--disabled"
-      onClick={() => this.props.onBarClick(reading)}
+      onClick={() => onBarClick(reading)}
     >
       <div
         className="bar-graph__bar"
@@ -77,99 +74,75 @@ export default class BarGraph extends PureComponent<BarGraphProps> {
       <BarVersion version={reading.version} />
     </div>
   )
+}
 
-  renderActiveBar = (
-    reading: Reading,
-    scale: number,
-    options: { isFirstTreeshakeable: boolean; isFirstSideEffectFree: boolean }
-  ) => {
-    const getTooltipMessage = (reading: Reading) => {
-      const formattedSize = formatSize(reading.size)
-      const formattedGzip = formatSize(reading.gzip)
-      return `Minified: ${parseFloat(formattedSize.size).toFixed(1)}${
-        formattedSize.unit
-      } | Gzipped: ${parseFloat(formattedGzip.size).toFixed(1)}${
-        formattedGzip.unit
-      }`
-    }
-
-    return (
-      <div
-        onClick={() => this.props.onBarClick(reading)}
-        key={reading.version}
-        className="bar-graph__bar-group"
-      >
-        <div className="bar-graph__bar-symbols">
-          {options.isFirstTreeshakeable && (
-            <div
-              data-balloon={`ES2015 exports introduced. ${
-                reading.hasSideEffects
-                  ? 'Not side-effect free yet, hence limited tree-shake ability.'
-                  : ''
-              }`}
-              className="bar-graph__bar-symbol"
-            >
-              <TreeShakeIcon />
-            </div>
-          )}
-          {options.isFirstSideEffectFree && (
-            <div
-              data-balloon={`Was marked side-effect free. ${
-                reading.hasJSNext || reading.hasJSModule || reading.isModuleType
-                  ? 'Supports ES2015 exports also, hence fully tree-shakeable'
-                  : "Doesn't export ESM yet, limited tree-shake ability"
-              }`}
-              className="bar-graph__bar-symbol"
-            >
-              <SideEffectIcon />
-            </div>
-          )}
-        </div>
-
-        <div
-          className="bar-graph__bar"
-          style={{ height: `${(reading.size - reading.gzip) * scale}%` }}
-          data-balloon={getTooltipMessage(reading)}
-        />
-        <div
-          className="bar-graph__bar2"
-          style={{ height: `${reading.gzip * scale}%` }}
-          data-balloon={getTooltipMessage(reading)}
-        />
-        <BarVersion version={reading.version} />
-      </div>
-    )
-  }
-
-  render() {
-    const { readings } = this.props
-    const graphScale = this.getScale()
-    const firstTreeshakeableIndex = this.getFirstTreeshakeableIndex()
-    const firstSideEffectFreeIndex = this.getFirstSideEffectFreeIndex()
+interface ActiveBarProps {
+  reading: Reading
+  graphScale: number
+  options: { isFirstTreeshakeable: boolean; isFirstSideEffectFree: boolean }
+  onBarClick: (reading: Reading) => void
+}
 
-    return (
-      <div className="bar-graph-container">
-        <figure className="bar-graph">
-          {readings.map((reading, index) =>
-            reading.disabled
-              ? this.renderDisabledBar(reading)
-              : this.renderActiveBar(reading, graphScale, {
-                  isFirstTreeshakeable: index === firstTreeshakeableIndex,
-                  isFirstSideEffectFree: index === firstSideEffectFreeIndex,
-                })
-          )}
-        </figure>
-        <div className="bar-graph__legend">
-          <div className="bar-graph__legend__bar1">
-            <div className="bar-graph__legend__colorbox" />
-            Min
+function ActiveBar({
+  reading,
+  options,
+  graphScale,
+  onBarClick,
+}: ActiveBarProps) {
+  const tooltipMessage = useMemo(() => {
+    const formattedSize = formatSize(reading.size)
+    const formattedGzip = formatSize(reading.gzip)
+    return `Minified: ${parseFloat(formattedSize.size).toFixed(1)}${
+      formattedSize.unit
+    } | Gzipped: ${parseFloat(formattedGzip.size).toFixed(1)}${
+      formattedGzip.unit
+    }`
+  }, [reading])
+
+  return (
+    <div
+      onClick={() => onBarClick(reading)}
+      key={reading.version}
+      className="bar-graph__bar-group"
+    >
+      <div className="bar-graph__bar-symbols">
+        {options.isFirstTreeshakeable && (
+          <div
+            data-balloon={`ES2015 exports introduced. ${
+              reading.hasSideEffects
+                ? 'Not side-effect free yet, hence limited tree-shake ability.'
+                : ''
+            }`}
+            className="bar-graph__bar-symbol"
+          >
+            <TreeShakeIcon />
           </div>
-          <div className="bar-graph__legend__bar2">
-            <div className="bar-graph__legend__colorbox" />
-            GZIP
+        )}
+        {options.isFirstSideEffectFree && (
+          <div
+            data-balloon={`Was marked side-effect free. ${
+              reading.hasJSNext || reading.hasJSModule || reading.isModuleType
+                ? 'Supports ES2015 exports also, hence fully tree-shakeable'
+                : "Doesn't export ESM yet, limited tree-shake ability"
+            }`}
+            className="bar-graph__bar-symbol"
+          >
+            <SideEffectIcon />
           </div>
-        </div>
+        )}
       </div>
-    )
-  }
+
+      <div
+        className="bar-graph__bar"
+        style={{ height: `${(reading.size - reading.gzip) * graphScale}%` }}
+        data-balloon={tooltipMessage}
+      />
+      <div
+        className="bar-graph__bar2"
+        style={{ height: `${reading.gzip * graphScale}%` }}
+        data-balloon={tooltipMessage}
+      />
+      <BarVersion version={reading.version} />
+    </div>
+  )
 }

client/components/BarGraph/hooks/useBarGraph.ts

@@ -0,0 +1,43 @@
+import { useMemo } from 'react'
+import { Reading } from '../types'
+
+export function useBarGraph({ readings }: { readings: Reading[] }) {
+  const graphScale = useMemo(() => {
+    const gzipValues = readings
+      .filter(reading => !reading.disabled)
+      .map(reading => reading.gzip)
+
+    const sizeValues = readings
+      .filter(reading => !reading.disabled)
+      .map(reading => reading.size)
+
+    const maxValue = Math.max(...[...gzipValues, ...sizeValues])
+    return 100 / maxValue
+  }, [readings])
+
+  const firstSideEffectFreeIndex = useMemo(() => {
+    const sideEffectFreeIntroducedRecently = !readings.every(
+      reading => !reading.hasSideEffects
+    )
+    const firstSideEffectFreeIndex = readings.findIndex(
+      reading => !(reading.disabled || reading.hasSideEffects)
+    )
+
+    return sideEffectFreeIntroducedRecently ? firstSideEffectFreeIndex : -1
+  }, [readings])
+
+  const firstTreeshakeableIndex = useMemo(() => {
+    const treeshakingIntroducedRecently = !readings.every(
+      reading => reading.hasJSModule
+    )
+    const firstTreeshakingIndex = readings.findIndex(
+      reading =>
+        !reading.disabled &&
+        (reading.hasJSModule || reading.hasJSNext || reading.isModuleType)
+    )
+
+    return treeshakingIntroducedRecently ? firstTreeshakingIndex : -1
+  }, [readings])
+
+  return { graphScale, firstSideEffectFreeIndex, firstTreeshakeableIndex }
+}

client/components/BarGraph/index.ts

@@ -1,3 +1 @@
-import BarGraph from './BarGraph'
-
-export default BarGraph
+export { BarGraph } from './BarGraph'

client/components/BarGraph/types.ts

@@ -0,0 +1,10 @@
+export type Reading = {
+  version: string
+  size: number
+  gzip: number
+  disabled: boolean
+  hasSideEffects: boolean
+  hasJSModule: boolean
+  hasJSNext: boolean
+  isModuleType: boolean
+}

client/components/BarVersion/index.ts

@@ -0,0 +1 @@
+export { BarVersion } from './BarVersion'