#66 mentors page

src/actions/mentors.js

+import axios from './session';
+import { GET_MENTORS } from './types';
+
+export const getMentors = () => (
+  async (dispatch) => {
+    try {
+      const response = await axios.get('/api/v1/mentors');
+      dispatch({
+        type: GET_MENTORS,
+        payload: response.data,
+      });
+    } catch (e) {
+      console.log(e);
+    }
+  }
+);
\ No newline at end of file

src/actions/types.js

@@ -14,6 +14,8 @@ export const DELETE_NEWS = 'delete_news';
 export const EDIT_NEWS = 'edit_news';
 export const SELECT_NEWS = 'select_news';
 
+export const GET_MENTORS = 'get_mentors';
+
 export const GET_TASKS = 'get_homeworks';
 export const ADD_TASK = 'add_task';
 export const DELETE_TASK = 'delete_task';

src/components/Header.js

@@ -41,6 +41,12 @@ const menuItems = [
     prefix: '',
     permissionLevel: 1,
   },
+  {
+    text: 'Mentorok',
+    to: '/mentors',
+    prefix: '',
+    permissionLevel: 1,
+  },
   {
     text: 'Statisztika',
     to: '/statistics',

src/components/Main.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
 
 import Home from './pages/Home';
-import Trainers from './pages/Trainers';
+import Mentors from './pages/Mentors';
 import Schedule from './pages/Schedule';
 import NotFound from './pages/NotFound';
 import Profile from './pages/Profile';
@@ -19,7 +19,7 @@ const Main = () => (
     <Redirect exact from='/' to='/home' />
     <Route exact path='/home' component={Home} />
     <Route path='/news' component={News} />
-    <Route path='/trainers' component={Trainers} />
+    <Route path='/mentors' component={Mentors} />
     <Route path='/schedule' component={Schedule} />
     <Route path='/profile' component={withRouter(Profile)} />
     <Route path='/statistics' component={Statistics} />

src/components/pages/Mentors.js

+import React, { Component } from 'react'
+  import { Container, Segment, Item, Divider, Header, Image, Card, Label, Icon } from 'semantic-ui-react'
+import { connect } from 'react-redux'
+import { getMentors } from '../../actions/mentors'
+
+class Mentors extends Component {
+  UNSAFE_componentWillMount() {
+    this.props.getMentors();
+  }
+
+  renderMentors() {
+    return this.props.mentors.map( (item, index) => (
+      <Card style={{maxWidth: '100%', minWidth: '100%'}}>
+        <Card.Content style={{padding: '0'}}>
+            <Item.Group>
+                <Item>
+                    {index%2 === 0 ?
+                      <Item.Image size='medium' src={item.image} /> : null
+                    }
+                    <Item.Content style={{padding: '1rem'}}>
+                        <Item.Header>{item.name}</Item.Header>
+                        <Item.Description>
+                            <p>{item.text}</p>
+                        </Item.Description>
+                        <Item.Extra>
+                          <Label><Icon name='mail'></Icon>{item.email}</Label>
+                        </Item.Extra>
+                    </Item.Content>
+                    {index%2 === 1 ?
+                      <Item.Image size='medium' src={item.image} /> : null
+                    }
+                </Item>
+            </Item.Group>
+        </Card.Content>
+      </Card>
+    ));
+  }
+
+  renderMultiLine(text) {
+    const strings = text.split('\n');
+    return strings.map(string => <p key={Math.random()}>{string}</p>);
+  }
+
+  render() {
+    return (
+      <div>
+        <Segment inverted textAlign='center' vertical>
+          <Container>
+            <Header
+              as='h1'
+              content='Mentorok'
+              inverted
+              style={{
+                fontSize: '3em',
+                fontWeight: 'normal',
+                marginBottom: 0,
+                marginTop: '0.5em',
+              }}
+            />
+          </Container>
+        </Segment>
+        <Container style={{paddingTop: '2em', paddingBottom: '5em'}}> 
+          {this.renderMentors()}
+        </Container>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = ({ mentors, user }) => ({ mentors, user });
+
+export default connect(mapStateToProps, { getMentors })(Mentors);

src/components/pages/Profile.js

@@ -23,10 +23,11 @@ class Profile extends Component {
 
   render() {
     const {
-      nick, groups, motivationAbout, motivationProfession, motivationExercise, signed, id, deadline, text: deadlineText
+      nick, groups, motivationAbout, motivationProfession, 
+      motivationExercise, signed, id, deadline, messageBefore, 
+      messageAfter
     } = this.props;
     const endDate = new Date(deadline)
-    const endDateText = deadlineText
     let canEdit = Date.now()<endDate
     return (
       <Container
@@ -36,15 +37,11 @@ class Profile extends Component {
       >
         {canEdit ?
         <Segment inverted color='red' tertiary>
-          <p style={{ fontSize: '1.33em' }}>
-            A profilod mentés után is módosítható a későbbiekben, egészen {endDateText}-ig.
-          </p>
+          <p style={{ fontSize: '1.3em' }} dangerouslySetInnerHTML={{__html: messageBefore}} />
         </Segment>
         :
         <Segment inverted color='red' tertiary>
-          <p style={{ fontSize: '1.33em' }}>
-            A határidő {endDateText} volt, már nem tudsz jelentkezni.
-          </p>
+          <p style={{ fontSize: '1.3em' }} dangerouslySetInnerHTML={{__html: messageAfter}} />
         </Segment>}
 
         <Form>
@@ -222,7 +219,9 @@ class Profile extends Component {
 
 const mapStateToProps = ({
   user: {
-    nick, groups, motivationAbout, motivationProfession, motivationExercise, signed, id, deadline, text
+    nick, groups, motivationAbout, motivationProfession, 
+    motivationExercise, signed, id, deadline, messageBefore, 
+    messageAfter
   }
 }) => ({
   nick,
@@ -233,7 +232,8 @@ const mapStateToProps = ({
   signed,
   id,
   deadline,
-  text
+  messageBefore,
+  messageAfter
 });
 
 export default connect(mapStateToProps, { textChange, submitRegistration, groupChange, getDeadline })(Profile);

src/components/pages/Trainers.js

-import React, { Component } from 'react';
-import { Container, Header, Segment } from 'semantic-ui-react';
-
-export default class Trainers extends Component {
-  render() {
-    return (
-      <div>
-        <Segment inverted textAlign='center' vertical>
-          <Container>
-            <Header
-              as='h1'
-              content='Képzők - Hamarosan'
-              inverted
-              style={{
-                fontSize: '3em',
-                fontWeight: 'normal',
-                marginBottom: 0,
-                marginTop: '0.5em',
-              }}
-            />
-          </Container>
-        </Segment>
-      </div>
-    );
-  }
-}

src/reducers/MentorsReducer.js

+import { GET_MENTORS } from '../actions/types';
+
+const INITIAL_STATE = [];
+
+export default (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case GET_MENTORS:
+      return action.payload;
+    default:
+      return state;
+  }
+};

src/reducers/index.js

@@ -12,6 +12,7 @@ import NoteReducer from './NoteReducer';
 import CorrectSolutionReducer from './CorrectSolutionReducer';
 import EditTaskReducer from './EditTaskReducer';
 import GroupsReducer from './GroupsReducer';
+import MentorsReducer from './MentorsReducer';
 
 const rootReducer = combineReducers({
   user: UserReducer,
@@ -27,6 +28,7 @@ const rootReducer = combineReducers({
   trainees: TraineeReducer,
   notes: NoteReducer,
   groups: GroupsReducer,
+  mentors: MentorsReducer,
 });
 
 export default rootReducer;