50 lines
1.1 KiB
JavaScript
50 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
|
|
import './Style-light.css';
|
|
import './Style-dark.css';
|
|
import Feed from './Feed.js';
|
|
import Article from './Article.js';
|
|
import Comments from './Comments.js';
|
|
|
|
class App extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
theme: localStorage.getItem('theme') || '',
|
|
};
|
|
}
|
|
|
|
light() {
|
|
this.setState({ theme: '' });
|
|
localStorage.setItem('theme', '');
|
|
}
|
|
|
|
dark() {
|
|
this.setState({ theme: 'dark' });
|
|
localStorage.setItem('theme', 'dark');
|
|
}
|
|
|
|
render() {
|
|
const theme = this.state.theme;
|
|
|
|
return (
|
|
<div className={theme}>
|
|
<Router>
|
|
<div className='container menu'>
|
|
<p>
|
|
<Link to='/'>QNN - Home</Link>
|
|
<span className='theme'>Theme: <a href='#' onClick={() => this.light()}>Light</a> - <a href='#' onClick={() => this.dark()}>Dark</a></span>
|
|
</p>
|
|
</div>
|
|
<Route path='/' exact component={Feed} />
|
|
<Route path='/:id' exact component={Comments} />
|
|
<Route path='/:id/a' exact component={Article} />
|
|
</Router>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|