From b9fcace410b884b3d9ed9cb7af90ba228ce9d0c1 Mon Sep 17 00:00:00 2001
From: Yadvir Kaur <yadvirkaur15@gmail.com>
Date: Mon, 15 Apr 2024 20:13:27 +0530
Subject: [PATCH] Minor Refactor: Move tab names into a common js file to
 replace static strings

---
 www/main/common/constants/misc-tabs.js        |  9 ++++++
 .../navigator/misc/components/MiscContent.jsx |  7 +++--
 .../navigator/misc/components/MiscHeader.jsx  | 13 +++++----
 .../single-display/singleDisplayContent.jsx   |  7 +++--
 .../single-display/singleDisplayFooter.jsx    | 28 +++++++++++++------
 .../single-display/singleDisplayHeader.jsx    | 15 +++++-----
 6 files changed, 51 insertions(+), 28 deletions(-)
 create mode 100644 www/main/common/constants/misc-tabs.js

diff --git a/www/main/common/constants/misc-tabs.js b/www/main/common/constants/misc-tabs.js
new file mode 100644
index 00000000..411b4b60
--- /dev/null
+++ b/www/main/common/constants/misc-tabs.js
@@ -0,0 +1,9 @@
+const TAB_NAMES = {
+  HISTORY: 'History',
+  FAVORITES: 'Favorites',
+  OTHERS: 'Others',
+};
+
+module.exports = {
+  TAB_NAMES,
+};
diff --git a/www/main/navigator/misc/components/MiscContent.jsx b/www/main/navigator/misc/components/MiscContent.jsx
index b04b85c3..89b0bccc 100644
--- a/www/main/navigator/misc/components/MiscContent.jsx
+++ b/www/main/navigator/misc/components/MiscContent.jsx
@@ -4,15 +4,16 @@ import { FavoritePane } from './favoritePane';
 import { HistoryPane } from './HistoryPane';
 import { OtherPane } from './OtherPane';
 import { classNames } from '../../../common/utils';
+import { TAB_NAMES } from '../../../common/constants/misc-tabs';
 
 export const MiscContent = () => {
   const { currentMiscPanel } = useStoreState((state) => state.navigator);
 
   return (
     <>
-      <HistoryPane className={classNames(currentMiscPanel !== 'History' && 'd-none')} />
-      <OtherPane className={classNames(currentMiscPanel !== 'Others' && 'd-none')} />
-      <FavoritePane className={currentMiscPanel === 'Favorite' ? '' : 'd-none'} />
+      <HistoryPane className={classNames(currentMiscPanel !== TAB_NAMES.HISTORY && 'd-none')} />
+      <OtherPane className={classNames(currentMiscPanel !== TAB_NAMES.OTHERS && 'd-none')} />
+      <FavoritePane className={currentMiscPanel === TAB_NAMES.FAVORITES ? '' : 'd-none'} />
     </>
   );
 };
diff --git a/www/main/navigator/misc/components/MiscHeader.jsx b/www/main/navigator/misc/components/MiscHeader.jsx
index ddca709a..ccc69b88 100644
--- a/www/main/navigator/misc/components/MiscHeader.jsx
+++ b/www/main/navigator/misc/components/MiscHeader.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useStoreState, useStoreActions } from 'easy-peasy';
 
 import { classNames } from '../../../common/utils';
+import { TAB_NAMES } from '../../../common/constants/misc-tabs';
 
 const remote = require('@electron/remote');
 
@@ -15,9 +16,9 @@ export const MiscHeader = () => {
   );
   const { setCurrentMiscPanel, setHistoryOrder } = useStoreActions((state) => state.navigator);
 
