buyer-matching/index.js

import React, { useState, useEffect, useCallback } from 'react';
import { Form } from 'react-final-form';
import { useQuery, useMutation } from 'react-apollo';
import { get, isEmpty } from 'lodash';
import Toast from 'components/toast';
import ProgressButton from '@leadhome/oucl/ProgressButton';
import FormSubscription from 'services/form-manager/form-subscription';
import { TabListLoader } from 'components/list-loader';
import { Container } from './style';
import BuyerMatchingForm from './components/form';
import BUYER_MATCHING_PATCH_MUTATION from './BUYER_MATCHING_PATCH_MUTATION.graphql';
import BUYER_MATCHING_LISTING_RESULTS from './BUYER_MATCHING_LISTING_RESULTS.graphql';
import BUYER_MATCHING_PROFILE_QUERY from './BUYER_MATCHING_PROFILE_QUERY.graphql';
import { bathroomOptionsMap } from './utils';

function BuyerMatchingProfile({ id }) {
  const [initialValues, setInitialValues] = useState(null);
  const [showErrorModal, setShowErrorModal] = useState(false);
  const [errorText, setErrorText] = useState(false);
  const [searchQuery, setSearchQuery] = useState({});

  const clearError = useCallback(() => {
    setShowErrorModal(false);
  }, [setShowErrorModal]);

  const { data: buyerMatchingProfileData, loading, error } = useQuery(
    BUYER_MATCHING_PROFILE_QUERY,
    {
      variables: {
        id
      }
    }
  );

  const {
    data: buyerMatchingListingResults,
    loading: searching,
    error: searchError
  } = useQuery(BUYER_MATCHING_LISTING_RESULTS, {
    variables: {
      id,
      query: searchQuery
    },
    skip: !id || isEmpty(searchQuery)
  });

  const buyerMatchingProfile = get(
    buyerMatchingProfileData,
    'person.byId.buyerProfile',
    {}
  );
  const buyerMatchingListings = get(
    buyerMatchingListingResults,
    'listing.matchingBuyerProfile.results',
    []
  );

  useEffect(() => {
    if (!initialValues && !isEmpty(buyerMatchingProfile))
      setInitialValues(buyerMatchingProfile);
  }, [setInitialValues, initialValues, buyerMatchingProfile]);

  useEffect(() => {
    if (error || searchError) {
      if (error)
        setErrorText(
          'Failed to load buyer matching profile. Please reload the page top try again'
        );
      if (searchError)
        setErrorText('Failed to load search results. Please try again');
      setShowErrorModal(true);
      setTimeout(() => {
        clearError();
      }, 5000);
    }
  }, [searchError, error, clearError, setShowErrorModal, setErrorText]);

  const [saveBuyerMatchingProfile, { loading: saving }] = useMutation(
    BUYER_MATCHING_PATCH_MUTATION,
    {
      onError: () => {
        setErrorText('Failed to save buyer matching profile. Please try again');
        setShowErrorModal(true);
        setTimeout(() => {
          clearError();
        }, 5000);
      },
      onCompleted: data => {
        const buyerMatchingProfile = get(
          data,
          'person.byId.buyerProfile.patch',
          {}
        );

        const {
          personId,
          sendListingAlerts,
          listingTypes,
          townIds,
          suburbIds,
          priceMin,
          priceMax,
          propertyTypes,
          numberOfFloors,
          unitFloor,
          floorSize,
          unitSize,
          landSize,
          minBaths,
          minLivingAreas,
          minBeds,
          maxBeds,
          minUncoveredParking,
          minCoveredParking,
          minStudies,
          mustBeFixerUpper,
          petsAllowed,
          internetTypes,
          includePrivateAmenityIds,
          excludePrivateAmenityIds,
          includeCommunalAmenityIds,
          excludeCommunalAmenityIds,
          minParking
        } = buyerMatchingProfile;
        setSearchQuery({
          personId,
          sendListingAlerts,
          listingTypes,
          townIds,
          suburbIds,
          priceMin,
          priceMax,
          propertyTypes,
          numberOfFloors,
          unitFloor,
          floorSize,
          unitSize,
          landSize,
          minBaths,
          minLivingAreas,
          minBeds,
          maxBeds,
          minUncoveredParking,
          minCoveredParking,
          minStudies,
          mustBeFixerUpper,
          petsAllowed,
          internetTypes,
          includePrivateAmenityIds,
          excludePrivateAmenityIds,
          includeCommunalAmenityIds,
          excludeCommunalAmenityIds,
          minParking
        });
      }
    }
  );

  const onSave = useCallback(
    ({
      personId,
      sendListingAlerts,
      listingTypes,
      townIds,
      suburbIds,
      priceMin,
      priceMax,
      propertyTypes,
      numberOfFloors,
      unitFloor,
      floorSize,
      unitSize,
      landSize,
      minBaths,
      minLivingAreas,
      minBeds,
      maxBeds,
      minUncoveredParking,
      minCoveredParking,
      minStudies,
      mustBeFixerUpper,
      petsAllowed,
      internetTypes,
      includePrivateAmenityIds,
      excludePrivateAmenityIds,
      includeCommunalAmenityIds,
      excludeCommunalAmenityIds,
      minParking
    }) => {
      saveBuyerMatchingProfile({
        variables: {
          id,
          buyerProfile: {
            personId,
            sendListingAlerts,
            listingTypes,
            townIds,
            suburbIds,
            priceMin,
            priceMax,
            propertyTypes,
            numberOfFloors,
            unitFloor,
            floorSize,
            unitSize,
            landSize,
            minBaths: bathroomOptionsMap[minBaths],
            minLivingAreas,
            minBeds,
            maxBeds,
            minUncoveredParking,
            minCoveredParking,
            minStudies,
            mustBeFixerUpper,
            petsAllowed,
            internetTypes,
            includePrivateAmenityIds,
            excludePrivateAmenityIds,
            includeCommunalAmenityIds,
            excludeCommunalAmenityIds,
            minParking
          }
        }
      });
    },
    [saveBuyerMatchingProfile, id]
  );

  return (
    <Container>
      {loading ? (
        <TabListLoader />
      ) : (
        <Form onSubmit={onSave} initialValues={initialValues}>
          {({ handleSubmit, form, formId }) => (
            <>
              <form onSubmit={handleSubmit}>
                <FormSubscription form={form} id={formId} />
                <BuyerMatchingForm />
                <ProgressButton loading={saving || searching}>
                  Save and search
                </ProgressButton>
              </form>
              {searching
                ? 'Loading search results...'
                : `Number of results: ${buyerMatchingListings.length}`}
            </>
          )}
        </Form>
      )}
      <Toast
        isOpen={showErrorModal}
        message={errorText}
        type='fail'
        onClose={clearError}
      />
    </Container>
  );
}

export default BuyerMatchingProfile;