feat(react-components): row-click callback in poi list and initialize…

… PoIs on app mount (#4888) * feat(react-components): row-click callback in poi list * chore: lint fix
cognitedata · Nov 25, 2024 · 837bcf3 · 837bcf3
1 parent dd5054d
commit 837bcf3
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 14 deletions.
diff --git a/react-components/package.json b/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.68.2",
+  "version": "0.69.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",

diff --git a/react-components/src/architecture/concrete/pointsOfInterest/PointsOfInterestTool.ts b/react-components/src/architecture/concrete/pointsOfInterest/PointsOfInterestTool.ts
@@ -12,6 +12,7 @@ import { type AnchoredDialogContent } from '../../base/commands/BaseTool';
 import { AnchoredDialogUpdater } from '../../base/reactUpdaters/AnchoredDialogUpdater';
 import { NavigationTool } from '../../base/concreteCommands/NavigationTool';
 import { CreatePointsOfInterestWithDescriptionCommand } from './CreatePointsOfInterestWithDescriptionCommand';
+import { type RevealRenderTarget } from '../../base/renderTarget/RevealRenderTarget';
 
 export class PointsOfInterestTool<PoiIdType> extends NavigationTool {
   private _isCreating: boolean = false;
@@ -52,19 +53,28 @@ export class PointsOfInterestTool<PoiIdType> extends NavigationTool {
     await this.selectOverlayFromClick(event);
   }
 
+  public override attach(renderTarget: RevealRenderTarget): void {
+    super.attach(renderTarget);
+    this.initializePointsOfInterestDomainObject();
+  }
+
   public override getAnchoredDialogContent(): AnchoredDialogContent | undefined {
     return this._anchoredDialogContent;
   }
 
   public getPointsOfInterestDomainObject(): PointsOfInterestDomainObject<PoiIdType> {
-    const domainObject = this.rootDomainObject.getDescendantByType(PointsOfInterestDomainObject);
-    if (domainObject !== undefined) {
-      return domainObject;
-    }
     return this.initializePointsOfInterestDomainObject();
   }
 
-  private initializePointsOfInterestDomainObject(): PointsOfInterestDomainObject<PoiIdType> {
+  public initializePointsOfInterestDomainObject(): PointsOfInterestDomainObject<PoiIdType> {
+    const oldPoiDomainObject = this.rootDomainObject.getDescendantByType(
+      PointsOfInterestDomainObject
+    );
+
+    if (oldPoiDomainObject !== undefined) {
+      return oldPoiDomainObject;
+    }
+
     const domainObject = new PointsOfInterestDomainObject(
       new PointsOfInterestAdsProvider(
         this.rootDomainObject.sdk

diff --git a/react-components/src/components/Architecture/pointsOfInterest/PoiList.tsx b/react-components/src/components/Architecture/pointsOfInterest/PoiList.tsx
@@ -11,10 +11,14 @@ import { useTranslation } from '../../i18n/I18n';
 
 type RowType = {
   id: string;
-  poi: PointOfInterest<any>;
+  poi: PointOfInterest<unknown>;
 };
 
-export const PoiList = (): ReactNode => {
+export type PoiListProps = {
+  onRowClick?: (poi: PointOfInterest<unknown>) => void;
+};
+
+export const PoiList = ({ onRowClick }: PoiListProps): ReactNode => {
   const { t } = useTranslation();
 
   const [pois, setPois] = useState<Array<PointOfInterest<unknown>>>([]);
@@ -53,6 +57,7 @@ export const PoiList = (): ReactNode => {
     <DataGrid<RowType>
       onRowClick={(row) => {
         poiObject.setSelectedPointOfInterest(row.row.poi as PointOfInterest<unknown>);
+        onRowClick?.(row.row.poi as PointOfInterest<unknown>);
       }}
       columns={columns}
       data={rowData}

diff --git a/react-components/src/components/Architecture/pointsOfInterest/usePoiDomainObject.ts b/react-components/src/components/Architecture/pointsOfInterest/usePoiDomainObject.ts
@@ -2,21 +2,24 @@
  * Copyright 2024 Cognite AS
  */
 import { useState } from 'react';
-import { type PointsOfInterestDomainObject } from '../../../architecture';
-import { PointsOfInterestTool } from '../../../architecture/concrete/pointsOfInterest/PointsOfInterestTool';
+import { PointsOfInterestDomainObject } from '../../../architecture';
 import { useRenderTarget } from '../../RevealCanvas';
-import { useOnUpdate } from '../useOnUpdate';
+import { useOnUpdateDomainObject } from '../useOnUpdate';
 
 export function usePoiDomainObject(): PointsOfInterestDomainObject<unknown> | undefined {
   const renderTarget = useRenderTarget();
-  const poiTool = renderTarget.commandsController.getToolByType(PointsOfInterestTool);
 
   const [poiDomainObject, setPoiDomainObject] = useState<
     PointsOfInterestDomainObject<unknown> | undefined
   >(undefined);
 
-  useOnUpdate(poiTool, () => {
-    setPoiDomainObject(poiTool?.getPointsOfInterestDomainObject());
+  useOnUpdateDomainObject(renderTarget.rootDomainObject, () => {
+    if (poiDomainObject !== undefined) {
+      return;
+    }
+    setPoiDomainObject(
+      renderTarget.rootDomainObject.getDescendantByType(PointsOfInterestDomainObject)
+    );
   });
 
   return poiDomainObject;