Increased Code Quality

Tim-Luca Lagmöller · Tim-Luca Lagmöller · commit c6af5b23f3dc · 2019-02-26T23:27:34.000+01:00
Refactoring and Reformatting to enhance code quality
diff --git a/config-overrides.js b/config-overrides.js
@@ -1,4 +1,4 @@
 module.exports = function override(config, env) {
-    config.output.globalObject = "this"
-    return config;
-}
+	config.output.globalObject = "this";
+	return config;
+};
diff --git a/src/App.js b/src/App.js
@@ -1,20 +1,20 @@
-import React, { Component } from 'react';
-import { Layout } from 'antd';
-import 'antd/dist/antd.css';
-import Header from './components/header/Header';
-import Body from './components/body/Body';
-import AppCSS from './App.module.css';
-import { Provider } from 'react-redux';
-import { createStore } from 'redux';
-import reducer from './store/reducer';
-import devToolsEnhancer from 'remote-redux-devtools';
-import Footer from './components/footer/Footer';
-import MetaTags from 'react-meta-tags';
+import React, { Component } from "react";
+import { Layout } from "antd";
+import "antd/dist/antd.css";
+import Header from "./components/header/Header";
+import Body from "./components/body/Body";
+import AppCSS from "./App.module.css";
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import reducer from "./store/reducer";
+import devToolsEnhancer from "remote-redux-devtools";
+import Footer from "./components/footer/Footer";
+import MetaTags from "react-meta-tags";
 
 class App extends Component {
 	constructor() {
 		super();
-		this.developmentMode = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
+		this.developmentMode = !process.env.NODE_ENV || process.env.NODE_ENV === "development";
 		if (this.developmentMode) {
 			this.store = createStore(reducer, devToolsEnhancer());
 		} else {
diff --git a/src/components/body/Body.jsx b/src/components/body/Body.jsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import bodyCSS from './body.module.css';
-import Container from './container/Container';
+import React from "react";
+import bodyCSS from "./body.module.css";
+import Container from "./container/Container";
 
 const Body = (props) => {
 	return (
diff --git a/src/components/body/container/Container.jsx b/src/components/body/container/Container.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import ContainerCSS from './Container.module.css';
-import FileSelect from './fileselect/FileSelect';
-import PasswordModal from '../../modal/PasswordModal/PasswordModal';
-import StepModal from '../../modal/StepModal/StepModal';
+import React from "react";
+import ContainerCSS from "./Container.module.css";
+import FileSelect from "./fileselect/FileSelect";
+import PasswordModal from "../../modal/PasswordModal/PasswordModal";
+import StepModal from "../../modal/StepModal/StepModal";
 
 const Container = (props) => {
 	return (
diff --git a/src/components/body/container/fileselect/FileSelect.jsx b/src/components/body/container/fileselect/FileSelect.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import Dropzone from 'react-dropzone';
-import { Icon } from 'antd';
-import classNames from 'classnames';
-import FileSelectCSS from './FileSelect.module.css';
-import { mapState, mapDispatch } from './FileSelect.map';
-import * as FileSelectLogic from './FileSelect.logic';
-import { connect } from 'react-redux';
+import React from "react";
+import Dropzone from "react-dropzone";
+import { Icon } from "antd";
+import classNames from "classnames";
+import FileSelectCSS from "./FileSelect.module.css";
+import { mapState, mapDispatch } from "./FileSelect.map";
+import * as FileSelectLogic from "./FileSelect.logic";
+import { connect } from "react-redux";
 
 const FileSelect = (props) => {
 	return (
@@ -15,8 +15,8 @@ const FileSelect = (props) => {
 					<div
 						{...getRootProps()}
 						className={
-							classNames('dropzone', { 'dropzone--isActive': isDragActive }) +
-							' ' +
+							classNames("dropzone", { "dropzone--isActive": isDragActive }) +
+							" " +
 							FileSelectCSS.fileselect
 						}
 					>
@@ -25,7 +25,7 @@ const FileSelect = (props) => {
 							<Icon type="inbox" />
 						</h1>
 						<p className="ant-upload-text">Click or drag file to this area to upload</p>
-						<p className={FileSelectCSS.smallerfont + ' ant-upload-hint'}>
+						<p className={FileSelectCSS.smallerfont + " ant-upload-hint"}>
 							Support for a single or bulk upload.
 						</p>
 					</div>
diff --git a/src/components/body/container/fileselect/FileSelect.logic.js b/src/components/body/container/fileselect/FileSelect.logic.js
@@ -1,14 +1,14 @@
-import mainWorker from '../../../../worker/worker'
+import mainWorker from "../../../../worker/worker";
 
 export const onDrop = (props, fileList) => {
     const worker = mainWorker();
     worker.handleFiles(fileList).then((mode) => {
         if (mode === "decrypt") {
             worker.getHint(fileList[0]).then((hint) => {
-                props.onFilesAdded(fileList, mode, hint)
+                props.onFilesAdded(fileList, mode, hint);
             });
         } else {
-            props.onFilesAdded(fileList, mode)
+            props.onFilesAdded(fileList, mode);
         }
     });
 };
diff --git a/src/components/body/container/fileselect/FileSelect.map.js b/src/components/body/container/fileselect/FileSelect.map.js
@@ -6,7 +6,7 @@ export const mapDispatch = (dispatch) => {
     return {
         onFilesAdded(fileList, mode, hint) {
             dispatch({
-                type: 'ADD_FILES',
+                type: "ADD_FILES",
                 payload: {
                     fileList,
                     mode,
@@ -15,4 +15,4 @@ export const mapDispatch = (dispatch) => {
             });
         }
     };
-}
+};
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import { Layout, Icon } from 'antd';
-import FooterCSS from './Footer.module.css';
+import React from "react";
+import { Layout, Icon } from "antd";
+import FooterCSS from "./Footer.module.css";
 
 const Footer = () => {
 	return (
 		<Layout.Footer className={FooterCSS.footer}>
 			<div className={FooterCSS.footerContainer}>
 				<p>
-					Made with <Icon type="heart" theme="filled" /> by{' '}
+					Made with <Icon type="heart" theme="filled" /> by{" "}
 					<a href="https://en.lagmoellertim.de">Tim-Luca Lagmöller</a>
 				</p>
 				<a href="http://donate.lagmoellertim.de">Donate</a>
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { Layout, Icon } from 'antd';
-import headerCSS from './header.module.css';
+import React from "react";
+import { Layout, Icon } from "antd";
+import headerCSS from "./header.module.css";
 
 const Header = (props) => {
 	return (
diff --git a/src/components/modal/PasswordModal/PasswordMeter/PasswordMeter.jsx b/src/components/modal/PasswordModal/PasswordMeter/PasswordMeter.jsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import PasswordMeterCSS from './PasswordMeter.module.css';
-import * as PasswordMeterLogic from './PasswordMeter.logic';
+import React from "react";
+import PasswordMeterCSS from "./PasswordMeter.module.css";
+import * as PasswordMeterLogic from "./PasswordMeter.logic";
 
 export default ({ password }) => {
 	const strength = PasswordMeterLogic.scorePassword(password);
@@ -11,9 +11,18 @@ export default ({ password }) => {
 		2: PasswordMeterCSS.strong
 	};
 
+	const getMatchingClass = () => {
+		if (strength in strengthMap) {
+			return strengthMap[strength];
+		}
+		return PasswordMeterCSS.invisible;
+	};
+
+	const strengthClass = getMatchingClass();
+
 	return (
 		<div className={PasswordMeterCSS.meter}>
-			<div className={PasswordMeterCSS.bar + ' ' + strengthMap[strength]} />
+			<div className={PasswordMeterCSS.bar + " " + strengthClass} />
 		</div>
 	);
 };
diff --git a/src/components/modal/PasswordModal/PasswordMeter/PasswordMeter.logic.js b/src/components/modal/PasswordModal/PasswordMeter/PasswordMeter.logic.js
@@ -1,7 +1,9 @@
 export function scorePassword(password) {
     var score = 0;
-    if (!password)
+    if (!password) {
         return null;
+    }
+
     // award every unique letter until 5 repetitions
     var letters = {};
     for (var i = 0; i < password.length; i++) {
@@ -15,19 +17,24 @@ export function scorePassword(password) {
         lower: /[a-z]/.test(password),
         upper: /[A-Z]/.test(password),
         nonWords: /\W/.test(password),
-    }
+    };
 
     let variationCount = 0;
+
     for (var check in variations) {
         variationCount += (variations[check] === true) ? 1 : 0;
-    }
+    };
+
     score += (variationCount - 1) * 10;
-    if (score > 80)
+
+    if (score > 80) {
         return 2;
-    if (score > 60)
+    }
+    if (score > 60) {
         return 1;
-    if (score >= 0)
+    }
+    if (score >= 0) {
         return 0;
-
+    }
     return null;
 }
diff --git a/src/components/modal/PasswordModal/PasswordModal.jsx b/src/components/modal/PasswordModal/PasswordModal.jsx
@@ -1,43 +1,43 @@
-import React, { Component } from 'react';
-import { Modal, Form, Input, Icon } from 'antd';
-import { connect } from 'react-redux';
-import { mapState, mapDispatch } from './PasswordModal.map';
-import * as PasswordModalLogic from './PasswordModal.logic';
-import PasswordMeter from './PasswordMeter/PasswordMeter';
+import React, { Component } from "react";
+import { Modal, Form, Input, Icon } from "antd";
+import { connect } from "react-redux";
+import { mapState, mapDispatch } from "./PasswordModal.map";
+import * as PasswordModalLogic from "./PasswordModal.logic";
+import PasswordMeter from "./PasswordMeter/PasswordMeter";
 
-const PasswordModalForm = Form.create({ name: 'form_in_modal' })(
+const PasswordModalForm = Form.create({ name: "form_in_modal" })(
 	// eslint-disable-next-line
 	class extends Component {
 		render() {
 			const { visible, onCancel, onCreate, form, hint, mode } = this.props;
 			const { getFieldDecorator } = form;
-			let passwordField = this.props.form.getFieldValue('password');
+			let passwordField = this.props.form.getFieldValue("password");
 
 			return (
 				<Modal
 					visible={visible}
-					title={mode !== 'decrypt' ? 'Encryption' : 'Decryption'}
-					okText={mode !== 'decrypt' ? 'Encrypt' : 'Decrypt'}
+					title={mode !== "decrypt" ? "Encryption" : "Decryption"}
+					okText={mode !== "decrypt" ? "Encrypt" : "Decrypt"}
 					onCancel={onCancel}
 					onOk={onCreate}
 				>
 					<Form layout="vertical">
 						<Form.Item label="Password">
-							{getFieldDecorator('password', {
-								rules: [ { required: true, message: 'Please input your Password!' } ]
+							{getFieldDecorator("password", {
+								rules: [ { required: true, message: "Please input your Password!" } ]
 							})(<Input.Password placeholder="Input Password" />)}
 
-							{mode !== 'decrypt' ? <PasswordMeter password={passwordField} /> : ''}
+							{mode !== "decrypt" ? <PasswordMeter password={passwordField} /> : ""}
 						</Form.Item>
-						{hint !== null || mode !== 'decrypt' ? (
+						{hint !== null || mode !== "decrypt" ? (
 							<Form.Item label="Hint">
-								{mode !== 'decrypt' ? (
-									getFieldDecorator('hint', {
+								{mode !== "decrypt" ? (
+									getFieldDecorator("hint", {
 										rules: [ { required: false } ]
 									})(
 										<Input
 											placeholder="Input Hint"
-											prefix={<Icon type="info-circle" style={{ color: 'rgb(0,0,0)' }} />}
+											prefix={<Icon type="info-circle" style={{ color: "rgb(0,0,0)" }} />}
 										/>
 									)
 								) : (
diff --git a/src/components/modal/PasswordModal/PasswordModal.logic.js b/src/components/modal/PasswordModal/PasswordModal.logic.js
@@ -1,3 +1,3 @@
 export const onFormData = (props, data) => {
-    props.updateFileInfo(data.password, data.hint)
+    props.updateFileInfo(data.password, data.hint);
 };
diff --git a/src/components/modal/PasswordModal/PasswordModal.map.js b/src/components/modal/PasswordModal/PasswordModal.map.js
@@ -10,18 +10,18 @@ export const mapDispatch = (dispatch) => {
     return {
         onReset() {
             dispatch({
-                type: 'RESET',
+                type: "RESET",
                 payload: {}
             });
         },
         updateFileInfo(password, hint) {
             dispatch({
-                type: 'ADD_FORM_DATA',
+                type: "ADD_FORM_DATA",
                 payload: {
                     password,
                     hint
                 }
             });
         }
     };
-}
+};
diff --git a/src/components/modal/StepModal/StepModal.jsx b/src/components/modal/StepModal/StepModal.jsx
@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
-import { Modal, Steps, Icon } from 'antd';
-import { connect } from 'react-redux';
-import { mapState, mapDispatch } from './StepModal.map';
-import * as StepModalLogic from './StepModal.logic';
+import React, { useEffect } from "react";
+import { Modal, Steps, Icon } from "antd";
+import { connect } from "react-redux";
+import { mapState, mapDispatch } from "./StepModal.map";
+import * as StepModalLogic from "./StepModal.logic";
 const Step = Steps.Step;
 
 const StepModal = (props) => {
diff --git a/src/components/modal/StepModal/StepModal.logic.js b/src/components/modal/StepModal/StepModal.logic.js
diff --git a/src/components/modal/StepModal/StepModal.map.js b/src/components/modal/StepModal/StepModal.map.js
diff --git a/src/index.js b/src/index.js
diff --git a/src/store/reducer.js b/src/store/reducer.js
diff --git a/src/worker/handleFiles.js b/src/worker/handleFiles.js
diff --git a/src/worker/utils.js b/src/worker/utils.js
diff --git a/src/worker/worker.js b/src/worker/worker.js
