Release 1.2.0 (#733)

* Shows sharing links on text select

* fixes 404 page in embed view

* Changes background color to lightgrey

* adds event listeners on react component instead of a loop

* Gets hukamnama from v2 api; gets shabad from v2 (WIP)

* Fixes scroll position in sundar gutka

* Fixes object object error (#704)

* Adds the scroll to top inside condition

* renames the previous location

* Separates selection logic from share div logic

* Reset Center Align & Reposition option (#698)

* Adds makeSelection function to util file

* changes api url to v2 manually; fixes hukamnama view of multiple shabads; adds search with v2 api;

* fixes redirect logic with v2 API

* Adds a self destroying service worker

* Enables service worker

* Renames file name to sw-self-destroy.js

* uses a source variable for generating service worker

* Uses banidb 2.0.0

* uses const variables instead of let

* arrow keys to go to previous day hukamnama

* Adds an error message for hukamnama

* Bump lodash from 4.17.11 to 4.17.14 (#723)

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.11 to 4.17.14.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.17.11...4.17.14)

Signed-off-by: dependabot[bot] <[email protected]>

* updates hukamnama navigation

* Fixes responsiveness of header

* fixes linting error in scss

* Uses banidb for hukamnama api url

* Fixes scroll jump

* Optimizes code for hukamnama

* 1.2.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sttm/web",
-  "version": "1.1.14",
+  "version": "1.2.0",
   "description": "Sevadaars are currently working hard to build a newer version of SikhiToTheMax website using modern web technologies.",
   "main": "index.js",
   "scripts": {
@@ -98,7 +98,7 @@
     ]
   },
   "dependencies": {
-    "@sttm/banidb": "^1.1.0",
+    "@sttm/banidb": "^2.1.1",
     "classnames": "^2.2.6",
     "compression": "^1.7.3",
     "cookie-parser": "^1.4.3",

src/js/components/Baani.js

@@ -9,15 +9,15 @@ import { TEXTS, SHABAD_CONTENT_CLASSNAME } from '.././constants';
 import { copyToClipboard, showToast, shortenURL, makeSelection } from '../util';
 
 const transliterationMap = {
-  english: shabad => shabad.transliteration,
+  english: shabad => shabad.transliteration.english,
 };
 
 const translationMap = {
-  spanish: shabad => shabad.translation.spanish,
-  english: shabad => shabad.translation.english.ssk,
+  spanish: shabad => shabad.translation.es.sn,
+  english: shabad => shabad.translation.en.bdb,
   punjabi: shabad => ({
-    ...shabad.translation.punjabi.bms,
-    toString: () => shabad.translation.punjabi.bms.unicode,
+    ...shabad.translation.pu.ss,
+    toString: () => shabad.translation.pu.ss.unicode,
   }),
 };
 
@@ -50,7 +50,7 @@ export default class Baani extends React.PureComponent {
 
   getShareLine = shabad => {
     return [
-      shabad.gurbani.unicode,
+      shabad.verse.unicode,
       ...this.props.transliterationLanguages.map(language =>
         transliterationMap[language](shabad)
       ),
@@ -165,37 +165,37 @@ export default class Baani extends React.PureComponent {
 
     const mixedViewMarkup = (
       <div className="mixed-view-baani">
-        {gurbani.map(({ shabad }) => (
+        {gurbani.map(shabad => (
           <div
-            key={shabad.id}
-            id={`line-${shabad.id}`}
+            key={shabad.verseId}
+            id={`line-${shabad.verseId}`}
             className="line"
             onMouseUp={this.showShare}
             onMouseDown={this.removeSelection}
             ref={node =>
-              highlight === parseInt(shabad.id, 10)
+              highlight === parseInt(shabad.verseId, 10)
                 ? (this.$highlightedBaaniLine = node)
                 : null
             }
           >
             <BaaniLine
-              text={shabad.gurbani}
+              text={shabad.verse}
               unicode={unicode}
-              shouldHighlight={highlight === parseInt(shabad.id, 10)}
+              shouldHighlight={highlight === parseInt(shabad.verseId, 10)}
               larivaar={larivaar}
               larivaarAssist={larivaarAssist}
               fontSize={fontSize}
               fontFamily={fontFamily}
             />
             {transliterationLanguages.map(language => (
-              <Transliteration key={shabad.id + language}>
+              <Transliteration key={shabad.verseId + language}>
                 {transliterationMap[language](shabad)}
               </Transliteration>
             ))}
 
             {translationLanguages.map(language => (
               <Translation
-                key={shabad.id + language}
+                key={shabad.verseId + language}
                 type={language}
                 {...Translation.getTranslationProps({
                   translationMap,
@@ -220,20 +220,20 @@ export default class Baani extends React.PureComponent {
     const splitViewMarkup = (
       <div className="split-view-baani">
         <div className="split-view-baani-wrapper">
-          {gurbani.map(({ shabad }) => (
+          {gurbani.map(shabad => (
             <div
-              key={shabad.id}
+              key={shabad.verseId}
               className="line"
               ref={node =>
-                highlight === parseInt(shabad.id, 10)
+                highlight === parseInt(shabad.verseId, 10)
                   ? (this.$highlightedBaaniLine = node)
                   : null
               }
             >
               <BaaniLine
-                text={shabad.gurbani}
+                text={shabad.verse}
                 unicode={unicode}
-                shouldHighlight={highlight === parseInt(shabad.id, 10)}
+                shouldHighlight={highlight === parseInt(shabad.verseId, 10)}
                 larivaar={larivaar}
                 larivaarAssist={larivaarAssist}
                 fontSize={fontSize}
@@ -251,18 +251,18 @@ export default class Baani extends React.PureComponent {
         </div>
         {transliterationLanguages.map(language => (
           <div key={language} className="split-view-baani-wrapper">
-            {gurbani.map(({ shabad }) => (
-              <Transliteration key={shabad.id}>
+            {gurbani.map(shabad => (
+              <Transliteration key={shabad.verseId}>
                 {transliterationMap[language](shabad)}
               </Transliteration>
             ))}
           </div>
         ))}
         {translationLanguages.map(language => (
           <div key={language} className="split-view-baani-wrapper">
-            {gurbani.map(({ shabad }) => (
+            {gurbani.map(shabad => (
               <Translation
-                key={shabad.id}
+                key={shabad.verseId}
                 type={language}
                 {...Translation.getTranslationProps({
                   translationMap,

src/js/components/Breadcrumb/Breadcrumb.js

@@ -25,8 +25,9 @@ export default class BreadCrumb extends React.PureComponent {
   render() {
     return (
       <h4 className="breadcrumb">
-        {[{ title: TEXTS.URIS.HOME, url: '/' }].concat(this.props.links).map(
-          ({ url, title }, index, { length }) =>
+        {[{ title: TEXTS.URIS.HOME, url: '/' }]
+          .concat(this.props.links)
+          .map(({ url, title }, index, { length }) =>
             index < length - 1 ? (
               <React.Fragment key={index}>
                 <Link to={url}>{title}</Link>
@@ -35,7 +36,7 @@ export default class BreadCrumb extends React.PureComponent {
             ) : (
               <span className="breadcrumbLast">{title}</span>
             )
-        )}
+          )}
       </h4>
     );
   }

src/js/components/Controls.js

@@ -25,13 +25,11 @@ export const supportedMedia = _s;
 class Controls extends React.PureComponent {
   state = {
     showBorder: false,
-    offsetTop: 0,
   };
 
   componentDidMount() {
     this.mounted = true;
     window.addEventListener('scroll', this.scrollListener, { passive: true });
-    this.setState({ offsetTop: this.$wrapper.offsetTop });
   }
 
   componentWillUnmount() {
@@ -42,14 +40,13 @@ class Controls extends React.PureComponent {
   }
 
   scrollListener = () => {
-    if (window.scrollY >= this.state.offsetTop) {
+    if (window.scrollY >= this.$wrapper.offsetTop) {
       if (this.mounted && this.state.showBorder === false) {
         this.setState({ showBorder: true });
       }
     } else {
       if (this.mounted && this.state.showBorder === true) {
         this.setState({ showBorder: false });
-        this.setState({ offsetTop: this.$wrapper.offsetTop });
       }
     }
   };

src/js/components/FootNav.js

@@ -10,8 +10,8 @@ class FootNav extends React.PureComponent {
     info: PropTypes.object.isRequired,
     type: PropTypes.string,
     nav: PropTypes.shape({
-      previous: PropTypes.string,
-      next: PropTypes.string,
+      previous: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      next: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     }),
   };
 

src/js/components/Meta.js

@@ -36,8 +36,8 @@ class Meta extends React.PureComponent {
     translationLanguages: PropTypes.array.isRequired,
     transliterationLanguages: PropTypes.array.isRequired,
     nav: PropTypes.shape({
-      previous: PropTypes.string,
-      next: PropTypes.string,
+      previous: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      next: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     }),
   };
 
@@ -81,7 +81,9 @@ class Meta extends React.PureComponent {
         <div className="meta">
           {['hukamnama'].includes(type) && (
             <h4>
-              <Link to={`/shabad?id=${info.id}`}>{TEXTS.GO_TO_SHABAD}</Link>
+              <Link to={`/shabad?id=${info.shabadId}`}>
+                {TEXTS.GO_TO_SHABAD}
+              </Link>
             </h4>
           )}
           <h4 className="gurbani-font">
@@ -97,11 +99,12 @@ class Meta extends React.PureComponent {
               {info.pageno !== null && (
                 <Link
                   to={toAngURL({
-                    ang: info.source.pageno,
-                    source: info.source.id,
+                    ang: info.source.pageNo,
+                    source: info.source.sourceId,
                   })}
                 >
-                  {info.source.id == 'G' ? 'AMg' : 'pMnw'} {info.source.pageno}
+                  {info.source.sourceId == 'G' ? 'AMg' : 'pMnw'}{' '}
+                  {info.source.pageNo}
                 </Link>
               )}
             </Item>
@@ -120,12 +123,12 @@ class Meta extends React.PureComponent {
               <Item last>
                 <Link
                   to={toAngURL({
-                    ang: info.source.pageno,
-                    source: info.source.id,
+                    ang: info.source.pageNo,
+                    source: info.source.sourceId,
                   })}
                 >
-                  {info.source.id == 'G' ? 'Ang' : 'Pannaa'}{' '}
-                  {info.source.pageno}
+                  {info.source.sourceId == 'G' ? 'Ang' : 'Pannaa'}{' '}
+                  {info.source.pageNo}
                 </Link>
               </Item>
             </h4>

src/js/components/SearchResults/Result.js

@@ -43,7 +43,7 @@ export default class SearchResult extends React.PureComponent {
       : null;
 
     const [highlightStartIndex, higlightEndIndex] = getHighlightIndices(
-      shabad.gurbani.gurmukhi,
+      shabad.verse.gurmukhi,
       q,
       type
     );
@@ -66,7 +66,7 @@ export default class SearchResult extends React.PureComponent {
                   endIndex={higlightEndIndex}
                   query={q}
                 >
-                  {shabad.gurbani.unicode}
+                  {shabad.verse.unicode}
                 </Larivaar>
               </div>
             ) : (
@@ -78,7 +78,7 @@ export default class SearchResult extends React.PureComponent {
                   endIndex={higlightEndIndex}
                   query={q}
                 >
-                  {shabad.gurbani.gurmukhi}
+                  {shabad.verse.gurmukhi}
                 </Larivaar>
               </div>
             )}
@@ -87,32 +87,34 @@ export default class SearchResult extends React.PureComponent {
           <div className="clear" />
 
           {transliterationLanguages.includes('english') && (
-            <p className="transliteration english">{shabad.transliteration}</p>
+            <p className="transliteration english">
+              {shabad.transliteration.english}
+            </p>
           )}
 
           {translationLanguages.includes('punjabi') && (
             <blockquote className="translation punjabi gurbani-font">
               {unicode ? (
                 <div className="unicode">
-                  {shabad.translation.punjabi.bms.unicode}
+                  {shabad.translation.pu.ss.unicode}
                 </div>
               ) : (
                 <div className="gurlipi">
-                  {shabad.translation.punjabi.bms.gurmukhi}
+                  {shabad.translation.pu.ss.gurmukhi}
                 </div>
               )}
             </blockquote>
           )}
 
           {translationLanguages.includes('english') && (
             <blockquote className="translation english">
-              {shabad.translation.english.ssk}
+              {shabad.translation.en.bdb}
             </blockquote>
           )}
 
           {translationLanguages.includes('spanish') && (
             <blockquote className="translation spanish">
-              {shabad.translation.spanish}
+              {shabad.translation.es.sn}
             </blockquote>
           )}
 

src/js/components/SearchResults/SearchResults.js

@@ -23,8 +23,10 @@ export default class SearchResults extends React.PureComponent {
 
     return (
       <ul className="search-results display">
-        {shabads.map(({ shabad }) => {
-          return <SearchResult key={shabad.id} shabad={shabad} {...props} />;
+        {shabads.map(shabad => {
+          return (
+            <SearchResult key={shabad.shabadId} shabad={shabad} {...props} />
+          );
         })}
       </ul>
     );