重构过滤和搜索结果

时间:2017-01-08 01:52:40

标签: javascript reactjs ecmascript-6 redux react-redux

我正在开发一个类似于airbnb的应用程序。有两个搜索功能,一个用于搜索公寓,另一个用于搜索汽车租赁。搜索公寓时,结果页面会显示搜索结果以及一些过滤选项,例如从价格范围过滤,并从各种选项(如设施,服务)中过滤。汽车租赁的结果页面与公寓结果页面相同。我的意思是汽车结果显示有关汽车的搜索结果,可以作为租金和过滤类别。

这是我的减速机和此功能的动作。这是一个有效的代码。我试图以最好的方式编码它,尽可能地训练我的编码技巧。我想得到其他专家程序员的帮助,我怎样才能更好地重构这些代码?

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;
  }
}

0 个答案:

没有答案