fix(RSS-ECOMM-5_25): modal close (#372)

fix: modal close
stardustmeg · Jun 17, 2024 · e8c239b · e8c239b
1 parent a9bab4d
commit e8c239b
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 57 deletions.
diff --git a/src/entities/AboutFullCard/view/AboutFullCardView.ts b/src/entities/AboutFullCard/view/AboutFullCardView.ts
@@ -2,12 +2,13 @@ import type { AboutData, AboutFeedback } from '@/shared/types/validation/aboutDa
 
 import AboutShortCardView from '@/entities/AboutShortCard/view/AboutShortCardView.ts';
 import LinkModel from '@/shared/Link/model/LinkModel.ts';
-import getStore from '@/shared/Store/Store.ts';
 import observeStore, { selectCurrentLanguage, selectCurrentTheme } from '@/shared/Store/observer.ts';
 import ABOUT_TEXT from '@/shared/constants/about.ts';
 import { LINK_DETAIL } from '@/shared/constants/links.ts';
 import changeColor from '@/shared/utils/changeColor.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
+import getCurrentAppTheme from '@/shared/utils/getCurrentAppTheme.ts';
+import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';
 import hexToRgba from '@/shared/utils/hexToRgba.ts';
 
 import styles from './aboutFullCardView.module.scss';
@@ -42,27 +43,27 @@ class AboutFullCardView extends AboutShortCardView {
 
     const title = createBaseElement({
       cssClasses: [styles.title],
-      innerContent: ABOUT_TEXT[getStore().getState().currentLanguage].CHECKLIST,
+      innerContent: ABOUT_TEXT[getCurrentLanguage()].CHECKLIST,
       tag: 'h3',
     });
 
-    changeColor(title, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+    changeColor(title, this.params.coverColor[getCurrentAppTheme()].color);
     list.append(title);
-    this.params.checklist[getStore().getState().currentLanguage].forEach((item) => {
+    this.params.checklist[getCurrentLanguage()].forEach((item) => {
       list.append(this.createCheckItem(item));
     });
 
     observeStore(selectCurrentLanguage, () => {
       list.innerHTML = '';
-      title.innerText = ABOUT_TEXT[getStore().getState().currentLanguage].CHECKLIST;
+      title.innerText = ABOUT_TEXT[getCurrentLanguage()].CHECKLIST;
       list.append(title);
-      this.params.checklist[getStore().getState().currentLanguage].forEach((item) => {
+      this.params.checklist[getCurrentLanguage()].forEach((item) => {
         list.append(this.createCheckItem(item));
       });
     });
 
     observeStore(selectCurrentTheme, () => {
-      changeColor(title, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+      changeColor(title, this.params.coverColor[getCurrentAppTheme()].color);
     });
     return list;
   }
@@ -71,14 +72,11 @@ class AboutFullCardView extends AboutShortCardView {
     const listItem = createBaseElement({ cssClasses: [styles.feedbackListItem], tag: 'li' });
     const label = createBaseElement({
       cssClasses: [styles.label, styles.feedbackLabel],
-      innerContent: `— ${item.text[getStore().getState().currentLanguage].text}`,
+      innerContent: `— ${item.text[getCurrentLanguage()].text}`,
       tag: 'label',
     });
 
-    label.style.backgroundColor = hexToRgba(
-      this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color,
-      0.2,
-    );
+    label.style.backgroundColor = hexToRgba(this.params.coverColor[getCurrentAppTheme()].color, 0.2);
 
     const href = `https://github.com/${item.from}`;
     const background = `url(${`/img/png/${item.from}Avatar.png`})`;
@@ -93,21 +91,15 @@ class AboutFullCardView extends AboutShortCardView {
     avatar.getHTML().style.backgroundImage = background;
     from.getHTML().append(avatar.getHTML());
 
-    changeColor(from.getHTML(), this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+    changeColor(from.getHTML(), this.params.coverColor[getCurrentAppTheme()].color);
 
     observeStore(selectCurrentLanguage, () => {
-      label.innerText = `— ${item.text[getStore().getState().currentLanguage].text}`;
+      label.innerText = `— ${item.text[getCurrentLanguage()].text}`;
     });
 
     observeStore(selectCurrentTheme, () => {
-      changeColor(
-        from.getHTML(),
-        this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color,
-      );
-      label.style.backgroundColor = hexToRgba(
-        this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color,
-        0.2,
-      );
+      changeColor(from.getHTML(), this.params.coverColor[getCurrentAppTheme()].color);
+      label.style.backgroundColor = hexToRgba(this.params.coverColor[getCurrentAppTheme()].color, 0.2);
     });
 
     listItem.append(from.getHTML(), label);
@@ -122,22 +114,22 @@ class AboutFullCardView extends AboutShortCardView {
 
     const title = createBaseElement({
       cssClasses: [styles.title],
-      innerContent: ABOUT_TEXT[getStore().getState().currentLanguage].FEEDBACK,
+      innerContent: ABOUT_TEXT[getCurrentLanguage()].FEEDBACK,
       tag: 'h3',
     });
 
-    changeColor(title, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+    changeColor(title, this.params.coverColor[getCurrentAppTheme()].color);
     list.append(title);
     this.params.feedback.forEach((item) => {
       list.append(this.createFeedbackItem(item));
     });
 
     observeStore(selectCurrentLanguage, () => {
-      title.innerText = ABOUT_TEXT[getStore().getState().currentLanguage].FEEDBACK;
+      title.innerText = ABOUT_TEXT[getCurrentLanguage()].FEEDBACK;
     });
 
     observeStore(selectCurrentTheme, () => {
-      changeColor(title, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+      changeColor(title, this.params.coverColor[getCurrentAppTheme()].color);
     });
     return list;
   }

diff --git a/src/entities/AboutShortCard/view/AboutShortCardView.ts b/src/entities/AboutShortCard/view/AboutShortCardView.ts
@@ -1,13 +1,14 @@
 import type { AboutData, AboutLabel } from '@/shared/types/validation/aboutData';
 
 import LinkModel from '@/shared/Link/model/LinkModel.ts';
-import getStore from '@/shared/Store/Store.ts';
 import observeStore, { selectCurrentLanguage, selectCurrentTheme } from '@/shared/Store/observer.ts';
 import { LINK_DETAIL } from '@/shared/constants/links.ts';
 import SVG_DETAIL from '@/shared/constants/svg.ts';
 import changeColor from '@/shared/utils/changeColor.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import createSVGUse, { changeFill, changeStroke } from '@/shared/utils/createSVGUse.ts';
+import getCurrentAppTheme from '@/shared/utils/getCurrentAppTheme.ts';
+import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';
 
 import styles from './aboutShortCardView.module.scss';
 
@@ -40,36 +41,34 @@ class AboutShortCardView {
       tag: 'div',
     });
 
-    cover.style.backgroundColor =
-      this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color;
+    cover.style.backgroundColor = this.params.coverColor[getCurrentAppTheme()].color;
 
     observeStore(selectCurrentTheme, () => {
-      cover.style.backgroundColor =
-        this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color;
+      cover.style.backgroundColor = this.params.coverColor[getCurrentAppTheme()].color;
     });
     return cover;
   }
 
   private createFullName(): HTMLSpanElement {
     const fullName = createBaseElement({
       cssClasses: [styles.fullName],
-      innerContent: this.params.userName[getStore().getState().currentLanguage].text,
+      innerContent: this.params.userName[getCurrentLanguage()].text,
       tag: 'span',
     });
 
     const svg = document.createElementNS(SVG_DETAIL.SVG_URL, 'svg');
     svg.append(createSVGUse(SVG_DETAIL.PROFILE));
-    changeStroke(svg, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+    changeStroke(svg, this.params.coverColor[getCurrentAppTheme()].color);
 
     observeStore(selectCurrentTheme, () => {
-      changeStroke(svg, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+      changeStroke(svg, this.params.coverColor[getCurrentAppTheme()].color);
     });
     fullName.append(svg);
 
     observeStore(selectCurrentLanguage, () => {
       const textNode = [...fullName.childNodes].find((child) => child.nodeType === Node.TEXT_NODE);
       if (textNode) {
-        textNode.textContent = this.params.userName[getStore().getState().currentLanguage].text;
+        textNode.textContent = this.params.userName[getCurrentLanguage()].text;
       }
     });
     return fullName;
@@ -85,16 +84,10 @@ class AboutShortCardView {
       text: this.params.github.name,
     });
 
-    changeColor(
-      githubName.getHTML(),
-      this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color,
-    );
+    changeColor(githubName.getHTML(), this.params.coverColor[getCurrentAppTheme()].color);
 
     observeStore(selectCurrentTheme, () => {
-      changeColor(
-        githubName.getHTML(),
-        this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color,
-      );
+      changeColor(githubName.getHTML(), this.params.coverColor[getCurrentAppTheme()].color);
     });
 
     return githubName;
@@ -142,14 +135,13 @@ class AboutShortCardView {
       tag: 'span',
     });
 
-    labelName.style.color = item.color[getStore().getState().isAppThemeLight ? 'true' : 'false'].color;
-    label.style.backgroundColor = item.backgroundColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color;
+    labelName.style.color = item.color[getCurrentAppTheme()].color;
+    label.style.backgroundColor = item.backgroundColor[getCurrentAppTheme()].color;
     label.append(labelName);
 
     observeStore(selectCurrentTheme, () => {
-      labelName.style.color = item.color[getStore().getState().isAppThemeLight ? 'true' : 'false'].color;
-      label.style.backgroundColor =
-        item.backgroundColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color;
+      labelName.style.color = item.color[getCurrentAppTheme()].color;
+      label.style.backgroundColor = item.backgroundColor[getCurrentAppTheme()].color;
     });
     return label;
   }
@@ -177,24 +169,24 @@ class AboutShortCardView {
   private createPosition(): HTMLSpanElement {
     const position = createBaseElement({
       cssClasses: [styles.position],
-      innerContent: this.params.position[getStore().getState().currentLanguage].text,
+      innerContent: this.params.position[getCurrentLanguage()].text,
       tag: 'span',
     });
 
     const svg = document.createElementNS(SVG_DETAIL.SVG_URL, 'svg');
     svg.append(createSVGUse(SVG_DETAIL.STAR));
-    changeFill(svg, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+    changeFill(svg, this.params.coverColor[getCurrentAppTheme()].color);
 
     observeStore(selectCurrentTheme, () => {
-      changeFill(svg, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
+      changeFill(svg, this.params.coverColor[getCurrentAppTheme()].color);
     });
 
     position.append(svg);
 
     observeStore(selectCurrentLanguage, () => {
       const textNode = [...position.childNodes].find((child) => child.nodeType === Node.TEXT_NODE);
       if (textNode) {
-        textNode.textContent = this.params.position[getStore().getState().currentLanguage].text;
+        textNode.textContent = this.params.position[getCurrentLanguage()].text;
       }
     });
     return position;
@@ -203,12 +195,12 @@ class AboutShortCardView {
   private createShortDescription(): HTMLSpanElement {
     const shortDescription = createBaseElement({
       cssClasses: [styles.shortDescription],
-      innerContent: this.params.shortDescription[getStore().getState().currentLanguage].text,
+      innerContent: this.params.shortDescription[getCurrentLanguage()].text,
       tag: 'span',
     });
 
     observeStore(selectCurrentLanguage, () => {
-      shortDescription.textContent = this.params.shortDescription[getStore().getState().currentLanguage].text;
+      shortDescription.textContent = this.params.shortDescription[getCurrentLanguage()].text;
     });
     return shortDescription;
   }

diff --git a/src/pages/AboutUsPage/view/AboutUsPageView.ts b/src/pages/AboutUsPage/view/AboutUsPageView.ts
@@ -1,11 +1,11 @@
 import LinkModel from '@/shared/Link/model/LinkModel.ts';
-import getStore from '@/shared/Store/Store.ts';
 import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
 import { LINK_DETAIL } from '@/shared/constants/links.ts';
 import { PAGE_DESCRIPTION } from '@/shared/constants/pages.ts';
 import SVG_DETAIL from '@/shared/constants/svg.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import createSVGUse from '@/shared/utils/createSVGUse.ts';
+import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';
 
 import styles from './aboutUsPageView.module.scss';
 
@@ -62,12 +62,12 @@ class AboutUsPageView {
   private createTitle(): HTMLHeadingElement {
     const title = createBaseElement({
       cssClasses: [styles.title],
-      innerContent: PAGE_DESCRIPTION[getStore().getState().currentLanguage].ABOUT,
+      innerContent: PAGE_DESCRIPTION[getCurrentLanguage()].ABOUT,
       tag: 'h1',
     });
 
     observeStore(selectCurrentLanguage, () => {
-      title.innerText = PAGE_DESCRIPTION[getStore().getState().currentLanguage].ABOUT;
+      title.innerText = PAGE_DESCRIPTION[getCurrentLanguage()].ABOUT;
     });
     return title;
   }

diff --git a/src/shared/Modal/view/ModalView.ts b/src/shared/Modal/view/ModalView.ts
@@ -20,6 +20,7 @@ class ModalView {
     document.addEventListener('click', (event) => {
       if (event.target === this.modalOverlay && !this.modalContent.classList.contains(styles.modalContent_hidden)) {
         this.hide(this.callback);
+        this.callback = (): void => {};
       }
     });
 
@@ -30,6 +31,7 @@ class ModalView {
         !this.modalContent.classList.contains(styles.modalContent_hidden)
       ) {
         this.hide(this.callback);
+        this.callback = (): void => {};
       }
     });
   }

diff --git a/src/shared/utils/getCurrentAppTheme.ts b/src/shared/utils/getCurrentAppTheme.ts
@@ -0,0 +1,4 @@
+import getStore from '../Store/Store.ts';
+
+const getCurrentAppTheme = (): 'false' | 'true' => (getStore().getState().isAppThemeLight ? 'true' : 'false');
+export default getCurrentAppTheme;