import React, { useEffect } from "react"; import { Layout } from "antd"; import DashboardHeader from "./DashboardHeader"; import DashboardNav from "./DashboardNav"; import { fetchUserOrganizations } from "../../redux/actions/userActions"; import { connect } from "react-redux"; const { Content } = Layout; const NavAndHeader = (props) => { const { userId, fetchUserOrganizations, selectedOrganization, ...rest } = props; useEffect(() => { userId && fetchUserOrganizations(userId); }, [selectedOrganization, userId]); return ( <Layout className="nav-header"> <DashboardNav {...rest} /> <Content> <DashboardHeader /> {props.children} </Content> </Layout> ); }; // export default NavAndHeader; const mapStateToProps = (state) => ({ userId: state.User.userId, organizations: state.User.organizations, defaultOrganization: state.User.defaultOrganization, selectedOrganization: state.User.selectedOrganization, }); const mapActionsToProps = { fetchUserOrganizations, }; export default connect(mapStateToProps, mapActionsToProps)(NavAndHeader);