Merge pull request #1 from srijanone/feature-branch

Component Fixes
srijanone · Jun 19, 2020 · 752ac7b · 752ac7b
2 parents 5138dbf + 9a0a99e
commit 752ac7b
Show file tree

Hide file tree

Showing 16 changed files with 504 additions and 17 deletions.
diff --git a/.env.example b/.env.example
@@ -1,4 +1,4 @@
-DRUPAL_HOST= # EZContent's base URL 
+API_HOST= # EZContent's base URL 
 
 # Below variables are also required    
 # To get the JSON data for 'Layout Builder' and menu's      

diff --git a/README.md b/README.md
@@ -39,7 +39,7 @@ cp .env.example .env
 
 4. Add environment variables in `.env` file
 ```bash
-DRUPAL_HOST= # EZContent's base URL 
+API_HOST= # EZContent's base URL 
 
 # Below variables are also required    
 # To get the JSON data for 'Layout Builder' and menu's      

diff --git a/common/helper.js b/common/helper.js
@@ -0,0 +1,5 @@
+// as the base path is always fixed for the assets "/sites/default/files"
+function handleImageInProcessedText(textData,baseurl) {
+  return textData.replace('/sites/default/files/', baseurl + '/sites/default/files/');
+}
+export default handleImageInProcessedText
diff --git a/components/CardComponent/index.js b/components/CardComponent/index.js
@@ -2,6 +2,7 @@ import React from "react";
 import get from "lodash/get";
 import Card from "./Card";
 import BlockTitle from "../BlockTitle";
+import handleImageInProcessedText from "../../common/helper";
 
 export default props => {
   let {cardListContent,view_mode, data}= props
@@ -18,7 +19,7 @@ export default props => {
               key = {`cards_item_${i}`}
               FieldLink = {get(item, "card.field_link.url") ? get(item, "card.field_link.url") : null}
               FieldLinkTitle = {get(item, "card.field_link.title") ? get(item, "card.field_link.title") : null}
-              ParagraphContent={get(item, "card.field_summary.processed") ? get(item, "card.field_summary.processed") : null}
+              ParagraphContent={get(item, "card.field_summary.processed") ? handleImageInProcessedText(get(item, "card.field_summary.processed"), props.baseUrl ) : null}
               ShortTitle={get(item, "card.field_short_title") ? get(item, "card.field_short_title") : null}
               Subhead={get(item, "card.field_subhead") ? get(item, "card.field_subhead") : null}
               Title={get(item, "card.field_title") ? get(item, "card.field_title") : null}

diff --git a/components/CardList/index.js b/components/CardList/index.js
@@ -3,6 +3,7 @@ import CardList from "./CardList";
 import get from "lodash/get";
 import { isNull } from "util";
 import BlockTitle from "../BlockTitle";
+import handleImageInProcessedText from "../../common/helper";
 // import "./style.css";
 
 export default class CardListGenerator extends React.Component {
@@ -22,7 +23,7 @@ export default class CardListGenerator extends React.Component {
                   key = {`carlist_item_${i}`}
                   FieldLink = {get(item, "card.field_link.url") ? get(item, "card.field_link.url") : null}
                   FieldLinkTitle = {get(item, "card.field_link.title") ? get(item, "card.field_link.title") : null}
-                  ParagraphContent =  {get(item,"card.field_summary.processed") ? get(item,"card.field_summary.processed") : null}
+                  ParagraphContent =  {get(item,"card.field_summary.processed") ? handleImageInProcessedText(get(item,"card.field_summary.processed"),this.props.baseUrl) : null}
                   ShortTitle = { get(item,"card.field_short_title") ? get(item,"card.field_short_title") : null}
                   Subhead = { get(item,"card.field_subhead") ? get(item,"card.field_subhead") : null}
                   Title = { get(item,"card.field_title") ? get(item,"card.field_title") : null}

diff --git a/components/FaqComponent/index.js b/components/FaqComponent/index.js
@@ -1,6 +1,7 @@
 import React from "react";
 import get from "lodash/get";
 import BlockTitle from "../BlockTitle";
+import handleImageInProcessedText from "../../common/helper";
 // import "./style.css";
 
 export default class Faq extends React.Component {
@@ -16,7 +17,7 @@ export default class Faq extends React.Component {
     faqData = data.map(x => {
       const singleFaq = {
         question: x.field_question,
-        answer: x.field_answer.processed
+        answer: handleImageInProcessedText(x.field_answer.processed, this.props.baseUrl)
       };
       return singleFaq;
     });

diff --git a/components/GalleryCarousel/index.js b/components/GalleryCarousel/index.js
@@ -3,6 +3,7 @@ import {Helmet} from "react-helmet";
 import Slider from "react-slick";
 import get from 'lodash/get';
 import BlockTitle from "../BlockTitle";
+import handleImageInProcessedText from "../../common/helper";
 
 // import './GalleryCarousel.css';
 
@@ -27,7 +28,7 @@ export default class AsNavFor extends Component {
     const { items } = data;
     const imageObj = items ? items : false;
     const title = get(data,"attributes.field_title") ? get(data,"attributes.field_title") : null;
-    const field_body = get(data,"attributes.field_body.processed") ? get(data,"attributes.field_body.processed") : null;
+    const field_body = get(data,"attributes.field_body.processed") ? handleImageInProcessedText(get(data,"attributes.field_body.processed"),baseUrl) : null;
     const field_link = get(data,"attributes.field_link.uri") ? get(data,"attributes.field_link.uri") : null;
     const field_link_title = get(data,"attributes.field_link.title") ? get(data,"attributes.field_link.title") : null;
     return (

diff --git a/components/MapComponent/index.js b/components/MapComponent/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import BlockTitle from "../BlockTitle";
+import handleImageInProcessedText from "../../common/helper";
 export default props => {
   const {
     field_map: location,
@@ -21,11 +22,11 @@ export default props => {
             Map
           </iframe>
         </>
-        {body && <div dangerouslySetInnerHTML={{ __html: body.processed }} />}
+        {body && <div dangerouslySetInnerHTML={{ __html: handleImageInProcessedText(body.processed,props.baseUrl) }} />}
         {link && (
           <div className="w-100 text-right">
-            <a className="nounderline btn btn-primary rounded-0 white-color" href={link.url}>
-              {(link.title) ? link.title : link.url}
+            <a className="nounderline btn btn-primary rounded-0 white-color" href={link.uri}>
+              {(link.title) ? link.title : link.uri}
             </a>
           </div>
         )}

diff --git a/components/Q&AComponent/index.js b/components/Q&AComponent/index.js
@@ -1,10 +1,11 @@
 import React from "react";
 import get from "lodash/get";
 import BlockTitle from "../BlockTitle";
+import handleImageInProcessedText from "../../common/helper";
 
 export default props => {
   const question = get(props, "data.attributes.field_question");
-  const answer = get(props, "data.attributes.field_answer.processed");
+  const answer = handleImageInProcessedText(get(props, "data.attributes.field_answer.processed"),props.baseUrl);
   return (
     <>
     <BlockTitle blockTitle={props.data} landingPageCheck={props.landingPageCheck}/>

diff --git a/components/ReferenceComponent/index.js b/components/ReferenceComponent/index.js
@@ -1,6 +1,7 @@
 import React from "react";
 import get from "lodash/get";
 import BlockTitle from "../BlockTitle";
+import handleImageInProcessedText from "../../common/helper";
 // import "./style.css";
 
 export default props => {
@@ -10,7 +11,7 @@ export default props => {
     const article = {
       title: x.article.title,
       path: x.article.path.alias,
-      summary: x.article.field_summary,
+      summary: handleImageInProcessedText(x.article.field_summary, props.baseUrl),
       image: (get(x, "file.uri.url")) ? props.baseUrl + (get(x, "file.uri.url").replace("/sites/default/files/","/sites/default/files/styles/card_list/public/")) : null
     };
     return article;

diff --git a/components/index.js b/components/index.js
@@ -15,6 +15,7 @@ import get from "lodash/get";
 import CardList from "./CardList";
 import Card from "./CardComponent";
 import QuestionAnswer from "./Q&AComponent";
+import handleImageInProcessedText from "../common/helper";
 
 export default props => {
   let authorData = props.data.included_fields ? props.data.included_fields.filter(({ type }) => type === 'node--author') : false;
@@ -45,6 +46,7 @@ export default props => {
       AuthorTitle = get(val, "attributes.title");
       AuthorTitleUrl = get(val, "attributes.path.alias") ? get(val, "attributes.path.alias") : null;
       summary = get(val, "attributes.body.processed") ? get(val, "attributes.body.processed") : null;
+      summary = handleImageInProcessedText(summary,get(props,'baseUrl'));
       authorMedia = get(val, "relationships.field_thumbnail.data");
       if(authorMedia && authorMedia.type === "media--image"){
         authorMediaId = authorMedia.id;
@@ -116,7 +118,8 @@ export default props => {
             textData = get(comp,"attributes.field_body.processed") ? get(comp,"attributes.field_body.processed") : '';
           }else{
             textData = get(comp,"attributes.body.processed") ? get(comp,"attributes.body.processed") : '';
-          }              
+          }   
+          textData = handleImageInProcessedText(textData, baseUrl);           
           return <Text key={`text_block_${keyVal}`} text={textData} medium="1" data={comp} landingPageCheck={landingPageCheck}/>;
         case "social_media":
           return <SocialMedia key={`social_media_${keyVal}`} type={comp.media.type} attributes={comp.media.attributes} data={comp} landingPageCheck={landingPageCheck}/>;
@@ -134,9 +137,9 @@ export default props => {
           return <Quote key={`quote_${keyVal}`} data={comp} landingPageCheck={landingPageCheck}/>;
         case "map":
         case "map_block":
-          return <Map key={`map_${keyVal}`} data={comp} landingPageCheck={landingPageCheck}/>;
+          return <Map key={`map_${keyVal}`} data={comp} landingPageCheck={landingPageCheck} baseUrl={baseUrl}/>;
         case "faq":
-          return <Faq key={`faq_${keyVal}`} data={comp} landingPageCheck={landingPageCheck}/>;
+          return <Faq key={`faq_${keyVal}`} data={comp} landingPageCheck={landingPageCheck} baseUrl={baseUrl}/>;
         case "cards":
           return <Card key={`card__${keyVal}`} cardListData={comp.attributes} cardListContent={comp.items} view_mode={comp.view_mode} data={comp} baseUrl={baseUrl} landingPageCheck={landingPageCheck}/>;
         case "card_list":
@@ -146,7 +149,7 @@ export default props => {
         case "referenced_card":
           return <Reference key={`reference_${keyVal}`} data={comp} baseUrl={baseUrl} landingPageCheck={landingPageCheck}/>;
         case "faq_qa":
-          return <QuestionAnswer key={`QuestionAnswer_${keyVal}`} data={comp} landingPageCheck={landingPageCheck}/>;
+          return <QuestionAnswer key={`QuestionAnswer_${keyVal}`} data={comp} landingPageCheck={landingPageCheck} baseUrl={baseUrl}/>;
         case "default":
           return null;
       }
@@ -165,7 +168,8 @@ export default props => {
                   return( 
                     <div className={
                       item.layout_id == "full_width_content"
-                        ? "container"
+                        // ? "container"
+                        ? "col-12"
                         : 'col-' + colArr[item.layout_id]
                     }
                     key={`block__${i}${j}`}>