Commit 482da8b1 authored by Jan Bürling's avatar Jan Bürling

a stupid car list

parent 3ee72320
// THIRD-PARTY
@import '../../../node_modules/semantic-ui-css/semantic.min.css';
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
}
\ No newline at end of file
import React, { Component } from 'react';
import logo from '../../assets/images/logo.svg';
import './styles.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
import React from 'react';
import { Icon, Search } from 'semantic-ui-react';
import cars from '../../mocks/cars';
export class StupidCarList extends React.Component {
render() {
return (
<div className='stupid-car-list' style={{ display: 'flex' }}>
{/* Container for a list of all cars */}
<div style={{ float: 'left', width: '100%', padding: '15px' }}>
<div style={{ padding: '15px' }}>
<Search />
</div>
{/* Loop over all cars */}
{cars.map(car => (
<div
key={car.id}
style={{ display: 'inline-block', width: '31.21%', margin: '15px', border: '1px solid grey' }}
>
{/* Title container */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '15px' }}>
<h4 style={{ margin: '0' }}>
{`${car.brand} ${car.type}`}
</h4>
<Icon name={car.isFavorite ? 'heart' : 'heart outline' } size='big' />
</div>
{/* Image */}
<img src={car.imageUrl} style={{ width: '100%', height: '260px' }} />
{/* Information container */}
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '15px' }}>
<p>
{ `BJ ${car.buildYear}` }
</p>
<p>
{ `${car.price} €` }
</p>
</div>
{/* Button container */}
<div style={{ textAlign: 'center', marginBottom: '15px' }}>
<button type='button' style={{ padding: '10px 35px', background: 'light-grey' }}>
<Icon name='expand arrows alternate' />
Details
</button>
</div>
</div>
))}
</div>
{/* Container for a list of favorit cars */}
<div style={{ float: 'right', width: '25%', background: '#DCDCDC', padding: '15px' }}>
<h2>
Favorits
</h2>
{cars.filter(car => car.isFavorite).map(car => (
<div
key={car.id}
style={{ margin: '15px', border: '1px solid grey', background: 'white' }}
>
{/* Title container */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '15px' }}>
<h4 style={{ margin: '0' }}>
{`${car.brand} ${car.type}`}
</h4>
</div>
{/* Image */}
<img src={car.imageUrl} style={{ width: '100%', height: '180px' }} />
{/* Information container */}
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '15px' }}>
<p>
{ `BJ ${car.buildYear}` }
</p>
<p>
{ `${car.price} €` }
</p>
</div>
<p style={{ padding: '0 15px' }}>
Last viewed: { car.lastViewed }
</p>
{/* Button container */}
<div style={{ textAlign: 'center', marginBottom: '15px' }}>
<button type='button' style={{ padding: '10px 35px', background: 'light-grey' }}>
<Icon name='expand arrows alternate' />
Details
</button>
</div>
</div>
))}
</div>
</div>
);
}
}
\ No newline at end of file
import React, { Component } from 'react';
import { Accordion } from 'semantic-ui-react';
import logo from '../assets/images/logo.svg';
import { StupidCarList } from './StupidCarList';
import './styles.css';
class App extends Component {
constructor(props) {
super(props);
this.state = { activeIndex: 0 };
}
componentWillMount() {
this.handleClick = this.handleClick.bind(this);
}
/**
* @description handles the click on the accordion title
* @param event
* @param titleProps
*/
handleClick(event, titleProps) {
const { index } = titleProps;
const { activeIndex } = this.state;
this.setState({ activeIndex: activeIndex === index ? -1 : index });
}
render() {
const { activeIndex } = this.state;
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<div>
<Accordion>
<Accordion.Title active={activeIndex === 0} index={0} onClick={this.handleClick}>
<h2 style={{ padding: '0 15px' }}>A stupid car list</h2>
</Accordion.Title>
<Accordion.Content active={activeIndex === 0}>
<StupidCarList />
</Accordion.Content>
</Accordion>
</div>
</div>
);
}
}
export default App;
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
......@@ -12,10 +8,12 @@
height: 150px;
padding: 20px;
color: white;
text-align: center;
}
.App-title {
font-size: 1.5em;
margin: 0;
}
.App-intro {
......
import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import App from './components/App';
import App from './components';
import './assets/styles/index.css';
......
export default [{
id: 0,
brand: 'Audi',
type: 'A3',
buildYear: 2015,
price: 12000,
isFavorite: true,
imageUrl: 'http://i.auto-bild.de/mdb/extra_large/47/a3-b09.jpg',
lastViewed: '06.07.2018',
}, {
id: 1,
brand: 'Audi',
type: 'A4',
buildYear: 2017,
price: 41000,
isFavorite: false,
imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/2017_Audi_A4_%288W%29_S-Line_quattro_sedan_%282018-03-22%29_01.jpg/800px-2017_Audi_A4_%288W%29_S-Line_quattro_sedan_%282018-03-22%29_01.jpg',
lastViewed: '06.07.2018',
}, {
id: 2,
brand: 'Audi',
type: 'A4',
buildYear: 2016,
price: 29000,
isFavorite: false,
imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/2017_Audi_A4_%288W%29_S-Line_quattro_sedan_%282018-03-22%29_01.jpg/800px-2017_Audi_A4_%288W%29_S-Line_quattro_sedan_%282018-03-22%29_01.jpg',
lastViewed: '06.07.2018',
}];
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment