begin styling and using material-ui

This commit is contained in:
Niel 2019-04-24 22:43:18 +02:00
parent 3afb854e87
commit f03cbff9a9
6 changed files with 41 additions and 14 deletions

View file

@ -2,8 +2,6 @@ import React from 'react';
import Header from './Header'; import Header from './Header';
import Channels from './Channel/Channels'; import Channels from './Channel/Channels';
import './App.scss';
export default () => { export default () => {
return ( return (
<div className='App'> <div className='App'>

View file

@ -1,17 +1,26 @@
import React from 'react'; import React from 'react';
import { withStyles } from '@material-ui/core';
import ChannelEntry from './ChannelEntry'; import ChannelEntry from './ChannelEntry';
export default ({ channels, clients }) => { const styles = () => ({
return ( list: {
<ul className='channelList'> listStyle: 'none',
{channels.map(channel => { },
});
const channelList = ({ channels, clients, classes }) => {
return ( return (
<div>
<ul className={classes.list}>
{channels.map(channel => (
<li key={channel.id}> <li key={channel.id}>
<ChannelEntry channel={channel} clients={clients} /> <ChannelEntry channel={channel} clients={clients} />
</li> </li>
); ))}
})}
</ul> </ul>
</div>
); );
}; };
export default withStyles(styles)(channelList);

View file

@ -1,7 +1,19 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { Paper } from '@material-ui/core';
import ApiService from '../../services/ApiService'; import ApiService from '../../services/ApiService';
import ChannelList from './ChannelList'; import ChannelList from './ChannelList';
const styles = theme => ({
root: {
...theme.mixins.gutters(),
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2,
margin: `${theme.spacing.unit}px auto`,
width: '500px',
},
});
class Channels extends Component { class Channels extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -24,9 +36,17 @@ class Channels extends Component {
render() { render() {
const { loaded, channels, clients } = this.state; const { loaded, channels, clients } = this.state;
if (!loaded) return <div className='loading'>Loading...</div>; const { classes } = this.props;
return <ChannelList channels={channels} clients={clients} />; return (
<Paper className={classes.root}>
{!loaded ? (
<div className='loading'>Loading...</div>
) : (
<ChannelList channels={channels} clients={clients} />
)}
</Paper>
);
} }
} }
export default Channels; export default withStyles(styles)(Channels);

View file

View file

@ -12,7 +12,7 @@ const Header = ({ classes }) => {
<AppBar position='static'> <AppBar position='static'>
<Toolbar> <Toolbar>
<Typography variant='headline' color='inherit'> <Typography variant='headline' color='inherit'>
Cliffbreak.de {'Cliffbreak.de'}
</Typography> </Typography>
</Toolbar> </Toolbar>
</AppBar> </AppBar>

View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import App from './components/App'; import App from './components/App';
import './index.scss'; import './index.css';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root')); ReactDOM.render(<App />, document.getElementById('root'));