Create page to see the applicants details: motivation, exercises. Rename action to get the profile

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

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

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

src/components/pages/ApplicantProfile.js

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

src/components/pages/Applications.js

 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>

src/reducers/TraineeReducer.js

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