map_screen.js

import React from 'react'
import { StyleSheet, Text, TouchableOpacity } from 'react-native'
import { Card, CardItem } from 'native-base'
import { nest, compose, withPropsOnChange } from 'recompose'
import * as Animatable from 'react-native-animatable-unmountable'
import { FlatListWithError } from 'features/common'
import { withLocalFetch } from 'react-local-fetch'
import { H3, Loader } from 'ui'
import { colors } from 'ui/colors'
import { Distance } from './distance'


const initialState = { items: [], dictionaries: {} }

const listVacancyFetchCallback = ({ onFetchVacanciesByGeoHash }) => ({
  action: onFetchVacanciesByGeoHash,
  reducer: (state = initialState, action) => {
    switch (action.type) {
      case 'fetchAndSet': return action.payload
      case 'reset': return initialState
      default: return state
    }
  },
})

const enhance = compose(
  withLocalFetch('vacancies', listVacancyFetchCallback),
  withPropsOnChange(
    (prev, next) => prev.geohashPrefix !== next.geohashPrefix,
    ({ vacancies, geohashPrefix }) => {
      if (geohashPrefix) {
        vacancies.dispatch({ type: 'reset' })
        vacancies.fetch({
          type: 'fetchAndSet',
          geohashPrefix,
        })
      }
    },
  ),
)

const FadeInAndOut = ({ children, mounted, containerStyle }) => (
  <Animatable.View
    mounted={mounted}
    style={containerStyle}
    animation="slideInUp"
    duration={200}
    unmountAnimation="slideOutDown"
    unmountDuration={200}
    useNativeDriver
  >
    {children}
  </Animatable.View>
)

export const HorizontalVacancyListView = ({ onVacancyPress, vacancies }) => {
  const { data, status, error } = vacancies

  return (
    <FlatListWithError
      data={data.items}
      horizontal
      status={status}
      errorMessage={error && error.message}
      showsHorizontalScrollIndicator={false}
      ListEmptyComponent={() => (
        <Loader style={{ alignItems: 'center' }} />
      )}
      keyExtractor={({ id }) => String(id)}
      renderItem={({ item }) => (
        <Card style={styles.card} bordered={false}>
          <TouchableOpacity onPress={() => onVacancyPress()}>
            <CardItem style={styles.cardItem}>
              <H3 style={styles.h3}>{item.title}</H3>
              <Text style={styles.salary}>70 000 - 120 000 ₽ в месяц</Text>
              <Text style={styles.company}>{item.employer.title}</Text>
              <Distance
                style={{ marginTop: 16 }}
                distance={item.distance}
              />
            </CardItem>
          </TouchableOpacity>
        </Card>
      )}
    />
  )
}

export const HorizontalVacancyList = nest(FadeInAndOut, enhance(HorizontalVacancyListView))

const styles = StyleSheet.create({
  card: {
    width: 260,
    minHeight: 124,
    marginRight: 10,
    borderRadius: 4,
    zIndex: 9999,
    borderWidth: 0,
  },
  h3: { fontSize: 15, marginBottom: 8 },
  salary: { fontWeight: 'bold', fontSize: 13, marginBottom: 8, color: colors.black },
  company: { fontSize: 13, color: colors.silver10 },
  cardItem: {
    flexDirection: 'column',
    alignItems: 'flex-start',
    borderRadius: 4,
  },
})