bukazu-portal-react 3.3.3 → 3.3.4

package/src/components/SearchPage/Field.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import List from './filters/List';
-import { createNumberArray, createPriceArray } from './filters/helper';
-import Select from './filters/Select';
-import Categories from './filters/Categories';
-import Radio from './filters/Radio';
-import DateFilter from './filters/DateFilter';
-import NumberFilter from './filters/NumberFilter';
-import { PortalSiteType } from '../../types';
-import { Field as FieldType, FiltersType } from './filters/filter_types';
-
-interface Props {
-  PortalSite: PortalSiteType;
-  field: FieldType;
-  filters: FiltersType;
-  value: string;
-  onFilterChange: Function;
-}
-
-function Field({ PortalSite, field, filters, value, onFilterChange }:Props):JSX.Element {
-  let options = [];
-  if (['countries', 'cities', 'regions'].includes(field.id)) {
-    options = PortalSite[field.id];
-  } else if (field.id === 'persons_min' || field.id === 'persons_max') {
-    options = createNumberArray(PortalSite.max_persons);
-  } else if (field.id === 'bedrooms_min') {
-    options = createNumberArray(PortalSite.max_bedrooms);
-  } else if (field.id === 'bathrooms_min') {
-    options = createNumberArray(PortalSite.max_bathrooms);
-  } else if (field.id === 'weekprice_max') {
-    options = createPriceArray(PortalSite.max_weekprice);
-  } else {
-    options = createNumberArray(PortalSite[field.id]);
-  }
-
-  let default_settings = {
-    options,
-    field,
-    filters,
-    value
-  };
-
-  if (field.id === 'properties') {
-    return (
-      <Categories
-        PortalSite={PortalSite}
-        filters={filters}
-        onChange={onFilterChange}
-      />
-    );
-  } else if (field.type === 'select') {
-    return <Select {...default_settings} onChange={onFilterChange} />;
-  } else if (field.type === 'list') {
-    return <List {...default_settings} onChange={onFilterChange} />;
-  } else if (field.type === 'radio') {
-    return <Radio {...default_settings} onChange={onFilterChange} />;
-  } else if (field.type === 'number') {
-    return (
-      <NumberFilter PortalSite={PortalSite} field={field} value={value} onChange={onFilterChange} />
-    );
-  } else if (field.type === 'date') {
-    return <DateFilter field={field} value={value} onChange={onFilterChange} />;
-  } else {
-    return (
-      <input
-        value={value}
-        onBlur={(event) => {
-          onFilterChange(field.id, event.target.value);
-        }}
-      />
-    );
-  }
-}
-
-export default Field;

package/src/components/SearchPage/Filters.tsx

@@ -1,91 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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.tsx

@@ -1,115 +0,0 @@
-import React, { Component } from 'react';
-import Filters from './Filters';
-import Results from './Results';
-import { PortalOptions, PortalSiteType } from '../../types';
-import { FiltersType } from './filters/filter_types';
-import { TrackEvent } from '../../_lib/Tracking';
-
-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 || {},
-      activePage: 1,
-      limit,
-      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');
-
-    if (filters) {
-      this.setState({
-        filters: JSON.parse(filters)
-      });
-    }
-    if (activePage) {
-      this.pageChange(parseInt(activePage) || 0);
-    }
-  }
-
-  onFilterChange(data: FiltersType) {
-    let filters = data;
-    this.setState({
-      filters
-    });
-
-    localStorage.setItem('bukazuFilters', JSON.stringify(filters));
-    this.pageChange(0);
-  }
-
-  pageChange(pageNumber: number) {
-    const { limit } = this.state;
-    let newSkip = pageNumber * limit;
-
-    localStorage.setItem('bukazuActivePage', pageNumber.toString());
-    this.setState({
-      activePage: pageNumber,
-      skip: newSkip
-    });
-  }
-
-  render() {
-    const { filters, activePage, limit, skip } = this.state;
-    const { options, PortalSite, locale } = this.props;
-
-    TrackEvent({
-      portal_code: PortalSite.portal_code,
-      interaction_type: 'search_view',
-      locale: locale
-    });
-
-    return (
-      <div
-        id="search-page"
-        className={
-          options.filtersForm
-            ? options.filtersForm.location === 'right'
-              ? 'bu-reverse'
-              : options.filtersForm.location === 'top'
-              ? 'bu-column'
-              : ''
-            : ''
-        }
-      >
-        <Filters
-          PortalSite={PortalSite}
-          filters={filters}
-          onFilterChange={this.onFilterChange}
-          options={options}
-        />
-        <Results
-          PortalSite={PortalSite}
-          filters={filters}
-          activePage={activePage}
-          onPageChange={this.pageChange}
-          skip={skip}
-          limit={limit}
-        />
-      </div>
-    );
-  }
-}
-
-export default SearchPage;

package/src/components/SearchPage/SingleResult.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import { FormattedMessage, FormattedNumber } from 'react-intl';
-import { FiltersFormType, HouseType } from '../../types';
-import ArrowRight from '../icons/ArrowRight.svg';
-
-interface Props {
-  result: HouseType;
-  options: FiltersFormType;
-}
-
-function SingleResult({ result, options }: Props): JSX.Element {
-  let thisOptions = options || {};
-
-  return (
-    <a className="bukazu-result bu_card" href={result.house_url}>
-      <div className="bukazu-result-inner">
-        <div className="image-holder">
-          <img src={result.image_url} alt={result.name} />
-        </div>
-        <div className="result">
-          <div className="result-title">{result.name}</div>
-          <div className="result-place">
-            {thisOptions.showCity && <span>{result.city}, </span>}
-            {thisOptions.showRegion && <span>{result.province}, </span>}
-            {thisOptions.showCountry && <span>{result.country_name}</span>}
-          </div>
-          <div
-            className="result-description"
-            dangerouslySetInnerHTML={{ __html: result.description }}
-          />
-          <div className="result-details">
-            {thisOptions.showPersons && (
-              <div>
-                {result.persons} <FormattedMessage id="persons" />
-              </div>
-            )}
-            {thisOptions.showBedrooms && (
-              <div>
-                {result.bedrooms} <FormattedMessage id="bedrooms" />
-              </div>
-            )}
-            {thisOptions.showBathrooms && (
-              <div>
-                {result.bathrooms} <FormattedMessage id="bathrooms" />
-              </div>
-            )}
-          </div>
-          {thisOptions.showRating && result.rating && (
-            <div className="result-rating bu_card">
-              <div className="result-rating-inner">
-                {result.rating.toFixed(1)}
-              </div>
-            </div>
-          )}
-          {thisOptions.showPrice && (
-            <div className="result-price">
-              {result.booking_price ? (
-                <>
-                  <FormattedMessage id="price_from" />
-                  <span className="price">
-                    €{' '}
-                    <FormattedNumber
-                      value={result.booking_price.total_price}
-                      minimumFractionDigits={0}
-                      maximumFractionDigits={0}
-                    />
-                  </span>
-                </>
-              ) : (
-                <>
-                  <FormattedMessage id="minimum_week_price" />
-                  <span className="price">
-                    €{' '}
-                    <FormattedNumber
-                      value={result.minimum_week_price}
-                      minimumFractionDigits={0}
-                      maximumFractionDigits={0}
-                    />
-                  </span>
-                </>
-              )}
-            </div>
-          )}
-          <div className="result-button">
-            <FormattedMessage id="view_details" />
-          </div>
-        </div>
-      </div>
-    </a>
-  );
-}
-
-export default SingleResult;

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

@@ -1,57 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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;