From 9a9ccf1b2c490cacf10ee702ffaa8be1eb7dbc41 Mon Sep 17 00:00:00 2001
From: Himanshu Gupta <114623040+devhimanshuu@users.noreply.github.com>
Date: Thu, 18 Apr 2024 00:32:46 +0530
Subject: [PATCH] Update Selector.tsx

Signed-off-by: Himanshu Gupta <114623040+devhimanshuu@users.noreply.github.com>
---
 .../Header/HopsSelector/Selector.tsx          | 164 +++++++++---------
 1 file changed, 85 insertions(+), 79 deletions(-)

diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx b/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx
index 144b37e17e..0cf99c30e7 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx
+++ b/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx
@@ -12,17 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { PureComponent } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Popover } from 'antd';
 import { ImSortAmountAsc } from 'react-icons/im';
 import { IoChevronForward } from 'react-icons/io5';
-
 import ChevronDown from '../ChevronDown';
 import { trackHopChange } from '../../index.track';
 import { ECheckedStatus, EDirection, THop } from '../../../../model/ddg/types';
-
 import './Selector.css';
 
+const CLASSNAME = 'HopsSelector--Selector';
+
 type TProps = {
   direction: EDirection;
   furthestDistance: number;
@@ -32,92 +32,98 @@ type TProps = {
   hops: THop[];
 };
 
-const CLASSNAME = 'HopsSelector--Selector';
-
-export default class Selector extends PureComponent<TProps> {
-  private handleClick(distance: number) {
-    const { direction, furthestFullDistance, handleClick } = this.props;
-    handleClick(distance, direction);
-    trackHopChange(furthestFullDistance, distance, direction);
-  }
+const Selector: React.FC<TProps> = ({
+  direction,
+  furthestDistance,
+  furthestFullDistance,
+  furthestFullness,
+  handleClick,
+  hops,
+}) => {
+  const handleButtonClick = useCallback(
+    (distance: number) => {
+      handleClick(distance, direction);
+      trackHopChange(furthestFullDistance, distance, direction);
+    },
+    [direction, furthestFullDistance, handleClick]
+  );
 
-  private makeBtn = (
-    { distance, fullness, suffix = 'popover-content' }: THop & { suffix?: string },
-    showChevron?: number
-  ) => {
-    const { direction } = this.props;
-    return (
+  const makeBtn = useCallback(
+    ({ distance, fullness, suffix = 'popover-content' }: THop & { suffix?: string }, showChevron?: number) => (
       <React.Fragment key={`${distance} ${direction} ${suffix}`}>
         {Boolean(showChevron) && <IoChevronForward className={`${CLASSNAME}--ChevronRight is-${fullness}`} />}
         <button
           className={`${CLASSNAME}--btn is-${fullness} ${CLASSNAME}--${suffix}`}
           type="button"
-          onClick={() => this.handleClick(distance)}
+          onClick={() => handleButtonClick(distance)}
         >
           {Math.abs(distance)}
         </button>
       </React.Fragment>
-    );
-  };
-
-  render() {
-    const { direction, furthestDistance, furthestFullness, handleClick, hops } = this.props;
-    const streamText = direction === EDirection.Downstream ? 'Down' : 'Up';
-    const streamLabel = `${streamText}stream hops`;
-    const lowercaseLabel = streamLabel.toLowerCase();
-    if (hops.length <= 1) {
-      return <span className={CLASSNAME}>No {lowercaseLabel}</span>;
-    }
+    ),
+    [direction, handleButtonClick]
+  );
 
-    const decrementBtn = (
-      <button
-        key={`decrement ${direction}`}
-        disabled={furthestDistance === 0}
-        className={`${CLASSNAME}--decrement`}
-        type="button"
-        onClick={() => handleClick(furthestDistance - direction, direction)}
-      >
-        -
-      </button>
-    );
-    const incrementBtn = (
-      <button
-        key={`increment ${direction}`}
-        disabled={furthestDistance === hops[hops.length - 1].distance}
-        className={`${CLASSNAME}--increment`}
-        type="button"
-        onClick={() => handleClick(furthestDistance + direction, direction)}
-      >
-        +
-      </button>
-    );
-    const delimiterBtn = this.makeBtn({
-      ...hops[hops.length - 1],
-      suffix: 'delimiter',
-    });
-    const furthestBtn = this.makeBtn({
-      distance: furthestDistance,
-      fullness: furthestFullness,
-      suffix: 'furthest',
-    });
+  const streamText = direction === EDirection.Downstream ? 'Down' : 'Up';
+  const streamLabel = `${streamText}stream hops`;
+  const lowercaseLabel = streamLabel.toLowerCase();
 
-    return (
-      <Popover
-        arrowPointAtCenter
-        content={[decrementBtn, ...hops.map(this.makeBtn), incrementBtn]}
-        placement="bottom"
-        title={`Visible ${lowercaseLabel}`}
-      >
-        <span className={CLASSNAME}>
-          <ImSortAmountAsc className={`${CLASSNAME}--AscIcon is-${streamText}`} />
-          {streamLabel}
-          {furthestBtn}
-          <span className={`${CLASSNAME}--delimiter`}>/</span>
-          {delimiterBtn}
-          {/* <IoChevronDown className={`${CLASSNAME}--ChevronDown`} /> */}
-          <ChevronDown className="ub-ml1" />
-        </span>
-      </Popover>
-    );
+  if (hops.length <= 1) {
+    return <span className={CLASSNAME}>No {lowercaseLabel}</span>;
   }
-}
+
+  const decrementBtn = (
+    <button
+      key={`decrement ${direction}`}
+      disabled={furthestDistance === 0}
+      className={`${CLASSNAME}--decrement`}
+      type="button"
+      onClick={() => handleClick(furthestDistance - direction, direction)}
+    >
+      -
+    </button>
+  );
+
+  const incrementBtn = (
+    <button
+      key={`increment ${direction}`}
+      disabled={furthestDistance === hops[hops.length - 1].distance}
+      className={`${CLASSNAME}--increment`}
+      type="button"
+      onClick={() => handleClick(furthestDistance + direction, direction)}
+    >
+      +
+    </button>
+  );
+
+  const delimiterBtn = makeBtn({
+    ...hops[hops.length - 1],
+    suffix: 'delimiter',
+  });
+
+  const furthestBtn = makeBtn({
+    distance: furthestDistance,
+    fullness: furthestFullness,
+    suffix: 'furthest',
+  });
+
+  return (
+    <Popover
+      arrowPointAtCenter
+      content={[decrementBtn, ...hops.map(makeBtn), incrementBtn]}
+      placement="bottom"
+      title={`Visible ${lowercaseLabel}`}
+    >
+      <span className={CLASSNAME}>
+        <ImSortAmountAsc className={`${CLASSNAME}--AscIcon is-${streamText}`} />
+        {streamLabel}
+        {furthestBtn}
+        <span className={`${CLASSNAME}--delimiter`}>/</span>
+        {delimiterBtn}
+        <ChevronDown className="ub-ml1" />
+      </span>
+    </Popover>
+  );
+};
+
+export default Selector;