feat: impliment newlines in multiline data

In this PR, we resolve the css conflicts which would use css rules to show / render new lines. Implients a data normalization technique to convert new line chars `\n` to HTML elements `<br />` in the UI Layer. Adds env variable for limiting & showing trip introduction on the the trips list. Adds a new util method `toBr` for conversion. refactor: streamline docs for env files.
awaisdar001 · Oct 14, 2021 · 4c62b9b · 4c62b9b
1 parent 93608eb
commit 4c62b9b
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 53 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,3 @@
+REACT_APP_BASE_URL=''
+REACT_APP_GOOGLE_API_URL=''
+REACT_APP_LIMIT_TRIP_INTRO_TO_CHAR=500
diff --git a/.env.production b/.env.production
@@ -1,3 +1,4 @@
 NODE_ENV='production'
 REACT_APP_BASE_URL='http://www.destinationpak.com'
 REACT_APP_GOOGLE_API_URL=''
+REACT_APP_LIMIT_TRIP_INTRO_TO_CHARS=600
diff --git a/.env.test b/.env.test
@@ -1,3 +1,4 @@
 NODE_ENV='test'
 BASE_URL='http://localhost:8003'
 REACT_APP_GOOGLE_API_URL=''
+REACT_APP_LIMIT_TRIP_INTRO_TO_CHARS=600
diff --git a/src/static/styles/css/Trips.css b/src/static/styles/css/Trips.css
@@ -695,7 +695,6 @@
 }
 
 .timeline-with-label .item .cbp_tmlabel p {
-  white-space: pre-line;
   margin-top: 1rem;
   margin-bottom: 1rem;
 }

