refactor(react-components): remove casting by filtering and move the …

…clean content to a function (#4929) * remove casting by filtering and move the clean content to a function * lint * changes for cr
cognitedata · Dec 3, 2024 · 327b7b6 · 327b7b6
1 parent 4a0c24f
commit 327b7b6
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 32 deletions.
diff --git a/react-components/src/architecture/base/commands/CustomBaseInputCommand.ts b/react-components/src/architecture/base/commands/CustomBaseInputCommand.ts
@@ -61,33 +61,29 @@ export abstract class CustomBaseInputCommand extends RenderTargetCommand {
     this._contents = contents;
 
     const invokeResult = this.invoke();
-    this._contents = this._contents.map((content) => {
-      if (content.type === 'text' || content.type === 'comment') {
-        return {
-          type: content.type,
-          content: ''
-        };
-      }
-      if (content.type === 'commentWithButtons') {
-        return {
-          type: content.type,
-          content: ''
-        };
-      }
-      if (content.type === 'customInput') {
-        return {
-          type: content.type,
-          content: undefined
-        };
-      }
-      if (content.type === 'submitButtons') {
-        return {
-          type: content.type,
-          content: undefined
-        };
-      }
-      return content;
-    });
+    this._contents = clearFieldContents(this._contents);
     return invokeResult;
   }
 }
+
+function clearFieldContents(contents: FieldContent[]): FieldContent[] {
+  return contents.map((content) => {
+    if (
+      content.type === 'text' ||
+      content.type === 'comment' ||
+      content.type === 'commentWithButtons'
+    ) {
+      return {
+        type: content.type,
+        content: ''
+      };
+    }
+    if (content.type === 'customInput' || content.type === 'submitButtons') {
+      return {
+        type: content.type,
+        content: undefined
+      };
+    }
+    return content;
+  });
+}
diff --git a/...c/architecture/concrete/pointsOfInterest/CreatePointsOfInterestWithDescriptionCommand.tsx b/...c/architecture/concrete/pointsOfInterest/CreatePointsOfInterestWithDescriptionCommand.tsx
@@ -12,6 +12,7 @@ import {
   type FieldContent
 } from '../../base/commands/CustomBaseInputCommand';
 import { InstanceLabel } from '../../../components/InstanceLabel';
+import { isDefined } from '../../../utilities/isDefined';
 
 export class CreatePointsOfInterestWithDescriptionCommand extends CustomBaseInputCommand {
   private readonly _point: Vector3;
@@ -93,11 +94,17 @@ export class CreatePointsOfInterestWithDescriptionCommand extends CustomBaseInpu
       return false;
     }
 
+    const filteredContents = filterContentsAsString(this._contents);
+
+    const poiName = filteredContents[0];
+    const poiDescription = filteredContents[1];
+
     const poi = domainObject.addPendingPointsOfInterest(
       createPointsOfInterestPropertiesFromPointAndTitle(
         this._point,
         this._scene,
-        this._contents.map((content) => content.content),
+        poiName,
+        poiDescription,
         this._associatedInstance
       )
     );
@@ -110,3 +117,18 @@ export class CreatePointsOfInterestWithDescriptionCommand extends CustomBaseInpu
     return true;
   }
 }
+
+function filterContentsAsString(contents: FieldContent[]): string[] {
+  return contents
+    .map((content) => {
+      if (
+        content.type === 'text' ||
+        content.type === 'comment' ||
+        content.type === 'commentWithButtons'
+      ) {
+        return content.content;
+      }
+      return undefined;
+    })
+    .filter((content) => isDefined(content));
+}
diff --git a/react-components/src/architecture/concrete/pointsOfInterest/types.ts b/react-components/src/architecture/concrete/pointsOfInterest/types.ts
@@ -11,7 +11,6 @@ import { type Vector3 } from 'three';
 import { type DomainObjectIntersection } from '../../base/domainObjectsHelpers/DomainObjectIntersection';
 import { type PointsOfInterestDomainObject } from './PointsOfInterestDomainObject';
 import { type InstanceReference, type DmsUniqueIdentifier } from '../../../data-providers';
-import { type ReactNode } from 'react';
 
 export enum PointsOfInterestStatus {
   Default,
@@ -28,7 +27,8 @@ export type PointOfInterest<IdType> = {
 export function createPointsOfInterestPropertiesFromPointAndTitle(
   point: Vector3,
   scene: DmsUniqueIdentifier,
-  contents: ReactNode[],
+  name: string,
+  description: string,
   associatedInstance: InstanceReference | undefined
 ): PointsOfInterestProperties {
   const cdfPosition = point.clone().applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION.clone().invert());
@@ -38,8 +38,8 @@ export function createPointsOfInterestPropertiesFromPointAndTitle(
     positionZ: cdfPosition.z,
     scene,
     sceneState: {},
-    name: contents[0] as string,
-    description: contents[1] as string,
+    name,
+    description,
     instanceRef: associatedInstance
   };
 }