Se mueve la lógica de la página principal del superadministrador a un custom hook

import { useEffect, useState } from "react";

import { SuperAdminSelectedPanel } from "../constants/selected_panel";

import { useAuth } from "../context/auth_context";

import { useWindowShow } from "./useWindowShow";

import { useAdmin } from "./useAdmin";

import { UserRole } from "../constants/roles";

import { useGetStatesList } from "./useGetStatesList";

import axios, { AxiosError } from "axios";

import { showErrorAxios } from "../utils/Messages";

export const useSuperAdminHomePage = () => {

  const [isLoading, setIsLoading] = useState(true);

  const [error, setError] = useState(false);

  const [errorMessage, setErrorMessage] = useState("");

  const [collapsed, setCollapsed] = useState(true);

  const {setIsWindowActive, isWindowActive} = useWindowShow();

  const [selectedPanel, setSelectedPanel] = useState<SuperAdminSelectedPanel>(SuperAdminSelectedPanel.TOWNS);

  const {user, logout} = useAuth();

  const {getAdminInfo} = useAdmin();

  const {getStates, statesList} = useGetStatesList();

  useEffect(() => {

    const checkAdminRole = async () => {

      const admin = await getAdminInfo();

      if(admin){

        if(admin.role!==UserRole.SUPERADMIN){

          setError(true);

          setErrorMessage("No estas autorizado para acceder a esta página")

          setTimeout(() => {

            logout();

          }, 5000);

          return;

        }

      }

      setIsLoading(false);

    };

    checkAdminRole();

    const getStatesList = async () => {

      try{

        getStates();

        setIsLoading(false);

      }catch(error: any){

        if(axios.isAxiosError(error)){

          error as AxiosError;

          showErrorAxios(error);

        }

      }

    }

    getStatesList(); 

  },[user]);

  return {

    collapsed,

    isWindowActive,

    selectedPanel,

    setCollapsed,

    setSelectedPanel,

    setIsWindowActive,

    isLoading,

    error,

    errorMessage,

    statesList

  };

}

 No newline at end of file

import { Menu, MenuItem, Sidebar } from "react-pro-sidebar"

import './assets/styles/style.css';

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faMonument, faUserTie } from "@fortawesome/free-solid-svg-icons";

import { useEffect, useState } from "react";

import { faMonument, faTags, faUserTie } from "@fortawesome/free-solid-svg-icons";

import { AdminPanelNavBar } from "../../../components/admin_panel_navbar/admin_navbar";

import { SidebarHeader } from "../../../components/sidebar_header/sidebar_header";

import { SuperadminPanelTownScreen } from "../../../components/sa_panel_town/sa_panel_town_screen/sa_panel_town_screen";

import { SuperadminPanelAdminScreen } from "../../../components/sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen";

import { useGetStatesList } from "../../../hooks/useGetStatesList";

import axios, { AxiosError } from "axios";

import { LoadingScreen } from "../../../components/loading_screen/loading_screen";

import { ToastContainer } from "react-toastify";

import { showErrorAxios } from "../../../utils/Messages";

import { ErrorWindow } from "../../../components/error_window/error_window";

import { LoadingSpinner } from "../../../components/loading_spinner/loading_spinner";

import { SuperAdminSelectedPanel } from "../../../constants/selected_panel";

import { useSuperAdminHomePage } from "../../../hooks/useSuperadminHomePage";

import { SuperAdminPanelCategoryScreen } from "../../../components/sa_panel_category/sa_panel_category_screen/sa_panel_category_screen";

export const SuperAdminHomePage = () => {

  const [collapsed, setCollapsed] = useState(true);

  const [windowActive, setWindowActive] = useState(false);

  const [townPanel, setTownPanel] = useState(true);

  const [isLoading, setIsLoading] = useState(true);

  const {getStates, statesList} = useGetStatesList();

  const {

    collapsed,

    isWindowActive,

    setCollapsed,

    selectedPanel,

    setSelectedPanel,

    setIsWindowActive,

    isLoading,

    error,

    errorMessage,

    statesList,

  useEffect(() => {

    const getStatesList = async () => {

      try{

        getStates();

        setIsLoading(false);

      }catch(error: any){

        if(axios.isAxiosError(error)){

          error as AxiosError;

          showErrorAxios(error);

        }

      }

    }

    getStatesList(); 

  }, []);

  } = useSuperAdminHomePage();

  if(isLoading) return <LoadingScreen/>;

  if(error) return (

    <div style={{display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', width: '100vw', height:'100vh'}}>

      <LoadingSpinner/>

      Redirigiendo...

      <ErrorWindow message={errorMessage}/>

    </div>

  );

  return (

    <div className="superdmin-panel-root">

      <Sidebar className="sidebar" collapsed={collapsed} 

        onMouseOver={() => {

          windowActive ?

          isWindowActive ?

            setCollapsed(true)

          :

            setCollapsed(false)

        <SidebarHeader/>

        <Menu>

          <MenuItem icon={<FontAwesomeIcon icon={faMonument}/>}  

            onClick={() => setTownPanel(true)}

            disabled={windowActive}>

            onClick={() => setSelectedPanel(SuperAdminSelectedPanel.TOWNS)}

            disabled={isWindowActive}>

              Pueblos

          </MenuItem>

          <MenuItem icon={<FontAwesomeIcon icon={faUserTie}/>} 

            onClick={() => setTownPanel(false)}

            disabled={windowActive}>

            onClick={() => setSelectedPanel(SuperAdminSelectedPanel.ADMINS)}

            disabled={isWindowActive}>

            Administradores

          </MenuItem>

          <MenuItem icon={<FontAwesomeIcon icon={faTags}/>} 

            onClick={() => setSelectedPanel(SuperAdminSelectedPanel.CATEGORIES)}

            disabled={isWindowActive}>

            Categorías

          </MenuItem>

        </Menu>

      </Sidebar>

      <div className="superadmin-panel-body">

        <AdminPanelNavBar windowActive={windowActive}/>

        <AdminPanelNavBar windowActive={isWindowActive}/>

        <div className="superadmin-panel-content">

          {townPanel 

            ? 

              isLoading || statesList.length===0

              ?

                <LoadingScreen/>

              :

              <SuperadminPanelTownScreen 

              windowActive={windowActive} 

              setWindowActive={setWindowActive}

          {(() => {

            switch (selectedPanel) {

              case SuperAdminSelectedPanel.TOWNS:

                return  <SuperadminPanelTownScreen 

                          windowActive={isWindowActive} 

                          setWindowActive={setIsWindowActive}

                          statesList={statesList}

                        />  

            : 

              <SuperadminPanelAdminScreen 

              windowActive={windowActive} 

              setWindowActive={setWindowActive}

              case SuperAdminSelectedPanel.ADMINS:

                return  <SuperadminPanelAdminScreen 

                          windowActive={isWindowActive} 

                          setWindowActive={setIsWindowActive}

                          statesList={statesList}

                        />

              case SuperAdminSelectedPanel.CATEGORIES:

                return  <SuperAdminPanelCategoryScreen

                          isWindowActive={isWindowActive}

                          setIsWindowActive={setIsWindowActive}

                        />

              default:

                return null;

            }

          })()}

          <ToastContainer

            position='bottom-right'

            autoClose = {1000}