QA fixes for release 9.2.1

www/main/addons/announcement/components/MiscSlides.jsx

@@ -9,16 +9,20 @@ const remote = require('@electron/remote');
 const { i18n } = remote.require('./app');
 
 const MiscSlides = () => {
-  const { openWaheguruSlide, openMoolMantraSlide, openBlankViewer, openAnandSahibBhog } =
-    useSlides();
+  const {
+    displayWaheguruSlide,
+    displayMoolMantraSlide,
+    displayBlankViewer,
+    displayAnandSahibBhog,
+  } = useSlides();
 
   const { currentWorkspace } = useStoreState((state) => state.userSettings);
 
   const [paneSelectorActive, setPaneSelectorActive] = useState(false);
   const paneSelector = useRef(null);
 
   const openSlideFromDropdown = (paneId) => {
-    openAnandSahibBhog({ openedFrom: 'shortcut-tray', paneId });
+    displayAnandSahibBhog({ openedFrom: 'shortcut-tray', paneId });
     setPaneSelectorActive(false);
   };
 
@@ -49,7 +53,7 @@ const MiscSlides = () => {
               }
               setPaneSelectorActive(true);
             } else {
-              openAnandSahibBhog({ openedFrom: 'shortcut-tray' });
+              displayAnandSahibBhog({ openedFrom: 'shortcut-tray' });
             }
           }}
         >
