From 6e0f4f058ad24a1027ee4d213ab7e6e6c85c92c7 Mon Sep 17 00:00:00 2001
From: mgold1234 <mgold@redhat.com>
Date: Thu, 4 Jan 2024 17:36:59 +0200
Subject: [PATCH] Repositories: fix lint warning react-hooks/exhaustive-deps
 with adding useCallback hook

this commit fix the exhaustive-deps by adding the useCallback hook.
after adding the missing dependencies to the useEffect,
I fix this problem  -gcaThe 'initializeRepositories' function makes the
dependencies of useMemo Hook (at line 256) change on every render.
Move it inside the useMemo callback. Alternatively,
wrap the definition of 'initializeRepositories' in its own useCallback() Hook  react-hooks/exhaustive-deps
---
 .../formComponents/Repositories.js            | 72 ++++++++++---------
 .../steps/Repositories/Repositories.tsx       | 11 +--
 2 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/src/Components/CreateImageWizard/formComponents/Repositories.js b/src/Components/CreateImageWizard/formComponents/Repositories.js
index 3c44a3650..67fdef9e0 100644
--- a/src/Components/CreateImageWizard/formComponents/Repositories.js
+++ b/src/Components/CreateImageWizard/formComponents/Repositories.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import {
   useFieldApi,
@@ -155,42 +155,45 @@ const convertSchemaToContentSources = (repo) => {
 };
 
 const Repositories = (props) => {
-  const initializeRepositories = (contentSourcesReposList) => {
-    // Convert list of repositories into an object where key is repo URL
-    const contentSourcesRepos = contentSourcesReposList.reduce(
-      (accumulator, currentValue) => {
-        accumulator[currentValue.url] = currentValue;
-        return accumulator;
-      },
-      {}
-    );
+  const initializeRepositories = useCallback(
+    (contentSourcesReposList) => {
+      // Convert list of repositories into an object where key is repo URL
+      const contentSourcesRepos = contentSourcesReposList.reduce(
+        (accumulator, currentValue) => {
+          accumulator[currentValue.url] = currentValue;
+          return accumulator;
+        },
+        {}
+      );
 
-    // Repositories in the form state can be present when 'Recreate image' is used
-    // to open the wizard that are not necessarily in content sources.
-    const formStateReposList =
-      getState()?.values?.['original-payload-repositories'];
+      // Repositories in the form state can be present when 'Recreate image' is used
+      // to open the wizard that are not necessarily in content sources.
+      const formStateReposList =
+        getState()?.values?.['original-payload-repositories'];
 
-    const mergeRepositories = (contentSourcesRepos, formStateReposList) => {
-      const formStateRepos = {};
+      const mergeRepositories = (contentSourcesRepos, formStateReposList) => {
+        const formStateRepos = {};
 
-      for (const repo of formStateReposList) {
-        formStateRepos[repo.baseurl] = convertSchemaToContentSources(repo);
-        formStateRepos[repo.baseurl].name = '';
-      }
+        for (const repo of formStateReposList) {
+          formStateRepos[repo.baseurl] = convertSchemaToContentSources(repo);
+          formStateRepos[repo.baseurl].name = '';
+        }
 
-      // In case of duplicate repo urls, the repo from Content Sources overwrites the
-      // repo from the form state.
-      const mergedRepos = { ...formStateRepos, ...contentSourcesRepos };
+        // In case of duplicate repo urls, the repo from Content Sources overwrites the
+        // repo from the form state.
+        const mergedRepos = { ...formStateRepos, ...contentSourcesRepos };
 
-      return mergedRepos;
-    };
+        return mergedRepos;
+      };
 
-    const repositories = formStateReposList
-      ? mergeRepositories(contentSourcesRepos, formStateReposList)
-      : contentSourcesRepos;
+      const repositories = formStateReposList
+        ? mergeRepositories(contentSourcesRepos, formStateReposList)
+        : contentSourcesRepos;
 
-    return repositories;
-  };
+      return repositories;
+    },
+    [getState]
+  );
 
   const { getState, change } = useFormApi();
   const { input } = useFieldApi(props);
@@ -254,7 +257,7 @@ const Repositories = (props) => {
 
   const repositories = useMemo(() => {
     return data ? initializeRepositories(data.data) : {};
-  }, [firstRequest.data, followupRequest.data]);
+  }, [data, initializeRepositories]);
 
   const handleToggleClick = (event) => {
     const id = event.currentTarget.id;
@@ -262,7 +265,10 @@ const Repositories = (props) => {
     setToggleSelected(id);
   };
 
-  const isRepoSelected = (repoURL) => selected.includes(repoURL);
+  const isRepoSelected = useCallback(
+    (repoURL) => selected.includes(repoURL),
+    [selected]
+  );
 
   const handlePerPageSelect = (event, newPerPage, newPage) => {
     setPerPage(newPerPage);
@@ -290,7 +296,7 @@ const Repositories = (props) => {
         .filter((repo) => isRepoSelected(repo.url))
         .map((repo) => repo.url);
     }
-  }, [filterValue, repositories, toggleSelected]);
+  }, [filterValue, repositories, toggleSelected, isRepoSelected]);
 
   const handleClearFilter = () => {
     setFilterValue('');
diff --git a/src/Components/CreateImageWizardV2/steps/Repositories/Repositories.tsx b/src/Components/CreateImageWizardV2/steps/Repositories/Repositories.tsx
index 96e2160a7..f9fc9df8a 100644
--- a/src/Components/CreateImageWizardV2/steps/Repositories/Repositories.tsx
+++ b/src/Components/CreateImageWizardV2/steps/Repositories/Repositories.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import {
   Alert,
@@ -213,9 +213,10 @@ const Repositories = () => {
     setToggleSelected(id);
   };
 
-  const isRepoSelected = (repoURL: string | undefined) =>
-    selected.includes(repoURL);
-
+  const isRepoSelected = useCallback(
+    (repoURL: string | undefined) => selected.includes(repoURL),
+    [selected]
+  );
   const handlePerPageSelect = (
     _: React.MouseEvent,
     newPerPage: number,
@@ -252,7 +253,7 @@ const Repositories = () => {
         .filter((repo: ApiRepositoryResponseRead) => isRepoSelected(repo.url!))
         .map((repo: ApiRepositoryResponseRead) => repo.url);
     }
-  }, [filterValue, data, toggleSelected]);
+  }, [filterValue, data, toggleSelected, isRepoSelected]);
 
   const handleClearFilter = () => {
     setFilterValue('');