Merge pull request #64 from awaisdar001/misc-updates

feat: generate trip schedules on client side

README.md

@@ -13,6 +13,7 @@ The page will reload if you make edits.<br />
 You will also see any lint errors in the console.
 
 ### `npm stop`
+
 Stops the app in the development mode.<br />
 
 ### `npm run collect`
@@ -22,11 +23,12 @@ Builds the app for production and copies necessary files for django project in t
 
 ### `npm run collect-and-move`
 
-Builds & collect the static files and move them to specific django folders for reference. 
+Builds & collect the static files and move them to specific django folders for reference.
 
 ### `npm run cleanup`
 
 Removes the build folder.
+
 ### `npm run build`
 
 Builds the app for production to the `build` folder.<br />
@@ -43,7 +45,8 @@ Launches the test runner in the interactive watch mode.<br />
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
 ### `npm run coverage`
-Creates the tests coverage report. 
+
+Creates the tests coverage report.
 
 ### `npm run eject`
 
@@ -54,4 +57,3 @@ If you aren’t satisfied with the build tool and configuration choices, you can
 Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
 
 You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-

package.json

@@ -15,11 +15,11 @@
   },
   "dependencies": {
     "@date-io/moment": "1.3.13",
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-brands-svg-icons": "^5.13.0",
-    "@fortawesome/free-regular-svg-icons": "^5.14.0",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.11",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "0.1.15",
     "@material-ui/core": "4.12.3",
     "@material-ui/lab": "4.0.0-alpha.60",
     "@material-ui/pickers": "3.3.10",

src/common/FontAwsome.js

@@ -41,5 +41,6 @@ library.add(
   FA.faStarHalfAlt,
   FA.faUserFriends,
   FA.faIdCard,
-  FA.faSync
+  FA.faSync,
+  FA.faUserAlt
 );

src/common/withSidebar.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const withSidebar = (Component, title) => {
-  return function withSidebar() {
+  return (props) => {
     return (
       <aside className="sidebar">
         <div className="search-filter">
@@ -10,7 +10,7 @@ const withSidebar = (Component, title) => {
               <h4>{title}</h4>
             </div>
             <div className="filters-fields">
-              <Component/>
+              <Component {...props}/>
             </div>
           </form>
         </div>
@@ -20,3 +20,12 @@ const withSidebar = (Component, title) => {
 }
 
 export default withSidebar;
+
+
+export const withSidebar2 = fn => {
+  let counter = 0;
+  return (...args) => {
+    console.log(`Counter is ${++counter}`)
+    return fn(...args)
+  }
+}

src/static/styles/css/Trips.css

@@ -695,6 +695,7 @@
 }
 
 .timeline-with-label .item .cbp_tmlabel p {
+  white-space: pre-line;
   margin-top: 1rem;
   margin-bottom: 1rem;
 }

src/static/styles/scss/Trips.scss

@@ -694,6 +694,7 @@
         display: none;
       }
       p {
+        white-space: pre-line;
         margin-top: 1rem;
         margin-bottom: 1rem;
       }

src/static/styles/scss/_config.scss

@@ -13,6 +13,7 @@
 @mixin mxmargin($amount) {
   margin: $amount;
 }
+
 @mixin heading-small() {
   text-transform: none;
   font-size: 65%;

src/timeline/TimelineContent.jsx

@@ -6,16 +6,8 @@ import { fetchTimelineItems } from './data/thunks';
 import { FeedsPlaceholder, LoadingNewFeeds } from '../common';
 import TimelinePagination from './Pagination';
 import TimelineCards from './TimelineCards';
-import {
-  getSelectedFeedTypes,
-  getSelectedPros,
-} from './left-accordion/data/selectors';
-import {
-  getLoadingStatus,
-  getNextPage,
-  getPreviousPage,
-  getTimelineFeeds,
-} from './data/selectors';
+import { getSelectedFeedTypes, getSelectedPros, } from './left-accordion/data/selectors';
+import { getLoadingStatus, getNextPage, getPreviousPage, getTimelineFeeds, } from './data/selectors';
 
 const TimelineContent = () => {
   const observer = useRef();
@@ -45,7 +37,7 @@ const TimelineContent = () => {
         observer.current.observe(node);
       }
     },
-    [isLoading, selectedPros, selectedFeedTypes, nextPage.number],
+    [dispatch, isLoading, selectedPros, selectedFeedTypes, nextPage?.number],
   );
 
   return (

src/timeline/left-accordion/LeftAccordion.jsx

@@ -33,7 +33,7 @@ export default function DPAccordion() {
     } else {
       dispatch(fetchAndRestTimelineItems(selectedProvinces, selectedFeedTypes));
     }
-  }, [selectedProvinces, selectedFeedTypes]);
+  }, [dispatch, selectedProvinces, selectedFeedTypes]);
 
   const handleRestButtonClick = () => dispatch(restAllFilters());
 

src/timeline/timeline-card/types/question/Description.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Col } from 'react-bootstrap';
+import {Col} from 'react-bootstrap';
 
