remove unnecessary states from react components

fix other linting issues
snapcrunch · Jul 9, 2021 · a5c7544 · a5c7544
1 parent c4a4544
commit a5c7544
Show file tree

Hide file tree

Showing 14 changed files with 404 additions and 391 deletions.
diff --git a/example/preferences.js b/example/preferences.js
@@ -14,10 +14,10 @@ const preferences = new ElectronPreferences({
 			folder: path.resolve(os.homedir(), 'Notes'),
 		},
 		about: {
-			firstName: "Pieter-Jan",
-			lastName: "Van Robays",
-		}
-		//...
+			firstName: 'Pieter-Jan',
+			lastName: 'Van Robays',
+		},
+		// ...
 	},
 	webPreferences: {
 		devTools: true,

diff --git a/src/app/components/main/components/group/components/fields/checkbox/index.jsx b/src/app/components/main/components/group/components/fields/checkbox/index.jsx
@@ -1,87 +1,96 @@
-'use strict';
+'use strict'
 
-import React from 'react';
-import {newGuid} from "../../../../../../../utils/newGuid";
+import React from 'react'
+import { newGuid } from '../../../../../../../utils/newGuid'
 
 class CheckboxField extends React.Component {
 
-    state = {};
+	render() {
 
-    render() {
-
-        const fieldID = `checkbox_${newGuid()}`;
-
-        const options = this.options.map((option, idx) => {
-            const id = `${fieldID}_${idx}`;
-            return (
-                <label htmlFor={ id } className="checkbox-option">
-                    { option.label }
-                    <input type="checkbox" id={ id } onChange={ this.onChange.bind(this) } checked={ this.value.indexOf(option.value) >= 0 } />
-                    <span className="check-square" />
-                </label>
-            );
-        });
+		const fieldID = `checkbox_${newGuid()}`
 
-        return (
-            <div className="field field-checkbox">
-                <div className="field-label">{ this.label }</div>
-                { options }
-                { this.help && <span className="help">{ this.help }</span> }
-            </div>
-        );
+		const options = this.options.map((option, idx) => {
 
-    }
+			const id = `${fieldID}_${idx}`
 
-    get field() {
+			return (
+				<label htmlFor={ id } className="checkbox-option">
+					{ option.label }
+					<input type="checkbox" id={ id } onChange={ this.onChange.bind(this) } checked={ this.value.indexOf(option.value) >= 0 } />
+					<span className="check-square" />
+				</label>
+			)
 
-        return this.props.field;
+		})
 
-    }
+		return (
+			<div className="field field-checkbox">
+				<div className="field-label">{ this.label }</div>
+				{ options }
+				{ this.help && <span className="help">{ this.help }</span> }
+			</div>
+		)
 
-    get value() {
+	}
 
-        return this.props.value || [];
+	get field() {
 
-    }
+		return this.props.field
 
-    get label() {
+	}
 
-        return this.field.label;
+	get value() {
 
-    }
-
-    get options() {
+		return this.props.value || []
 
-        return this.field.options || [];
+	}
 
-    }
+	get label() {
 
-    get help() {
+		return this.field.label
 
-        return this.field.help;
+	}
 
-    }
+	get options() {
 
-    onChange(e) {
-
-        const idx = e.target.id.split('_')[2];
-        const option = this.options[idx];
-
-        if (e.target.checked) {
-            if (this.value.indexOf(option.value) === -1) {
-                this.value.push(option.value);
-            }
-        } else {
-            const valIdx = this.value.indexOf(option.value);
-            if (valIdx > -1) {
-                this.value.splice(valIdx, 1);
-            }
-        }
+		return this.field.options || []
 
-        return this.props.onChange(this.value);
+	}
 
-    }
+	get help() {
+
+		return this.field.help
+
+	}
+
+	onChange(e) {
+
+		const idx = e.target.id.split('_')[2]
+		const option = this.options[idx]
+
+		if (e.target.checked) {
+
+			if (this.value.indexOf(option.value) === -1) {
+
+				this.value.push(option.value)
+
+			}
+
+		} else {
+
+			const valIdx = this.value.indexOf(option.value)
+			if (valIdx > -1) {
+
+				this.value.splice(valIdx, 1)
+
+			}
+
+		}
+
+		return this.props.onChange(this.value)
+
+	}
 
 }
 
-export default CheckboxField;
+export default CheckboxField
diff --git a/src/app/components/main/components/group/components/fields/color/index.jsx b/src/app/components/main/components/group/components/fields/color/index.jsx
@@ -6,9 +6,13 @@ import * as ReactDOM from "react-dom";
 
 class ColorField extends React.Component {
 
-    state = {
-        displayColorPicker: false
-    };
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            displayColorPicker: false
+        };
+    }
 
     render() {
 

diff --git a/src/app/components/main/components/group/components/fields/directory/index.jsx b/src/app/components/main/components/group/components/fields/directory/index.jsx
@@ -5,8 +5,6 @@ import {isArray} from "../../../../../../../utils/isArray";
 
 class DirectoryField extends React.Component {
 
-    state = {};
-
     render() {
         const { multiSelections, value, help, label } = this;
 
@@ -41,7 +39,7 @@ class DirectoryField extends React.Component {
     get field() {
         return this.props.field;
     }
-    
+
     get value() { //Always return an array
         const { value } = this.props;
         if (typeof(value) === "undefined")
@@ -80,7 +78,7 @@ class DirectoryField extends React.Component {
     get onChange() {
         return this.props.onChange;
     }
-    
+
     choose = () => {
         const { multiSelections, noResolveAliases, treatPackageAsDirectory, dontAddToRecent } = this;
         const properties = ['openDirectory', 'createDirectory'];
@@ -92,7 +90,7 @@ class DirectoryField extends React.Component {
             properties.push("treatPackageAsDirectory");
         if (dontAddToRecent)
             properties.push("dontAddToRecent");
-        
+
         const result = api.showOpenDialog({
             properties: properties
         });

diff --git a/src/app/components/main/components/group/components/fields/dropdown/index.jsx b/src/app/components/main/components/group/components/fields/dropdown/index.jsx
@@ -1,68 +1,64 @@
-'use strict';
+'use strict'
 
-import React from 'react';
+import React from 'react'
 
 class DropdownField extends React.Component {
 
-    state = {};
+	render() {
 
-    render() {
+		const options = this.options.map((option, idx) => (
+			<option value={option.value} key={idx}>{option.label}</option>
+		))
 
-        const options = this.options.map((option, idx) => {
-            return (
-                <option value={option.value} key={idx}>{option.label}</option>
-            );
-        });
+		return (
+			<div className="field field-dropdown">
+				<div className="field-label">{ this.label }</div>
+				<select onChange={ this.onChange.bind(this) } value={ this.value }>
+					<option value="">-- Select One --</option>
+					{ options }
+				</select>
+				{ this.help && <span className="help">{ this.help }</span> }
+			</div>
+		)
 
-        return (
-            <div className="field field-dropdown">
-                <div className="field-label">{ this.label }</div>
-                <select onChange={ this.onChange.bind(this) } value={ this.value }>
-                    <option value="">-- Select One --</option>
-                    { options }
-                </select>
-                { this.help && <span className="help">{ this.help }</span> }
-            </div>
-        );
+	}
 
-    }
+	get field() {
 
-    get field() {
+		return this.props.field
 
-        return this.props.field;
+	}
 
-    }
+	get value() {
 
-    get value() {
+		return this.props.value || ''
 
-        return this.props.value || '';
+	}
 
-    }
+	get label() {
 
-    get label() {
+		return this.field.label
 
-        return this.field.label;
+	}
 
-    }
+	get options() {
 
-    get options() {
+		return this.field.options || []
 
-        return this.field.options || [];
+	}
 
-    }
+	get help() {
 
-    get help() {
+		return this.field.help
 
-        return this.field.help;
+	}
 
-    }
+	onChange(e) {
 
-    onChange(e) {
+		return this.props.onChange(e.target.value)
 
-        return this.props.onChange(e.target.value);
-
-    }
+	}
 
 }
 
-export default DropdownField;
+export default DropdownField
diff --git a/src/app/components/main/components/group/components/fields/file/index.jsx b/src/app/components/main/components/group/components/fields/file/index.jsx
@@ -4,12 +4,9 @@ import React from 'react';
 import {isArray} from "../../../../../../../utils/isArray";
 
 class FileField extends React.Component {
-
-    state = {};
-
     render() {
         const { multiSelections, value, help, label } = this;
-        
+
         const btLabel = value && value.length > 0
             ? (multiSelections ? 'Choose other Files' : 'Choose another File')
             : (multiSelections ? 'Choose Files' : 'Choose a File');
@@ -60,27 +57,27 @@ class FileField extends React.Component {
     get help() {
         return this.field.help;
     }
-    
+
     get filters() {
         return this.field.filters || undefined;
     }
-    
+
     get multiSelections() {
         return this.field.multiSelections || false;
     }
-    
+
     get showHiddenFiles() {
         return this.field.showHiddenFiles || false;
     }
-    
+
     get noResolveAliases() {
         return this.field.noResolveAliases || false;
     }
-    
+
     get treatPackageAsDirectory() {
         return this.field.treatPackageAsDirectory || false;
     }
-    
+
     get dontAddToRecent() {
         return this.field.dontAddToRecent || false;
     }

diff --git a/src/app/components/main/components/group/components/fields/list/index.jsx b/src/app/components/main/components/group/components/fields/list/index.jsx
@@ -5,11 +5,14 @@ import ReactModal from 'react-modal';
 
 class ListField extends React.Component {
 
-    state = {
-      showInputModal: false,
-      itemToAdd: '',
-      selectedIndex: 0
-    };
+    constructor(props) {
+        super(props);
+        this.state = {
+            showInputModal: false,
+            itemToAdd: '',
+            selectedIndex: 0
+        };
+    }
 
     render() {
         return (