diff --git a/src/actions/statistics.js b/src/actions/statistics.js
index 00ac6cc48da28e9ad1354215ffdca3a9c552f52b..a69428170d3b248bd2096e828844b27ec7f6ff79 100644
--- a/src/actions/statistics.js
+++ b/src/actions/statistics.js
@@ -1,5 +1,5 @@
import { axios } from './auth';
-import { GET_EVENTS } from './types';
+import { GET_EVENTS, GET_EVENT_BY_ID } from './types';
export const getEvents = () => (
async (dispatch) => {
@@ -14,3 +14,17 @@ export const getEvents = () => (
}
}
);
+
+export const getEventById = id => (
+ async (dispatch) => {
+ try {
+ const response = await axios.get(`/api/v1/events/${id}`);
+ dispatch({
+ type: GET_EVENT_BY_ID,
+ payload: response.data,
+ });
+ } catch (e) {
+ console.log(e);
+ }
+ }
+);
diff --git a/src/actions/types.js b/src/actions/types.js
index 5d962535d0438c1151f58e70835c587280b297ba..c551d293f3ff427b0a98099e03a80d9a9a0fd0ee 100644
--- a/src/actions/types.js
+++ b/src/actions/types.js
@@ -12,3 +12,4 @@ export const EDIT_NEWS = 'edit_news';
export const SELECT_NEWS = 'select_news';
export const GET_EVENTS = 'get_events';
+export const GET_EVENT_BY_ID = 'get_event_by_id';
diff --git a/src/components/Main.js b/src/components/Main.js
index 9d5e56230e69c95b5437bc170376057691b52d4c..8f917c698f0801312f9870b569a30b4a5b83a1d1 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -9,6 +9,7 @@ import Profile from './pages/Profile';
import Statistics from './pages/Statistics';
import Groups from './pages/Groups';
import News from './pages/News';
+import EventDetail from './pages/EventDetail';
const Main = () => (
<Switch>
@@ -20,6 +21,7 @@ const Main = () => (
<Route path='/profile' component={withRouter(Profile)} />
<Route path='/statistics' component={Statistics} />
<Route path='/groups' component={Groups} />
+ <Route path='/events/:id' component={EventDetail} />
<Route component={NotFound} />
</Switch>
);
diff --git a/src/components/pages/EventDetail.js b/src/components/pages/EventDetail.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0e1b2128b0cf71545e61b744a4b051783f219bf
--- /dev/null
+++ b/src/components/pages/EventDetail.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { Container } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { getEventById } from '../../actions/statistics';
+
+class EventDetail extends Component {
+ componentWillMount() {
+ this.props.getEventById(this.props.match.params.id);
+ }
+
+ renderEvent() {
+ const { name, date } = this.props.selectedEvent;
+ return (
+ <div>
+ <p>Alkalom neve: {name}</p>
+ <p>DĂĄtum: {date}</p>
+ </div>
+ );
+ }
+
+ render() {
+ return (
+ <Container>
+ {this.props.selectedEvent ?
+ this.renderEvent()
+ :
+ ''
+ }
+ </Container>
+ );
+ }
+}
+
+const mapStateToProps = ({ user, events: { selectedEvent } }) => ({ user, selectedEvent });
+
+export default connect(mapStateToProps, { getEventById })(EventDetail);
diff --git a/src/components/pages/Events.js b/src/components/pages/Events.js
index 35e81ca9138f9924d69924a4e2706f8aaa23404f..3accb86fa85814121552687fc5c6d2b6c1544837 100644
--- a/src/components/pages/Events.js
+++ b/src/components/pages/Events.js
@@ -1,4 +1,6 @@
import React, { Component } from 'react';
+import moment from 'moment';
+import { Link } from 'react-router-dom';
import { Container, Table } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getEvents } from '../../actions/statistics';
@@ -11,10 +13,15 @@ class Events extends Component {
renderEvents() {
return this.props.events.map((event) =>
{ return (
- <Table.Row>
- <Table.Cell>{event.name}</Table.Cell>
- <Table.Cell>{event.date}</Table.Cell>
- </Table.Row>
+ <Table.Row>
+ <Table.Cell>
+ <Link to={`events/${event.id}`}>
+ {event.name}
+ </Link>
+ </Table.Cell>
+ <Table.Cell>{moment(event.date).format('LL')}</Table.Cell>
+ <Table.Cell>111</Table.Cell>
+ </Table.Row>
);
});
}
@@ -22,16 +29,17 @@ class Events extends Component {
render() {
return (
<Container textAlign='center'>
- <Table celled selectable>
+ <Table color='blue' celled selectable compact>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Alkalom neve</Table.HeaderCell>
<Table.HeaderCell>DĂĄtum</Table.HeaderCell>
+ <Table.HeaderCell>Jelen voltak</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
- {this.renderEvents()}
+ {this.props.events ? this.renderEvents() : 'Nincs mĂŠg alaklom beĂrva'}
</Table.Body>
</Table>
</Container>
@@ -39,6 +47,6 @@ class Events extends Component {
}
}
-const mapStateToProps = ({ events, user }) => ({ events, user });
+const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
export default connect(mapStateToProps, { getEvents })(Events);
diff --git a/src/components/pages/Statistics.js b/src/components/pages/Statistics.js
index 052e492a2f469fefca70c4293aea5ac54056b1ec..d3129d663b8f87297a16628f0df954357441cd81 100644
--- a/src/components/pages/Statistics.js
+++ b/src/components/pages/Statistics.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-import { Container, Header, Segment, Menu } from 'semantic-ui-react';
+import { Container, Menu } from 'semantic-ui-react';
import Events from './Events'
export default class Statistics extends Component {
@@ -13,7 +13,7 @@ export default class Statistics extends Component {
<Container
textAlign="center"
style={{
- padding: '20px'
+ padding: '60px',
}}
>
<Menu
diff --git a/src/reducers/EventReducer.js b/src/reducers/EventReducer.js
index fada90606ad106d616a452beb1ca41c2383dee69..2f0af1534b6a866f47b10872e476289bef054f4f 100644
--- a/src/reducers/EventReducer.js
+++ b/src/reducers/EventReducer.js
@@ -1,11 +1,13 @@
-import { GET_EVENTS } from '../actions/types';
+import { GET_EVENTS, GET_EVENT_BY_ID } from '../actions/types';
-const INITIAL_STATE = [];
+const INITIAL_STATE = {};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case GET_EVENTS:
- return action.payload;
+ return { ...state, events: [...action.payload] };
+ case GET_EVENT_BY_ID:
+ return { ...state, selectedEvent: action.payload };
default:
return state;
}