Refactored table components - Table, SummaryTableRow, SignalTableRow

assets/js/Ioda/components/table/SignalTableRow.js

@@ -1,5 +1,6 @@
-import React, { Component } from "react";
+import React, {Component, useEffect} from "react";
 import ReactDOM from "react-dom";
+import {useState} from "react";
 import { humanizeNumber } from "../../utils";
 import { Link } from "react-router-dom";
 import T from "i18n-react";
@@ -8,39 +9,37 @@ import { getDateRangeFromUrl, hasDateRangeInUrl } from "../../utils/urlUtils";
 // Each row of the summary table needs it's own component to manage the
 // hover state, which controls the table that displays score breakdowns.
 
-class SignalTableRow extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      x: 0,
-      y: 0,
-      displayScores: false,
-      visibility: this.props.data.visibility,
-    };
-    // this.handleRowScoreHide = this.handleRowScoreHide.bind(this);
-  }
-
-  componentDidMount = () => {
-    // document.addEventListener('click', this.handleRowScoreHide, {passive: true});
-  };
-
-  componentWillUnmount = () => {
-    // document.removeEventListener('click', this.handleRowScoreHide, true);
-  };
+const SignalTableRow = (props) => {
+  const {
+    data,
+    handleCheckboxEventLoading,
+    type,
+    entityType
+  } = props
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+  const [displayScores, setDisplayScores] = useState(false);
+  const [visibility, setVisibility] = useState(data.visibility || false);
+
+  useEffect(() => {
+    if (data && data.visibility != null) {
+      setVisibility(data.visibility);
+    }
+  }, [data.visibility]);
 
-  handlePopulateScores(scores) {
+  const handlePopulateScores = (scores) => {
     if (scores !== null) {
       return (
-        scores &&
-        scores.map((score, index) => {
-          let scoreValue = humanizeNumber(score.score, 2);
-          return (
-            <tr className="table__scores-row" key={index}>
-              <td className="table__scores-cell">{score.source}</td>
-              <td className="table__scores-cell">{scoreValue}</td>
-            </tr>
-          );
-        })
+          scores &&
+          scores.map((score, index) => {
+            let scoreValue = humanizeNumber(score.score, 2);
+            return (
+                <tr className="table__scores-row" key={index}>
+                  <td className="table__scores-cell">{score.source}</td>
+                  <td className="table__scores-cell">{scoreValue}</td>
+                </tr>
+            );
+          })
       );
     } else {
       return null;
@@ -57,123 +56,111 @@ class SignalTableRow extends Component {
   //     }
   // }
 
-  handleRowScoreDisplay() {
-    this.setState({
-      displayScores: !this.state.displayScores,
-    });
+  const handleRowScoreDisplay = () => {
+    setDisplayScores(!displayScores);
   }
 
-  handleRowHover(event) {
+  const handleRowHover = (event) => {
     event.persist();
     // console.log(event);
     // console.log(event.nativeEvent.offsetY);
     // Keep the hover table aligned with the corresponding ellipses
-    this.setState({
-      y:
+
+    setY(
         event.nativeEvent.offsetY < 8
-          ? -2
-          : event.nativeEvent.offsetY > 20
-          ? 14
-          : event.nativeEvent.offsetY - 9,
-    });
+            ? -2
+            : event.nativeEvent.offsetY > 20
+                ? 14
+                : event.nativeEvent.offsetY - 9);
   }
 
   // controls checkbox visibility UI, having it wait on props is taking too long
-  handleVisibilityState(event, item) {
+  const handleVisibilityState = (event, item) => {
     // update checkbox and call props function
-
-    this.setState(
-      {
-        visibility: event.target.checked,
-      },
-      () => {
-        setTimeout(() => {
-          this.props.handleCheckboxEventLoading(item);
-        }, 1000);
-      }
-    );
+    setVisibility(event.target.checked);
+    setTimeout(() => {
+      handleCheckboxEventLoading(item);
+    }, 1000);
   }
 
-  render() {
-    let overallScore = humanizeNumber(this.props.data.score, 2);
+  let overallScore = humanizeNumber(data.score, 2);
 
-    const dataSourceHeading = T.translate(
+  const dataSourceHeading = T.translate(
       "table.scoresTable.dataSourceHeading"
-    );
-    const scoreHeading = T.translate("table.scoresTable.scoreHeading");
+  );
+  const scoreHeading = T.translate("table.scoresTable.scoreHeading");
 
-    const item = this.props.data;
-    const entityCode = this.props.data.entityCode;
-    const entityType = this.props.data.entityType;
+  const item = data;
+  const dataEntityCode = data.entityCode;
+  const dataEntityType = data.entityType;
 
-    const dateRangeInUrl = hasDateRangeInUrl();
-    const { urlFromDate, urlUntilDate } = getDateRangeFromUrl();
-    const linkPath = dateRangeInUrl
-      ? `/${entityType}/${entityCode}?from=${urlFromDate}&until=${urlUntilDate}`
-      : `/${entityType}/${entityCode}`;
+  const dateRangeInUrl = hasDateRangeInUrl();
+  const { urlFromDate, urlUntilDate } = getDateRangeFromUrl();
+  const linkPath = dateRangeInUrl
+      ? `/${dataEntityType}/${dataEntityCode}?from=${urlFromDate}&until=${urlUntilDate}`
+      : `/${dataEntityType}/${dataEntityCode}`;
 
-    return (
+  return (
       <tr
-        className="table--summary-row"
-        // onMouseMove={(event) => this.handleRowHover(event)}
-        // onMouseLeave={(event) => this.handleRowHover(event)}
-        onTouchStart={(event) => this.handleRowHover(event)}
+          className="table--summary-row"
+          // onMouseMove={(event) => this.handleRowHover(event)}
+          // onMouseLeave={(event) => this.handleRowHover(event)}
+          onTouchStart={(event) => handleRowHover(event)}
       >
-        {this.props.type === "signal" ? (
-          <td>
-            <input
-              className="table__cell-checkbox"
-              type="checkbox"
-              name={entityCode}
-              checked={this.state.visibility}
-              onChange={(event) => this.handleVisibilityState(event, item)}
-            />
-          </td>
+        {type === "signal" ? (
+            <td>
+              <input
+                  className="table__cell-checkbox"
+                  type="checkbox"
+                  name={entityCode}
+                  checked={visibility}
+                  onChange={(event) => handleVisibilityState(event, item)}
+              />
+            </td>
         ) : null}
         <td>
           <Link
-            className="table__cell-link"
-            to={linkPath}
-            // onClick={() =>
-            //   this.props.handleEntityClick(
-            //     this.props.data.entityType,
-            //     this.props.data.entityCode
-            //   )
-            // }
+              className="table__cell-link"
+              to={linkPath}
+              // onClick={() =>
+              //   this.props.handleEntityClick(
+              //     this.props.data.entityType,
+              //     this.props.data.entityCode
+              //   )
+              // }
           >
-            <span>{this.props.data.name}</span>
+            <span>{data.name}</span>
           </Link>
         </td>
-        {this.props.entityType === "asn" ? (
-          <td className="td--center">{this.props.data.ipCount}</td>
+        {entityType === "asn" ? (
+            <td className="td--center">{data.ipCount}</td>
         ) : null}
         <td
-          className="table__cell--overallScore td--center"
-          onClick={() => this.handleRowScoreDisplay()}
-          style={{ backgroundColor: this.props.data.color }}
+            className="table__cell--overallScore td--center"
+            onClick={() => this.handleRowScoreDisplay()}
+            style={{ backgroundColor: data.color }}
         >
           {overallScore}
           {/*<span className="table__ellipses">⋮</span>*/}
           <table
-            className={
-              this.state.displayScores
-                ? "table__scores table__scores--active"
-                : "table__scores"
-            }
-            style={{ top: `${this.state.y}px` }}
+              className={
+                displayScores
+                    ? "table__scores table__scores--active"
+                    : "table__scores"
+              }
+              style={{ top: `${y}px` }}
           >
             <thead>
-              <tr className="table__scores-headers">
-                <th className="table__scores-cell">{dataSourceHeading}</th>
-                <th className="table__scores-cell">{scoreHeading}</th>
-              </tr>
+            <tr className="table__scores-headers">
+              <th className="table__scores-cell">{dataSourceHeading}</th>
+              <th className="table__scores-cell">{scoreHeading}</th>
+            </tr>
             </thead>
-            <tbody>{this.handlePopulateScores(this.props.data.scores)}</tbody>
+            <tbody>{handlePopulateScores(data.scores)}</tbody>
           </table>
         </td>
       </tr>
-    );
-  }
+  );
 }
 
 export default SignalTableRow;