implementation of react code design, fixed error - webpack-contrib/mi…

…ni-css-extract-plugin#875
AbilityMaster · Nov 5, 2022 · 993b732 · 993b732
1 parent d480407
commit 993b732
Show file tree

Hide file tree

Showing 8 changed files with 365 additions and 297 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "author": "",
     "license": "ISC",
     "devDependencies": {
+        "ajv": "^8.11.0",
         "css-loader": "^6.7.1",
         "eslint": "^8.26.0",
         "eslint-config-prettier": "^8.5.0",

diff --git a/src/components/Box/index.js b/src/components/Box/index.js
@@ -9,8 +9,11 @@ export const Box = (params) => {
         });
     }
 
+    if (className) {
+        box.classList.add(className);
+    }
+
     box.style.width = `${width}px`;
-    box.classList.add(className);
 
     return box;
 };
diff --git a/src/components/Button/style.sass b/src/components/Button/style.sass
@@ -9,6 +9,10 @@
     background-color: $buttonNumberBgColor
     &:hover
       background-color: $buttonHoverColor
+  &_display-helper
+    background-color: $buttonOperationBgColor
+    &:hover
+      background-color: $buttonHoverColor
   &_operation
     background-color: $buttonOperationBgColor
     &:hover

diff --git a/src/components/Calculator/index.js b/src/components/Calculator/index.js
@@ -14,15 +14,19 @@ export class Calculator extends Display {
         super(params);
         const { width, buttons, countOfColumns, buttonSize = {} } = params;
 
+        this.state = {
+            secondOperand: '',
+            firstOperand: '',
+            result: 0,
+            operation: null,
+            lastActionType: null,
+        };
+
         this.buttonSize = buttonSize;
         this.buttons = buttons;
         this.countOfColumns = countOfColumns;
         this.width = width;
-        this.firstOperand = '';
-        this.secondOperand = '';
-        this.result = 0;
-        this.operation = null;
-        this.lastActionType = null;
+
         this.$calculator = Box({
             className: 'calculator',
             width,
@@ -31,91 +35,118 @@ export class Calculator extends Display {
         this.onClickButton = this.onClickButton.bind(this);
     }
 
-    logLastAction(value) {
-        this.lastActionType = value;
-    }
-
-    updateResult(value) {
-        this.result = value;
-    }
+    setState(data, callBack) {
+        this.state = {
+            ...this.state,
+            ...data,
+        };
 
-    updateOperation(value) {
-        this.operation = value;
-    }
-
-    updateFirstOperand(value) {
-        this.firstOperand = value;
-    }
-
-    updateSecondOperand(value) {
-        this.secondOperand = value;
+        if (callBack) {
+            callBack();
+        }
     }
 
     clear() {
-        this.firstOperand = '';
-        this.secondOperand = '';
-        this.result = 0;
-        this.operation = null;
-        this.lastActionType = null;
+        this.setState({
+            secondOperand: '',
+            firstOperand: '',
+            result: 0,
+            operation: null,
+            lastActionType: null,
+        }, () => {
+            this.updateDisplay(0);
+        });
     }
 
-    getResult(firstOperand, secondOperand) {
-        firstOperand = this.result ? this.result : firstOperand;
+    calculate(firstOperand, secondOperand) {
+        const {
+            result,
+            operation,
+        } = this.state;
+        firstOperand = result ? result : firstOperand;
 
-        this.result = firstOperand ? parseFloat(firstOperand) : 0;
+        this.setState({
+            result: firstOperand ? parseFloat(firstOperand) : 0,
+        });
         secondOperand = secondOperand ? parseFloat(secondOperand) : 0;
 
-        switch (this.operation) {
+        switch (operation) {
             case OPERATIONS.PLUS:
-                this.result += secondOperand;
-                this.updateDisplayValue(this.result);
+                this.setState({
+                    result: this.state.result + secondOperand,
+                }, () => {
+                    this.updateDisplay(this.state.result);
+                });
 
                 return this.displayValue;
             case OPERATIONS.MINUS:
-                this.result -= secondOperand;
-                this.updateDisplayValue(this.result);
+                this.setState({
+                    result: this.state.result - secondOperand,
+                }, () => {
+                    this.updateDisplay(this.state.result);
+                });
 
                 return this.displayValue;
             case OPERATIONS.MULTIPLE:
-                this.result *= secondOperand;
-                this.updateDisplayValue(this.result);
+                this.setState({
+                    result: this.state.result * secondOperand,
+                }, () => {
+                    this.updateDisplay(this.state.result);
+                });
 
                 return this.displayValue;
             case OPERATIONS.DIVIDE:
-                this.result /= secondOperand;
-                this.updateDisplayValue(this.result);
+                this.setState({
+                    result: this.state.result / secondOperand,
+                }, () => {
+                    this.updateDisplay(this.state.result);
+                });
 
                 return this.displayValue;
             case OPERATIONS.PERCENT:
-                this.result = secondOperand / 100;
-                this.updateDisplayValue(this.result);
+                this.setState({
+                    result: secondOperand / 100,
+                }, () => {
+                    this.updateDisplay(this.state.result);
+                });
 
                 return this.displayValue;
             case OPERATIONS.SQRT:
-                this.result = Math.sqrt(secondOperand);
-                this.updateDisplayValue(this.result);
+                this.setState({
+                    result: Math.sqrt(secondOperand),
+                }, () => {
+                    this.updateDisplay(this.state.result);
+                });
 
                 return this.displayValue;
             case OPERATIONS.SQUARE:
-                this.result = Math.pow(secondOperand, 2);
-                this.updateDisplayValue(this.result);
+                this.setState({
+                    result: Math.pow(secondOperand, 2),
+                }, () => {
+                    this.updateDisplay(this.state.result);
+                });
 
                 return this.displayValue;
             case OPERATIONS.DIVIDE_BY_ONE:
-                this.result = 1 / secondOperand;
-                this.updateDisplayValue(this.result);
+                this.setState({
+                    result: 1 / secondOperand,
+                }, () => {
+                    this.updateDisplay(this.state.result);
+                });
 
                 return this.displayValue;
             case OPERATIONS.CE:
-                this.updateSecondOperand(0);
-                this.updateDisplayValue(this.result);
+                this.setState({
+                    secondOperand: 0,
+                }, () => {
+                    this.updateDisplay(0);
+                });
 
                 return;
             case OPERATIONS.CLEAR:
                 this.clear();
-                this.updateDisplayValue('');
 
-                return '';
+                return;
             case OPERATIONS.BACKSPACE:
                 return this.makeBackSpace();
             default:
@@ -126,59 +157,74 @@ export class Calculator extends Display {
     onClickButton(event) {
         switch (event.target.dataset.type) {
             case BUTTON_TYPE.NUMBER: {
-                if (this.lastActionType === BUTTON_TYPE.OPERATION && this.result) {
-                    this.updateFirstOperand(this.result);
-                    this.updateResult('');
-
-                    const value = `${event.target.dataset.value}`;
-
-                    this.updateSecondOperand(value);
-                    this.updateDisplay(this.secondOperand);
+                const {
+                    secondOperand,
+                    result,
+                    firstOperand,
+                    lastActionType,
+                    operation,
+                } = this.state;
+
+                if (lastActionType === BUTTON_TYPE.OPERATION && result) {
+                    this.setState({
+                        firstOperand: result,
+                        result: '',
+                        secondOperand: `${event.target.dataset.value}`,
+                    }, () => {
+                        this.updateDisplay(this.state.secondOperand);
+                    });
 
                     return;
                 }
 
-                if (this.operation) {
-                    const value = `${this.secondOperand}${event.target.dataset.value}`;
-
-                    this.updateSecondOperand(value);
-                    this.updateDisplay(this.secondOperand);
+                if (operation) {
+                    this.setState({
+                        secondOperand: `${secondOperand}${event.target.dataset.value}`,
+                    }, () => {
+                        this.updateDisplay(this.state.secondOperand);
+                    });
 
                     return;
                 }
 
-                const value = `${this.firstOperand}${event.target.dataset.value}`;
-
-                this.updateFirstOperand(value);
-                this.updateDisplay(this.firstOperand);
-
-                this.logLastAction(BUTTON_TYPE.NUMBER);
+                this.setState({
+                    firstOperand: `${firstOperand}${event.target.dataset.value}`,
+                    lastActionType: BUTTON_TYPE.NUMBER,
+                }, () => {
+                    this.updateDisplay(this.state.firstOperand);
+                });
 
                 return;
             }
             case BUTTON_TYPE.DISPLAY_HELPER: {
-                this.updateOperation(event.target.dataset.value);
-
-                const result = this.getResult();
+                this.setState({
+                    operation: event.target.dataset.value,
+                });
 
-                this.updateDisplay(result);
+                this.calculate();
 
                 return;
             }
             case BUTTON_TYPE.OPERATION: {
-                if (event.target.dataset.value === OPERATIONS.RESULT) {
-                    const firstOperand =
-                        this.operation === OPERATIONS.RESULT ? this.result : this.firstOperand;
+                const {
+                    result,
+                    firstOperand,
+                    operation,
+                    secondOperand,
+                } = this.state;
 
-                    const result = this.getResult(firstOperand, this.secondOperand);
+                if (event.target.dataset.value === OPERATIONS.RESULT) {
+                    const _firstOperand = operation === OPERATIONS.RESULT ? result : firstOperand;
 
-                    this.updateDisplay(result);
+                    this.calculate(_firstOperand, secondOperand);
 
                     return;
                 }
 
-                this.logLastAction(BUTTON_TYPE.OPERATION);
-                this.updateOperation(event.target.dataset.value);
+                this.setState({
+                    lastActionType: BUTTON_TYPE.OPERATION,
+                    operation: event.target.dataset.value,
+                });
 
                 return;
             }

diff --git a/src/constants/buttonType.js b/src/constants/buttonType.js
@@ -1,5 +1,5 @@
 export const BUTTON_TYPE = {
     NUMBER: 'number',
     OPERATION: 'operation',
-    DISPLAY_HELPER: 'displayHelper',
+    DISPLAY_HELPER: 'display-helper',
 };
diff --git a/src/constants/buttons.js b/src/constants/buttons.js
@@ -21,11 +21,11 @@ export const BUTTONS = [
         value: OPERATIONS.DIVIDE_BY_ONE,
     },
     {
-        type: BUTTON_TYPE.OPERATION,
+        type: BUTTON_TYPE.DISPLAY_HELPER,
         value: OPERATIONS.CE,
     },
     {
-        type: BUTTON_TYPE.OPERATION,
+        type: BUTTON_TYPE.DISPLAY_HELPER,
         value: OPERATIONS.CLEAR,
     },
     {

diff --git a/webpack.config.js b/webpack.config.js
@@ -9,7 +9,7 @@ module.exports = {
         assetModuleFilename: 'assets/images/[name]-[hash][ext]',
     },
     devServer: {
-        port: 5000,
+        port: 3000,
         static: './public',
         hot: true,
     },