refactor: Refactor dot components to functional

This commit is contained in:
2025-07-07 19:49:26 +00:00
committed by Tanner Collin
parent 1df1c59d61
commit 667c2c5eaf

View File

@@ -21,12 +21,7 @@ export const infoLine = (story) =>
</div> </div>
; ;
export class ToggleDot extends React.Component { export const ToggleDot = ({ id, article }) => (
render() {
const id = this.props.id;
const article = this.props.article;
return (
<div className='dot toggleDot'> <div className='dot toggleDot'>
<div className='button'> <div className='button'>
<Link to={'/' + id + (article ? '' : '/c')}> <Link to={'/' + id + (article ? '' : '/c')}>
@@ -34,50 +29,44 @@ export class ToggleDot extends React.Component {
</Link> </Link>
</div> </div>
</div> </div>
); );
}
}
export class BackwardDot extends React.Component { export const BackwardDot = () => {
goBackward() { const goBackward = () => {
localStorage.setItem('scrollLock', 'True'); localStorage.setItem('scrollLock', 'True');
window.history.back(); window.history.back();
} };
render() {
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (!isMobile) return null; if (!isMobile) return null;
if (!document.fullscreenElement) return null; if (!document.fullscreenElement) return null;
return ( return (
<div className='dot backwardDot' onClick={this.goBackward}> <div className='dot backwardDot' onClick={goBackward}>
<div className='button'> <div className='button'>
</div> </div>
</div> </div>
); );
} };
}
export class ForwardDot extends React.Component { export const ForwardDot = () => {
goForward() { const goForward = () => {
localStorage.setItem('scrollLock', 'True'); localStorage.setItem('scrollLock', 'True');
window.history.forward(); window.history.forward();
} };
render() {
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (!isMobile) return null; if (!isMobile) return null;
return ( return (
<div className='dot forwardDot' onClick={this.goForward}> <div className='dot forwardDot' onClick={goForward}>
<div className='button'> <div className='button'>
</div> </div>
</div> </div>
); );
} };
}
export const logos = { 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==', 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==',