diff --git a/src/static/styles/scss/Trips.scss b/src/static/styles/scss/Trips.scss
@@ -540,7 +540,7 @@
   @extend .input-with-icon-default;
   text-transform: capitalize;
   &:focus {
-    color: #303030;
+    color: $theme-black;
   }
   &:-moz-placeholder {
     color: inherit;
@@ -556,7 +556,7 @@
 .input-with-icon input[type="email"] {
   @extend .input-with-icon-default;
   &:focus {
-    color: #303030;
+    color: $theme-black;
   }
   &:-moz-placeholder {
     color: inherit;
@@ -572,7 +572,7 @@
 .input-with-icon input[type="password"] {
   @extend .input-with-icon-default;
   &:focus {
-    color: #303030;
+    color: $theme-black;
   }
   &:-moz-placeholder {
     color: inherit;
@@ -588,7 +588,7 @@
 .input-with-icon input[type="number"] {
   @extend .input-with-icon-default;
   &:focus {
-    color: #303030;
+    color: $theme-black;
   }
   &:-moz-placeholder {
     color: inherit;
@@ -608,7 +608,7 @@
 
   @extend .input-with-icon-default;
   &:focus {
-    color: #303030;
+    color: $theme-black;
   }
   &:-moz-placeholder {
     color: inherit;
@@ -694,7 +694,6 @@
         display: none;
       }
       p {
-        white-space: pre-line;
         margin-top: 1rem;
         margin-bottom: 1rem;
       }
@@ -739,7 +738,7 @@
       margin-right: 9px;
       font-size: 15px;
       line-height: 1.667em;
-      color: #303030;
+      color: $theme-black;
       font-weight: 700;
     }
     .rating-wrapper {

diff --git a/src/static/styles/scss/_config.scss b/src/static/styles/scss/_config.scss
@@ -44,6 +44,7 @@ $background-grey: #f3f3f3;
 $border-color: #ddd;
 $text-color: #555;
 $theme-gray: #515151;
+$theme-black: #303030;
 $footer-color: #272727;
 $theme-green: #7ed12d;
 $theme-green-d1: #72c02c;

diff --git a/src/static/styles/scss/_custom.scss b/src/static/styles/scss/_custom.scss
@@ -1673,7 +1673,7 @@ textarea.theme-textarea {
   transition: border-color 175ms cubic-bezier(0.18, 0.43, 0.58, 1);
 
   &:focus {
-    color: #303030;
+    color: $theme-black;
     border-color: #808285;
   }
 }

diff --git a/src/trips/data/api.js b/src/trips/data/api.js
@@ -6,8 +6,10 @@ import {
   camelCaseObject,
   DateUtils,
   getRatingFeedback,
-  normalizeBySlug, normalizeLocation,
+  normalizeBySlug,
+  normalizeLocation,
   normalizeUser,
+  toBr,
   transformQueryString,
 } from '../../utils';
 
@@ -68,7 +70,7 @@ const createTripSchedules = ({ type, options }) => {
 };
 
 /**
- * Fetches timeline items.
+ * Fetches trip list items.
  * @returns {Promise<[{}]>}
  */
 export async function getTripItems(options) {
@@ -98,36 +100,48 @@ const normalizeTripsListData = (data) => {
   const normalizedData = {
     items: data.results.map((trip) => normalizeTrip(trip)),
     categories: [].concat(...categories, primaryCategories),
-    users: users,
     facilities: [].concat(...facilities),
-    hosts,
     locations: [].concat(locations, startingLocations, destinations),
+    hosts,
     metaData: {
       current: data.current,
       pages: data.pages,
       next: data.next,
       previous: data.previous,
       total: data.count,
     },
+    users: users,
   };
+
   return camelCaseObject(normalizedData);
 };
 
 const normalizeTrip = (trip) => ({
   ...trip,
   categories: trip.categories.map((category) => category.slug),
   cancellation_policy: trip.cancellation_policy,
-  primary_category: trip.primary_category?.slug,
   createdBy: trip.created_by.username,
+  destination: trip.destination?.slug,
+  description: toBr(trip.description),
+  introduction: _.truncate(trip.description, {
+    length: process.env.REACT_APP_LIMIT_TRIP_INTRO_TO_CHAR,
+    separator: '.',
+    omission: '. [...]',
+  }),
   facilities: trip.facilities.map((facility) => facility.slug),
+  gear: trip.gear,
   host: trip.host.slug,
   locations: trip.locations.map((location) => location.slug),
-  destination: trip.destination?.slug,
-  starting_location: trip.starting_location?.slug,
-  gear: trip.gear,
   minPrice: trip.trip_availability.price,
+  primary_category: trip.primary_category?.slug,
+  starting_location: trip.starting_location?.slug,
+  trip_itinerary: trip.trip_itinerary.map((day) => ({
+    ...day,
+    description: toBr(day.description),
+  })),
 });
 
+
 const normalizeHost = (host) => {
   const tripHostRating = host.rating;
 

diff --git a/src/trips/trip-item/TourPlan.jsx b/src/trips/trip-item/TourPlan.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
-const TripItem = ({ day, setHeading }) => {
+import { createMarkup, NewLineToBr, toBr } from '../../utils';
+
+const TripItinerary = ({ day, setHeading }) => {
   const { heading, description } = day;
   return (
     <div className="item">
@@ -20,22 +22,19 @@ const TripItem = ({ day, setHeading }) => {
 
       <div className="cbp_tmlabel">
         {setHeading && <h2>{heading}</h2>}
-        {/*<p dangerouslySetInnerHTML={createMarkup(day.description)} />*/}
-
-        <p>{description}</p>
+        <p dangerouslySetInnerHTML={createMarkup(description)} />
       </div>
     </div>
-  )
-}
-
+  );
+};
 
 function TourPlan({ tripItinerary }) {
   return (
     <div id="tour-plan" className="wrapper-block">
       <h3 className="h3">Tour Plan</h3>
       <div id="plan-timeline" className="timeline-with-label">
         {tripItinerary.map((day, idx) => (
-          <TripItem key={`plan-${idx}`} day={day} setHeading={false} />
+          <TripItinerary key={`plan-${idx}`} day={day} setHeading={false} />
         ))}
       </div>
     </div>

diff --git a/src/trips/trip-item/TripItem.jsx b/src/trips/trip-item/TripItem.jsx
@@ -2,11 +2,11 @@ import React, {useEffect} from 'react';
 import {Col, Container, Row} from 'react-bootstrap';
 import {useDispatch, useSelector} from 'react-redux';
 
-import {NewLineToBr} from '../../utils';
-import {TripItemPlaceholder} from '../Placeholders';
-import {Title, TitlePrice} from '../TripCommon';
+import { createMarkup, NewLineToBr, toBr } from '../../utils';
+import { TripItemPlaceholder } from '../Placeholders';
+import { Title, TitlePrice } from '../TripCommon';
 import BookingSideBar from './booking-sidebar';
-import {fetchTrip} from './data/thunks';
+import { fetchTrip } from './data/thunks';
 import {
   CancellationPolicy,
   Carousel,
@@ -17,9 +17,9 @@ import {
   TripHighlights,
   TripHost,
 } from './index';
-import {TripDetails} from './trip-details';
+import { TripDetails } from './trip-details';
 
-export default function TripItem({slug}) {
+export default function TripItem({ slug }) {
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -30,7 +30,7 @@ export default function TripItem({slug}) {
   const trip = useSelector((state) => state.tripItem.trip);
 
   if (isLoading) {
-    return <TripItemPlaceholder/>;
+    return <TripItemPlaceholder />;
   }
   const tripLocations = {
     destination: trip.destination,
@@ -53,31 +53,38 @@ export default function TripItem({slug}) {
 
   return (
     <div className="dp-trips">
-      <Carousel/>
+      <Carousel />
       <Container fluid>
-        <TripHeader/>
+        <TripHeader />
         <div className="trip-wrapper">
           <Row>
             <Col lg={9}>
               <div className="item-detail">
-                <Title className="float-left" name={trip.name} url="#"/>
-                <TitlePrice className={'float-right'} tripMinPrice={trip.minPrice}/>
-                <TripHighlights trip={tripHighlights}/>
-                <hr/>
+                <Title className="float-left" name={trip.name} url="#" />
+                <TitlePrice className={'float-right'} tripMinPrice={trip.minPrice} />
+                <TripHighlights trip={tripHighlights} />
+                <hr />
                 <div className="item-description">
-                  <NewLineToBr>{trip.description}</NewLineToBr>
+                  <p dangerouslySetInnerHTML={createMarkup(trip.description)} />
                 </div>
-                <TripDetails trip={tripDetail}/>
-                <TourPlan tripItinerary={trip.tripItinerary}/>
-                <GoogleLocation trip={tripLocations}/>
-                <CancellationPolicy cancellationPolicy={trip.cancellationPolicy}/>
-                <TripHost host={trip.host}/>
-                <PostComment/>
+
+                <TripDetails trip={tripDetail} />
+                <TourPlan tripItinerary={trip.tripItinerary} />
+                <GoogleLocation trip={tripLocations} />
+                <CancellationPolicy cancellationPolicy={trip.cancellationPolicy} />
+                <TripHost host={trip.host} />
+                <PostComment />
               </div>
             </Col>
             <Col lg={3}>
-              <BookingSideBar tripDates={trip.schedules}/>
-              <a href={trip.metadata.url} className="btn btn-success btn-block btn-lg" target='_blank'>
+              <BookingSideBar tripDates={trip.schedules} />
+              {/*TODO: delete it when we release.*/}
+              <a
+                href={trip.metadata.url}
+                className="btn btn-success btn-block btn-lg"
+                target="_blank"
+                rel="noreferrer"
+              >
                 Go to trip details
               </a>
             </Col>

diff --git a/src/trips/trips-list/content/TripCard.jsx b/src/trips/trips-list/content/TripCard.jsx
@@ -60,13 +60,11 @@ const TripCard = ({trip}) => {
             </div>
           </div>
           <div className="item-detail">
-            <Title name={trip.name} url={tripUrl}/>
-            <TitlePrice tripMinPrice={trip.minPrice}/>
-            <div className="item-description">
-              <TripDescription/>
-            </div>
+            <Title name={trip.name} url={tripUrl} />
+            <TitlePrice tripMinPrice={trip.minPrice} />
+            <div className="item-description">{trip.introduction}</div>
 
-            <ReadOnlyRating rating={hostRating.value} ratedBy={hostRating.ratedBy}/>
+            <ReadOnlyRating rating={hostRating.value} ratedBy={hostRating.ratedBy} />
 
             <Metadata
               className="mt-4"

diff --git a/src/utils.js b/src/utils.js
@@ -75,6 +75,14 @@ export function snakeCaseObject(object) {
 export const getDateFromMilliSec = (number, format = DateFormats.DayMonth) =>
   moment(number).format(format);
 
+/*
+* Convert all returns into HTML line break elements.
+* @param data{str} object
+*/
+  export const toBr = (data) => {
+    return data.replace(/(?:\r\n|\r|\n)/g, '<br />');
+};
+
 export const NewLineToBr = ({ children = '' }) => {
   return children.split('\n').reduce((arr, line, index) => {
     const addP = <p key={index}>{line}</p>;