wzApiTable optimization + obsolete redux cleaning

public/components/common/tables/table-default.tsx

@@ -10,7 +10,7 @@
  * Find more information about this on the LICENSE file.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { EuiBasicTable } from '@elastic/eui';
 import { UI_ERROR_SEVERITIES } from '../../../react-services/error-orchestrator/types';
 import { UI_LOGGER_LEVELS } from '../../../../common/constants';
@@ -43,6 +43,8 @@ export function TableDefault({
     }
   });
 
+  const isMounted = useRef(false);
+
   function tableOnChange({ page = {}, sort = {} }){
     const { index: pageIndex, size: pageSize } = page;
     const { field, direction } = sort;
@@ -59,9 +61,14 @@ export function TableDefault({
   };
 
   useEffect(() => {
-    // Reset the page index when the endpoint changes.
-    // This will cause that onSearch function is triggered because to changes in pagination in the another effect.
+    // This effect is triggered when the component is mounted because of how to the useEffect hook works.
+    // We don't want to set the pagination state because there is another effect that has this dependency
+    // and will cause the effect is triggered (redoing the onSearch function).
+    if (isMounted.current) {
+      // Reset the page index when the endpoint changes.
+      // This will cause that onSearch function is triggered because to changes in pagination in the another effect.
     setPagination({pageIndex: 0, pageSize: pagination.pageSize});
+    }
   }, [endpoint]);
 
   useEffect(() => {
@@ -90,6 +97,14 @@ export function TableDefault({
     })()
   }, [endpoint, pagination, sorting, reload]);
 
+
+  // It is required that this effect runs after other effects that use isMounted
+  // to avoid that these effects run when the component is mounted, only running
+  // when one of its dependencies changes.
+  useEffect(() => {
+    isMounted.current = true;
+  }, []);
+
   const tablePagination = {
     ...pagination,
     totalItemCount: totalItems,

public/components/common/tables/table-with-search-bar.tsx

@@ -10,7 +10,7 @@
  * Find more information about this on the LICENSE file.
  */
 
-import React, { useState, useEffect, useCallback, useLayoutEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { EuiBasicTable, EuiSpacer } from '@elastic/eui';
 import _ from 'lodash';
 import { WzSearchBar } from '../../wz-search-bar/';
@@ -41,12 +41,6 @@ export function TableWithSearchBar({
     pageIndex: 0,
     pageSize: tablePageSizeOptions[0],
   });
-  let timeoutId = 0;
-
-  function abortRequest(){
-    clearTimeout(timeoutId);
-    timeoutId = 0;
-  }
 
   const [sorting, setSorting] = useState({
     sort: {
@@ -55,79 +49,78 @@ export function TableWithSearchBar({
     },
   });
 
-  function tableOnChange({ page = {}, sort = {} }) {
-    const { index: pageIndex, size: pageSize } = page;
-    const { field, direction } = sort;
-    setPagination({
-      pageIndex,
-      pageSize,
-    });
-    setSorting({
-      sort: {
-        field,
-        direction,
-      },
-    });
-  }
-
-  useEffect(() => {
-    // Reset the page index when the endpoint changes.
-    // This will cause that onSearch function is triggered because to changes in pagination in the another effect.
-
-    setPagination({pageIndex: 0, pageSize: pagination.pageSize});
-  }, [endpoint, reload]);
+  const isMounted = useRef(false);
 
-
-  const loadRecords = useCallback(async function () {
-    console.log('onSearch')
-    try {
-      setLoading(true);
-      const { items, totalItems } = await onSearch(endpoint, filters, pagination, sorting);
-      setItems(items);
-      setTotalItems(totalItems);
-    } catch (error) {
-      setItems([]);
-      setTotalItems(0);
-      const options = {
-        context: `${TableWithSearchBar.name}.useEffect`,
-        level: UI_LOGGER_LEVELS.ERROR,
-        severity: UI_ERROR_SEVERITIES.BUSINESS,
-        error: {
-          error: error,
-          message: error.message || error,
-          title: `${error.name}: Error fetching items`,
+  function tableOnChange({ page = {}, sort = {} }) {
+    if (isMounted.current) {
+      const { index: pageIndex, size: pageSize } = page;
+      const { field, direction } = sort;
+      setPagination({
+        pageIndex,
+        pageSize,
+      });
+      setSorting({
+        sort: {
+          field,
+          direction,
         },
-      };
-      getErrorOrchestrator().handleError(options);
+      });
     }
-    setLoading(false);
-  }, [filters, pagination, sorting])
+  }
 
   useEffect(() => {
-    if (!timeoutId)
-      timeoutId = setTimeout((() => {
-        loadRecords()
-        timeoutId = 0;
-      }), 100);
-  }, [loadRecords]);
+    // This effect is triggered when the component is mounted because of how to the useEffect hook works.
+    // We don't want to set the pagination state because there is another effect that has this dependency
+    // and will cause the effect is triggered (redoing the onSearch function).
+    if (isMounted.current) {
+      // Reset the page index when the endpoint changes.
+      // This will cause that onSearch function is triggered because to changes in pagination in the another effect.
+      setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+    }
+  }, [endpoint, reload]);
 
-  useEffect(() => {
-    console.log('filters', filters)
-  }, [filters])
-  useEffect(() => {
-    console.log('pagination', pagination)
-  }, [pagination])
-  useEffect(() => {
-    console.log('sorting', sorting)
-  }, [sorting])
+  useEffect(function () {
+    (async () => {
+      try {
+        setLoading(true);
+        const { items, totalItems } = await onSearch(endpoint, filters, pagination, sorting);
+        setItems(items);
+        setTotalItems(totalItems);
+      } catch (error) {
+        setItems([]);
+        setTotalItems(0);
+        const options = {
+          context: `${TableWithSearchBar.name}.useEffect`,
+          level: UI_LOGGER_LEVELS.ERROR,
+          severity: UI_ERROR_SEVERITIES.BUSINESS,
+          error: {
+            error: error,
+            message: error.message || error,
+            title: `${error.name}: Error fetching items`,
+          },
+        };
+        getErrorOrchestrator().handleError(options);
+      }
+      setLoading(false);
+    })();
+  }, [filters, pagination, sorting]);
 
   useEffect(() => {
-    if (!_.isEqual(rest.filters, filters)){
-      console.log('rest.filters', rest.filters)
+    // This effect is triggered when the component is mounted because of how to the useEffect hook works.
+    // We don't want to set the filters state because there is another effect that has this dependency
+    // and will cause the effect is triggered (redoing the onSearch function).
+    if (isMounted.current && !_.isEqual(rest.filters, filters)) {
       setFilters(rest.filters || []);
     }
   }, [rest.filters]);
 
+  // It is required that this effect runs after other effects that use isMounted
+  // to avoid that these effects run when the component is mounted, only running
+  // when one of its dependencies changes.
+  useEffect(() => {
+    isMounted.current = true;
+  }, []);
+
   const tablePagination = {
     ...pagination,
     totalItemCount: totalItems,

public/components/common/welcome/components/menu-agent.js

@@ -215,7 +215,6 @@ class WzMenuAgent extends Component {
 
 const mapStateToProps = (state) => {
   return {
-    state: state.rulesetReducers,
     currentAgentData: state.appStateReducers.currentAgentData,
     currentTab: state.appStateReducers.currentTab,
   };

public/components/wz-menu/wz-menu-agent.js

@@ -277,7 +277,6 @@ class WzMenuAgent extends Component {
 
 const mapStateToProps = state => {
   return {
-    state: state.rulesetReducers,
     currentAgentData: state.appStateReducers.currentAgentData,
     currentTab: state.appStateReducers.currentTab
   };

public/components/wz-menu/wz-menu-overview.js

@@ -331,7 +331,6 @@ class WzMenuOverview extends Component {
 
 const mapStateToProps = state => {
   return {
-    state: state.rulesetReducers,
     currentAgentData: state.appStateReducers.currentAgentData,
     currentTab: state.appStateReducers.currentTab
   };

public/controllers/management/components/management/cdblists/views/list-editor.tsx

@@ -632,11 +632,6 @@ class WzListEditor extends Component {
   }
 }
 
-const mapStateToProps = (state) => {
-  return {
-    state: state.rulesetReducers,
-  };
-};
 
 const mapDispatchToProps = (dispatch) => {
   return {
@@ -645,4 +640,4 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(WzListEditor);
+export default connect(mapDispatchToProps)(WzListEditor);

public/controllers/management/components/management/common/file-editor.tsx

@@ -409,18 +409,14 @@ class WzFileEditor extends Component {
 
 const mapStateToProps = state => {
   return {
-    state: state.rulesetReducers,
     wazuhNotReadyYet: state.appStateReducers.wazuhNotReadyYet,
     showFlyout: state.appStateReducers.showFlyoutLogtest,
   };
 };
 
 const mapDispatchToProps = dispatch => {
   return {
-    // cleanInfo: () => dispatch(cleanInfo()),
-    // updateFileContent: content => dispatch(updateFileContent(content)),
     updateWazuhNotReadyYet: wazuhNotReadyYet => dispatch(updateWazuhNotReadyYet(wazuhNotReadyYet)),
-    // showFlyoutLogtest: showFlyout => dispatch(showFlyoutLogtest(showFlyout)),
   };
 };
 

public/controllers/management/components/management/common/layout-overview.tsx

@@ -57,16 +57,7 @@ function WzRulesetOverview(props) {
 
 }
 
-const mapStateToProps = state => {
-  return {
-    state: state.rulesetReducers
-  };
-};
-
 export default compose(
-  connect(
-    mapStateToProps
-  ),
   withGlobalBreadcrumb(props => {
     return [
       { text: '' },