-export default ({ name, absUrl }) => {
+const Description = ({name, absUrl}) => {
   return (
     <Col md={12}>
       <h4>
@@ -11,3 +11,4 @@ export default ({ name, absUrl }) => {
   );
 };
 
+export default Description;

src/trips/TripCommon.jsx

@@ -1,5 +1,5 @@
 import Rating from '@material-ui/lab/Rating';
-import React, {useState} from 'react';
+import React, {useContext, useState} from 'react';
 import {Col} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
 import Humanize from "humanize-plus";
@@ -14,8 +14,8 @@ export function Title({className, name, url}) {
   );
 }
 
-export const TitlePrice = ({className, price}) => {
-  const formattedPrice = `Rs. ${Humanize.intComma(price)}`;
+export const TitlePrice = ({className, tripMinPrice}) => {
+  const formattedPrice = `Rs. ${Humanize.intComma(tripMinPrice)}`;
 
   return (
     <div className={'item-price ' + className}>
@@ -51,3 +51,19 @@ export const RatingPlugin = ({name, title, rating}) => {
     </Col>
   );
 };
+
+// Title.propTypes = {
+//   className: PropTypes.string,
+//   name: PropTypes.string.isRequired,
+//   url: PropTypes.string.isRequired,
+// };
+// TitlePrice.propTypes = {
+//   className: PropTypes.string,
+//   price: PropTypes.number.isRequired,
+// };
+//
+// RatingPlugin.protoTypes = {
+//   name: PropTypes.string.isRequired,
+//   title: PropTypes.string.isRequired,
+//   rating: PropTypes.number.isRequired,
+// };

src/trips/data/api.js

@@ -1,22 +1,19 @@
 import _ from 'lodash';
-import {
-  camelCaseObject,
-  DateFormats,
-  getDateFromMilliSec,
-  normalizeBySlug,
-  normalizeUser,
-  transformQueryString,
-} from '../../utils';
+import { camelCaseObject, DateUtils, normalizeBySlug, normalizeUser, transformQueryString, } from '../../utils';
 import { getAuthenticatedHttpClient } from '../../data/api';
+import moment from 'moment';
 
 export async function getTrip(slug) {
   const { data } = await getAuthenticatedHttpClient().get(`/api/trip/${slug}/`);
   return normalizeTripData(data);
 }
 
 const normalizeTripData = (trip) => {
-  return camelCaseObject({
-    trip: normalizeTrip(trip),
+  const tripData = {
+    trip: {
+      ...normalizeTrip(trip),
+      schedules: createTripSchedules(trip.trip_availability)
+    },
     categories: [
       ...trip.categories.map((category) => normalizeBySlug(category)),
       normalizeBySlug(trip.primary_category),
@@ -29,9 +26,34 @@ const normalizeTripData = (trip) => {
       normalizeBySlug(trip.destination),
       normalizeBySlug(trip.starting_location),
     ],
-  });
+  };
+  return camelCaseObject(tripData);
+
+
 };
 
+const createTripSchedules = ({ type, options }) => {
+  if (type === 'Daily') {
+    let newSchedules = []
+    const today = moment();
+    const scheduleFrom = DateUtils.getDateFromMilliSec(options['date_from'], false)
+    const scheduleTo = DateUtils.getDateFromMilliSec(options['date_to'], false)
+
+    const upcomingScheduleDays = today.diff(scheduleTo, 'days')
+
+    const schedulesAreInProgress = today.diff(scheduleFrom, 'days') > 0;
+    const hasUpcomingSchedules = upcomingScheduleDays < 0;
+
+    if (hasUpcomingSchedules && schedulesAreInProgress) {
+      // Array(-1) (of a negative number) would fail, that's why need to multiply the number with -1.
+      newSchedules = [...Array((upcomingScheduleDays * -1) + 2)].map((_, i) => {
+        return today.clone().add(i, 'days').format('YYYY-MM-DD');
+      })
+    }
+    return newSchedules;
+  }
+}
+
 /**
  * Fetches timeline items.
  * @returns {Promise<[{}]>}
@@ -78,52 +100,50 @@ const normalizeTripsListData = (data) => {
 const normalizeTrip = (trip) => ({
   ...trip,
   categories: trip.categories.map((category) => category.slug),
-  cancellation_policy: trip.cancellation_policy.split('\r\n'),
-  primary_category: trip.primary_category.slug,
+  cancellation_policy: trip.cancellation_policy,
+  primary_category: trip.primary_category?.slug,
   createdBy: trip.created_by.username,
   facilities: trip.facilities.map((facility) => facility.slug),
   host: trip.host.slug,
   locations: trip.locations.map((location) => location.slug),
-  destination: trip.destination.slug,
+  destination: trip.destination?.slug,
   starting_location: trip.starting_location?.slug,
-  gear: trip.gear.split('\r\n'),
-  minPrice: trip.trip_schedule.reduce((prev, curr) => (prev.price < curr.price ? prev : curr))
-    .price,
+  gear: trip.gear,
+  minPrice: trip.trip_availability.options.price,
 });
 
 const normalizeHost = (host) => {
   const tripHostRating = host.rating;
   const average = _.divide(tripHostRating.rating_count, tripHostRating.rated_by).toFixed(1);
-  const percent = _.multiply(_.toInteger(average), 20);
+  const percent = _.multiply(_.toInteger(average), 10);
   return {
     id: host.slug,
     ...host,
-    cancellation_policy: host.cancellation_policy.split('\r\n'),
+    cancellation_policy: host.cancellation_policy,
     rating: { ...host.rating, average, percent },
   };
 };
 
 const getTripsListURL = ({
-  searchDays,
-  searchDates,
-  searchPrices,
-  searchKeyword,
-  selectedDestinations,
-}) => {
+                           searchDays,
+                           searchDates,
+                           searchPrices,
+                           searchKeyword,
+                           selectedDestinations,
+                         }) => {
   const destinations = selectedDestinations.reduce(
     (acc, d) => `${acc.slug ? acc.slug : acc},${d.slug}`,
     '',
   );
-  const dateFormat = DateFormats.YearMonthDate;
   const queryString = transformQueryString([
     ['name', searchKeyword],
     ['destination', destinations],
     ['duration_from', searchDays[0]],
     ['duration_to', searchDays[1]],
     ['price_from', searchPrices[0]],
     ['price_to', searchPrices[1]],
-    ['date_from', getDateFromMilliSec(searchDates[0], dateFormat)],
-    ['date_to', getDateFromMilliSec(searchDates[1], dateFormat)],
+    ['date_from', DateUtils.getDateFromMilliSec(searchDates[0])],
+    ['date_to', DateUtils.getDateFromMilliSec(searchDates[1])],
   ]);
   return `/api/trips/?${queryString}`;
 };

src/trips/data/selectors.js

@@ -5,5 +5,4 @@ export const getTrips = (state) => state.trips.trips;
 export const getTripsMetaData = (state) => state.trips.tripsMeta;
 
 // export const searchTrip = (slug) => (state) => state.trips.trip;
-
-export const getTrip = (slug) => createSelector(getTrips, (trips) => trips.filter((trip) => trip.slug === slug));
+export const getLoadingStatus = (state) => state.trips.loadingStatus;

src/trips/trip-item/Highlights.jsx

@@ -5,12 +5,13 @@ import { useModel } from '../../generic/model-store';
 export default function TripHighlights({ trip }) {
   const tripCategory = useModel('category', trip.primaryCategory);
   const tripDestination = useModel('location', trip.destination);
+    const tripHost = useModel('host', trip.host);
 
   return (
     <Metadata
       className="mt-2"
       duration={trip.duration}
-      ageLimit={trip.ageLimit}
+      hostName={tripHost.name}
       category={tripCategory}
       destination={tripDestination}
     />