refactor: cleanup

This commit is contained in:
David Ralph
2021-03-23 13:10:34 +00:00
parent b4e1d00633
commit b773f256a4
33 changed files with 110 additions and 336 deletions

View File

@@ -6,14 +6,14 @@ import CheckboxUI from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
export default class Checkbox extends React.PureComponent {
constructor(...args) {
super(...args);
constructor(props) {
super(props);
this.state = {
checked: (localStorage.getItem(this.props.name) === 'true')
};
}
handleChange() {
handleChange = () => {
SettingsFunctions.setItem(this.props.name);
this.setState({
@@ -33,7 +33,7 @@ export default class Checkbox extends React.PureComponent {
return (
<>
<FormControlLabel
control={<CheckboxUI name={this.props.name} color='primary' checked={this.state.checked} onChange={() => this.handleChange()} />}
control={<CheckboxUI name={this.props.name} color='primary' checked={this.state.checked} onChange={this.handleChange} />}
label={text}
/>
<br/>

View File

@@ -1,8 +1,8 @@
import React from 'react';
export default class Dropdown extends React.PureComponent {
constructor(...args) {
super(...args);
constructor(props) {
super(props);
this.state = {
value: localStorage.getItem(this.props.name) || ''
};
@@ -12,7 +12,9 @@ export default class Dropdown extends React.PureComponent {
return this.props.label ? <label>{this.props.label}</label> : null;
}
onChange(value) {
onChange = (e) => {
const { value } = e.target;
this.setState({
value: value
});
@@ -28,7 +30,7 @@ export default class Dropdown extends React.PureComponent {
return (
<>
{this.getLabel()}
<select value={this.state.value} onChange={(e) => this.onChange(e.target.value)}>
<select value={this.state.value} onChange={this.onChange}>
{this.props.children}
</select>
</>

View File

@@ -7,14 +7,16 @@ import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
export default class Radio extends React.PureComponent {
constructor(...args) {
super(...args);
constructor(props) {
super(props);
this.state = {
value: localStorage.getItem(this.props.name)
};
}
handleChange(value) {
handleChange = (e) => {
const { value } = e.target;
localStorage.setItem(this.props.name, value);
this.setState({
@@ -26,7 +28,7 @@ export default class Radio extends React.PureComponent {
return (
<FormControl component='fieldset'>
<FormLabel className='radio-title' component='legend'>{this.props.title}</FormLabel>
<RadioGroup aria-label={this.props.name} name={this.props.name} onChange={(e) => this.handleChange(e.target.value)} value={this.state.value}>
<RadioGroup aria-label={this.props.name} name={this.props.name} onChange={this.handleChange} value={this.state.value}>
{this.props.options.map(option =>
<FormControlLabel value={option.value} control={<RadioUI/>} label={option.name} key={option.name} />
)}

View File

@@ -3,22 +3,24 @@ import React from 'react';
import { toast } from 'react-toastify';
export default class Slider extends React.PureComponent {
constructor(...args) {
super(...args);
constructor(props) {
super(props);
this.state = {
value: localStorage.getItem(this.props.name) || ''
};
this.language = window.language.modals.main.settings;
}
handleChange(value) {
handleChange = () => {
const { value } = e.target;
localStorage.setItem(this.props.name, value);
this.setState({
value: value
});
}
resetItem() {
resetItem = () => {
localStorage.setItem(this.props.name, this.props.default);
this.setState({
value: this.props.default
@@ -30,8 +32,8 @@ export default class Slider extends React.PureComponent {
render() {
return (
<>
<p>{this.props.title} ({this.state.value}{this.props.display}) <span className='modalLink' onClick={() => this.resetItem()}>{this.language.buttons.reset}</span></p>
<input className='range' type='range' min={this.props.min} max={this.props.max} value={this.state.value} onChange={(e) => this.handleChange(e.target.value)} />
<p>{this.props.title} ({this.state.value}{this.props.display}) <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
<input className='range' type='range' min={this.props.min} max={this.props.max} value={this.state.value} onChange={this.handleChange} />
</>
);
}

View File

@@ -6,14 +6,14 @@ import SwitchUI from '@material-ui/core/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';
export default class Switch extends React.PureComponent {
constructor(...args) {
super(...args);
constructor(props) {
super(props);
this.state = {
checked: (localStorage.getItem(this.props.name) === 'true')
};
}
handleChange() {
handleChange = () => {
SettingsFunctions.setItem(this.props.name);
this.setState({
@@ -33,7 +33,7 @@ export default class Switch extends React.PureComponent {
return (
<>
<FormControlLabel
control={<SwitchUI name={this.props.name} color='primary' checked={this.state.checked} onChange={() => this.handleChange()} />}
control={<SwitchUI name={this.props.name} color='primary' checked={this.state.checked} onChange={this.handleChange} />}
label={text}
labelPlacement='start'
/>

View File

@@ -3,15 +3,17 @@ import React from 'react';
import { toast } from 'react-toastify';
export default class Text extends React.PureComponent {
constructor(...args) {
super(...args);
constructor(props) {
super(props);
this.state = {
value: localStorage.getItem(this.props.name) || ''
};
this.language = window.language.modals.main.settings;
}
handleChange(value) {
handleChange(e) {
const { value } = e.target;
// Alex wanted font to work with montserrat and Montserrat, so I made it work
if (this.props.upperCaseFirst === true) {
value = value.charAt(0).toUpperCase() + value.slice(1);
@@ -23,7 +25,7 @@ export default class Text extends React.PureComponent {
});
}
resetItem() {
resetItem = () => {
localStorage.setItem(this.props.name, this.props.default || '');
this.setState({
value: this.props.default || ''
@@ -35,10 +37,10 @@ export default class Text extends React.PureComponent {
render() {
return (
<>
<p>{this.props.title} <span className='modalLink' onClick={() => this.resetItem()}>{this.language.buttons.reset}</span></p>
<p>{this.props.title} <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
{(this.props.textarea === true) ?
<textarea className='settingsTextarea' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
:<input type='text' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
<textarea className='settingsTextarea' value={this.state.value} onChange={this.handleChange}/>
:<input type='text' value={this.state.value} onChange={this.handleChange}/>
}
</>
);

View File

@@ -5,8 +5,8 @@ import Tooltip from '@material-ui/core/Tooltip';
const other_contributors = require('../../../../../modules/other_contributors.json');
export default class About extends React.PureComponent {
constructor(...args) {
super(...args);
constructor() {
super();
this.state = {
contributors: [],
sponsors: [],

View File

@@ -11,8 +11,8 @@ import { toast } from 'react-toastify';
import Modal from 'react-modal';
export default class AdvancedSettings extends React.PureComponent {
constructor(...args) {
super(...args);
constructor() {
super();
this.state = {
resetModal: false
};

View File

@@ -18,8 +18,8 @@ export default class BackgroundSettings extends React.PureComponent {
DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': window.language.modals.main.settings.sections.background.source.disabled, 'stop': 0 }], 'type': 'linear' };
GradientPickerInitalState = undefined;
constructor(...args) {
super(...args);
constructor() {
super();
this.state = {
customBackground: localStorage.getItem('customBackground') || '',
gradientSettings: this.DefaultGradientSettings

View File

@@ -1,8 +1,8 @@
import React from 'react';
export default class Changelog extends React.PureComponent {
constructor(...args) {
super(...args);
constructor() {
super();
this.state = {
title: this.props.language.title,
date: null,

View File

@@ -8,15 +8,15 @@ import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';
export default class GreetingSettings extends React.PureComponent {
constructor(...args) {
super(...args);
constructor() {
super();
this.state = {
birthday: new Date(localStorage.getItem('birthday')) || new Date()
};
this.language = window.language.modals.main.settings;
}
changeDate(data) {
changeDate = (data) => {
localStorage.setItem('birthday', data);
this.setState({
@@ -30,18 +30,16 @@ export default class GreetingSettings extends React.PureComponent {
return (
<>
<h2>{greeting.title}</h2>
<Switch name='greeting' text={this.language.enabled} />
<Checkbox name='events' text={greeting.events} />
<Checkbox name='defaultGreetingMessage' text={greeting.default} />
<Switch name='greeting' text={this.language.enabled}/>
<Checkbox name='events' text={greeting.events}/>
<Checkbox name='defaultGreetingMessage' text={greeting.default}/>
<Text title={greeting.name} name='greetingName'/>
<h3>{greeting.birthday}</h3>
<Switch name='birthdayenabled' text={this.language.enabled} />
<Switch name='birthdayenabled' text={this.language.enabled}/>
<Checkbox name='birthdayage' text='Birthday Age'/>
<ul>
<p>{greeting.birthday_date}</p>
<DayPickerInput onDayChange={(data) => this.changeDate(data)} value={this.state.birthday} />
</ul>
<p>{greeting.birthday_date}</p>
<DayPickerInput onDayChange={this.changeDate} value={this.state.birthday}/>
</>
);
}

View File

@@ -15,8 +15,8 @@ const SortableContainer = sortableContainer(({children}) => {
});
export default class OrderSettings extends React.PureComponent {
constructor(...args) {
super(...args);
constructor() {
super();
this.state = {
items: JSON.parse(localStorage.getItem('order'))
};

View File

@@ -6,8 +6,8 @@ import Switch from '../Switch';
import Radio from '../Radio';
export default class TimeSettings extends React.PureComponent {
constructor(...args) {
super(...args);
constructor() {
super();
this.state = {
timeType: localStorage.getItem('timeType') || 'digital',
dateType: localStorage.getItem('dateType') || 'long'