From 1207f8d82f69b30572227e620643a1e48fffc7e2 Mon Sep 17 00:00:00 2001
From: johnnadeluy <johnnadel.salita@gmail.com>
Date: Wed, 28 Feb 2024 13:10:40 +0100
Subject: [PATCH] Fix useEffect array depencies for remaining pages

---
 src/components/Table/Table.tsx        | 9 ---------
 src/pages/TeamDetail/TeamDetail.tsx   | 5 +++--
 src/pages/UserProfile/UserProfile.tsx | 7 ++++---
 3 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 937b4601..07d7976b 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -93,15 +93,6 @@ const Table = ({ title, dropdownAriaLabel, dropdownFilterItems, columns, data }:
 
   const isOnMobile = useMediaQuery({ query: 'screen and (max-width: 767px)' }) // $mobile variable from ssb-component-library
 
-  /* TODO:
-   * Fix bug; reinitializes 'data' state(?) a few seconds after Tab onClick.
-    So once after Tab onClick, and twice a few seconds later
-    Order after Tab onClick: 1. Sets state to current tab table data. 2. Then to previous tab table data. 3. Then back to current tab table data.
-  
-   * Notes:
-    - data is a stored in a state that is set by useEffect and an API call on a higher hierarchical level (e.g. TeamOverview)
-    - No indication of states reinitializing during the view jittering in React Component Developer tools
-  */
   useEffect(() => {
     if (searchFilterKeyword !== '' && data.length) {
       const filterTableData = data.filter((row) =>
diff --git a/src/pages/TeamDetail/TeamDetail.tsx b/src/pages/TeamDetail/TeamDetail.tsx
index b7cac73a..596a7e66 100644
--- a/src/pages/TeamDetail/TeamDetail.tsx
+++ b/src/pages/TeamDetail/TeamDetail.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import styles from './teamDetail.module.scss'
 
 import { useCallback, useContext, useEffect, useState } from 'react'
@@ -53,7 +54,7 @@ const TeamDetail = () => {
       .catch((error) => {
         setError({ error: { message: error.message, code: '500' } })
       })
-  }, [teamId])
+  }, [])
 
   useEffect(() => {
     getTeamDetail(teamId as string)
@@ -68,7 +69,7 @@ const TeamDetail = () => {
       .catch((error) => {
         setError({ error: { message: error.message, code: '500' } })
       })
-  }, [teamId, prepTeamData])
+  }, [prepTeamData])
 
   // required for breadcrumb
   useEffect(() => {
diff --git a/src/pages/UserProfile/UserProfile.tsx b/src/pages/UserProfile/UserProfile.tsx
index 7f9811cc..5fa4ff81 100644
--- a/src/pages/UserProfile/UserProfile.tsx
+++ b/src/pages/UserProfile/UserProfile.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import styles from './userprofile.module.scss'
 
 import { Dialog, Text, Link, LeadParagraph } from '@statisticsnorway/ssb-component-library'
@@ -53,7 +54,7 @@ const UserProfile = () => {
       .catch((error) => {
         setError({ error: { message: error.message, code: '500' } })
       })
-  }, [principalName])
+  }, [])
 
   useEffect(() => {
     if (userProfileData) {
@@ -70,7 +71,7 @@ const UserProfile = () => {
           setError({ error: { message: error.message, code: '500' } })
         })
     }
-  }, [userProfileData, principalName, prepTeamData])
+  }, [prepTeamData])
 
   // required for breadcrumb
   useEffect(() => {
@@ -79,7 +80,7 @@ const UserProfile = () => {
       userProfileData.display_name = displayName
       setBreadcrumbUserProfileDisplayName({ displayName })
     }
-  }, [userProfileData, setBreadcrumbUserProfileDisplayName])
+  }, [setBreadcrumbUserProfileDisplayName])
 
   const renderTeamNameColumn = (team: Team) => {
     return (