[DDW-923] Hook refactor

Author: Lucas Araujo

source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss

@@ -107,7 +107,7 @@
       transition: box-shadow 0.1s ease-in-out;
       z-index: 999;
 
-      &.headerStuck {
+      &.stickyHeader {
         box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2);
       }
 

source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx

@@ -10,7 +10,6 @@ import LoadingSpinner from '../../widgets/LoadingSpinner';
 import BorderedBox from '../../widgets/BorderedBox';
 import { StakePoolsTableHeader } from './StakePoolsTableHeader';
 import { StakePoolsTableBody } from './StakePoolsTableBody';
-import { InView } from '../../widgets/InView';
 
 const messages = defineMessages({
   tableHeaderRank: {
@@ -377,28 +376,14 @@ class StakePoolsTable extends Component<Props, State> {
           {sortedStakePoolList.length > 0 && (
             <BorderedBox>
               <table>
-                <InView>
-                  {({ isInViewport, setTargetRef }) => (
-                    <>
-                      <caption ref={setTargetRef} />
-                      <thead
-                        className={!isInViewport ? styles.headerStuck : ''}
-                        onMouseEnter={onTableHeaderMouseEnter}
-                        onMouseLeave={onTableHeaderMouseLeave}
-                      >
-                        <tr>
-                          <StakePoolsTableHeader
-                            availableTableHeaders={availableTableHeaders}
-                            stakePoolsSortBy={stakePoolsSortBy}
-                            stakePoolsOrder={stakePoolsOrder}
-                            onHandleSort={this.handleSort}
-                          />
-                        </tr>
-                      </thead>
-                    </>
-                  )}
-                </InView>
-
+                <StakePoolsTableHeader
+                  availableTableHeaders={availableTableHeaders}
+                  stakePoolsSortBy={stakePoolsSortBy}
+                  stakePoolsOrder={stakePoolsOrder}
+                  onHandleSort={this.handleSort}
+                  onTableHeaderMouseEnter={onTableHeaderMouseEnter}
+                  onTableHeaderMouseLeave={onTableHeaderMouseLeave}
+                />
                 <tbody>
                   <StakePoolsTableBody
                     // @ts-ignore ts-migrate(2769) FIXME: No overload matches this call.

source/renderer/app/components/staking/stake-pools/StakePoolsTableHeader.tsx

@@ -1,54 +1,70 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { observer } from 'mobx-react';
 import { map } from 'lodash';
 import classNames from 'classnames';
 import SVGInline from 'react-svg-inline';
 import styles from './StakePoolsTable.scss';
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../../assets/images/ascendi... Remove this comment to see the full error message
 import sortIcon from '../../../assets/images/ascending.inline.svg';
 import { defaultTableOrdering } from './StakePoolsTable';
+import { useInViewPort } from '../../widgets/InView';
 
-type TableHeaderProps = {
+type Props = {
   availableTableHeaders: Array<{
     name: string;
     title: any;
   }>;
   stakePoolsSortBy: string;
   stakePoolsOrder: string;
-  onHandleSort: (...args: Array<any>) => any;
+  onHandleSort: (newSortBy: string) => void;
+  onTableHeaderMouseEnter: () => void;
+  onTableHeaderMouseLeave: () => void;
 };
 
-@observer
-class StakePoolsTableHeader extends Component<TableHeaderProps> {
-  render() {
-    const {
-      availableTableHeaders,
-      stakePoolsSortBy,
-      stakePoolsOrder,
-      onHandleSort,
-    } = this.props;
-    return map(availableTableHeaders, (tableHeader) => {
-      const isSorted =
-        tableHeader.name === stakePoolsSortBy ||
-        (tableHeader.name === 'ticker' && stakePoolsSortBy === 'ticker');
-      const defaultOrdering = defaultTableOrdering[tableHeader.name];
-      const sortIconClasses = classNames([
-        styles.sortIcon,
-        isSorted ? styles.sorted : null,
-        isSorted && styles[`${stakePoolsOrder}CurrentOrdering`],
-        styles[`${defaultOrdering}DefaultOrdering`],
-      ]);
-      return (
-        <th
-          key={tableHeader.name}
-          onClick={() => onHandleSort(tableHeader.name)}
+export const StakePoolsTableHeader = observer(
+  ({
+    availableTableHeaders,
+    stakePoolsSortBy,
+    stakePoolsOrder,
+    onHandleSort,
+    onTableHeaderMouseEnter,
+    onTableHeaderMouseLeave,
+  }: Props) => {
+    const { setTargetRef, isInViewport } = useInViewPort();
+
+    return (
+      <>
+        <caption ref={setTargetRef} />
+        <thead
+          className={!isInViewport ? styles.stickyHeader : ''}
+          onMouseEnter={onTableHeaderMouseEnter}
+          onMouseLeave={onTableHeaderMouseLeave}
         >
-          {tableHeader.title}
-          <SVGInline svg={sortIcon} className={sortIconClasses} />
-        </th>
-      );
-    });
+          <tr>
+            {map(availableTableHeaders, (tableHeader) => {
+              const isSorted =
+                tableHeader.name === stakePoolsSortBy ||
+                (tableHeader.name === 'ticker' &&
+                  stakePoolsSortBy === 'ticker');
+              const defaultOrdering = defaultTableOrdering[tableHeader.name];
+              const sortIconClasses = classNames([
+                styles.sortIcon,
+                isSorted ? styles.sorted : null,
+                isSorted && styles[`${stakePoolsOrder}CurrentOrdering`],
+                styles[`${defaultOrdering}DefaultOrdering`],
+              ]);
+              return (
+                <th
+                  key={tableHeader.name}
+                  onClick={() => onHandleSort(tableHeader.name)}
+                >
+                  {tableHeader.title}
+                  <SVGInline svg={sortIcon} className={sortIconClasses} />
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+      </>
+    );
   }
-}
-
-export { StakePoolsTableHeader };
+);

source/renderer/app/components/widgets/InView.tsx

@@ -1,13 +1,6 @@
 import { useRef, useState, useCallback } from 'react';
 
-type Props = {
-  children: (props: {
-    isInViewport: boolean;
-    setTargetRef: (target: HTMLElement) => void;
-  }) => JSX.Element;
-};
-
-export const InView = ({ children }: Props) => {
+export const useInViewPort = () => {
   const [isInViewport, setIsInViewport] = useState(true);
   const targetRef = useRef(null);
   const observerRef = useRef(
@@ -30,5 +23,5 @@ export const InView = ({ children }: Props) => {
     targetRef.current = target;
   }, []);
 
-  return children({ isInViewport, setTargetRef });
+  return { isInViewport, setTargetRef };
 };