From 6288360cefb988ccd996bdf0ab618d9498c6fe83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Wed, 2 Jan 2019 13:27:08 +0100
Subject: [PATCH] Create detail page for events, modify event reducer
---
src/actions/statistics.js | 16 ++++++++++++-
src/actions/types.js | 1 +
src/components/Main.js | 2 ++
src/components/pages/EventDetail.js | 36 +++++++++++++++++++++++++++++
src/components/pages/Events.js | 22 ++++++++++++------
src/components/pages/Statistics.js | 4 ++--
src/reducers/EventReducer.js | 8 ++++---
7 files changed, 76 insertions(+), 13 deletions(-)
create mode 100644 src/components/pages/EventDetail.js
diff --git a/src/actions/statistics.js b/src/actions/statistics.js
index 00ac6cc..a694281 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 5d96253..c551d29 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 9d5e562..8f917c6 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 0000000..e0e1b21
--- /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 35e81ca..3accb86 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 052e492..d3129d6 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 fada906..2f0af15 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;
}
--
GitLab