bukazu-portal-react 2.1.21 → 3.0.3

package/src/components/SearchPage/Field.js

@@ -1,241 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import DatePicker from 'react-date-picker';
-import includes from 'array-includes'
-import List from './filters/List';
-import { format } from 'date-fns'
-
-
-class Field extends Component {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
-    this.handlePropertyChange = this.handlePropertyChange.bind(this);
-    this.handleDateChange = this.handleDateChange.bind(this);
-  }
-
-  handleChange(event) {
-    this.props.onFilterChange(this.props.field.id, event.target.value);
-  }
-
-  handleCheckboxChange(event) {
-    this.props.onFilterChange(this.props.field.id, event);
-  }
-
-  createNumberArray(max_number) {
-    return Array.apply(null, { length: max_number + 1 }).map(
-      Number.call,
-      Number
-    );
-  }
-
-  createPriceArray(max_price) {
-    let rounded = Math.ceil(max_price / 100);
-    return Array.from({ length: rounded }, (v, k) => k * 100);
-  }
-
-  handleDateChange(date) {
-    if (date) {
-      this.props.onFilterChange(this.props.field.id, format(date, 'YYYY-MM-DD'));
-    } else {
-      this.props.onFilterChange(this.props.field.id, '');
-    }
-  }
-
-  handlePropertyChange(event) {
-    const value = Number(event.target.value);
-
-    let properties = this.props.filters.properties || [];
-    if (includes(properties, value)) {
-      let index = properties.indexOf(value);
-      properties.splice(index, 1);
-    } else {
-      properties.push(value);
-    }
-    this.props.onFilterChange('properties', properties);
-  }
-
-  render() {
-    const { PortalSite, field, filters, value } = this.props;
-
-    let options = [];
-    if (includes(['countries', 'cities', 'regions'], field.id)) {
-      options = PortalSite[field.id];
-    } else if (field.id === 'persons_min' || field.id === 'persons_max') {
-      options = this.createNumberArray(PortalSite.max_persons);
-    } else if (field.id === 'bedrooms_min') {
-      options = this.createNumberArray(PortalSite.max_bedrooms);
-    } else if (field.id === 'bathrooms_min') {
-      options = this.createNumberArray(PortalSite.max_bathrooms);
-    } else if (field.id === 'weekprice_max') {
-      options = this.createPriceArray(PortalSite.max_weekprice);
-    } else {
-      options = this.createNumberArray(PortalSite[field.id]);
-    }
-    let input;
-    const countries = filters.countries ;
-    const regions = Array.isArray(filters.regions)
-      ? filters.regions
-      : [filters.regions];
-    const properties = this.props.filters.properties || [];
-
-    if (field.id === 'properties') {
-      let requiredCategories = PortalSite.options.filtersForm.categories;
-      input = [];
-      PortalSite.categories.map(category => {
-        if (includes(requiredCategories, 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}>
-                      <input
-                        type="checkbox"
-                        id={property.id}
-                        value={property.id}
-                        checked={includes(properties, property.id)}
-                        onChange={this.handlePropertyChange}
-                      />
-                      {property.name}
-                    </label>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          );
-        }
-      });
-    } else if (field.type === 'select') {
-      console.log({ countries });
-      if (options && includes(['countries', 'cities', 'regions'], field.id)) {
-        input = (
-          <select
-            name={field.id}
-            onBlur={this.handleChange}
-            onChange={this.handleChange}
-            value={value}
-          >
-            <option value="" />
-            {options.map(opt => {
-              let hidden = false;
-              if (includes(['cities', 'regions'], field.id)) {
-                if (countries && !includes(countries, opt.country_id)) {
-                  hidden = true;
-                }
-                if (field.id === 'cities') {
-                  if (regions && !includes(regions, opt.region)) {
-                    hidden = true;
-                  }
-                }
-              }
-
-              return (
-                <option
-                  key={opt.id}
-                  value={opt.id}
-                  id={opt.region}
-                  disabled={hidden}
-                  hidden={hidden}
-                >
-                  {opt.name}
-                </option>
-              );
-            })}
-          </select>
-        );
-      } else {
-        input = (
-          <select
-            name={field.id}
-            onBlur={this.handleChange}
-            onChange={this.handleChange}
-            value={value}
-          >
-            <option value="" />
-            {options.map(opt => {
-              let hidden = false;
-
-              return (
-                <option key={opt} value={opt} disabled={hidden} hidden={hidden}>
-                  {opt}
-                </option>
-              );
-            })}
-          </select>
-        );
-      }
-    } else if (field.type === 'list') {
-      input = <List countries={countries} field={field} options={options} handleCheckboxChange={this.handleCheckboxChange} value={value} />
-    } else if (field.type === 'radio') {
-      input = (
-        <ul className="radioList">
-          {options.map(opt => (
-            <li
-            key={opt.id || opt}
-            className={`bu-list-item ${countries && !includes(countries, opt.country_id) ? 'bu-disabled' : ''}`}
-            >
-              <input
-                name={field.id}
-                type="radio"
-                id={opt.id || opt}
-                value={opt.id || opt}
-                disabled={
-                  countries ? !includes(countries, opt.country_id) : false
-                }
-                // checked={value === opt.id || opt}
-                onBlur={this.handleChange}
-                onChange={this.handleChange}
-              />
-              <label htmlFor={opt.id || opt}>{opt.name || opt}</label>
-            </li>
-          ))}
-        </ul>
-      );
-    } else if (field.type === 'number') {
-      input = (
-        <input
-          value={value}
-          type="number"
-          min="0"
-          max={
-            field.id === 'persons_min'
-              ? PortalSite.max_persons
-              : PortalSite[field.id]
-          }
-          onBlur={this.handleChange}
-        />
-      );
-    } else if (field.type === 'date') {
-      let tempval;
-      if (value === '' || !value) {
-        tempval = null;
-      } else {
-        tempval = new Date(value);
-      }
-      input = (
-        <DatePicker 
-          id={field.id}
-          onChange={this.handleDateChange}
-          value={tempval}
-          format='dd-MM-y'
-        />
-      );
-    } else {
-      input = <input value={value} onBlur={this.handleChange} />;
-    }
-    return input;
-  }
-}
-
-Field.propTypes = {
-  field: PropTypes.object.isRequired,
-  PortalSite: PropTypes.object.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  filters: PropTypes.object.isRequired,
-  onFilterChange: PropTypes.func.isRequired,
-};
-
-export default Field;

