3
\$\begingroup\$

I am developing an app which is somewhat similar to airbnb. There are two search function, one for searching apartment and other for searching car rental. When searching apartment, the result page shows the searched result along with some filtering options like filter from range of price and filter from various options like amenities, services. The result page of car rental is same as apartment result page. I mean car result shows the searched result regarding car that are available as rent and filtering categories.

Here is my reducer and actions for such feature

actions.js

export function showResultofCar(cityFrom, cityTo, date, paisFrom, paisTo) {
  return (dispatch) => {
    dispatch({ type: 'CAR_FETCH_START' });
    const token = localStorage.getItem('token');
    return axios.get(`${API_URL}/car/....`)
      .then((response) => {
        setTimeout(() => {
          dispatch({ type: 'CAR_FETCH_SUCCESS', payload: response.data });
        }, 1000);
      })
      .catch((err) => {
        dispatch({ type: 'CAR_FETCH_FAILURE', payload: err });
      });
  };
}


export function showResultofApartment(people, city, dateFrom, dateTo, pais) {
  console.log('people', people, city, dateFrom, dateTo, pais);
  return (dispatch) => {
    dispatch({ type: 'APARTMENT_FETCH_START' });
    const token = localStorage.getItem('token');
    return axios.get(`${API_URL}/apartment/...`)
    .then((response) => {
      console.log('response apart', response.data);
        dispatch({ type: 'APARTMENT_FETCH_SUCCESS', payload: response.data });
    })
    .catch((err) => {
      dispatch({ type: 'APARTMENT_FETCH_FAILURE', payload: err });
    });
  };
}

export function getFilteredResults(price) {
  console.log('price', price);
  return function (dispatch) {
    dispatch({ type: 'CAR_FETCH_WITH_FILTER', payload: price });
  };
}

export function getTimeFilteredResults(time) {
  console.log('time', time);
  return function (dispatch) {
    dispatch({ type: 'CAR_FETCH_WITH_TIME_FILTER', payload: time });
  };
}

export function sortCarByPrice(price) {
  console.log('price is', price);
  return function (dispatch) {
    dispatch({ type: 'SORT_CAR_BY_PRICE', payload: price });
  };
}

export function getApartmentFromPrice(price) {
  return function (dispatch) {
    dispatch({ type: 'APARTMENT_FILTER_BY_PRICE', payload: price });
  };
}

export function getApartmentFromCategories(filter) {
  return function (dispatch) {
    dispatch({ type: 'APARTMENT_FILTER_BY_CATEGORIES', payload: filter });
  };
}

reducers.js

let cars = [];
const initialState = {
  fetching: false,
  fetched: true,
  cars: [],
  error: null
};

function carFilterFromPrice(price) {
  return cars.filter(car => car.price > price.min && car.price < price.max);
}

function carFilterFromTime(time) {
  return cars.filter(function (car) {
    const departure = car.departure;
    const isValidDate = moment(departure).isValid();
    const departureWithDayandTime = isValidDate ?
      moment(departure).format('hh.mm') : '';
      return departureWithDayandTime > time.min && departureWithDayandTime < time.max;
  });
}

function carSortFromPrice(price) {
  return cars.sort((a, b) => {
    if (price === 'descending') {
      return parseFloat(a.price) - parseFloat(b.price);
    }
      return parseFloat(b.price) - parseFloat(a.price);
  });
}

export function getCarResult(state = initialState, action) {
  switch (action.type) {
    case 'CAR_FETCH_START':
      return { ...state, fetching: true };
    case 'CAR_FETCH_SUCCESS':
      cars = action.payload;
      return {
              ...state,
              fetched: true,
              fetching: false,
              cars: action.payload,
             };
    case 'CAR_FETCH_WITH_FILTER':
      return { ...state, fetched: true, fetching: false, cars: carFilterFromPrice(action.payload) };
    case 'CAR_FETCH_WITH_TIME_FILTER':
      return { ...state, fetched: true, fetching: false, cars: carFilterFromTime(action.payload) };
    case 'SORT_CAR_BY_PRICE':
      return { ...state, fetched: true, fetching: false, cars: carSortFromPrice(action.payload) };
    case 'CAR_FETCH_FAILURE':
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

let apartments = [];
const apartmentInitialState = {
  fetching: false,
  fetched: true,
  apartments: [],
  error: null
};

function apartmentFilterFromPrice(price) {
  return apartments.filter(apartment =>
    apartment.price > price.min && apartment.price < price.max
  );
}

function apartmentFilterFromCategory(filter) {
  console.log('filter', filter);
}

export function getApartmentResult(state = apartmentInitialState, action) {
  switch (action.type) {
    case 'APARTMENT_FETCH_START':
      console.log('action', action);
      return { ...state, fetching: true };
    case 'APARTMENT_FETCH_SUCCESS':
    apartments = action.payload;
    return { ...state, fetched: true, fetching: false, apartments: action.payload };
    case 'APARTMENT_FILTER_BY_PRICE':
      return { ...state,
              fetched: true,
              fetching: false,
              apartments: apartmentFilterFromPrice(action.payload)
            };
    case 'APARTMENT_FILTER_BY_CATEGORIES':
      return { ...state,
              fetched: true,
              fetching: false,
              apartments: apartmentFilterFromCategory(action.payload)
             };
    case 'APARTMENT_FETCH_FAILURE':
      return { ...state, error: action.payload };
    default:
      return state;
  }
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.