-  const isHistory = currentMiscPanel === 'History';
-  const isOther = currentMiscPanel === 'Others';
-  const isFav = currentMiscPanel === 'Favorite';
+  const isHistory = currentMiscPanel === TAB_NAMES.HISTORY ;
+  const isOther = currentMiscPanel === TAB_NAMES.FAVORITES;
+  const isFav = currentMiscPanel === TAB_NAMES.OTHERS;
 
   const setTab = (tabName) => {
     if (tabName !== currentMiscPanel) {
@@ -35,7 +36,7 @@ export const MiscHeader = () => {
       <div className="misc-header-nav">
         <a
           className={classNames('misc-button', isHistory && 'misc-active')}
-          onClick={() => setTab('History')}
+          onClick={() => setTab(TAB_NAMES.HISTORY)}
         >
           <i className="fa fa-clock-o">
             <span className="Icon-label" key="History">
@@ -45,7 +46,7 @@ export const MiscHeader = () => {
         </a>
         <a
           className={classNames('misc-button', isFav && 'misc-active')}
-          onClick={() => setTab('Favorite')}
+          onClick={() => setTab(TAB_NAMES.FAVORITES)}
         >
           <i className="fa fa-heart">
             <span className="Icon-label" key="Favorite">
@@ -55,7 +56,7 @@ export const MiscHeader = () => {
         </a>
         <a
           className={classNames('misc-button', isOther && 'misc-active')}
-          onClick={() => setTab('Others')}
+          onClick={() => setTab(TAB_NAMES.OTHERS)}
         >
           <i className="fa fa-ellipsis-h">
             <span className="Icon-label" key="Others">
diff --git a/www/main/navigator/single-display/singleDisplayContent.jsx b/www/main/navigator/single-display/singleDisplayContent.jsx
index 6882142d..7edcc0dc 100644
--- a/www/main/navigator/single-display/singleDisplayContent.jsx
+++ b/www/main/navigator/single-display/singleDisplayContent.jsx
@@ -3,6 +3,7 @@ import { useStoreState } from 'easy-peasy';
 import { HistoryPane, OtherPane, FavoritePane } from '../misc/components';
 import SearchPane from '../search/components/SearchPane';
 import ShabadContent from '../shabad/ShabadContent';
+import { TAB_NAMES } from '../../common/constants/misc-tabs';
 
 export const singleDisplayContent = () => {
   const { singleDisplayActiveTab } = useStoreState((state) => state.navigator);
@@ -17,9 +18,9 @@ export const singleDisplayContent = () => {
             </div>
           </div>
         </div>
-        <HistoryPane className={tabName === 'history' ? '' : 'd-none'} />
-        <OtherPane className={tabName === 'other' ? '' : 'd-none'} />
-        <FavoritePane className={tabName === 'favorite' ? '' : 'd-none'} />
+        <HistoryPane className={tabName === TAB_NAMES.HISTORY ? '' : 'd-none'} />
+        <OtherPane className={tabName === TAB_NAMES.OTHERS ? '' : 'd-none'} />
+        <FavoritePane className={tabName === TAB_NAMES.FAVORITES ? '' : 'd-none'} />
       </>
     );
 
diff --git a/www/main/navigator/single-display/singleDisplayFooter.jsx b/www/main/navigator/single-display/singleDisplayFooter.jsx
index 2c2e1119..5c488ba7 100644
--- a/www/main/navigator/single-display/singleDisplayFooter.jsx
+++ b/www/main/navigator/single-display/singleDisplayFooter.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useStoreState, useStoreActions } from 'easy-peasy';
 import { classNames } from '../../common/utils';
+import { TAB_NAMES } from '../../common/constants/misc-tabs';
 
 export const singleDisplayFooter = () => {
   const { singleDisplayActiveTab } = useStoreState((state) => state.navigator);
@@ -17,18 +18,18 @@ export const singleDisplayFooter = () => {
     }
   };
   const openOtherPane = () => {
-    if (singleDisplayActiveTab !== 'other') {
-      setSingleDisplayActiveTab('other');
+    if (singleDisplayActiveTab !== TAB_NAMES.OTHERS) {
+      setSingleDisplayActiveTab(TAB_NAMES.OTHERS);
     }
   };
   const openHistoryPane = () => {
-    if (singleDisplayActiveTab !== 'history') {
-      setSingleDisplayActiveTab('history');
+    if (singleDisplayActiveTab !== TAB_NAMES.HISTORY) {
+      setSingleDisplayActiveTab(TAB_NAMES.HISTORY);
     }
   };
   const openFavoritePane = () => {
-    if (singleDisplayActiveTab !== 'favorite') {
-      setSingleDisplayActiveTab('favorite');
+    if (singleDisplayActiveTab !== TAB_NAMES.FAVORITES) {
+      setSingleDisplayActiveTab(TAB_NAMES.FAVORITES);
     }
   };
 
@@ -41,7 +42,10 @@ export const singleDisplayFooter = () => {
         <i className="fa fa-search" />
       </button>
       <button
-        className={classNames('tab-switch', singleDisplayActiveTab === 'history' && 'active')}
+        className={classNames(
+          'tab-switch',
+          singleDisplayActiveTab === TAB_NAMES.HISTORY && 'active',
+        )}
         onClick={openHistoryPane}
       >
         <i className="fa fa-history" />
@@ -53,13 +57,19 @@ export const singleDisplayFooter = () => {
         <i className="fa fa-dot-circle-o" />
       </button>
       <button
-        className={classNames('tab-switch', singleDisplayActiveTab === 'favorite' && 'active')}
+        className={classNames(
+          'tab-switch',
+          singleDisplayActiveTab === TAB_NAMES.FAVORITES && 'active'
+        )}
         onClick={openFavoritePane}
       >
         <i className="fa fa-heart" />
       </button>
       <button
-        className={classNames('tab-switch', singleDisplayActiveTab === 'other' && 'active')}
+        className={classNames(
+          'tab-switch',
+          singleDisplayActiveTab === TAB_NAMES.OTHERS && 'active'
+        )}
         onClick={openOtherPane}
       >
         <i className="fa fa-ellipsis-h" />
diff --git a/www/main/navigator/single-display/singleDisplayHeader.jsx b/www/main/navigator/single-display/singleDisplayHeader.jsx
index 7b45d546..5d624ecf 100644
--- a/www/main/navigator/single-display/singleDisplayHeader.jsx
+++ b/www/main/navigator/single-display/singleDisplayHeader.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useStoreState, useStoreActions } from 'easy-peasy';
 import ShabadHeader from '../shabad/ShabadHeader';
+import { TAB_NAMES } from '../../common/constants/misc-tabs';
 
 export const singleDisplayHeader = () => {
   const { singleDisplayActiveTab, minimizedBySingleDisplay, historyOrder, verseHistory } =
@@ -21,12 +22,12 @@ export const singleDisplayHeader = () => {
 
         break;
 
-      case 'history':
-        component = 'History';
+      case TAB_NAMES.HISTORY:
+        component = TAB_NAMES.HISTORY;
         break;
 
-      case 'other':
-        component = 'Other';
+      case TAB_NAMES.OTHERS:
+        component = TAB_NAMES.OTHERS;
 
         break;
 
@@ -38,8 +39,8 @@ export const singleDisplayHeader = () => {
         component = 'Dhan Guru';
         break;
 
-      case 'favorite':
-        component = 'Favorites';
+      case TAB_NAMES.FAVORITES:
+        component = TAB_NAMES.FAVORITES;
         break;
 
       default:
@@ -59,7 +60,7 @@ export const singleDisplayHeader = () => {
   return (
     <div className="header-controller">
       <span>{getActiveTab(singleDisplayActiveTab)}</span>
-      {singleDisplayActiveTab === 'history' && verseHistory.length > 1 && (
+      {singleDisplayActiveTab === TAB_NAMES.HISTORY && verseHistory.length > 1 && (
         <div className="history-order">
           <div className="history-order-select">
             <label>Sort by: </label>