bukazu-portal-react 2.1.21 → 3.0.3

package/src/components/SearchPage/Filters.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import Field from './Field';
+import Reload from '../icons/Reload.svg';
+import { FormattedMessage } from 'react-intl';
+import { defaultFilter } from './filters/helper';
+import { FiltersType } from './filters/filter_types';
+import { PortalOptions, PortalSiteType } from '../../types';
+
+interface Props {
+  filters: FiltersType;
+  onFilterChange: Function;
+  PortalSite: PortalSiteType;
+  options: PortalOptions;
+}
+
+function Filters({
+  filters,
+  onFilterChange,
+  PortalSite,
+  options
+}: Props): JSX.Element {
+  function saveFilters(field, input) {
+    let newFilters: any = filters;
+    newFilters[field] = input;
+    onFilterChange(newFilters);
+  }
+
+  const [show, setShow] = useState(false);
+
+  const searchFields = options.searchFields || defaultFilter;
+  let fixed = options.filtersForm
+    ? options.filtersForm.fixedMobile
+      ? 'fixed-mobile'
+      : null
+    : null;
+
+  let filterClass = options.filtersForm
+    ? options.filtersForm.show
+      ? `filters filters-${options.filtersForm.location}`
+      : 'filters-hidden'
+    : 'filters';
+
+  let showOn = show && 'showOnMobile';
+
+  return (
+    <>
+      <button
+        className={`filters-button ${fixed}`}
+        onClick={() => setShow(!show)}
+      >
+        <FormattedMessage id="filters" />
+      </button>
+      <div className={`${filterClass} ${fixed} ${showOn}`}>
+        <button
+          onClick={() => {
+            let filters = {};
+            for (var property in filters) {
+              filters[property] = '';
+            }
+            onFilterChange(filters);
+          }}
+          className="filters-reload"
+        >
+          <Reload />
+        </button>
+        {searchFields.map((field) => (
+          <div key={field.id} className="bu-field" id={field.id}>
+            <label
+              style={{
+                width: '100%',
+                display: 'block'
+              }}
+              htmlFor={field.id}
+            >
+              {PortalSite[`${field.id}_label`]}
+            </label>
+            <Field
+              field={field}
+              PortalSite={PortalSite}
+              filters={filters}
+              value={filters[field.id]}
+              onFilterChange={saveFilters}
+            />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default Filters;

package/src/components/SearchPage/Paginator.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { HOUSE_COUNT_QUERY } from '../../_lib/SearchQueries';
+import Loading from '../icons/loading.svg';
+import ReactPaginate from 'react-paginate';
+import { useQuery } from '@apollo/client';
+
+interface Props {
+  onPageChange: Function;
+  variables: object;
+  activePage: number;
+  limit: number;
+}
+
+function Paginator({
+  onPageChange,
+  variables,
+  activePage,
+  limit
+}: Props): JSX.Element {
+  const { loading, error, data } = useQuery(HOUSE_COUNT_QUERY, { variables });
+
+  if (loading)
+    return (
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center'
+        }}
+      >
+        <Loading />
+      </div>
+    );
+  if (error) {
+    return <div>Error</div>;
+  }
+
+  const results = data.PortalSite.houses;
+
+  const pageCount = Math.ceil(results.length / limit);
+  return (
+    <div className="bu-paginator">
+      <div>
+        {results.length} <FormattedMessage id="results" />
+      </div>
+      <ReactPaginate
+        pageCount={pageCount}
+        onPageChange={({ selected }) => {
+          onPageChange(selected);
+        }}
+        forcePage={activePage}
+        pageRangeDisplayed={5}
+        breakLabel="..."
+        className="bu-pagination"
+        nextLabel=">"
+        previousLabel="<"
+      />
+    </div>
+  );
+}
+
+export default Paginator;

package/src/components/SearchPage/Results.tsx

@@ -0,0 +1,129 @@
+import React, { useContext } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { differenceInCalendarDays } from 'date-fns';
+import Loading from '../icons/loading.svg';
+import SingleResult from './SingleResult';
+import Paginator from './Paginator';
+
+import { HOUSES_PRICE_QUERY, HOUSES_QUERY } from '../../_lib/SearchQueries';
+import { ApiError } from '../Error';
+import { useQuery } from '@apollo/client';
+import { FiltersType } from './filters/filter_types';
+import { Parse_EN_US } from '../../_lib/date_helper';
+import { AppContext } from '../AppContext';
+import { HouseType, PortalSiteType } from '../../types';
+
+interface Props {
+  filters: FiltersType;
+  PortalSite: PortalSiteType;
+  limit: number;
+  skip: number;
+  onPageChange: Function;
+  activePage: number;
+}
+
+function Results({
+  filters,
+  PortalSite,
+  limit,
+  skip,
+  onPageChange,
+  activePage
+}: Props): JSX.Element {
+  const { portalCode } = useContext(AppContext);
+
+  let min_nights = null;
+  let requestPrices = false;
+  if (filters.departure_date && filters.arrival_date) {
+    min_nights = differenceInCalendarDays(
+      Parse_EN_US(filters.departure_date),
+      Parse_EN_US(filters.arrival_date)
+    );
+    requestPrices = true;
+  } else if (filters.arrival_date) {
+    min_nights = 1;
+  }
+  let filterProperties = filters.properties || [];
+  filterProperties = filterProperties.map((e) => {
+    return JSON.stringify(e);
+  });
+
+  let properties = filterProperties.join(',');
+
+  let variables = {
+    id: portalCode,
+    country_id: filters.countries || null,
+    region_id: filters.regions || null,
+    city_id: filters.cities,
+    persons_min: Number(filters.persons_min) || null,
+    persons_max: Number(filters.persons_max) || null,
+    bedrooms_min: Number(filters.bedrooms_min),
+    bathrooms_min: Number(filters.bathrooms_min),
+    arrival_date: filters.arrival_date,
+    starts_at: filters.arrival_date,
+    ends_at: filters.departure_date,
+    no_nights: Number(min_nights) || null,
+    extra_search: filters.extra_search,
+    properties,
+    weekprice_max: Number(filters.weekprice_max) || null,
+    limit,
+    skip
+  };
+
+  const { loading, error, data } = useQuery(
+    requestPrices ? HOUSES_PRICE_QUERY : HOUSES_QUERY,
+    { variables }
+  );
+
+  if (loading)
+    return (
+      <div>
+        <Loading />
+      </div>
+    );
+  if (error) {
+    return (
+      <div>
+        <ApiError errors={error}></ApiError>
+      </div>
+    );
+  }
+
+  const Pagination = (
+    <Paginator
+      variables={variables}
+      activePage={activePage}
+      limit={limit}
+      onPageChange={onPageChange}
+    />
+  );
+  const Results: HouseType[] = data.PortalSite.houses;
+
+  return (
+    <div
+      id="results"
+      className={
+        PortalSite.options.filtersForm
+          ? PortalSite.options.filtersForm.mode
+          : ''
+      }
+    >
+      {Pagination}
+      {Results.length === 0 ? (
+        <div className="bu-noresults">
+          <FormattedMessage id="no_results" />
+        </div>
+      ) : null}
+      {Results.map((result) => (
+        <SingleResult
+          key={result.id}
+          result={result}
+          options={PortalSite.options.filtersForm}
+        />
+      ))}
+      {Pagination}
+    </div>
+  );
+}
+
+export default Results;

package/src/components/SearchPage/{SearchPage.js → SearchPage.tsx}

@@ -1,58 +1,77 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import Filters from './Filters';
 import Results from './Results';
+import { PortalOptions, PortalSiteType } from '../../types';
+import { FiltersType } from './filters/filter_types';
 
-class SearchPage extends Component {
-  constructor(props) {
+type MyProps = {
+  options: PortalOptions;
+  filters?: FiltersType;
+  PortalSite: PortalSiteType;
+  locale: string;
+};
+
+type MyState = {
+  filters: FiltersType;
+  activePage: number;
+  limit: number;
+  skip: number;
+};
+
+class SearchPage extends Component<MyProps, MyState> {
+  constructor(props: MyProps) {
     super(props);
     let limit = this.props.options.filtersForm
       ? Number(this.props.options.filtersForm.no_results)
       : 20;
     this.state = {
-      filters: this.props.filters,
+      filters: this.props.filters || {},
       activePage: 1,
       limit,
-      skip: 0,
+      skip: 0
     };
     this.onFilterChange = this.onFilterChange.bind(this);
     this.pageChange = this.pageChange.bind(this);
   }
 
   componentDidMount() {
-    let filters = localStorage.getItem('bukazuFilters')
-    let activePage = localStorage.getItem('bukazuActivePage')
+    let filters = localStorage.getItem('bukazuFilters');
+    let activePage = localStorage.getItem('bukazuActivePage');
 
-    this.setState({
-      filters: JSON.parse(filters) || this.props.filters,
-    });
-    this.pageChange(activePage || 1)
+    if (filters) {
+      this.setState({
+        filters: JSON.parse(filters)
+      });
+    }
+    if (activePage) {
+      this.pageChange(parseInt(activePage) || 0);
+    }
   }
 
-  onFilterChange(data) {
+  onFilterChange(data: FiltersType) {
     let filters = data;
     this.setState({
-      filters,
+      filters
     });
 
     localStorage.setItem('bukazuFilters', JSON.stringify(filters));
-    this.pageChange(1);
+    this.pageChange(0);
   }
 
-  pageChange(pageNumber) {
+  pageChange(pageNumber: number) {
     const { limit } = this.state;
-    let newSkip = pageNumber * limit - limit;
+    let newSkip = pageNumber * limit;
 
-    localStorage.setItem('bukazuActivePage', pageNumber)
+    localStorage.setItem('bukazuActivePage', pageNumber.toString());
     this.setState({
       activePage: pageNumber,
-      skip: newSkip,
+      skip: newSkip
     });
   }
 
   render() {
     const { filters, activePage, limit, skip } = this.state;
-    const { options, locale } = this.props;
+    const { options, PortalSite } = this.props;
 
     return (
       <div
@@ -63,21 +82,20 @@ class SearchPage extends Component {
               ? 'bu-reverse'
               : options.filtersForm.location === 'top'
               ? 'bu-column'
-              : null
-            : null
+              : ''
+            : ''
         }
       >
         <Filters
-          PortalSite={this.props.PortalSite}
+          PortalSite={PortalSite}
           filters={filters}
           onFilterChange={this.onFilterChange}
           options={options}
         />
         <Results
-          PortalSite={this.props.PortalSite}
+          PortalSite={PortalSite}
           filters={filters}
           activePage={activePage}
-          locale={locale}
           onPageChange={this.pageChange}
           skip={skip}
           limit={limit}
@@ -87,11 +105,4 @@ class SearchPage extends Component {
   }
 }
 
-SearchPage.propTypes = {
-  PortalSite: PropTypes.object.isRequired,
-  options: PropTypes.object.isRequired,
-  locale: PropTypes.string.isRequired,
-  filters: PropTypes.object.isRequired,
-};
-
 export default SearchPage;

package/src/components/SearchPage/{SingleResult.js → SingleResult.tsx}

@@ -1,9 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
+import { FiltersFormType, HouseType } from '../../types';
 import ArrowRight from '../icons/ArrowRight.svg';
 
-function SingleResult({ result, options }) {
+interface Props {
+  result: HouseType;
+  options: FiltersFormType;
+}
+
+function SingleResult({ result, options }: Props): JSX.Element {
   let thisOptions = options || {};
 
   return (
@@ -40,11 +45,18 @@ function SingleResult({ result, options }) {
               </div>
             )}
           </div>
+          {thisOptions.showRating && result.rating && (
+            <div className="result-rating">
+              <div className="result-rating-inner">
+                {result.rating.toFixed(1)}
+              </div>
+            </div>
+          )}
           {thisOptions.showPrice && (
             <div className="result-price">
               {result.booking_price ? (
                 <>
-                <FormattedMessage id="price_from" />
+                  <FormattedMessage id="price_from" />
                   <span className="price">
                     €{' '}
                     <FormattedNumber
@@ -78,9 +90,4 @@ function SingleResult({ result, options }) {
   );
 }
 
-SingleResult.propTypes = {
-  result: PropTypes.object.isRequired,
-  options: PropTypes.object.isRequired,
-};
-
 export default SingleResult;

package/src/components/SearchPage/filters/Categories.tsx

@@ -0,0 +1,57 @@
+import React, { SyntheticEvent } from 'react';
+import { PortalSiteType } from '../../../types';
+import { FiltersType } from './filter_types';
+
+interface Props {
+  PortalSite: PortalSiteType;
+  filters: FiltersType;
+  onChange: Function;
+}
+
+function Categories({ PortalSite, filters, onChange }: Props): JSX.Element[] {
+  const properties = filters.properties || [];
+  let requiredCategories = PortalSite.options.filtersForm.categories;
+  let input: JSX.Element[] = [];
+
+  const handleChange = (event: SyntheticEvent<any>) => {
+    const value = Number(event.currentTarget.value);
+
+    if (properties.includes(value)) {
+      let index = properties.indexOf(value);
+      properties.splice(index, 1);
+    } else {
+      properties.push(value);
+    }
+    onChange('properties', properties);
+  };
+
+  PortalSite.categories.map((category) => {
+    if (requiredCategories.includes(category.id)) {
+      input.push(
+        <div className="bu-properties" key={category.id}>
+          <strong>{category.name}</strong>
+          <ul>
+            {category.properties.map((property) => (
+              <li key={property.id}>
+                <label htmlFor={property.id.toString()}>
+                  <input
+                    type="checkbox"
+                    id={property.id.toString()}
+                    value={property.id}
+                    checked={properties.includes(property.id)}
+                    onChange={handleChange}
+                  />
+                  {property.name}
+                </label>
+              </li>
+            ))}
+          </ul>
+        </div>
+      );
+    }
+  });
+
+  return input;
+}
+
+export default Categories;

package/src/components/SearchPage/filters/DateFilter.tsx

@@ -0,0 +1,34 @@
+import { format } from 'date-fns';
+import React from 'react';
+import DatePicker from 'react-date-picker';
+import { Field } from './filter_types';
+
+interface Props {
+  value: any;
+  onChange: Function;
+  field: Field;
+}
+
+function DateFilter({ value, onChange, field }: Props): JSX.Element {
+  let tempval;
+  if (value === '' || !value) {
+    tempval = null;
+  } else {
+    tempval = new Date(value);
+  }
+  return (
+    <DatePicker
+      onChange={(date: Date) => {
+        if (date) {
+          onChange(field.id, format(date, 'yyyy-MM-dd'));
+        } else {
+          onChange(field.id, '');
+        }
+      }}
+      value={tempval}
+      format="dd-MM-y"
+    />
+  );
+}
+
+export default DateFilter;

package/src/components/SearchPage/filters/List.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Field, FiltersType, OptionsType } from './filter_types';
+
+interface Props {
+  field: Field;
+  options: OptionsType[];
+  filters: FiltersType;
+  value: string;
+  onChange: Function;
+}
+
+export default function List({
+  filters,
+  field,
+  options,
+  onChange,
+  value
+}: Props): JSX.Element {
+  const countries = filters.countries;
+
+  const updateList = (e: { target: { value: string } }) => {
+    if (value === e.target.value) {
+      handleChange(null);
+    } else {
+      handleChange(e.target.value);
+    }
+  };
+
+  const handleChange = ( value: string ) => {
+    onChange(field.id, value)
+  }
+
+  if (['cities', 'regions'].includes(field.id)) {
+    return (
+      <ul className="radioList">
+        {options.map((opt) => (
+          <li
+            key={opt.id}
+            className={`bu-list-item ${
+              countries && !countries.includes(opt.country_id)
+                ? 'bu-disabled'
+                : 'bu-open'
+            }`}
+          >
+            <input
+              name={field.id}
+              type="checkbox"
+              id={opt.id}
+              value={opt.id}
+              disabled={countries ? !countries.includes(opt.country_id) : false}
+              checked={value === opt.id}
+              onBlur={handleChange}
+              onChange={handleChange}
+            />
+            <label htmlFor={opt.id}>{opt.name}</label>
+          </li>
+        ))}
+      </ul>
+    );
+  } else {
+    return (
+      <ul className="radioList">
+        {options.map((opt) => (
+          <li key={opt.id} className={`bu-list-item bu-open`}>
+            <input
+              name={field.id}
+              type="checkbox"
+              id={opt.id}
+              value={opt.id}
+              checked={value === opt.id}
+              onBlur={handleChange}
+              onChange={updateList}
+            />
+            <label htmlFor={opt.id}>{opt.name}</label>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+}

package/src/components/SearchPage/filters/NumberFilter.tsx

@@ -0,0 +1,37 @@
+import React, { SyntheticEvent } from 'react';
+import { PortalSiteType } from '../../../types';
+import { Field } from './filter_types';
+
+interface Props {
+  PortalSite: PortalSiteType;
+  field: Field;
+  value: string;
+  onChange: Function;
+}
+
+function NumberFilter({
+  PortalSite,
+  field,
+  value,
+  onChange
+}: Props): JSX.Element {
+  const handleChange = (event: SyntheticEvent<any>) => {
+    onChange(field.id, event.currentTarget.value);
+  };
+
+  return (
+    <input
+      value={value}
+      type="number"
+      min="0"
+      max={
+        field.id === 'persons_min'
+          ? PortalSite.max_persons
+          : PortalSite[field.id]
+      }
+      onBlur={handleChange}
+    />
+  );
+}
+
+export default NumberFilter