140 lines
3.6 KiB
JavaScript
140 lines
3.6 KiB
JavaScript
import React from "react";
|
|
import Head from "next/head";
|
|
import Image from "next/image";
|
|
import { connect } from "react-redux";
|
|
import { withRouter } from "next/router";
|
|
import moment from "moment";
|
|
import { SpinnerCircular } from "spinners-react";
|
|
|
|
import { reduxWrapper } from "../../store";
|
|
|
|
import Header from "../components/Header";
|
|
import Footer from "../components/Footer";
|
|
import Company from "../components/Company";
|
|
import InnerMenu from "./components/InnerMenu";
|
|
|
|
import NotificationMessage from "../components/Events/NotificationMessage";
|
|
|
|
import { getContractInfo, getFilteredEvents } from "../../actions";
|
|
import AccountLayout from "../components/Layout/Account";
|
|
import ContractHeader from "./components/ContractHeader";
|
|
|
|
class ContractPage extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
this.state = {
|
|
loading: true,
|
|
contracts_info: {},
|
|
events_loaded: false,
|
|
filtered: undefined,
|
|
contract_events: {},
|
|
};
|
|
}
|
|
|
|
static getDerivedStateFromProps(nextProps, prevState)
|
|
{
|
|
return {
|
|
contracts_info: nextProps.contracts_info,
|
|
events_loaded: nextProps.events_loaded,
|
|
filtered: nextProps.filtered,
|
|
};
|
|
}
|
|
|
|
componentDidMount()
|
|
{
|
|
const { dispatch, number} = this.props;
|
|
|
|
if(this.state.contracts_info[ number ] === undefined)
|
|
{
|
|
getContractInfo({ dispatch, number });
|
|
}
|
|
|
|
if(this.state.events_loaded)
|
|
{
|
|
getFilteredEvents({ dispatch, contract: number });
|
|
}
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState)
|
|
{
|
|
if(this.state.events_loaded && !prevState.events_loaded)
|
|
{
|
|
getFilteredEvents({ dispatch: this.props.dispatch, contract: this.props.number });
|
|
}
|
|
}
|
|
|
|
render()
|
|
{
|
|
const { number } = this.props;
|
|
const { loading, contracts_info, events_loaded, filtered, } = this.state;
|
|
|
|
let { date, car, status } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Head>
|
|
<title>ЛК Эволюция автолизинга</title>
|
|
<meta name="description" content="ЛК Эволюция автолизинга" />
|
|
</Head>
|
|
<Header { ...this.props }/>
|
|
<AccountLayout>
|
|
<div className="title_wrapper">
|
|
<div className="left" style={{ flexDirection: "column" }}>
|
|
<ContractHeader number={ number } date={ date } car={ car }/>
|
|
</div>
|
|
<Company { ...this.props }/>
|
|
</div>
|
|
<div className="aside_container about">
|
|
<InnerMenu number={ number } status={ status } { ...this.props } />
|
|
<article>
|
|
{ filtered !== undefined ? (
|
|
<>
|
|
{ filtered.length > 0 ? (
|
|
<ul className="list events-list">
|
|
{ filtered.map((event, index) => (
|
|
<NotificationMessage event={ event } key={ index }/>
|
|
)) }
|
|
</ul>
|
|
) : (
|
|
<p>Нет событий по данному договору.</p>
|
|
) }
|
|
</>
|
|
) : (
|
|
<div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", }}>
|
|
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
|
|
</div>
|
|
) }
|
|
</article>
|
|
</div>
|
|
</AccountLayout>
|
|
<Footer/>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state, ownProps)
|
|
{
|
|
return {
|
|
contracts_info: state.contracts_info,
|
|
events_loaded: state.events.loaded,
|
|
filtered: state.events.filtered,
|
|
};
|
|
}
|
|
|
|
export const getServerSideProps = reduxWrapper.getServerSideProps(
|
|
(store) =>
|
|
async ({ req, res, query }) =>
|
|
{
|
|
return {
|
|
props: {
|
|
number: query.number,
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
export default withRouter(connect(mapStateToProps)(ContractPage));
|