Refactor components to use functional components

InetIntel · Sep 18, 2024 · 33b80b8 · 33b80b8
1 parent a040aeb
commit 33b80b8
Show file tree

Hide file tree

Showing 12 changed files with 1,053 additions and 1,123 deletions.
diff --git a/assets/js/Ioda/components/cards/ChartTabCard.js b/assets/js/Ioda/components/cards/ChartTabCard.js
@@ -35,79 +35,74 @@
  * MODIFICATIONS.
  */
 import React from "react";
+import {useState} from "react";
 import Loading from "../loading/Loading";
 import { Radio } from "antd";
 import T from "i18n-react";
 import ChartLegendCard from "./ChartLegendCard";
 import AlertsTable from "../table/AlertsTable";
 import EventsTable from "../table/EventsTable";
 
-class ChartTabCard extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { currentTab: 1 };
-  }
+const ChartTabCard = ({ simplifiedView, legendHandler,tsDataSeriesVisibleMap,  updateSourceParams, alertsData,eventData  }) => {
 
-  handleSelectTab = (selectedKey) => {
-    this.setState({ currentTab: selectedKey });
-  };
-
-  render() {
-    const { simplifiedView } = this.props;
+  const [currentTab, setCurrentTab] = useState(1);
 
-    const selectedSignal = T.translate("entity.selectedSignal");
-    const alertTab = T.translate("entity.alertTab");
-    const eventTab = T.translate("entity.eventTab");
+  const handleSelectTab = (selectedKey) => {
+    setCurrentTab(selectedKey);
+  };
 
-    return (
-      <div className="overview__table-config flex-column">
-        <div className="tabs">
-          <Radio.Group
-            onChange={(e) => this.handleSelectTab(e?.target?.value)}
-            value={this.state.currentTab}
-            style={{ marginBottom: 8 }}
-          >
-            <Radio.Button value={1}>{selectedSignal}</Radio.Button>
-            {!simplifiedView && (
-              <Radio.Button value={2}>{alertTab}</Radio.Button>
-            )}
-            {!simplifiedView && (
-              <Radio.Button value={3}>{eventTab}</Radio.Button>
-            )}
-          </Radio.Group>
-        </div>
+  const selectedSignal = T.translate("entity.selectedSignal");
+  const alertTab = T.translate("entity.alertTab");
+  const eventTab = T.translate("entity.eventTab");
+
+  return (
+    <div className="overview__table-config flex-column">
+      <div className="tabs">
+        <Radio.Group
+          onChange={(e) => handleSelectTab(e?.target?.value)}
+          value={currentTab}
+          style={{ marginBottom: 8 }}
+        >
+          <Radio.Button value={1}>{selectedSignal}</Radio.Button>
+          {!simplifiedView && (
+            <Radio.Button value={2}>{alertTab}</Radio.Button>
+          )}
+          {!simplifiedView && (
+            <Radio.Button value={3}>{eventTab}</Radio.Button>
+          )}
+        </Radio.Group>
+      </div>
 
-        {this.state.currentTab === 1 && (
-          <ChartLegendCard
-            legendHandler={this.props.legendHandler}
-            checkedMap={this.props.tsDataSeriesVisibleMap}
-            updateSourceParams={this.props.updateSourceParams}
-            simplifiedView={this.props.simplifiedView}
-          />
-        )}
+      {currentTab === 1 && (
+        <ChartLegendCard
+          legendHandler={legendHandler}
+          checkedMap={tsDataSeriesVisibleMap}
+          updateSourceParams={updateSourceParams}
+          simplifiedView={simplifiedView}
+        />
+      )}
 
-        {this.state.currentTab === 2 && (
-          <>
-            {this.props.alertsData ? (
-              <AlertsTable data={this.props.alertsData} />
-            ) : (
-              <Loading />
-            )}
-          </>
-        )}
+      {currentTab === 2 && (
+        <>
+          {alertsData ? (
+            <AlertsTable data={alertsData} />
+          ) : (
+            <Loading />
+          )}
+        </>
+      )}
 
-        {this.state.currentTab === 3 && (
-          <>
-            {this.props.eventData ? (
-              <EventsTable data={this.props.eventData} />
-            ) : (
-              <Loading />
-            )}
-          </>
-        )}
-      </div>
-    );
-  }
+      {currentTab === 3 && (
+        <>
+          {eventData ? (
+            <EventsTable data={eventData} />
+          ) : (
+            <Loading />
+          )}
+        </>
+      )}
+    </div>
+  );
 }
 
 export default ChartTabCard;