refactor(react-components): Refactor similar code into a hook (#4834)

* Initial commit * More approvments
cognitedata · Oct 30, 2024 · b205faa · b205faa
1 parent 17ac940
commit b205faa
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 201 deletions.
diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx
@@ -2,7 +2,7 @@
  * Copyright 2024 Cognite AS
  */
 
-import { type ReactElement, useState, useEffect, useMemo, useCallback } from 'react';
+import { type ReactElement, useState, useMemo } from 'react';
 import { useRenderTarget } from '../RevealCanvas/ViewerContext';
 import { Button, Tooltip as CogsTooltip } from '@cognite/cogs.js';
 import { useTranslation } from '../i18n/I18n';
@@ -11,6 +11,7 @@ import { getButtonType, getDefaultCommand, getIcon, getTooltipPlacement } from '
 import { LabelWithShortcut } from './LabelWithShortcut';
 import { type IconName } from '../../architecture/base/utilities/IconName';
 import { IconComponent } from './IconComponentMapper';
+import { useOnUpdate } from './useOnUpdate';
 
 export const CommandButton = ({
   inputCommand,
@@ -24,27 +25,19 @@ export const CommandButton = ({
   const command = useMemo<BaseCommand>(() => getDefaultCommand(inputCommand, renderTarget), []);
 
   // @update-ui-component-pattern
-  const [isChecked, setChecked] = useState<boolean>(false);
-  const [isEnabled, setEnabled] = useState<boolean>(true);
-  const [isVisible, setVisible] = useState<boolean>(true);
-  const [uniqueId, setUniqueId] = useState<number>(0);
+  const [isChecked, setChecked] = useState(false);
+  const [isEnabled, setEnabled] = useState(true);
+  const [isVisible, setVisible] = useState(true);
+  const [uniqueId, setUniqueId] = useState(0);
   const [icon, setIcon] = useState<IconName | undefined>(undefined);
 
-  const update = useCallback((command: BaseCommand) => {
+  useOnUpdate(command, () => {
     setChecked(command.isChecked);
     setEnabled(command.isEnabled);
     setVisible(command.isVisible);
     setUniqueId(command.uniqueId);
     setIcon(getIcon(command));
-  }, []);
-
-  useEffect(() => {
-    update(command);
-    command.addEventListener(update);
-    return () => {
-      command.removeEventListener(update);
-    };
-  }, [command]);
+  });
   // @end
 
   if (!isVisible) {

diff --git a/react-components/src/components/Architecture/DropdownButton.tsx b/react-components/src/components/Architecture/DropdownButton.tsx
@@ -4,15 +4,7 @@
 
 import { Button, Tooltip as CogsTooltip, ChevronDownIcon, ChevronUpIcon } from '@cognite/cogs.js';
 import { Menu, Option, Select } from '@cognite/cogs-lab';
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactElement,
-  type SetStateAction,
-  type Dispatch
-} from 'react';
+import { useMemo, useState, type ReactElement, type SetStateAction, type Dispatch } from 'react';
 
 import { useTranslation } from '../i18n/I18n';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
@@ -24,6 +16,7 @@ import { type TranslateDelegate } from '../../architecture/base/utilities/Transl
 import { DEFAULT_PADDING, OPTION_MIN_WIDTH } from './constants';
 
 import styled from 'styled-components';
+import { useOnUpdate } from './useOnUpdate';
 
 export const DropdownButton = ({
   inputCommand,
@@ -41,24 +34,16 @@ export const DropdownButton = ({
   );
 
   // @update-ui-component-pattern
-  const [isOpen, setOpen] = useState<boolean>(false);
-  const [isEnabled, setEnabled] = useState<boolean>(true);
-  const [isVisible, setVisible] = useState<boolean>(true);
-  const [uniqueId, setUniqueId] = useState<number>(0);
+  const [isOpen, setOpen] = useState(false);
+  const [isEnabled, setEnabled] = useState(true);
+  const [isVisible, setVisible] = useState(true);
+  const [uniqueId, setUniqueId] = useState(0);
 
-  const update = useCallback((command: BaseCommand) => {
+  useOnUpdate(command, () => {
     setEnabled(command.isEnabled);
     setVisible(command.isVisible);
     setUniqueId(command.uniqueId);
-  }, []);
-
-  useEffect(() => {
-    update(command);
-    command.addEventListener(update);
-    return () => {
-      command.removeEventListener(update);
-    };
-  }, [command]);
+  });
   // @end
 
   if (!isVisible) {

diff --git a/react-components/src/components/Architecture/FilterButton.tsx b/react-components/src/components/Architecture/FilterButton.tsx
@@ -3,8 +3,6 @@
  */
 
 import {
-  useCallback,
-  useEffect,
   useMemo,
   useState,
   type ReactElement,
@@ -15,7 +13,6 @@ import {
 import { Button, ChevronDownIcon, ChevronUpIcon, Tooltip as CogsTooltip } from '@cognite/cogs.js';
 import { Menu, SelectPanel } from '@cognite/cogs-lab';
 import { useTranslation } from '../i18n/I18n';
-import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { useRenderTarget } from '../RevealCanvas/ViewerContext';
 import { getButtonType, getDefaultCommand, getTooltipPlacement, getIcon } from './utilities';
 import { LabelWithShortcut } from './LabelWithShortcut';
@@ -29,6 +26,7 @@ import { TOOLBAR_HORIZONTAL_PANEL_OFFSET } from '../constants';
 import { offset } from '@floating-ui/dom';
 import styled from 'styled-components';
 import { type PlacementType } from './types';
+import { useOnUpdate } from './useOnUpdate';
 
 export const FilterButton = ({
   inputCommand,
@@ -48,40 +46,29 @@ export const FilterButton = ({
   command.initializeChildrenIfNeeded();
 
   // @update-ui-component-pattern
-  const [isEnabled, setEnabled] = useState<boolean>(true);
-  const [isVisible, setVisible] = useState<boolean>(true);
-  const [uniqueId, setUniqueId] = useState<number>(0);
+  const [isEnabled, setEnabled] = useState(true);
+  const [isVisible, setVisible] = useState(true);
+  const [uniqueId, setUniqueId] = useState(0);
   const [icon, setIcon] = useState<IconName | undefined>(undefined);
-  const [isOpen, setOpen] = useState<boolean>(false);
-  const [isAllChecked, setAllChecked] = useState<boolean>(false);
-  const [isSomeChecked, setSomeChecked] = useState<boolean>(false);
-  const [selectedLabel, setSelectedLabel] = useState<string>('');
+  const [isOpen, setOpen] = useState(false);
+  const [isAllChecked, setAllChecked] = useState(false);
+  const [isSomeChecked, setSomeChecked] = useState(false);
+  const [selectedLabel, setSelectedLabel] = useState('');
 
   const { t } = useTranslation();
   const label = command.getLabel(t);
 
-  const update = useCallback(
-    (command: BaseCommand) => {
-      setEnabled(command.isEnabled);
-      setVisible(command.isVisible);
-      setUniqueId(command.uniqueId);
-      setIcon(getIcon(command));
-      if (command instanceof BaseFilterCommand) {
-        setAllChecked(command.isAllChecked);
-        setSomeChecked(command.children?.some((child) => child.isChecked) === true);
-        setSelectedLabel(command.getSelectedLabel(t));
-      }
-    },
-    [command]
-  );
-
-  useEffect(() => {
-    update(command);
-    command.addEventListener(update);
-    return () => {
-      command.removeEventListener(update);
-    };
-  }, [command]);
+  useOnUpdate(command, () => {
+    setEnabled(command.isEnabled);
+    setVisible(command.isVisible);
+    setUniqueId(command.uniqueId);
+    setIcon(getIcon(command));
+    if (command instanceof BaseFilterCommand) {
+      setAllChecked(command.isAllChecked);
+      setSomeChecked(command.children?.some((child) => child.isChecked) === true);
+      setSelectedLabel(command.getSelectedLabel(t));
+    }
+  });
   // @end
 
   const children = command.children;

diff --git a/react-components/src/components/Architecture/FilterItem.tsx b/react-components/src/components/Architecture/FilterItem.tsx
@@ -2,37 +2,29 @@
  * Copyright 2024 Cognite AS
  */
 
-import { useCallback, useEffect, useState, type ReactElement } from 'react';
+import { useState, type ReactElement } from 'react';
 import { SelectPanel } from '@cognite/cogs-lab';
 import { useTranslation } from '../i18n/I18n';
-import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import styled from 'styled-components';
 import { type Color } from 'three';
 import { type BaseFilterItemCommand } from '../../architecture/base/commands/BaseFilterCommand';
+import { useOnUpdate } from './useOnUpdate';
 
 export const FilterItem = ({ command }: { command: BaseFilterItemCommand }): ReactElement => {
   const { t } = useTranslation();
 
   // @update-ui-component-pattern
-  const [isChecked, setChecked] = useState<boolean>(false);
-  const [isEnabled, setEnabled] = useState<boolean>(true);
-  const [isVisible, setVisible] = useState<boolean>(true);
-  const [uniqueId, setUniqueId] = useState<number>(0);
+  const [isChecked, setChecked] = useState(false);
+  const [isEnabled, setEnabled] = useState(true);
+  const [isVisible, setVisible] = useState(true);
+  const [uniqueId, setUniqueId] = useState(0);
 
-  const update = useCallback((command: BaseCommand) => {
+  useOnUpdate(command, () => {
     setChecked(command.isChecked);
     setEnabled(command.isEnabled);
     setVisible(command.isVisible);
     setUniqueId(command.uniqueId);
-  }, []);
-
-  useEffect(() => {
-    update(command);
-    command.addEventListener(update);
-    return () => {
-      command.removeEventListener(update);
-    };
-  }, [command]);
+  });
   // @end
 
   if (!isVisible) {

diff --git a/react-components/src/components/Architecture/SegmentedButtons.tsx b/react-components/src/components/Architecture/SegmentedButtons.tsx
@@ -2,7 +2,7 @@
  * Copyright 2024 Cognite AS
  */
 
-import { type ReactElement, useState, useEffect, useMemo, useCallback } from 'react';
+import { type ReactElement, useState, useMemo } from 'react';
 import { useRenderTarget } from '../RevealCanvas/ViewerContext';
 import { SegmentedControl, Tooltip as CogsTooltip } from '@cognite/cogs.js';
 import { useTranslation } from '../i18n/I18n';
@@ -11,6 +11,7 @@ import { getDefaultCommand, getIcon, getTooltipPlacement } from './utilities';
 import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
 import { LabelWithShortcut } from './LabelWithShortcut';
 import { IconComponent } from './IconComponentMapper';
+import { useOnUpdate } from './useOnUpdate';
 
 export const SegmentedButtons = ({
   inputCommand,
@@ -32,22 +33,14 @@ export const SegmentedButtons = ({
   const [uniqueId, setUniqueId] = useState(0);
   const [selected, setSelected] = useState(getSelectedKey(command));
 
-  const update = useCallback((command: BaseCommand) => {
+  useOnUpdate(command, () => {
     setEnabled(command.isEnabled);
     setVisible(command.isVisible);
     setUniqueId(command.uniqueId);
     if (command instanceof BaseOptionCommand) {
       setSelected(getSelectedKey(command));
     }
-  }, []);
-
-  useEffect(() => {
-    update(command);
-    command.addEventListener(update);
-    return () => {
-      command.removeEventListener(update);
-    };
-  }, [command]);
+  });
   // @end
 
   if (!isVisible || command.children === undefined) {