Show Salat al-Tarawīh #427

__tests__/utils/calculator.test.js

@@ -1,5 +1,5 @@
-import { describe, expect, it } from '@jest/globals';
-import { daily, isFard, monthly } from '../../src/utils/calculator';
+import { beforeEach, describe, expect, it } from '@jest/globals';
+import { daily, getIqamahTime, isFard, monthly } from '../../src/utils/calculator';
 
 const MIDDLE_OF_THE_NIGHT = '1/2 Night Begins';
 const LAST_THIRD_OF_THE_NIGHT = 'Last 1/3 Night Begins';
@@ -156,6 +156,31 @@ describe('calculator', () => {
       });
     });
 
+    describe('getIqamahTime', () => {
+      it('should get the time for Jumuah', () => {
+        const result = getIqamahTime(
+          new Date(2020, 5, 19, 10, 24, 0),
+          {
+            jumuah: {
+              6: {
+                1: '12:30 PM',
+                11: '12:45 PM',
+                21: '12:50 PM',
+              },
+            },
+          },
+          'jumuah'
+        );
+
+        expect(result).toEqual('12:45 PM');
+      });
+
+      it('should be undefined', () => {
+        const result = getIqamahTime(new Date(2020, 5, 19, 10, 24, 0), {}, 'jumuah');
+        expect(result).toBeUndefined();
+      });
+    });
+
     describe('monthly', () => {
       it('should have proper label and timings', () => {
         const result = monthly(salatLabels, params, new Date(2020, 5, 19, 10, 24, 0));

content/blog/ramadhan-tuesday-august-13th/index.md

@@ -15,12 +15,12 @@ Fast when you see the crescent. If it is obscured to you, then complete thirty d
 
 Also, this year due to COVID-19 Provincewide Shutdown measures [Emergency Brake and Stay-at-Home order](/closing-musalla-03-04-2021), there will NO ifṭār in the muṣallá.
 
-At-Tarawīḥ prayers will be available at As-Ṣaḥāba Muṣallá, however, will be limiting capacity to 15% occupancy of the room (with masks and social distancing measures). That means, a maximum of 15 people will be permitted in the Muṣallá for all prayers (the 5 daily prayers, al-jumuʿah prayers & at-tarawīḥ prayers) on a first come first served basis for brothers only.
+Al-Tarawīḥ prayers will be available at As-Ṣaḥāba Muṣallá, however, will be limiting capacity to 15% occupancy of the room (with masks and social distancing measures). That means, a maximum of 15 people will be permitted in the Muṣallá for all prayers (the 5 daily prayers, al-jumuʿah prayers & al-Tarawīḥ prayers) on a first come first served basis for brothers only.
 
-Al-ʿIshāʾ & at-Tarawīh Prayers Iqāmah Times
+Al-ʿIshāʾ & at-Tarawīḥ Prayers Iqāmah Times
 
-Ramaḍān 1st - 14th (April 13th - 26th) = 9:30pm
-Ramaḍān 15th - 29/30th (April 27th - May 11/12th) = 10:00pm
+- Ramaḍān 1st - 14th (April 13th - 26th) = 9:30pm
+- Ramaḍān 15th - 29/30th (April 27th - May 11/12th) = 10:00pm
 
 The remaining prayer calendar/timings and iqāmah times at Muṣallá As-Ṣaḥāba (2835 Dumaurier Ave, Ramsey area) will be available shortly on our website. The iqāmah times will remain so unless further advised.
 

src/components/Hero.jsx

@@ -2,7 +2,7 @@ import { Link } from 'gatsby';
 import React, { useContext, useState } from 'react';
 import { Container } from 'react-bootstrap';
 import PortfolioContext from '../context/context';
-import { daily, getJumuahTime, isFard } from '../utils/calculator';
+import { daily, getIqamahTime, isFard } from '../utils/calculator';
 import hijri from '../utils/hijri';
 
 const getLabel = (event, label, onClick, link) => {
@@ -23,11 +23,12 @@ const getLabel = (event, label, onClick, link) => {
   return label;
 };
 
-const renderSunnah = (event, label, time) => (
-  <div key={event} className="sunan" data-cy="sunan">
-    {label} <span className="text-color-main">{time}</span>
-  </div>
-);
+const renderSunnah = (event, label, time) =>
+  time && (
+    <div key={event} className="sunan" data-cy="sunan">
+      {label} <span className="text-color-main">{time}</span>
+    </div>
+  );
 
 const renderTiming = (links, onClick) => ({ label, time, iqamah, event }) => {
   if (!isFard(event)) {
@@ -116,7 +117,9 @@ const Hero = () => {
         <h2 data-cy="hijri">{`${day}, ${hijriDate} ${month} ${year} H`}</h2>
         <h1 className="hero-title" data-cy="timings">
           {timings.map(renderTiming(links, onLinkClicked))}
-          {isLoaded && renderSunnah('jumuah', labels.jumuah, getJumuahTime(now, iqamahs))}
+          {isLoaded && renderSunnah('jumuah', labels.jumuah, getIqamahTime(now, iqamahs, 'jumuah'))}
+          {isLoaded &&
+            renderSunnah('tarawih', labels.tarawih, getIqamahTime(now, iqamahs, 'tarawih'))}
         </h1>
         <p className="hero-cta">
           {calendarUrl && (

src/mock/data.js

@@ -17,8 +17,18 @@ export const heroData = {
     middleOfTheNight: '1/2 Night Begins',
     lastThirdOfTheNight: 'Last 1/3 Night Begins',
     jumuah: 'Khuṭbah al-Jumuʿah',
+    tarawih: 'Tarawīḥ',
   },
   iqamahs: {
+    tarawih: {
+      4: {
+        13: '9:30 PM',
+        27: '10:00 PM',
+      },
+      5: {
+        1: '10:00 PM',
+      },
+    },
     fajr: {
       1: {
         1: '6:45 AM',

src/utils/calculator.js

@@ -76,7 +76,7 @@ const reduceIqamahs = (now, iqamahs) => {
   );
 };
 
-const getJumuahTime = (now, iqamahs) => reduceIqamahs(now, iqamahs).jumuah;
+const getIqamahTime = (now, iqamahs, id) => reduceIqamahs(now, iqamahs)[id];
 
 const daily = (
   salatLabels,
@@ -155,6 +155,6 @@ module.exports = {
   daily,
   monthly,
   yearly,
-  getJumuahTime,
+  getIqamahTime,
   isFard,
 };