Merge pull request #18 from alhabibhasan/master

Hadith of the day

CHANGELOG.md

@@ -6,6 +6,12 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## 4.0.0
+- Introduces a new view containing the Hadith of the day
+- List of hadith to show is retrieved from a Google sheets document -- the default sheet is set in `config.json`
+- Provide your custom list by setting the env variable `REACT_APP_HADITH_DATA_SPREADSHEET_URL` to point to your data source, as show in the README.
+- Any custom hadith data source must provide the data in CSV form, with two columns, `hadith` and `source`. 
+
 ## 3.0.0
 - BREAKING: Adds blackout periods for jummah - need to add in `blackOutPeriod_jummah` into Google Sheets App config.
 - Google Sheets Template updated - https://docs.google.com/spreadsheets/d/1yVlGjnEhKLi5DSOuJMm7-ec5-iFvuiR7WkbzMdbFP9s/edit?usp=sharing

README.md

@@ -57,6 +57,7 @@ https://docs.google.com/spreadsheets/d/e/2PACX-1vRHjHMDmua4IqpnSiAsLVUJEPtZDcJhz
 | KEY | VALUE |
 | --- | ----- |
 | REACT_APP_PRAYER_DATA_SPREADSHEET_URL | https://docs.google.com/spreadsheets/d/e/2PACX-1vRHjHMDmua4IqpnSiAsLVUJEPtZDcJhziBHivD1fmWJu-StuxpPv-VRzBqX8bcC5499pZ9vBUeD_K5G/pub?gid=2084513295&single=true&output=csv |
+| REACT_APP_HADITH_DATA_SPREADSHEET_URL | https://docs.google.com/spreadsheets/d/e/2PACX-1vRHjHMDmua4IqpnSiAsLVUJEPtZDcJhziBHivD1fmWJu-StuxpPv-VRzBqX8bcC5499pZ9vBUeD_K5G/pub?gid=223779376&single=true&output=csv |
 | REACT_APP_APP_CONFIG_SPREADSHEET_URL | https://docs.google.com/spreadsheets/d/e/2PACX-1vRHjHMDmua4IqpnSiAsLVUJEPtZDcJhziBHivD1fmWJu-StuxpPv-VRzBqX8bcC5499pZ9vBUeD_K5G/pub?gid=2071841746&single=true&output=csv |
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mosque-screen",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "private": true,
   "main": "public/electron.js",
   "homepage": "https://mosque-screen.netlify.com",

src/Slider/Slider.js

@@ -4,6 +4,7 @@ import View1 from '../View 1/View1';
 import View2 from '../View 2/View2';
 import View3 from '../View 3/View3';
 import View4 from '../View 4/View4';
+import View6 from '../View 6/View6';
 import GoogleSlides from '../GoogleSlides/GoogleSlides';
 import config from '../config.json';
 import BlackoutPeriods from '../_components/blackout-periods/blackout-periods';
