import { Layout } from "antd";
import React from "react";
import { connect } from "react-redux";
import { Route, Switch } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import SiderMenuOrganism from "../../organisms/sider-menu/sider-menu.organism";
import Jobs from "../jobs/jobs.page";
import SettingsPage from "../settings/settings.page";

const mapStateToProps = createStructuredSelector({});
const mapDispatchToProps = (dispatch) => ({});

export function RoutesPage() {
  return (
    <Layout style={{ background: "#fff", height: "100vh" }} hasSider>
      <Layout.Sider style={{ background: "#fff" }} collapsible>
        <SiderMenuOrganism />
      </Layout.Sider>
      <Layout style={{ background: "#fff" }}>
        <Layout.Content style={{ margin: "1rem", height: "100%" }}>
          <Switch>
            <Route exact path="/settings" component={SettingsPage} />
            <Route path="/" component={Jobs} />
          </Switch>
        </Layout.Content>
      </Layout>
    </Layout>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(RoutesPage);
