Merge pull request #1076 from Gauravjeetsingh/doodle-api-endpoint

Uses API for doodles [Release PR]
KhalisFoundation · Jun 2, 2020 · 473032f · 473032f
2 parents 75110b2 + b668552
commit 473032f
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sttm/web",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "description": "Sevadaars are currently working hard to build a newer version of SikhiToTheMax website using modern web technologies.",
   "main": "index.js",
   "scripts": {

diff --git a/src/js/components/Header.js b/src/js/components/Header.js
@@ -1,6 +1,8 @@
+/* globals DOODLE_URL */
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import { SOURCES, SEARCH_TYPES, TYPES, SOURCES_WITH_ANG, DOODLE } from '../constants';
+import { SOURCES, SEARCH_TYPES, TYPES, SOURCES_WITH_ANG } from '../constants';
 import { Link } from 'react-router-dom';
 import EnhancedGurmukhiKeyboard from './GurmukhiKeyboardv2';
 import SearchForm from './SearchForm';
@@ -24,6 +26,29 @@ export default class Header extends React.PureComponent {
     history: PropTypes.shape({ push: PropTypes.func }),
   };
 
+  state = {
+    showDoodle: false,
+    doodleData: null,
+  }
+
+  fetchDoodle = () => {
+    fetch(`${DOODLE_URL}`)
+      .then(r => r.json())
+      .then((data) => {
+        if (data) {
+          this.setState({ showDoodle: true, doodleData: data.rows[0] });
+        }
+      }, (error) => {
+        console.log(error);
+        this.setState({ showDoodle: false, doodleData: null });
+      }
+      );
+  }
+
+  componentDidMount() {
+    this.fetchDoodle();
+  }
+
   onFormSubmit = ({ handleSubmit, ...data }) => e => {
     e.preventDefault();
     handleSubmit();
@@ -35,6 +60,7 @@ export default class Header extends React.PureComponent {
   render() {
     const {
       props: { defaultQuery, isHome, isAng, isController },
+      state: { showDoodle, doodleData },
       onFormSubmit,
       handleFormSubmit,
     } = this;
@@ -69,9 +95,13 @@ export default class Header extends React.PureComponent {
         <div className="top-bar-wrapper row">
           {!isHome && (
             <div className="top-bar-title">
-              {dateMath.isFuture(DOODLE['date']) ?
-                (<Link to="/" title={DOODLE['title']} className="doodle-link"
-                  style={{ backgroundImage: `url(${DOODLE['smallImage']}) ` }} />) :
+              {showDoodle ?
+                (<>
+                  <Link to="/" title={doodleData['Description']} className="doodle-link icon"
+                    style={{ backgroundImage: `url(${doodleData['ImageSquare']}) ` }} />
+                  <Link to="/" title={doodleData['Description']} className="doodle-link bigger-image"
+                    style={{ backgroundImage: `url(${doodleData['Image']}) ` }} />
+                </>) :
                 (<Link to="/" />)
               }
             </div>

diff --git a/src/js/components/Icons/Logo.js b/src/js/components/Icons/Logo.js
diff --git a/src/js/constants.ts b/src/js/constants.ts
@@ -197,11 +197,3 @@ export const VISRAAM_CONSTANTS = {
   SOURCE_CLASS: (source: string) => `vishraam-vishraam-source-${source}`,
   TYPE_CLASS: (type: string) => `vishraam-vishraam-options-${type}`
 }
-
-export const DOODLE = {
-  largeImage: `/assets/images/doodle_hola_mahalla.png`,
-  smallImage: `/assets/images/doodle_hola_mahalla_sm.png`,
-  title: `Celebrating the 319th Hola Mahalla this month of March`,
-  credit: `Special thanks to <a target="_blank" href="https://instagram.com/immersedinyou">@immersedinyou</a> for the amazing artwork`,
-  date: new Date('April 1, 2020'), //will stop showing after 1st april 2020
-}
diff --git a/src/js/pages/Home/index.js b/src/js/pages/Home/index.js
@@ -1,6 +1,8 @@
+/* globals DOODLE_URL */
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import { SOURCES, SEARCH_TYPES, TYPES, SOURCES_WITH_ANG, DOODLE } from '../../constants';
+import { SOURCES, SEARCH_TYPES, TYPES, SOURCES_WITH_ANG } from '../../constants';
 import { toSearchURL, getShabadList, dateMath } from '../../util';
 import { pageView } from '../../util/analytics';
 import EnhancedGurmukhiKeyboard from '../../components/GurmukhiKeyboardv2';
@@ -23,6 +25,25 @@ export default class Home extends React.PureComponent {
     history: PropTypes.shape({ push: PropTypes.func }),
   };
 
+  state = {
+    showDoodle: false,
+    doodleData: null
+  }
+
+  fetchDoodle = () => {
+    fetch(`${DOODLE_URL}`)
+      .then(r => r.json())
+      .then((data) => {
+        if (data.rows.length) {
+          this.setState({ showDoodle: true, doodleData: data.rows[0] });
+        }
+      }, (error) => {
+        console.log(error);
+        this.setState({ showDoodle: false, doodleData: null });
+      }
+      );
+  }
+
   onSubmit = ({ handleSubmit, ...data }) => e => {
     e.preventDefault();
     handleSubmit();
@@ -33,7 +54,8 @@ export default class Home extends React.PureComponent {
    * Functional component
    */
   render() {
-    const showDoodle = dateMath.isFuture(DOODLE['date']);
+    const { showDoodle, doodleData } = this.state;
+
     return (
       <SearchForm>
         {({
@@ -71,7 +93,9 @@ export default class Home extends React.PureComponent {
                   >
                     <div className="flex justify-center align-center">
                       <div>
-                        <Logo className="logo-long" doodle={DOODLE} showDoodle={showDoodle} />
+                        {showDoodle ? (
+                          <Logo className="logo-long" doodle={doodleData} />
+                        ) : (<Logo className="logo-long" />)}
                       </div>
                     </div>
 
@@ -179,7 +203,9 @@ export default class Home extends React.PureComponent {
                 </div>
               </div>
               {showDoodle && (
-                <p className="doodle-credit" dangerouslySetInnerHTML={{ __html: DOODLE['credit'] }}></p>
+                <a href={doodleData['SourceLink']} target="_blank">
+                  <p className="doodle-credit">Special thanks to {doodleData['SourceText']}</p>
+                </a>
               )}
             </React.Fragment>
           )}
@@ -189,5 +215,6 @@ export default class Home extends React.PureComponent {
 
   componentDidMount() {
     pageView('/');
+    this.fetchDoodle();
   }
 }
diff --git a/src/scss/_header.scss b/src/scss/_header.scss
@@ -50,6 +50,15 @@
   display: inline-block;
   height: 54px;
   width: 100%;
+
+  &.doodle-link.bigger-image {
+    display: inline-block;
+    height: 88px;
+  }
+
+  &.doodle-link.icon {
+    display: none;
+  }
 }
 
 .top-bar-logo-small {
@@ -514,8 +523,12 @@
     background-image: url(/assets/images/sttm_icon.png);
     width: 54px;
 
-    &.doodle-link {
-      background-image: url(/assets/images/sttm_icon.png) !important;
+    &.doodle-link.icon {
+      display: inline-block;
+    }
+
+    &.doodle-link.bigger-image {
+      display: none;
     }
   }
 

diff --git a/src/scss/_search-page.scss b/src/scss/_search-page.scss
@@ -15,6 +15,7 @@
 .doodle-credit {
   color: $sttm-dark-grey;
   font-size: 14px;
+  margin-top: 16px;
   text-align: center;
 }
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -16,6 +16,7 @@ const API_URLS = {
     PRODUCTION: '//api.sikhitothemax.org/',
     LOCAL: '//api.sikhitothemax.org/',
   },
+  DOODLE: '//api.sikhitothemax.org/doodle/',
 };
 
 const commonPlugins = [new ManifestPlugin()];
@@ -32,6 +33,7 @@ const plugins = PRODUCTION
       SYNC_API_URL: JSON.stringify(API_URLS.SYNC.PRODUCTION),
       BANIS_API_URL: JSON.stringify(API_URLS.BANIS),
       BANNERS_URL: JSON.stringify(API_URLS.BANNERS),
+      DOODLE_URL: JSON.stringify(API_URLS.DOODLE),
     }),
   ])
   : commonPlugins.concat([
@@ -44,6 +46,7 @@ const plugins = PRODUCTION
       SYNC_API_URL: JSON.stringify(API_URLS.SYNC.LOCAL),
       BANIS_API_URL: JSON.stringify(API_URLS.BANIS),
       BANNERS_URL: JSON.stringify(API_URLS.BANNERS),
+      DOODLE_URL: JSON.stringify(API_URLS.DOODLE),
     }),
   ]);