@@ -59,7 +63,7 @@ const MiscSlides = () => {
           className="misc-slide-button"
           onClick={() => {
             setPaneSelectorActive(false);
-            openMoolMantraSlide({ openedFrom: 'shortcut-tray' });
+            displayMoolMantraSlide({ openedFrom: 'shortcut-tray' });
           }}
         >
           {i18n.t(`SHORTCUT_TRAY.MOOL_MANTRA`)}
@@ -68,7 +72,7 @@ const MiscSlides = () => {
           className="gurmukhi misc-slide-button"
           onClick={() => {
             setPaneSelectorActive(false);
-            openWaheguruSlide({ openedFrom: 'shortcut-tray' });
+            displayWaheguruSlide({ openedFrom: 'shortcut-tray' });
           }}
         >
           vwihgurU
@@ -77,7 +81,7 @@ const MiscSlides = () => {
           className="misc-slide-button"
           onClick={() => {
             setPaneSelectorActive(false);
-            openBlankViewer({ openedFrom: 'shortcut-tray' });
+            displayBlankViewer({ openedFrom: 'shortcut-tray' });
           }}
         >
           {i18n.t(`SHORTCUT_TRAY.BLANK`)}

www/main/common/hooks/useSlides.js

@@ -1,5 +1,4 @@
 import { useStoreActions, useStoreState } from 'easy-peasy';
-import { useEffect } from 'react';
 import insertSlide from '../constants/slidedb';
 
 const remote = require('@electron/remote');
@@ -12,7 +11,6 @@ export const useSlides = () => {
   const { akhandpatt, currentWorkspace } = useStoreState((state) => state.userSettings);
   const { setAkhandpatt } = useStoreActions((state) => state.userSettings);
   const {
-    shortcuts,
     isMiscSlide,
     miscSlideText,
     isAnnoucement,
@@ -24,7 +22,6 @@ export const useSlides = () => {
     pane3,
   } = useStoreState((state) => state.navigator);
   const {
-    setShortcuts,
     setIsMiscSlide,
     setMiscSlideText,
     setIsAnnoucement,
@@ -51,7 +48,7 @@ export const useSlides = () => {
     }
   };
 
-  const openWaheguruSlide = ({ openedFrom }) => {
+  const displayWaheguruSlide = ({ openedFrom }) => {
     addMiscSlide(insertSlide.slideStrings.waheguru);
     analytics.trackEvent({
       category: 'display',
@@ -60,7 +57,7 @@ export const useSlides = () => {
     });
   };
 
-  const openMoolMantraSlide = ({ openedFrom }) => {
+  const displayMoolMantraSlide = ({ openedFrom }) => {
     addMiscSlide(insertSlide.slideStrings.moolMantra);
     analytics.trackEvent({
       category: 'display',
@@ -69,7 +66,7 @@ export const useSlides = () => {
     });
   };
 
-  const openBlankViewer = ({ openedFrom }) => {
+  const displayBlankViewer = ({ openedFrom }) => {
     addMiscSlide('');
     analytics.trackEvent({
       category: 'display',
@@ -78,7 +75,7 @@ export const useSlides = () => {
     });
   };
 
-  const openAnandSahibBhog = ({ openedFrom, paneId = null }) => {
+  const displayAnandSahibBhog = ({ openedFrom, paneId = null }) => {
     if (isSundarGutkaBani) {
       setIsSundarGutkaBani(false);
     }
@@ -127,41 +124,10 @@ export const useSlides = () => {
     });
   };
 
-  useEffect(() => {
-    if (shortcuts.openWaheguruSlide) {
-      openWaheguruSlide({ openedFrom: 'shortcuts' });
-      setShortcuts({
-        ...shortcuts,
-        openWaheguruSlide: false,
-      });
-    }
-    if (shortcuts.openMoolMantraSlide) {
-      openMoolMantraSlide({ openedFrom: 'shortcuts' });
-      setShortcuts({
-        ...shortcuts,
-        openMoolMantraSlide: false,
-      });
-    }
-    if (shortcuts.openBlankViewer) {
-      openBlankViewer({ openedFrom: 'shortcuts' });
-      setShortcuts({
-        ...shortcuts,
-        openBlankViewer: false,
-      });
-    }
-    if (shortcuts.openAnandSahibBhog) {
-      setShortcuts({
-        ...shortcuts,
-        openAnandSahibBhog: false,
-      });
-      openAnandSahibBhog({ openedFrom: 'shortcuts' });
-    }
-  }, [shortcuts]);
-
   return {
-    openWaheguruSlide,
-    openMoolMantraSlide,
-    openBlankViewer,
-    openAnandSahibBhog,
+    displayWaheguruSlide,
+    displayMoolMantraSlide,
+    displayBlankViewer,
+    displayAnandSahibBhog,
   };
 };

www/main/common/sttm-ui/multipane-dropdown/MultipaneDropdown.jsx

@@ -48,7 +48,7 @@ const MultipaneDropdown = ({
 MultipaneDropdown.propTypes = {
   paneSelectorActive: PropTypes.bool,
   setPaneSelectorActive: PropTypes.func,
-  paneSelector: PropTypes.node,
+  paneSelector: PropTypes.object,
   clickHandler: PropTypes.func,
 };
 

www/main/common/sttm-ui/shabad-verse/ShabadVerse.jsx

@@ -7,6 +7,7 @@ const ShabadVerse = ({
   isHomeVerse,
   lineNumber,
   versesRead,
+  activeVerseRef,
   updateTraversedVerse,
   verse,
   englishVerse,
@@ -15,18 +16,19 @@ const ShabadVerse = ({
   const loadActiveClass = (verseObj, currentVerseId, verseIndex) =>
     Object.keys(verseObj).map((verseKey) => {
       if (Number(verseKey) === verseIndex && verseObj[verseKey] === currentVerseId) {
-        return 1;
+        return true;
       }
-      return 0;
-    })[0]
-      ? 'shabad-pane-active'
-      : '';
+      return false;
+    })[0];
 
   return (
     <li
       id={`line-${lineNumber}`}
       value={lineNumber}
-      className={`shabad-pane-list shabad-li ${loadActiveClass(activeVerse, verseId, lineNumber)}`}
+      ref={loadActiveClass(activeVerse, verseId, lineNumber) ? activeVerseRef : null}
+      className={`shabad-pane-list shabad-li ${
+        loadActiveClass(activeVerse, verseId, lineNumber) ? 'shabad-pane-active' : ''
+      }`}
     >
       <span className="shabad-pane-controls">
         {versesRead.map(
@@ -66,6 +68,7 @@ ShabadVerse.propTypes = {
   isHomeVerse: PropTypes.number,
   lineNumber: PropTypes.number,
   versesRead: PropTypes.array,
+  activeVerseRef: PropTypes.object,
   updateTraversedVerse: PropTypes.func,
   verse: PropTypes.string,
   englishVerse: PropTypes.string,

www/main/launchpad/Launchpad.jsx

@@ -4,7 +4,7 @@ import { useStoreState, useStoreActions } from 'easy-peasy';
 import Toolbar from '../toolbar';
 import Navigator from '../navigator';
 import WorkspaceBar from '../workspace-bar';
-import { useKeys } from '../common/hooks';
+import { useKeys, useSlides } from '../common/hooks';
 
 import {
   Ceremonies,
@@ -30,7 +30,14 @@ const Launchpad = () => {
   const { shortcuts } = useStoreState((state) => state.navigator);
   const { setShortcuts } = useStoreActions((state) => state.navigator);
   const { setOverlayScreen } = useStoreActions((actions) => actions.app);
-  const { currentWorkspace } = useStoreState((state) => state.userSettings);
+  const { currentWorkspace, defaultPaneId } = useStoreState((state) => state.userSettings);
+
+  const {
+    displayWaheguruSlide,
+    displayMoolMantraSlide,
+    displayBlankViewer,
+    displayAnandSahibBhog,
+  } = useSlides();
 
   const ref = useRef();
 
@@ -60,41 +67,25 @@ const Launchpad = () => {
 
   // open waheguru slide shortcut
   const handleCtrlPlus1 = () => {
-    if (!shortcuts.openWaheguruSlide) {
-      setShortcuts({
-        ...shortcuts,
-        openWaheguruSlide: true,
-      });
-    }
+    displayWaheguruSlide({ openedFrom: 'shortcuts' });
   };
 
   // open mool mantra slide shortcut
   const handleCtrlPlus2 = () => {
-    if (!shortcuts.openMoolMantraSlide) {
-      setShortcuts({
-        ...shortcuts,
-        openMoolMantraSlide: true,
-      });
-    }
+    displayMoolMantraSlide({ openedFrom: 'shortcuts' });
   };
 
   // open blank slide shortcut
   const handleCtrlPlus3 = () => {
-    if (!shortcuts.openBlankViewer) {
-      setShortcuts({
-        ...shortcuts,
-        openBlankViewer: true,
-      });
-    }
+    displayBlankViewer({ openedFrom: 'shortcuts' });
   };
 
   // open anand sahib bhog slide shortcut
   const handleCtrlPlus4 = () => {
-    if (!shortcuts.openAnandSahibBhog) {
-      setShortcuts({
-        ...shortcuts,
-        openAnandSahibBhog: true,
-      });
+    if (currentWorkspace === i18n.t('WORKSPACES.MULTI_PANE')) {
+      displayAnandSahibBhog({ openedFrom: 'shortcuts', paneId: defaultPaneId });
+    } else {
+      displayAnandSahibBhog({ openedFrom: 'shortcuts' });
     }
   };
 

www/main/navigator/Navigator.jsx

@@ -17,8 +17,12 @@ const Navigator = () => {
     (state) => state.userSettings,
   );
 
-  const { openWaheguruSlide, openMoolMantraSlide, openBlankViewer, openAnandSahibBhog } =
-    useSlides();
+  const {
+    displayWaheguruSlide,
+    displayMoolMantraSlide,
+    displayBlankViewer,
+    displayAnandSahibBhog,
+  } = useSlides();
 
   let controllerMarkup = null;
 
@@ -56,10 +60,10 @@ const Navigator = () => {
       <div className="navigator-row">
         <ShabadPane />
         <MiscPane
-          waheguruSlide={openWaheguruSlide}
-          moolMantraSlide={openMoolMantraSlide}
-          blankSlide={openBlankViewer}
-          anandSahibBhog={openAnandSahibBhog}
+          waheguruSlide={displayWaheguruSlide}
+          moolMantraSlide={displayMoolMantraSlide}
+          blankSlide={displayBlankViewer}
+          anandSahibBhog={displayAnandSahibBhog}
         />
       </div>
     );