Skip to content
Snippets Groups Projects
Commit 3c4f72e7 authored by Chif Gergő's avatar Chif Gergő
Browse files

Style the news items. Display create, edit date, author.

parent 67198b10
No related branches found
No related tags found
No related merge requests found
...@@ -20,7 +20,13 @@ class EditNewsForm extends Component { ...@@ -20,7 +20,13 @@ class EditNewsForm extends Component {
open={this.state.showModal} open={this.state.showModal}
onOpen={this.props.onClick} onOpen={this.props.onClick}
trigger={ trigger={
<Button onClick={() => { this.setState({ showModal: true }); }} size='mini' >Edit</Button> <Button
floated={this.props.floated}
onClick={() => { this.setState({ showModal: true }); }}
size='mini'
>
Edit
</Button>
} }
> >
<Modal.Header>Szerkesztés:</Modal.Header> <Modal.Header>Szerkesztés:</Modal.Header>
......
.news-extra {
color: grey;
font-size: 0.75em;
font-style: italic;
font-family: fantasy;
}
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Header, Segment, Divider, List, Button } from 'semantic-ui-react'; import { Container, Segment, Item, Button, Grid } from 'semantic-ui-react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import AddNewsForm from '../forms/AddNewsForm'; import AddNewsForm from '../forms/AddNewsForm';
import EditNewsForm from '../forms/EditNewsForm'; import EditNewsForm from '../forms/EditNewsForm';
import { getNews, deleteNews, setSelectedNews } from '../../actions/news'; import { getNews, deleteNews, setSelectedNews } from '../../actions/news';
import './News.css';
class News extends Component { class News extends Component {
componentWillMount() { componentWillMount() {
this.props.getNews(); this.props.getNews();
} }
renderNews() { renderNews() {
return this.props.news.map((item, index) => ( return this.props.news.map(item => (
<div key={item.id} id={index}> <Item key={item.id}>
{ index > 0 ? <Divider /> : ''} <Item.Content>
<Header as='h3' style={{ fontSize: '2em' }}>{item.title}</Header> <Item.Header
<p style={{ fontSize: '1.33em' }}>{item.text}</p> as='h3'
<EditNewsForm onClick={() => this.props.setSelectedNews(item)} /> style={{ fontSize: '2em' }}
>
{item.title}
<EditNewsForm
floated='right'
onClick={() => this.props.setSelectedNews(item)}
/>
<Button <Button
color='red' color='red'
size='mini' size='mini'
floated='right'
onClick={() => this.props.deleteNews(item)} onClick={() => this.props.deleteNews(item)}
> >
Delete Delete
</Button> </Button>
</div> </Item.Header>
)); <Item.Description style={{ fontSize: '1.33em' }}>
} <pre>{item.text}</pre>
</Item.Description>
renderSidebar() { <Item.Extra>
return this.props.news.map((item, index) => ( <Grid>
<List.Item as='a' href={`#${index}`}> <Grid.Row className='news-extra'>
<List.Icon name='align justify' verticalAlign='middle' /> <Grid.Column floated='left' width={10}>
<List.Content> <p> Készült: {item.created_at} </p>
<List.Header> {/* TODO get the name who edited it */}
{item.title} <p> Szerkesztve: {item.created_at} </p>
</List.Header> </Grid.Column>
</List.Content> <Grid.Column floated='right' width={5}>
</List.Item> <p> Írta: <strong>{item.author_name}</strong></p>
{/* TODO get the edited by name */}
<p> Szerkesztette: {item.author_name}</p>
</Grid.Column>
</Grid.Row>
</Grid>
</Item.Extra>
</Item.Content>
</Item>
)); ));
} }
render() { render() {
return ( return (
<div> <div>
{/* <Segment inverted textAlign='center' vertical>
<Container>
<Header
as='h1'
content='Hírek'
inverted
style={{
fontSize: '2em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: '0.2em',
padding: 0
}}
/>
</Container>
</Segment>
*/}
<Segment style={{ padding: '3em 3em' }} vertical> <Segment style={{ padding: '3em 3em' }} vertical>
{/* { this.props.user.is_superuser ? <AddNewsForm /> : ''} */}
<AddNewsForm /> <AddNewsForm />
<Container text textAlign='center'> <Container text textAlign='center'>
<Item.Group divided>
{this.renderNews()} {this.renderNews()}
</Item.Group>
</Container> </Container>
</Segment> </Segment>
</div> </div>
...@@ -75,6 +79,6 @@ class News extends Component { ...@@ -75,6 +79,6 @@ class News extends Component {
} }
const mapStateToProps = ({ news }) => ({ news }); const mapStateToProps = ({ news, user }) => ({ news, user });
export default connect(mapStateToProps, { getNews, deleteNews, setSelectedNews })(News); export default connect(mapStateToProps, { getNews, deleteNews, setSelectedNews })(News);
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment