Skip to content
Snippets Groups Projects
Commit 304ab0fd authored by Barnabás Czémán's avatar Barnabás Czémán
Browse files

Add initial news support

parent 65ad007f
Branches
Tags
No related merge requests found
{ {
"name": "kszkepzes-frontend", "name": "kszkepzes-frontend",
"version": "0.1.0", "version": "0.1.0",
"proxy": "http://127.0.0.1:8000", "proxy": "http://127.0.0.1:8000/",
"private": true, "private": true,
"dependencies": { "dependencies": {
"axios": "^0.17.1", "axios": "^0.17.1",
......
// TODO: Separate actions
import ax from 'axios'; 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({ const axios = ax.create({
xsrfCookieName: 'csrftoken', xsrfCookieName: 'csrftoken',
...@@ -21,6 +23,16 @@ export const getUserData = () => ( ...@@ -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 } }) => ( export const textChange = ({ target: { name, value } }) => (
(dispatch) => { (dispatch) => {
dispatch({ type: PROFILE_CHANGE, payload: value, target: name }); dispatch({ type: PROFILE_CHANGE, payload: value, target: name });
......
export const GET_USERDATA = 'get_userdata'; export const GET_USERDATA = 'get_userdata';
export const GET_NEWS = 'get_news';
export const PROFILE_CHANGE = 'profile_change'; export const PROFILE_CHANGE = 'profile_change';
export const GROUP_CHANGE = 'group_change'; export const GROUP_CHANGE = 'group_change';
export const LOGOUT = 'logout'; export const LOGOUT = 'logout';
...@@ -15,18 +15,12 @@ import KSZKlogo from './images/kszk_logo.svg'; ...@@ -15,18 +15,12 @@ import KSZKlogo from './images/kszk_logo.svg';
const FixedMenu = ({ user }) => ( const FixedMenu = ({ user }) => (
<Menu fixed='top' size='large' pointing> <Menu fixed='top' size='large' pointing>
<Container> <Container>
<Menu.Item as={NavLink} to='/home'> <Menu.Item as={NavLink} to='/home'>Főoldal</Menu.Item>
Főoldal <Menu.Item as={NavLink} to='/news'>Hírek</Menu.Item>
</Menu.Item> <Menu.Item as={NavLink} to='/circles'>Köreink</Menu.Item>
<Menu.Item as={NavLink} to='/circles'> <Menu.Item as={NavLink} to='/trainers'>Képzők</Menu.Item>
Köreink <Menu.Item as={NavLink} to='/schedule'>Ütemterv</Menu.Item>
</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.Menu position='right'>
<Menu.Item className='item'> <Menu.Item className='item'>
{ {
...@@ -85,15 +79,11 @@ class Header extends Component { ...@@ -85,15 +79,11 @@ class Header extends Component {
/> />
Főoldal Főoldal
</Menu.Item> </Menu.Item>
<Menu.Item as={NavLink} to='/circles'> <Menu.Item as={NavLink} to='/news'>Hírek</Menu.Item>
Köreink <Menu.Item as={NavLink} to='/circles'>Köreink</Menu.Item>
</Menu.Item> <Menu.Item as={NavLink} to='/trainers'>Képzők</Menu.Item>
<Menu.Item as={NavLink} to='/trainers'> <Menu.Item as={NavLink} to='/schedule'>Ütemterv</Menu.Item>
Képzők
</Menu.Item>
<Menu.Item as={NavLink} to='/schedule'>
Ütemterv
</Menu.Item>
<Menu.Item position='right'> <Menu.Item position='right'>
{ {
this.props.user.id ? this.props.user.id ?
...@@ -102,9 +92,7 @@ class Header extends Component { ...@@ -102,9 +92,7 @@ class Header extends Component {
<Button onClick={() => this.props.logout()} icon='sign out' /> <Button onClick={() => this.props.logout()} icon='sign out' />
</Button.Group> </Button.Group>
: :
<Button as='a' href='/api/v1/login/authsch/' inverted> <Button as='a' href='/api/v1/login/authsch/' inverted>Bejelentkezés</Button>
Bejelentkezés
</Button>
} }
</Menu.Item> </Menu.Item>
</Menu> </Menu>
......
import React from 'react'; import React from 'react';
import { Switch, Route, Redirect, withRouter } from 'react-router-dom'; import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
import Home from './pages/Home'; import Home from './pages/Home';
import Trainers from './pages/Trainers'; import Trainers from './pages/Trainers';
import Schedule from './pages/Schedule'; import Schedule from './pages/Schedule';
...@@ -7,11 +8,13 @@ import NotFound from './pages/NotFound'; ...@@ -7,11 +8,13 @@ import NotFound from './pages/NotFound';
import Profile from './pages/Profile'; import Profile from './pages/Profile';
import Statistics from './pages/Statistics'; import Statistics from './pages/Statistics';
import Circles from './pages/Circles'; import Circles from './pages/Circles';
import News from './pages/News';
const Main = () => ( const Main = () => (
<Switch> <Switch>
<Redirect exact from='/' to='/home' /> <Redirect exact from='/' to='/home' />
<Route exact path='/home' component={Home} /> <Route exact path='/home' component={Home} />
<Route path='/news' component={News} />
<Route path='/trainers' component={Trainers} /> <Route path='/trainers' component={Trainers} />
<Route path='/schedule' component={Schedule} /> <Route path='/schedule' component={Schedule} />
<Route path='/profile' component={withRouter(Profile)} /> <Route path='/profile' component={withRouter(Profile)} />
......
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);
import React, { Component } from 'react'; 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 { connect } from 'react-redux';
import { textChange, submitRegistration, groupChange } from '../../actions'; import { textChange, submitRegistration, groupChange } from '../../actions';
......
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;
}
};
import { combineReducers } from 'redux'; import { combineReducers } from 'redux';
import UserReducer from './UserReducer'; import UserReducer from './UserReducer';
import NewsReducer from './NewsReducer';
const rootReducer = combineReducers({ const rootReducer = combineReducers({
user: UserReducer, user: UserReducer,
news: NewsReducer,
}); });
export default rootReducer; export default rootReducer;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment