refactor: Refactor dot components to functional

webclient/src/utils.js

@@ -21,12 +21,7 @@ export const infoLine = (story) =>
 	</div>
 ;
 
-export class ToggleDot extends React.Component {
-	render() {
-		const id = this.props.id;
-		const article = this.props.article;
-
-		return (
+export const ToggleDot = ({ id, article }) => (
 	<div className='dot toggleDot'>
 		<div className='button'>
 			<Link to={'/' + id + (article ? '' : '/c')}>
@@ -34,50 +29,44 @@ export class ToggleDot extends React.Component {
 			</Link>
 		</div>
 	</div>
-		);
-	}
-}
+);
 
-export class BackwardDot extends React.Component {
-	goBackward() {
+export const BackwardDot = () => {
+	const goBackward = () => {
 		localStorage.setItem('scrollLock', 'True');
 		window.history.back();
-	}
+	};
 
-	render() {
 	const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
 	if (!isMobile) return null;
 	if (!document.fullscreenElement) return null;
 
 	return (
-			<div className='dot backwardDot' onClick={this.goBackward}>
+		<div className='dot backwardDot' onClick={goBackward}>
 			<div className='button'>
 				
 			</div>
 		</div>
 	);
-	}
-}
+};
 
-export class ForwardDot extends React.Component {
-	goForward() {
+export const ForwardDot = () => {
+	const goForward = () => {
 		localStorage.setItem('scrollLock', 'True');
 		window.history.forward();
-	}
+	};
 
-	render() {
 	const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
 	if (!isMobile) return null;
 
 	return (
-			<div className='dot forwardDot' onClick={this.goForward}>
+		<div className='dot forwardDot' onClick={goForward}>
 			<div className='button'>
 				
 			</div>
 		</div>
 	);
-	}
-}
+};
 
 export const logos = {
 	hackernews: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4wgeBhwhciGZUAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGCSURBVFjD7Za/S0JRFMc/+oSgLWjLH/2AIKEhC2opIp1amqw/INCo9lbHghCnKDdpN5OoIGhISSLwx2RCEYSjUWhWpO+9hicopCHh8w29Mx3u/XLv95z7Pedcg+y1VQEBbUw0ang5gGBEY9MJ6ARMbaH6HdBnBlmC+5PfsVYX9PTCSx4KyQ4RsI6DxwcYIGSFxF5znHkOtvZBECDoa4tAe0+QDMFDVvFd7ta4pU0QTAo2GeqwBqIHIEkwMAQzaz/3LfNgn1Qw0aAKIswdQzZVy8Jyk+g3lNTfpSEXUakKjgJQrYB5GKY9DRpZALsDxCqEAyqWYT4G6etaFlYaol8HowCZBOSvVO4DR374+gTLCEytgs0JYxPKWtivUh9otOcM3FzC7CI43fBWVKK/vYBCqkudMLIN7yUYHFXe/qMMkZ0utuLyE8ROwWBU6j5+BqXHLs+C+GHdP9/VYBhJ1bpfedXHsU5A5Q9JKxEWa+KT5T8fY5C9NlnXgE7g3xMQNbxf/AZyEGqvyYs/dQAAAABJRU5ErkJggg==',