package/src/components/SearchPage/Filters.js

@@ -1,108 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Field from './Field';
-import Reload from '../icons/Reload.svg';
-import { FormattedMessage } from 'react-intl';
-
-class Filters extends Component {
-  constructor(props) {
-    super(props);
-    this.saveFilters = this.saveFilters.bind(this);
-    this.toggle = this.toggle.bind(this);
-    this.state = {
-      show: false,
-    };
-  }
-
-  saveFilters(field, input) {
-    let newFilters = this.props.filters;
-    newFilters[field] = input;
-    this.props.onFilterChange(newFilters);
-  }
-
-  toggle() {
-    const { show } = this.state;
-    let newShow = !show;
-    this.setState({
-      show: newShow,
-    });
-  }
-
-  render() {
-    const { PortalSite, filters, options } = this.props;
-    const searchFields = PortalSite.options.searchFields || [
-      {
-        label: 'Land',
-        id: 'countries',
-        type: 'select',
-        required: false,
-        mandatory: true,
-        options: ['select', 'list', 'radio', 'text'],
-      },
-    ];
-    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 show = this.state.show && 'showOnMobile';
-
-    return (
-      <React.Fragment>
-        <button className={`filters-button ${fixed}`} onClick={this.toggle}>
-          <FormattedMessage id="filters" />
-        </button>
-        <div className={`${filterClass} ${fixed} ${show}`}>
-          <button
-            onClick={() => {
-              let filters = {};
-              for (var property in this.props.filters) {
-                filters[property] = '';
-              }
-              this.props.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={this.saveFilters}
-              />
-            </div>
-          ))}
-        </div>
-      </React.Fragment>
-    );
-  }
-}
-
-Filters.propTypes = {
-  PortalSite: PropTypes.object.isRequired,
-  filters: PropTypes.object.isRequired,
-  options: PropTypes.object.isRequired,
-  onFilterChange: PropTypes.func.isRequired,
-};
-
-export default Filters;

