Remove useEffect duplicating focusOnAlert() slice action in AlertList…

…AndReportingList

frontend/src/features/SideWindow/Alert/AlertListAndReportingList/index.tsx

@@ -1,20 +1,16 @@
 import { SeafrontGroup } from '@constants/seafront'
-import { propEq } from 'ramda'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 import styled from 'styled-components'
 
 import { AlertAndReportingTab } from './constants'
 import { PendingAlertsList } from './PendingAlertsList'
-import { COLORS } from '../../../../constants/constants'
 import { ALERTS_MENU_SEAFRONT_TO_SEAFRONTS } from '../../../../domain/entities/alerts/constants'
-import { useMainAppDispatch } from '../../../../hooks/useMainAppDispatch'
 import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
 import { ReportingList } from '../../../Reporting/components/ReportingList'
-import { setSubMenu } from '../slice'
 
 import type { RefObject } from 'react'
 
-type AlertsAndReportingsProps = {
+type AlertListAndReportingListProps = {
   baseRef: RefObject<HTMLDivElement>
   selectedSeafrontGroup: SeafrontGroup
   selectedTab: any
@@ -25,10 +21,7 @@ export function AlertListAndReportingList({
   selectedSeafrontGroup,
   selectedTab,
   setSelectedTab
-}: AlertsAndReportingsProps) {
-  const dispatch = useMainAppDispatch()
-  const focusedPendingAlertId = useMainAppSelector(state => state.alert.focusedPendingAlertId)
-  const pendingAlerts = useMainAppSelector(state => state.alert.pendingAlerts)
+}: AlertListAndReportingListProps) {
   const silencedAlerts = useMainAppSelector(state => state.alert.silencedAlerts)
 
   const filteredSilencedAlerts = useMemo(
@@ -43,26 +36,6 @@ export function AlertListAndReportingList({
     [silencedAlerts, selectedSeafrontGroup]
   )
 
-  useEffect(() => {
-    if (!focusedPendingAlertId) {
-      return
-    }
-
-    const focusedPendingAlert = pendingAlerts.find(propEq(focusedPendingAlertId, 'id'))
-    if (!focusedPendingAlert) {
-      return
-    }
-    const { seaFront } = focusedPendingAlert.value
-
-    const menuSeafrontName = Object.keys(ALERTS_MENU_SEAFRONT_TO_SEAFRONTS)
-      .map(menuSeafrontKey => ALERTS_MENU_SEAFRONT_TO_SEAFRONTS[menuSeafrontKey])
-      .find(item => item.seafronts.includes(seaFront))
-
-    if (menuSeafrontName) {
-      dispatch(setSubMenu(menuSeafrontName.menuSeafront))
-    }
-  }, [dispatch, focusedPendingAlertId, pendingAlerts])
-
   return (
     <Wrapper>
       <Title
@@ -104,8 +77,8 @@ const Wrapper = styled.div`
 const Title = styled.h2<{
   isSelected: boolean
 }>`
-  border-bottom: 5px solid ${p => (p.isSelected ? COLORS.charcoal : COLORS.white)};
-  color: ${COLORS.gunMetal};
+  border-bottom: 5px solid ${p => (p.isSelected ? p.theme.color.charcoal : p.theme.color.white)};
+  color: ${p => p.theme.color.gunMetal};
   cursor: pointer;
   display: inline-block;
   font-size: 22px;