From fee4cf74e5a30a905143d6f28c49e52c44df2ee4 Mon Sep 17 00:00:00 2001
From: j8seangel <jseangel@gmail.com>
Date: Fri, 30 Aug 2024 17:19:13 +0200
Subject: [PATCH] use dataview vessel group

---
 .../vessel-groups/VesselGroupsLayerPanel.tsx  | 16 ++++++++++------
 .../vessel-groups/VesselGroupsSection.tsx     | 19 +++----------------
 2 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsLayerPanel.tsx b/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsLayerPanel.tsx
index 7295a32310..66cc24c77e 100644
--- a/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsLayerPanel.tsx
+++ b/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsLayerPanel.tsx
@@ -2,7 +2,6 @@ import { Fragment, useState } from 'react'
 import cx from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import { VesselGroup } from '@globalfishingwatch/api-types'
 import { IconButton, ColorBarOption, Tooltip } from '@globalfishingwatch/ui-components'
 import { UrlDataviewInstance } from '@globalfishingwatch/dataviews-client'
 import { useGetDeckLayer } from '@globalfishingwatch/deck-layer-composer'
@@ -28,19 +27,18 @@ import VesselGroupNotFound from './VesselGroupNotFound'
 
 export type VesselGroupLayerPanelProps = {
   dataview: UrlDataviewInstance
-  vesselGroup?: VesselGroup
   vesselGroupLoading?: boolean
 }
 
 function VesselGroupLayerPanel({
   dataview,
-  vesselGroup,
   vesselGroupLoading,
 }: VesselGroupLayerPanelProps): React.ReactElement {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
   const isGFWUser = useSelector(selectIsGFWUser)
   const readOnly = useSelector(selectReadOnly)
+  const { vesselGroup } = dataview
   const { upsertDataviewInstance } = useDataviewInstancesConnect()
 
   const activityLayer = useGetDeckLayer<FourwingsLayer>(dataview?.id)
@@ -105,9 +103,15 @@ function VesselGroupLayerPanel({
                 content={t('vesselGroupReport.clickToSee', 'Click to see the vessel group report')}
               >
                 <span>
-                  {formatInfoField(vesselGroup?.name, 'name')}{' '}
-                  {vesselGroup?.vessels?.length && (
-                    <span className={styles.secondary}> ({vesselGroup?.vessels.length})</span>
+                  {vesselGroupLoading ? (
+                    t('vesselGroup.loadingInfo', 'Loading vessel group info')
+                  ) : (
+                    <Fragment>
+                      {formatInfoField(vesselGroup?.name, 'name')}{' '}
+                      {vesselGroup?.vessels?.length && (
+                        <span className={styles.secondary}> ({vesselGroup?.vessels.length})</span>
+                      )}
+                    </Fragment>
                   )}
                 </span>
               </Tooltip>
diff --git a/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsSection.tsx b/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsSection.tsx
index 1c2264c770..3a33d29283 100644
--- a/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsSection.tsx
+++ b/apps/fishing-map/features/workspace/vessel-groups/VesselGroupsSection.tsx
@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux'
 import { SortableContext } from '@dnd-kit/sortable'
 import cx from 'classnames'
 import { useTranslation } from 'react-i18next'
-import { VesselGroup } from '@globalfishingwatch/api-types'
 import styles from 'features/workspace/shared/Sections.module.css'
 import { TrackCategory, trackEvent } from 'features/app/analytics.hooks'
 import { useDataviewInstancesConnect } from 'features/workspace/workspace.hook'
@@ -11,7 +10,6 @@ import { selectReadOnly } from 'features/app/selectors/app.selectors'
 import VesselGroupListTooltip from 'features/vessel-groups/VesselGroupListTooltip'
 import { getVesselGroupDataviewInstance } from 'features/dataviews/dataviews.utils'
 import { selectVesselGroupDataviews } from 'features/dataviews/selectors/dataviews.categories.selectors'
-import { selectAllVisibleVesselGroups } from 'features/user/selectors/user.permissions.selectors'
 import { useAppDispatch } from 'features/app/app.hooks'
 import {
   selectVesselGroupsStatusId,
@@ -27,7 +25,6 @@ function VesselGroupSection(): React.ReactElement {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
   const dataviews = useSelector(selectVesselGroupDataviews)
-  const allVesselGroups = useSelector(selectAllVisibleVesselGroups)
   const workspaceVesselGroupsStatus = useSelector(selectWorkspaceVesselGroupsStatus)
   const vesselGroupsStatusId = useSelector(selectVesselGroupsStatusId)
   const { upsertDataviewInstance } = useDataviewInstancesConnect()
@@ -72,24 +69,14 @@ function VesselGroupSection(): React.ReactElement {
       <SortableContext items={dataviews}>
         {dataviews.length > 0 ? (
           dataviews?.map((dataview) => {
-            const dataviewVesselGroups = dataview.config?.filters?.['vessel-groups']
-            let vesselGroup = allVesselGroups.find((vesselGroup) =>
-              dataviewVesselGroups.includes(vesselGroup.id)
-            )
-            if (workspaceVesselGroupsStatus === AsyncReducerStatus.Loading && !vesselGroup) {
-              vesselGroup = {
-                id: dataviewVesselGroups[0],
-                name: t('vesselGroup.loadingInfo', 'Loading vessel group info'),
-              } as VesselGroup
-            }
             return (
               <VesselGroupLayerPanel
                 key={dataview.id}
                 dataview={dataview}
-                vesselGroup={vesselGroup}
                 vesselGroupLoading={
-                  (!vesselGroup && workspaceVesselGroupsStatus === AsyncReducerStatus.Loading) ||
-                  dataviewVesselGroups[0] === vesselGroupsStatusId
+                  (!dataview.vesselGroup &&
+                    workspaceVesselGroupsStatus === AsyncReducerStatus.Loading) ||
+                  dataview.vesselGroup?.id === vesselGroupsStatusId
                 }
               />
             )