package/src/components/SearchPage/Paginator.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import { Query } from '@apollo/client/react/components';
-import Pagination from 'react-js-pagination';
-import { FormattedMessage } from 'react-intl';
-import PropTypes from 'prop-types';
-// import { Container } from './Pagination.css';
-import { HOUSE_COUNT_QUERY } from '../../_lib/SearchQueries';
-import Loading from '../icons/loading.svg';
-
-function Paginator({ onPageChange, variables, activePage, limit }) { 
-  return (
-    <Query query={HOUSE_COUNT_QUERY} variables={variables}>
-      {({ loading, error, data }) => {
-        if (loading)
-          return (
-            <div
-              style={{
-                width: '100%',
-                display: 'flex',
-                justifyContent: 'center',
-              }}
-            >
-              <Loading />
-            </div>
-          );
-        if (error) {
-          return <div>Error</div>;
-        };
-
-        const results = data.PortalSite.houses;
-        return (
-          <div className="bu-paginator">
-            <div>
-              {results.length} <FormattedMessage id="results" />
-            </div>
-            <Pagination
-              activePage={activePage}
-              itemsCountPerPage={limit}
-              totalItemsCount={results.length}
-              pageRangeDisplayed={5}
-              onChange={e => { onPageChange(e) }}
-              innerClass="bu-pagination"
-            />
-          </div>
-        );
-      }}
-    </Query>
-  );
-}
-
-
-Paginator.propTypes = {
-  activePage: PropTypes.number.isRequired,
-  limit: PropTypes.number.isRequired,
-  onPageChange: PropTypes.func.isRequired,
-  variables: PropTypes.object.isRequired,
-};
-
-export default Paginator;

package/src/components/SearchPage/Results.js

@@ -1,130 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Query } from '@apollo/client/react/components';
-import { FormattedMessage } from 'react-intl';
-import differenceInCalendarDays from 'date-fns/difference_in_calendar_days';
-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';
-
-function Results({
-  filters,
-  PortalSite,
-  limit,
-  skip,
-  locale,
-  onPageChange,
-  activePage,
-}) {
-  let min_nights = null;
-  let requestPrices = false
-  if (filters.departure_date && filters.arrival_date) {
-    min_nights = differenceInCalendarDays(
-      filters.departure_date,
-      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: PortalSite.portal_code,
-    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,
-    locale,
-  };
-
-  return (
-    <Query query={requestPrices ? HOUSES_PRICE_QUERY : HOUSES_QUERY} variables={variables}>
-      {({ loading, error, data }) => {
-        if (loading)
-          return (
-            <div>
-              <Loading />
-            </div>
-          );
-        if (error) {
-          return (
-            <div>
-              <ApiError errors={error}></ApiError>
-            </div>
-          );
-        }
-
-        const Results = data.PortalSite.houses;
-
-        return (
-          <div
-            id="results"
-            className={
-              PortalSite.options.filtersForm
-                ? PortalSite.options.filtersForm.mode
-                : null
-            }
-          >
-            <Paginator
-              variables={variables}
-              activePage={activePage}
-              limit={limit}
-              onPageChange={onPageChange}
-            />{' '}
-            {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}
-              />
-            ))}
-            <Paginator
-              variables={variables}
-              activePage={activePage}
-              limit={limit}
-              onPageChange={onPageChange}
-            />
-          </div>
-        );
-      }}
-    </Query>
-  );
-}
-
-Results.propTypes = {
-  PortalSite: PropTypes.object.isRequired,
-  filters: PropTypes.object.isRequired,
-  activePage: PropTypes.number.isRequired,
-  locale: PropTypes.string.isRequired,
-  limit: PropTypes.number.isRequired,
-  skip: PropTypes.number.isRequired,
-  onPageChange: PropTypes.func.isRequired,
-};
-
-export default Results;

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