@@ -34,7 +35,7 @@ class Slider extends Component {
   }
 
   getSlides() {
-    return [<View1 />, <View2 />, <View3 />, <View4 />];
+    return [<View1 />, <View2 />, <View3 />, <View4 />, <View6 />];
   }
 
   next() {

src/View 6/View6.css

@@ -0,0 +1,3 @@
+.HadithOfTheDayWrapper {
+  margin-top: 100px;
+}

src/View 6/View6.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import './View6.css';
+import Logo from '../_components/logo/logo';
+import Clock from '../_components/clock/clock';
+import BuildNumber from '../_components/build-number/build-number';
+import Branding from '../_components/branding/branding';
+import HadithOfTheDay from '../_components/hadith-of-the-day/hadith-of-the-day';
+
+class View6 extends Component {
+  render() {
+    return (
+      <div className="View6">
+        <div className="row">
+          <Logo />
+        </div>
+        <div className="row">
+          <div className="col-12 col-md-12">
+            <div className="row">
+              <Clock />
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          <HadithOfTheDay />
+        </div>
+        <BuildNumber />
+        <Branding />
+      </div>
+    );
+  }
+}
+
+export default View6;

src/View 6/View6.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import View6 from './View6';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<View6 />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/_components/hadith-data/hadith-data.js

@@ -0,0 +1,114 @@
+import moment from 'moment';
+import config from '../../config.json';
+import csvtojson from 'csvtojson';
+import request from 'request';
+
+export default class HadithData {
+  constructor() {
+    this.updateData();
+  }
+
+  getHadithSpreadsheetUrl() {
+    return (
+      process.env.REACT_APP_HADITH_DATA_SPREADSHEET_URL ||
+      config.googleSheets.hadithData
+    );
+  }
+
+  getHadithFromGoogleSheets() {
+    let hadithSpreadsheetUrl = this.getHadithSpreadsheetUrl();
+
+    if (!hadithSpreadsheetUrl) {
+      alert('Hadith CSV not set');
+    }
+
+    return csvtojson()
+      .fromStream(
+        request.get(`${hadithSpreadsheetUrl}&_cacheBust=${Math.random()}`)
+      )
+      .then(json => {
+        this.storeHadithData(json);
+        return json;
+      });
+  }
+
+  getAllHadithData() {
+    let _hadithData = window.localStorage.getItem('hadithData');
+    return _hadithData ? JSON.parse(_hadithData) : null;
+  }
+
+  getLastUpdatedTime() {
+    return JSON.parse(window.localStorage.getItem('hadithData_lastUpdated'));
+  }
+
+  getLastChangedTime() {
+    return JSON.parse(
+      window.localStorage.getItem('hadithData_lastChangedHadith')
+    );
+  }
+
+  getHadithCurrentIndex() {
+    return JSON.parse(window.localStorage.getItem('hadithData_currentIndex'));
+  }
+
+  getCurrentDayHadith() {
+    let lastHadithChanged = this.getLastChangedTime();
+    if (!lastHadithChanged) {
+      // If last change wasn't set then set it and set current index to 0, as this is the first (re)run.
+      lastHadithChanged = moment().unix();
+      let currentHadithIndex = 0;
+      this._updateHadithMetadata(lastHadithChanged, currentHadithIndex);
+    }
+
+    let daysPassed = (moment().unix() - lastHadithChanged) / 60 / 60 / 24;
+    let oneDayHasPassed = daysPassed > 1 ? true : false;
+
+    let currentHadithIndex = this.getHadithCurrentIndex();
+    let hadith = this.getAllHadithData();
+
+    let currentHadith = {
+      hadith:
+        "If you can see this, then the hadith haven't been loaded properly. Try refreshing.",
+      source:
+        'Or check if the hadith source URL is correct in your ENV variables or config file.'
+    };
+
+    if (oneDayHasPassed) {
+      currentHadithIndex + 1 >= Object.keys(hadith).length
+        ? (currentHadithIndex = 0)
+        : ++currentHadithIndex;
+
+      this._updateHadithMetadata(moment().unix(), currentHadithIndex);
+    }
+
+    if (hadith) {
+      currentHadith = hadith[currentHadithIndex];
+    }
+
+    return currentHadith;
+  }
+
+  _updateHadithMetadata(lastChanged, currentIndex) {
+    if (lastChanged && currentIndex >= 0) {
+      window.localStorage.setItem('hadithData_lastChangedHadith', lastChanged);
+      window.localStorage.setItem('hadithData_currentIndex', currentIndex);
+    }
+  }
+
+  storeHadithData(hadithData = []) {
+    window.localStorage.setItem('hadithData', JSON.stringify(hadithData));
+    window.localStorage.setItem('hadithData_lastUpdated', moment().unix());
+  }
+
+  updateData() {
+    var lastHadithUpdateDiff = moment().unix() - this.getLastUpdatedTime();
+    var alreadyHasHadithData = this.getAllHadithData() ? true : false;
+    if (
+      lastHadithUpdateDiff > config.googleSheets.refreshRate * 60 ||
+      !alreadyHasHadithData
+    ) {
+      this.getHadithFromGoogleSheets();
+      console.info('Updating Hadith Data....');
+    }
+  }
+}

src/_components/hadith-of-the-day/hadith-of-the-day.css

@@ -0,0 +1,17 @@
+.HadithOfTheDayWrapper {
+  width: auto;
+  display: block;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+}
+
+.Hadith {
+  font-size: 30px;
+}
+
+.HadithSource {
+  font-size: 22px;
+  margin: inherit;
+}

src/_components/hadith-of-the-day/hadith-of-the-day.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import HadithData from '../hadith-data/hadith-data';
+import './hadith-of-the-day.css';
+
+export default class HadithOfTheDay extends Component {
+  constructor(props) {
+    super(props);
+    this.hadithData = new HadithData();
+    this.state = {
+      hadith: this.hadithData.getCurrentDayHadith()
+    };
+  }
+  render() {
+    return (
+      <div className="HadithOfTheDayWrapper">
+        <div className="HadithOfTheDayTitle">
+          <h1>Hadith of the day</h1>
+        </div>
+
+        <blockquote className="blockquote">
+          <p className="mb-0 Hadith">{this.state.hadith.hadith}</p>
+          <footer className="blockquote-footer HadithSource">
+            <cite title="Source Title">{this.state.hadith.source}</cite>
+          </footer>
+        </blockquote>
+      </div>
+    );
+  }
+}

src/config.json

@@ -1,5 +1,5 @@
 {
-  "buildNumber": "v3.0.0",
+  "buildNumber": "v4.0.0",
   "sliderMode": "slider",
   "slideTimeout": 8000,
   "googleSlides": {
@@ -8,6 +8,7 @@
   },
   "googleSheets": {
     "prayerData": "https://docs.google.com/spreadsheets/d/e/2PACX-1vRHjHMDmua4IqpnSiAsLVUJEPtZDcJhziBHivD1fmWJu-StuxpPv-VRzBqX8bcC5499pZ9vBUeD_K5G/pub?gid=2084513295&single=true&output=csv",
+    "hadithData": "https://docs.google.com/spreadsheets/d/e/2PACX-1vRHjHMDmua4IqpnSiAsLVUJEPtZDcJhziBHivD1fmWJu-StuxpPv-VRzBqX8bcC5499pZ9vBUeD_K5G/pub?gid=223779376&single=true&output=csv",
     "appConfig": "https://docs.google.com/spreadsheets/d/e/2PACX-1vRHjHMDmua4IqpnSiAsLVUJEPtZDcJhziBHivD1fmWJu-StuxpPv-VRzBqX8bcC5499pZ9vBUeD_K5G/pub?gid=2071841746&single=true&output=csv",
     "refreshRate": 1
   }