Create detail page for events, modify event reducer

src/actions/statistics.js

 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);
+    }
+  }
+);

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';

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>
 );

src/components/pages/EventDetail.js

+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);

src/components/pages/Events.js

 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);

src/components/pages/Statistics.js

 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

src/reducers/EventReducer.js

-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;
   }