refactor : create a custom debounce method and other refactor

Real-Dev-Squad · Jul 24, 2023 · 77dba12 · 77dba12
1 parent 552c47f
commit 77dba12
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 21 deletions.
diff --git a/app/components/progress-bar.hbs b/app/components/progress-bar.hbs
@@ -1,4 +1,4 @@
-<div ...attributes class='progress-bar-container'>
+<div ...attributes class='progress-bar'>
   <input
     {{focus-when this.isEditable}}
     aria-label='progress slider for IN-Progress tasks'
@@ -18,26 +18,26 @@
     data-test-progress-bar-button
     {{on 'click' this.turnEditModeOn}}
     class='progress-bar__button
-      {{unless this.isEditable "progress-bar__edit-hover"}}'
+      {{unless this.isEditable "progress-bar__button--hover"}}'
     type='button'
   >
     {{#if this.isEditable}}
-      {{@value}}
+      <span class='progress-bar__button__text'>{{@value}}</span>
     {{else}}
       <svg
-        class='progress-bar__edit-icon'
+        class='progress-bar__button__edit-icon'
         viewBox='0 0 24 24'
         fill='none'
         xmlns='http://www.w3.org/2000/svg'
       >
         <path
-          class='progress-bar__edit-icon-path-inner'
+          class='progress-bar__button__edit-icon__inner'
           opacity='0.5'
           d='M4 20H8L18 10L14 6L4 16V20Z'
           fill='#000000'
         />
         <path
-          class='progress-bar__edit-icon-path-outer'
+          class='progress-bar__button__edit-icon__outer'
           d='M18 10L21 7L17 3L14 6M18 10L8 20H4V16L14 6M18 10L14 6'
           stroke='#000000'
           stroke-width='1.5'

diff --git a/app/components/progress-bar.js b/app/components/progress-bar.js
@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { debounce } from 'lodash';
+import { debounce } from '../utils/debounce';
 export default class ProgressBarComponent extends Component {
   @tracked isEditable = false;
   @tracked value = this.args.value;
@@ -15,7 +15,8 @@ export default class ProgressBarComponent extends Component {
 
   setEditableToFalse() {
     setTimeout(() => {
-      if (this.isEditable && Date.now() - this.lastEditTime >= 5000) {
+      const timeDelta = Date.now() - this.lastEditedTime;
+      if (this.isEditable && timeDelta >= 5000) {
         this.isEditable = false;
       } else if (this.isEditable) {
         this.setEditableToFalse();

diff --git a/app/styles/progress-bar.css b/app/styles/progress-bar.css
@@ -1,29 +1,36 @@
 :root {
   --progress-bar-color: rgba(0, 128, 0, 0.9);
-  --light-grey:rgba(128, 128, 128, 0.5);
+  --light-grey: rgba(128, 128, 128, 0.5);
   --black: black;
   --white: white;
 }
-.progress-bar-container {
+.progress-bar {
   display: flex;
+  flex-direction: row;
   gap: 4px;
 }
 
 .progress-bar__button {
-  width: 1.4rem;
+  width: 1.5rem;
   height: 1.1rem;
-  font-size: 60%;
-  font-weight: bolder;
-  text-justify: auto;
   border: 2px solid var(--black);
   border-radius: 4px;
   background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+}
+
+.progress-bar__button__text {
+  font-size: 0.6em;
+  font-weight: bolder;
+  margin: auto;
 }
 
-.progress-bar__edit-icon {
-  width: 95%;
-  height: 95%;
-  margin-bottom: 2px;
+.progress-bar__button__edit-icon {
+  width: 1rem;
+  height: 1rem;
+  margin: 3px;
 }
 .progress-bar__input-slider {
   -webkit-appearance: none;
@@ -36,6 +43,7 @@
   border: 2px solid var(--black);
   border-radius: 4px;
 }
+
 .progress-bar__input-slider:focus {
   box-shadow: 0 0 0 1px var(--progress-bar-color);
 }
@@ -65,10 +73,10 @@
   );
 }
 
-.progress-bar__edit-hover:hover {
+.progress-bar__button--hover:hover {
   background-color: var(--light-grey);
 }
 
-.progress-bar__edit-icon-path-inner {
+.progress-bar__button__edit-icon__inner {
   fill: var(--progress-bar-color);
 }
diff --git a/app/utils/debounce.js b/app/utils/debounce.js
@@ -0,0 +1,10 @@
+export const debounce = (func, delay) => {
+  let timerId;
+
+  return (...args) => {
+    clearTimeout(timerId);
+    timerId = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+};
diff --git a/package.json b/package.json
@@ -33,7 +33,6 @@
     "ember-cli-qrcode": "^2.1.0",
     "ember-click-outside": "^5.0.1",
     "ember-resources": "^5.6.0",
-    "lodash": "^4.17.21",
     "mixpanel-browser": "^2.43.0",
     "webpack": "^5.74.0",
     "webpack-5": "^0.0.0"