Add TraineeDetail page

src/actions/statistics.js

@@ -8,6 +8,7 @@ import {
   WRITE_EVENT,
   ADD_EVENT,
   DELETE_EVENT,
+  GET_TRAINEE_BY_ID,
 } from './types';
 
 export const getEvents = () => (
@@ -38,6 +39,20 @@ export const getEventById = id => (
   }
 );
 
+export const getTraineeById = id => (
+  async (dispatch) => {
+    try {
+      const response = await axios.get(`/api/v1/profiles/${id}`);
+      dispatch({
+        type: GET_TRAINEE_BY_ID,
+        payload: response.data,
+      });
+    } catch (e) {
+      console.log(e);
+    }
+  }
+);
+
 export const getTrainees = () => (
   async (dispatch) => {
     try {

src/components/Main.js

@@ -10,6 +10,7 @@ import Statistics from './pages/Statistics';
 import Groups from './pages/Groups';
 import News from './pages/News';
 import EventDetail from './pages/EventDetail';
+import TraineeDetail from './pages/TraineeDetail';
 
 const Main = () => (
   <Switch>
@@ -22,6 +23,7 @@ const Main = () => (
     <Route path='/statistics' component={Statistics} />
     <Route path='/groups' component={Groups} />
     <Route path='/events/:id' component={EventDetail} />
+    <Route path='/trainees/:id' component={TraineeDetail} />
     <Route component={NotFound} />
   </Switch>
 );

src/components/pages/TraineeDetail.js

+import React, { Component } from 'react';
+import {
+  Container,
+  Item,
+  Button,
+  Comment,
+  Form,
+  Header,
+  Table,
+  Icon,
+  Checkbox,
+} from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import moment from 'moment';
+import { getEvents, getTraineeById } from '../../actions/statistics';
+
+class TraineeDetail extends Component {
+
+  componentWillMount() {
+    this.props.getTraineeById(this.props.match.params.id);
+    //this.props.getNotesByTrainee(this.props.match.params.id);
+    this.props.getEvents();
+  }
+
+  renderTrainee() {
+    const { full_name, nick } = this.props.selectedTrainee;
+    return (
+      <Item>
+        <Item.Header as='h2'>{full_name}</Item.Header>
+        <Item.Header as='h3'>{nick}</Item.Header>
+      </Item>
+    );
+  }
+
+  render() {
+    return (
+      <Container>
+        <Container textAlign='center'>
+          { this.props.selectedTrainee ?
+            this.renderTrainee()
+            :
+            ''
+          }
+        </Container>
+        <Container
+          style={{
+            padding: '80px',
+          }}
+        />
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({ events: { events }, trainees: { selectedTrainee } }) => ( { events, selectedTrainee });
+
+export default connect(mapStateToProps, { getEvents, getTraineeById })(TraineeDetail);