216 lines
6.0 KiB
JavaScript
216 lines
6.0 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/Events/InnerMenu";
|
||
|
||
import NotificationMessage from "./components/Events/NotificationMessage";
|
||
|
||
import { getFilteredEvents } from "../actions";
|
||
|
||
class EventsPage extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
events: [],
|
||
events_loaded: false,
|
||
filtered: undefined,
|
||
type: undefined,
|
||
loading: false,
|
||
search: ""
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
return {
|
||
events: nextProps.events,
|
||
events_loaded: nextProps.events_loaded,
|
||
filtered: nextProps.filtered,
|
||
};
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
}
|
||
|
||
componentDidUpdate(prevProps, prevState)
|
||
{
|
||
const hash = this.props.router.asPath.split('#')[1];
|
||
if(this.state.type !== hash)
|
||
{
|
||
this.setState({ type: hash }, () =>
|
||
{
|
||
this._filterEvents();
|
||
});
|
||
}
|
||
}
|
||
|
||
_handle_onChange_search = (value) =>
|
||
{
|
||
this.setState({ search: value });
|
||
}
|
||
|
||
_handle_onSearch = () =>
|
||
{
|
||
this._filterEvents();
|
||
}
|
||
|
||
_filterEvents = () =>
|
||
{
|
||
console.log("_filterEvents");
|
||
const { type, search } = this.state;
|
||
getFilteredEvents({ dispatch: this.props.dispatch, type, search });
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { loading, search, events, events_loaded, filtered } = this.state;
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<Head>
|
||
<title>ЛК Эволюция автолизинга</title>
|
||
<meta name="description" content="ЛК Эволюция автолизинга" />
|
||
</Head>
|
||
<Header {...this.props} />
|
||
<main>
|
||
<section>
|
||
<div className="clear"></div>
|
||
<div className="container">
|
||
<div className="title_wrapper">
|
||
<div className="left" style={{ flexDirection: "column" }}>
|
||
<h1 className="section_title">События</h1>
|
||
</div>
|
||
<Company { ...this.props }/>
|
||
</div>
|
||
<div className="aside_container about">
|
||
<InnerMenu { ...this.props }/>
|
||
<article>
|
||
<div className="contract_search">
|
||
<form onSubmit={ (event) => { event.preventDefault(); } }>
|
||
<div className="form_field full">
|
||
<input type="search" value={ search } placeholder="Поиск" onChange={ (event) => {
|
||
this._handle_onChange_search(event.target.value);
|
||
} }/>
|
||
</div>
|
||
<button className="button" disabled={ search !== "" ? false : true } onClick={ this._handle_onSearch }>Поиск</button>
|
||
</form>
|
||
</div>
|
||
{ events_loaded && (
|
||
<>
|
||
{ filtered !== undefined ? (
|
||
<>
|
||
{ filtered.length > 0 ? (
|
||
<ul className="list events-list">
|
||
{ filtered.map((event, index) => (
|
||
<NotificationMessage event={ event } key={ index } { ...this.props }/>
|
||
)) }
|
||
</ul>
|
||
) : (
|
||
<p>Нет событий по выбранным условиям.</p>
|
||
) }
|
||
</>
|
||
) : (
|
||
<>
|
||
{ events.length > 0 ? (
|
||
<ul className="list events-list">
|
||
{ events.map((event, index) => (
|
||
<NotificationMessage event={ event } key={ index } { ...this.props }/>
|
||
)) }
|
||
</ul>
|
||
) : (
|
||
<p>У Вас нет событий по договорам.</p>
|
||
) }
|
||
</>
|
||
)}
|
||
</>
|
||
) }
|
||
{/*}
|
||
<li className="new">
|
||
<p className="name">
|
||
<b>
|
||
Внимание! { events_loaded === true ? "events_loaded" : "!!!events_loaded" } Просрочена дата возврата СТС по договору:
|
||
ХХ.ХХ.ХХХХ
|
||
</b>
|
||
</p>
|
||
<p className="type">Важное</p>
|
||
<p className="date">10.01.2022</p>
|
||
<p className="action">
|
||
<a href="">Посмотрите порядок возврата СТС</a> или
|
||
<a href="">Загрузите скан СТС</a>
|
||
</p>
|
||
</li>
|
||
{*/}
|
||
{/*}
|
||
<li className="new">
|
||
<p className="name">
|
||
<b>
|
||
Внимание! Просрочена дата возврата СТС по договору:
|
||
ХХ.ХХ.ХХХХ
|
||
</b>
|
||
</p>
|
||
<p className="date">10.01.2022</p>
|
||
<p className="action">
|
||
<a href="">Посмотрите порядок возврата СТС</a> или
|
||
<a href="">Загрузите скан СТС</a>
|
||
</p>
|
||
</li>
|
||
{*/}
|
||
{/*}
|
||
<li className="new">
|
||
<p className="name">
|
||
Внимание! Осталось ХХ дней до пролонгации КАСКО по
|
||
договору №ХХХХ: ХХ.ХХ.ХХХХ. Не забудьте самостоятельно
|
||
продлить полис ОСАГО
|
||
</p>
|
||
<p className="date">10.01.2022</p>
|
||
<p className="action">
|
||
<a href="">Подробнее</a>
|
||
</p>
|
||
</li>
|
||
{*/}
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<Footer authenticated={ true }/>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
}
|
||
|
||
function mapStateToProps(state, ownProps)
|
||
{
|
||
return {
|
||
events: state.events.list,
|
||
events_loaded: state.events.loaded,
|
||
filtered: state.events.filtered,
|
||
};
|
||
}
|
||
|
||
export const getServerSideProps = reduxWrapper.getServerSideProps(
|
||
(store) =>
|
||
async ({ req, res, query }) =>
|
||
{
|
||
return {
|
||
props: {
|
||
},
|
||
};
|
||
}
|
||
);
|
||
|
||
export default withRouter(connect(mapStateToProps)(EventsPage));
|