Add iqamah times #114 (#115)

CHANGELOG.MD

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.6] - 2020-06-14
+
+### Added
+
+- [Add iqamah times](https://github.com/ragaeeb/das-js/issues/114)
+
 ## [0.3.5] - 2020-06-13
 
 ### Updated

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "homepage": "https://ragaeeb.github.io/das-js",
   "description": "Dar as-Sahābah website",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "license": "MIT",
   "scripts": {
     "build": "gatsby build",

src/components/Hero.jsx

@@ -4,10 +4,13 @@ import PortfolioContext from '../context/context';
 import calculate from '../utils/calculator';
 import hijri from '../utils/hijri';
 
-const renderTiming = ({ label, time }) => {
+const renderTiming = ({ label, time, iqamah }) => {
   return (
     <React.Fragment key={label}>
-      {label} <span className="text-color-main">{time}</span>
+      <span className={iqamah ? '' : 'nawafil'}>
+        {label} <span className="text-color-main">{time}</span>
+      </span>
+      {iqamah && <small className="iqamah">&nbsp;{iqamah}</small>}
       <br />
     </React.Fragment>
   );
@@ -20,7 +23,16 @@ const placeholder = {
 
 const Header = () => {
   const { hero } = useContext(PortfolioContext);
-  const { latitude, longitude, timeZone, cta, fajrPdf, scheduleLabel, istijabaText } = hero;
+  const {
+    latitude,
+    longitude,
+    timeZone,
+    cta,
+    fajrPdf,
+    scheduleLabel,
+    istijabaText,
+    iqamahs,
+  } = hero;
   const [now, setNow] = useState(new Date());
 
   const nextDay = (delta = 1) => () => {
@@ -34,7 +46,7 @@ const Header = () => {
   const onFajrPdfClicked = () => window.analytics.track('FajrTimingPdf');
 
   const { date, timings, istijaba } =
-    latitude && longitude ? calculate(latitude, longitude, timeZone, now) : placeholder;
+    latitude && longitude ? calculate(latitude, longitude, timeZone, now, iqamahs) : placeholder;
 
   const { day, date: hijriDate, month, year } = hijri(0, now);
 

src/mock/data.js

@@ -5,6 +5,13 @@ export const heroData = {
   cta: 'Why our Fajr timing is different from other masājid?',
   latitude: '45.3506',
   longitude: '-75.793',
+  iqamahs: {
+    fajr: '4:30 AM',
+    dhuhr: '1:30 PM',
+    asr: '+20 mins',
+    maghrib: '+5 mins',
+    isha: '10:30 PM',
+  },
   scheduleLabel: 'How To Pray The ʿĪd Prayer At Home',
   schedulePdf: 'https://s7.gifyu.com/images/eid-home-description.png',
   timeZone: 'America/Toronto',

src/style/sections/_hero.scss

@@ -45,6 +45,14 @@
     @include respond(phone-xs) {
       font-size: 2.8rem;
     }
+
+    .nawafil {
+      font-size: 2.6rem;
+    }
+
+    .iqamah {
+      font-size: 2rem;
+    }
   }
 
   .hero-cta {

src/utils/calculator.js

@@ -38,21 +38,22 @@ const formatDate = (fajr) => {
  * @param {*} latitude
  * @param {*} longitude
  */
-const formatAsObject = (calculationResult, timeZone) => {
+const formatAsObject = (calculationResult, timeZone, iqamahs) => {
   const timings = Object.entries(calculationResult)
     // sort the events from earliest to latest (to sort from fajr - isha)
     .sort(([, value], [, nextValue]) => value - nextValue)
     .map(([event, t]) => {
       return {
         label: SalatNames[event],
         time: formatTime(t, timeZone),
+        ...(iqamahs[event] && { iqamah: iqamahs[event] }),
       };
     });
 
   return { date: formatDate(calculationResult.fajr), timings };
 };
 
-const calculate = (latitude, longitude, timeZone, now = new Date()) => {
+const calculate = (latitude, longitude, timeZone, now = new Date(), iqamahs) => {
   const fard = new PrayerTimes(
     new Coordinates(Number(latitude), Number(longitude)),
     now,
@@ -62,7 +63,7 @@ const calculate = (latitude, longitude, timeZone, now = new Date()) => {
   const sunan = new SunnahTimes(fard);
   const { coordinates, calculationParameters, date, ...rest } = { ...fard, ...sunan };
 
-  const result = formatAsObject(rest, timeZone);
+  const result = formatAsObject(rest, timeZone, iqamahs);
 
   const nextPrayer = fard.nextPrayer();
   const diff = fard.timeForPrayer(nextPrayer) - now;