From 44866b0f092b73c52fa15a9626fc4e1801f5f051 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Wed, 16 Jan 2019 13:12:52 +0100
Subject: [PATCH] Add TraineeDetail page
---
src/actions/statistics.js | 15 +++++++
src/components/Main.js | 2 +
src/components/pages/TraineeDetail.js | 57 +++++++++++++++++++++++++++
3 files changed, 74 insertions(+)
create mode 100644 src/components/pages/TraineeDetail.js
diff --git a/src/actions/statistics.js b/src/actions/statistics.js
index f52e6ff..17aab14 100644
--- a/src/actions/statistics.js
+++ b/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 {
diff --git a/src/components/Main.js b/src/components/Main.js
index 8f917c6..0ddccfc 100644
--- a/src/components/Main.js
+++ b/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>
);
diff --git a/src/components/pages/TraineeDetail.js b/src/components/pages/TraineeDetail.js
new file mode 100644
index 0000000..acd5a02
--- /dev/null
+++ b/src/components/pages/TraineeDetail.js
@@ -0,0 +1,57 @@
+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);
--
GitLab