@@ -1,63 +0,0 @@
-import React from 'react'
-import includes from 'array-includes'
-
-export default function List({ countries, field, options, handleCheckboxChange, value }) {
-  const updateList = (e) => {
-    if (value === e.target.value) {
-      handleCheckboxChange(null)
-    } else {
-      handleCheckboxChange(e.target.value)
-
-    }
-  }
-
-  if (includes(['cities', 'regions'], field.id)) {
-
-    return (
-      <ul className="radioList">
-      {options.map(opt => (
-        <li
-        key={opt.id}
-        className={`bu-list-item ${countries && !includes(countries, opt.country_id) ? 'bu-disabled' : 'bu-open'}`}
-        >
-          <input
-            name={field.id}
-            type="checkbox"
-            id={opt.id}
-            value={opt.id}
-            disabled={
-              countries ? !includes(countries, opt.country_id) : false
-            }
-            checked={value === opt.id}
-            onBlur={handleCheckboxChange}
-            onChange={handleCheckboxChange}
-            />
-          <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={handleCheckboxChange}
-            onChange={updateList}
-            />
-          <label htmlFor={opt.id}>{opt.name}</label>
-        </li>
-      ))}
-    </ul>
-  );
-  }
-}

package/src/components/icons/ArrowLeft.svg.js

@@ -1,18 +0,0 @@
-import React from 'react';
-
-const ArrowRight = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    version="1.1"
-    x="0px"
-    y="0px"
-    viewBox="0 0 100 125"
-    style={{ enableBackground: 'new 0 0 100 100' }}
-    xmlSpace="preserve"
-  >
-    <path d="M2.4,44.1l32.9-32.9c3.1-3.1,8.2-3.1,11.4,0c1.6,1.6,2.4,3.6,2.4,5.7c0,2.1-0.8,4.1-2.4,5.7L27.2,42h64.7  c2.2,0,4.2,0.9,5.7,2.4c1.5,1.5,2.4,3.5,2.4,5.7c0,4.4-3.6,8.1-8.1,8.1H27.4l19.3,19.3c1.6,1.6,2.4,3.6,2.4,5.7s-0.8,4.1-2.4,5.7  c-3.1,3.1-8.3,3.1-11.4,0L2.4,55.9C0.8,54.3,0,52.3,0,50.2c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2C0,47.7,0.8,45.7,2.4,44.1z" />
-  </svg>
-);
-
-export default ArrowRight;

package/src/index.js

@@ -1,74 +0,0 @@
-import React from "react";
-import App from "./components/App";
-import { IntlProvider } from "react-intl";
-// import registerServiceWorker from './registerServiceWorker';
-
-import {
-  ApolloClient,
-  InMemoryCache,
-  ApolloProvider,
-} from "@apollo/client";
-
-
-import en from "./locales/en.json";
-import nl from "./locales/nl.json";
-import de from "./locales/de.json";
-import fr from "./locales/fr.json";
-import es from "./locales/es.json";
-import it from "./locales/it.json";
-
-import "./styles/main.css";
-import { IntegrationError } from "./components/Error";
-
-function Portal({ portalCode, objectCode, pageType, locale, filters, api_url } ) { 
-  const errors = IntegrationError({ portalCode, pageType, locale, filters })
-  if (errors) {
-    return errors
-  }  
-
-  if (!locale) {
-    locale = 'en'
-  }
-  
-  const client = new ApolloClient({
-    uri: api_url,
-    cache: new InMemoryCache(),
-    headers: {
-      locale,
-    },
-    defaultOptions: {
-      watchQuery: {
-        fetchPolicy: "cache-and-network",
-      },
-    },
-  });
-
-  const messages = { en, nl, de, fr, es, it };
-
-
-
-  window.__localeId__ = locale;
-
-
-
-  return (
-    <ApolloProvider client={client}>
-      <IntlProvider locale={locale} messages={messages[locale]}>
-        <App
-          portalCode={portalCode}
-          objectCode={objectCode}
-          pageType={pageType}
-          locale={locale}
-          filters={filters}
-        />
-      </IntlProvider>
-    </ApolloProvider>
-  );
-}
-
-Portal.defaultProps = {
-  pageType: null,
-  api_url: "https://api.bukazu.com/graphql"
-};
-
-export default Portal;