From ff083543cdcfda2f6197db06a27c2cd875136438 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Tue, 22 Jan 2019 21:35:45 +0100
Subject: [PATCH] Create page to see the applicants details: motivation,
exercises. Rename action to get the profile
---
src/actions/statistics.js | 31 +++++++-------
src/actions/types.js | 2 +-
src/components/Main.js | 2 +
src/components/pages/ApplicantProfile.js | 53 ++++++++++++++++++++++++
src/components/pages/Applications.js | 3 +-
src/reducers/TraineeReducer.js | 8 ++--
6 files changed, 76 insertions(+), 23 deletions(-)
create mode 100644 src/components/pages/ApplicantProfile.js
diff --git a/src/actions/statistics.js b/src/actions/statistics.js
index 7d546bc..fca39b3 100644
--- a/src/actions/statistics.js
+++ b/src/actions/statistics.js
@@ -7,9 +7,8 @@ import {
WRITE_EVENT,
ADD_EVENT,
DELETE_EVENT,
- GET_TRAINEE_BY_ID,
GET_PROFILES,
- SET_STAFF,
+ GET_SELECTED_PROFILE
} from './types';
export const getEvents = () => (
@@ -40,20 +39,6 @@ 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 {
@@ -165,3 +150,17 @@ export const setStaffStatus = id => (
}
}
);
+
+export const getSelectedProfile = id => (
+ async (dispatch) => {
+ try {
+ const response = await axios.get(`/api/v1/profiles/${id}/`);
+ dispatch({
+ type: GET_SELECTED_PROFILE,
+ payload: response.data,
+ });
+ } catch (e) {
+ console.log(e);
+ }
+ }
+);
diff --git a/src/actions/types.js b/src/actions/types.js
index 0147481..5da1013 100644
--- a/src/actions/types.js
+++ b/src/actions/types.js
@@ -15,7 +15,6 @@ export const GET_EVENTS = 'get_events';
export const GET_EVENT_BY_ID = 'get_event_by_id';
export const GET_TRAINEES = 'get_trainees';
-export const GET_TRAINEE_BY_ID = 'get_trainee_by_id';
export const VISITOR_CHANGE = 'visitor_change';
export const GET_NOTES_BY_EVENT = 'get_notes_by_event';
@@ -29,3 +28,4 @@ export const ADD_EVENT_NOTE = 'add_note';
export const GET_PROFILES = 'get_profiles';
export const SET_STAFF = 'set_staff';
+export const GET_SELECTED_PROFILE = 'get_selected_profile';
diff --git a/src/components/Main.js b/src/components/Main.js
index 9529bc6..b9a9078 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -11,6 +11,7 @@ import Groups from './pages/Groups';
import News from './pages/News';
import Applications from './pages/Applications';
import EventDetail from './pages/EventDetail';
+import ApplicantProfile from './pages/ApplicantProfile';
const Main = () => (
<Switch>
@@ -24,6 +25,7 @@ const Main = () => (
<Route path='/groups' component={Groups} />
<Route path='/events/:id' component={EventDetail} />
<Route path='/applications' component={Applications} />
+ <Route path='/applicant/:id' component={ApplicantProfile} />
<Route component={NotFound} />
</Switch>
);
diff --git a/src/components/pages/ApplicantProfile.js b/src/components/pages/ApplicantProfile.js
new file mode 100644
index 0000000..8a6486a
--- /dev/null
+++ b/src/components/pages/ApplicantProfile.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import { Container, Header, Item, Button } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { getSelectedProfile } from '../../actions/statistics';
+
+class ApplicantProfile extends Component {
+ componentWillMount() {
+ this.props.getSelectedProfile(this.props.match.params.id);
+ }
+
+ render() {
+ const { full_name, nick, motivation_about, motivation_exercise, motivation_profession }
+ = this.props.selectedProfile;
+ return (
+ <Container style={{ padding: '60px' }}>
+ <Item>
+ <Item.Content>
+ <Container textAlign='center'>
+ <Header as='h2'>{full_name}</Header>
+ <Item.Meta>{nick}</Item.Meta>
+ </Container>
+ <Item.Description>
+ <Container textAlign='justified' style={{ padding: '30px' }}>
+ <Header as='h3'>Magamról, eddigi tevékenységem:</Header>
+ <p>{motivation_about}</p>
+ <Header as='h3'>Szakmai motiváció:</Header>
+ <p>{motivation_profession}</p>
+ <Header as='h3'>Feladatok megoldása:</Header>
+ <p>{motivation_exercise}</p>
+ </Container>
+ </Item.Description>
+ </Item.Content>
+ </Item>
+ <Container textAlign='center'>
+ <Button
+ color='green'
+ >
+ Jelentkezés elfogadása
+ </Button>
+ <Button
+ color='red'
+ >
+ Jelentkezés elutasÃtása
+ </Button>
+ </Container>
+ </Container>
+ )
+ }
+}
+
+const mapStateToProps = ({ trainees: { selectedProfile } }) => ({ selectedProfile });
+
+export default connect(mapStateToProps, { getSelectedProfile })(ApplicantProfile);
diff --git a/src/components/pages/Applications.js b/src/components/pages/Applications.js
index 47b12b7..0ce391c 100644
--- a/src/components/pages/Applications.js
+++ b/src/components/pages/Applications.js
@@ -1,5 +1,4 @@
import React, { Component } from 'react';
-import moment from 'moment';
import { Link } from 'react-router-dom';
import { Container, Table, Icon, Button } from 'semantic-ui-react';
import { connect } from 'react-redux';
@@ -15,7 +14,7 @@ class Applications extends Component {
{ return (
<Table.Row>
<Table.Cell>
- <Link to={`profile/${profile.id}`}>
+ <Link to={`applicant/${profile.id}`}>
{profile.full_name}
</Link>
</Table.Cell>
diff --git a/src/reducers/TraineeReducer.js b/src/reducers/TraineeReducer.js
index 0a3654e..e7696a2 100644
--- a/src/reducers/TraineeReducer.js
+++ b/src/reducers/TraineeReducer.js
@@ -1,15 +1,15 @@
-import { GET_TRAINEES, GET_TRAINEE_BY_ID, GET_PROFILES } from '../actions/types';
+import { GET_TRAINEES, GET_PROFILES, GET_SELECTED_PROFILE } from '../actions/types';
-const INITIAL_STATE = { profiles: [] };
+const INITIAL_STATE = { profiles: [], selectedProfile: {} };
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case GET_TRAINEES:
return { ...state, trainees: [...action.payload] };
- case GET_TRAINEE_BY_ID:
- return { ...state, selectedTrainee: action.payload };
case GET_PROFILES:
return { ...state, profiles: [...action.payload] };
+ case GET_SELECTED_PROFILE:
+ return { ...state, selectedProfile: action.payload };
default:
return state;
}
--
GitLab