Refetch topics list to display the updated data (#1900)

* refetch topics list to display the updated data

* fixing sonar code smells (#1826)

* fixing sonar code smells

* removing unnecessary change

* fixing some sonar code smell issues

* making requested changes

* Fix sonar badges in readme (#1906)

Co-authored-by: Robert Azizbekyan <103438454+rAzizbekyan@users.noreply.github.com>
Co-authored-by: Oleg Shur <workshur@gmail.com>

kafka-ui-react-app/src/components/Topics/List/List.tsx

@@ -88,8 +88,8 @@ const List: React.FC<TopicsListProps> = ({
   const [cachedPage, setCachedPage] = React.useState<number | null>(null);
   const history = useHistory();
 
-  React.useEffect(() => {
+  const topicsListParams = React.useMemo(
-    fetchTopicsList({
+    () => ({
       clusterName,
       page,
       perPage,
@@ -97,17 +97,13 @@ const List: React.FC<TopicsListProps> = ({
       sortOrder,
       search,
       showInternal,
-    });
+    }),
-  }, [
+    [clusterName, page, perPage, orderBy, sortOrder, search, showInternal]
-    fetchTopicsList,
+  );
-    clusterName,
+
-    page,
+  React.useEffect(() => {
-    perPage,
+    fetchTopicsList(topicsListParams);
-    orderBy,
+  }, [fetchTopicsList, topicsListParams]);
-    sortOrder,
-    search,
-    showInternal,
-  ]);
 
   const tableState = useTableState<
     TopicWithDetailedInfo,
@@ -190,6 +186,7 @@ const List: React.FC<TopicsListProps> = ({
     }
     closeConfirmationModal();
     clearSelectedTopics();
+    fetchTopicsList(topicsListParams);
   }, [
     confirmationModal,
     clearSelectedTopics,
@@ -197,6 +194,8 @@ const List: React.FC<TopicsListProps> = ({
     deleteTopics,
     clearTopicsMessages,
     tableState.selectedIds,
+    fetchTopicsList,
+    topicsListParams,
   ]);
 
   const ActionsCell = React.memo<TableCellProps<TopicWithDetailedInfo, string>>(