Add initial news support

package.json

 {
   "name": "kszkepzes-frontend",
   "version": "0.1.0",
-  "proxy": "http://127.0.0.1:8000",
+  "proxy": "http://127.0.0.1:8000/",
   "private": true,
   "dependencies": {
     "axios": "^0.17.1",

src/actions/auth.js

+// TODO: Separate actions
+
 import ax from 'axios';
-import { GET_USERDATA, PROFILE_CHANGE, GROUP_CHANGE, LOGOUT } from './types';
+import { GET_USERDATA, PROFILE_CHANGE, GROUP_CHANGE, LOGOUT, GET_NEWS } from './types';
 
 const axios = ax.create({
   xsrfCookieName: 'csrftoken',
@@ -21,6 +23,16 @@ export const getUserData = () => (
   }
 );
 
+export const getNews = () => (
+  async (dispatch) => {
+    const news = await axios.get('/api/v1/news');
+    dispatch({
+      type: GET_NEWS,
+      payload: news,
+    });
+  }
+);
+
 export const textChange = ({ target: { name, value } }) => (
   (dispatch) => {
     dispatch({ type: PROFILE_CHANGE, payload: value, target: name });

src/actions/types.js

 export const GET_USERDATA = 'get_userdata';
+export const GET_NEWS = 'get_news';
+
 export const PROFILE_CHANGE = 'profile_change';
 export const GROUP_CHANGE = 'group_change';
+
 export const LOGOUT = 'logout';

src/components/Header.js

@@ -15,18 +15,12 @@ import KSZKlogo from './images/kszk_logo.svg';
 const FixedMenu = ({ user }) => (
   <Menu fixed='top' size='large' pointing>
     <Container>
-      <Menu.Item as={NavLink} to='/home'>
-        Főoldal
-      </Menu.Item>
-      <Menu.Item as={NavLink} to='/circles'>
-        Köreink
-      </Menu.Item>
-      <Menu.Item as={NavLink} to='/trainers'>
-        Képzők
-      </Menu.Item>
-      <Menu.Item as={NavLink} to='/schedule'>
-        Ütemterv
-      </Menu.Item>
+      <Menu.Item as={NavLink} to='/home'>Főoldal</Menu.Item>
+      <Menu.Item as={NavLink} to='/news'>Hírek</Menu.Item>
+      <Menu.Item as={NavLink} to='/circles'>Köreink</Menu.Item>
+      <Menu.Item as={NavLink} to='/trainers'>Képzők</Menu.Item>
+      <Menu.Item as={NavLink} to='/schedule'>Ütemterv</Menu.Item>
+
       <Menu.Menu position='right'>
         <Menu.Item className='item'>
           {
@@ -85,15 +79,11 @@ class Header extends Component {
                   />
                   Főoldal
                 </Menu.Item>
-                <Menu.Item as={NavLink} to='/circles'>
-                  Köreink
-                </Menu.Item>
-                <Menu.Item as={NavLink} to='/trainers'>
-                  Képzők
-                </Menu.Item>
-                <Menu.Item as={NavLink} to='/schedule'>
-                  Ütemterv
-                </Menu.Item>
+                <Menu.Item as={NavLink} to='/news'>Hírek</Menu.Item>
+                <Menu.Item as={NavLink} to='/circles'>Köreink</Menu.Item>
+                <Menu.Item as={NavLink} to='/trainers'>Képzők</Menu.Item>
+                <Menu.Item as={NavLink} to='/schedule'>Ütemterv</Menu.Item>
+
                 <Menu.Item position='right'>
                   {
                     this.props.user.id ?
@@ -102,9 +92,7 @@ class Header extends Component {
                         <Button onClick={() => this.props.logout()} icon='sign out' />
                       </Button.Group>
                     :
-                      <Button as='a' href='/api/v1/login/authsch/' inverted>
-                        Bejelentkezés
-                      </Button>
+                      <Button as='a' href='/api/v1/login/authsch/' inverted>Bejelentkezés</Button>
                   }
                 </Menu.Item>
               </Menu>

src/components/Main.js

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

src/components/pages/News.js

+import React, { Component } from 'react';
+import { Container, Header, Segment, Divider } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+
+import { getNews } from '../../actions';
+
+class News extends Component {
+
+  componentWillMount() {
+    this.props.getNews();
+  }
+
+  render_news() {
+    const news = this.props.news;
+    console.log(news);
+
+    return news.map( (item, index) => (
+      <div key={index}>
+        { index > 0 ? <Divider /> : ''}
+        <Header as='h3' style={{ fontSize: '2em' }}>{item.title}</Header>
+        <p style={{ fontSize: '1.33em' }}>{item.text}</p>
+      </div>
+    ));
+
+  }
+
+  render() {
+    return (
+      <div>
+        <Segment inverted textAlign='center' vertical>
+          <Container>
+            <Header
+              as='h1'
+              content='Hírek'
+              inverted
+              style={{
+                fontSize: '3em',
+                fontWeight: 'normal',
+                marginBottom: 0,
+                marginTop: '0.5em',
+              }}
+            />
+          </Container>
+        </Segment>
+
+        <Segment style={{ padding: '8em 0em' }} vertical>
+          <Container text>
+            {this.render_news()}
+          </Container>
+        </Segment>
+      </div>
+    );
+  }
+}
+
+
+const mapStateToProps = ({ news }) => ({ news });
+
+export default connect(mapStateToProps, { getNews })(News);

src/components/pages/Profile.js

 import React, { Component } from 'react';
-import { Container, Segment, Form, Dropdown, Divider, Card, Header } from 'semantic-ui-react';
+import { Container, Segment, Form, Dropdown, Divider, Header } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { textChange, submitRegistration, groupChange } from '../../actions';
 

src/reducers/NewsReducer.js

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

src/reducers/index.js

 import { combineReducers } from 'redux';
 import UserReducer from './UserReducer';
+import NewsReducer from './NewsReducer';
 
 const rootReducer = combineReducers({
   user: UserReducer,
+  news: NewsReducer,
 });
 
 export default rootReducer;