Application Beta

App/components/FCDetail/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Alert, Button, Image, Text, View } from 'react-native'
 
-import { AppStyles, AppColors, AppFontStyle } from 'App/theme'
+import { AppColors, AppFontStyle, AppStyles, AppType } from 'App/theme'
 
 const _onBuy = car => (
   Alert.alert(
@@ -24,31 +24,39 @@ export const FCDetail = ({ car }) => (
         source={{ uri: car.img }} />
       <View style={AppStyles.detail.imageOverlay}>
         <View style={[
-          AppFontStyle.descriptionContainer,
+          AppStyles.detail.headerContainer,
           {backgroundColor: AppColors.cloud},
           {marginBottom: 4}
         ]}>
           <Text style={AppFontStyle.h1}>{car.name.toUpperCase()}</Text>
         </View>
         <View style={[
-          AppFontStyle.descriptionContainer,
+          AppStyles.detail.headerContainer,
           car.availability ? {backgroundColor: 'green'} : {backgroundColor: 'darkred'}
         ]}>
-          <Text style={[AppFontStyle.description, {color: AppColors.steel}]}>{car.available}</Text>
+          <Text style={[AppFontStyle.description, { color: AppColors.steel }]}>
+            {car.available}
+          </Text>
         </View>
       </View>
     </View>
-    <View style={{ flex: 1, backgroundColor: AppColors.frost, padding: 20 }}>
-      <Text style={[AppFontStyle.normal, {color: AppColors.coal, paddingBottom: 10}]}>Make: {car.make}</Text>
-      <Text style={[AppFontStyle.normal, {color: AppColors.coal, paddingBottom: 10}]}>Model: {car.model}</Text>
-      <Text style={[AppFontStyle.normal, {color: AppColors.coal, paddingBottom: 10}]}>Year: {car.year}</Text>
+    <View style={AppStyles.detail.metaContainer}>
+      <Text style={AppStyles.detail.meta}>
+        Make: <Text style={{fontFamily: AppType.bold}}>{car.make.toUpperCase()}</Text>
+      </Text>
+      <Text style={AppStyles.detail.meta}>
+        Model: <Text style={{fontFamily: AppType.bold}}>{car.model.toUpperCase()}</Text>
+      </Text>
+      <Text style={AppStyles.detail.meta}>
+        Year: <Text style={{fontFamily: AppType.bold}}>{car.year}</Text>
+      </Text>
     </View>
     {car.availability && (
-      <View style={{ flex: 1, backgroundColor: AppColors.silver }}>
+      <View style={AppStyles.detail.buyButton}>
         <Button
           onPress={_onBuy}
           title="Buy Now"
-          color="#841584" />
+          color={AppColors.success} />
       </View>
     )}
   </View>

App/components/FCList/index.js

@@ -2,16 +2,15 @@ import React, { PureComponent } from 'react'
 import { FlatList, View, Text } from 'react-native'
 
 import { FCListItem } from 'App/components/FCListItem'
-
 import { AppStyles } from 'App/theme'
 
 export class FCList extends PureComponent {
   _keyExtractor = car => `car-${car.id}`
 
   _onEndReached = () => {
-    if (!this.canAction) return;
+    if (!this.canAction) return
     this.props.getMoreCars()
-  };
+  }
 
   _renderCar = car => (
     <FCListItem

App/components/FCListItem/index.js

@@ -5,15 +5,25 @@ import {
   TouchableOpacity,
   View
 } from 'react-native'
+import Icon from 'react-native-vector-icons/Ionicons'
 
 import { AppColors, AppStyles } from 'App/theme'
+import { AppFontSize } from 'App/theme/fonts'
 
 export class FCListItem extends PureComponent {
   _onPress = () => {
     const { car: { item }, onCarSelect } = this.props
     onCarSelect(item.id)
   }
 
+  _renderIcon = (iconName) => (
+    <Icon
+      color={AppColors.coal}
+      name={`ios-${iconName}`}
+      size={AppFontSize.medium}
+      style={AppStyles.itemIcon} />
+  )
+
   render() {
     const { car: { item } } = this.props
     return (
@@ -25,11 +35,27 @@ export class FCListItem extends PureComponent {
           <Image style={AppStyles.list.itemImage} source={{ uri: item.img }}  />
           <View style={AppStyles.list.itemContent}>
             <Text style={AppStyles.list.title}>
-              {item.name} ({item.year})
-            </Text>
-            <Text style={AppStyles.list.meta}>
-              {item.make} {item.model} | {item.available}
+              {item.name.toUpperCase()}
+              {' '}
+              <Text style={{fontSize: AppFontSize.small}}>({item.available})</Text>
             </Text>
+            <View style={AppStyles.list.metaContainer}>
+              <Text style={AppStyles.list.meta}>
+                {this._renderIcon('car')}
+                {' '}
+                {item.model}
+              </Text>
+              <Text style={AppStyles.list.meta}>
+                {this._renderIcon('build')}
+                {' '}
+                {item.make}
+              </Text>
+              <Text style={AppStyles.list.meta}>
+                {this._renderIcon('calendar')}
+                {' '}
+                {item.year}
+              </Text>
+            </View>
           </View>
         </View>
       </TouchableOpacity>

App/containers/FCCarDetail/index.js

@@ -1,9 +1,8 @@
-import React, { PureComponent } from 'react';
-import { View } from 'react-native';
+import React, { PureComponent } from 'react'
+import { View } from 'react-native'
 import { connect } from 'react-redux'
 
 import { FCDetail } from 'App/components'
-
 import { AppStyles } from 'App/theme'
 
 class FCCarDetail extends PureComponent {

App/containers/FCCarList/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment, PureComponent } from 'react';
+import React, { Fragment, PureComponent } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 

App/store/actionCreators.js

@@ -2,8 +2,6 @@ import { createAction } from 'redux-actions'
 
 import * as actions from './actions'
 
-// Actions
-export const ping = createAction(actions.PING)
 export const loading = createAction(actions.LOADING)
 
 export const getCars = createAction(actions.GET_CARS)

App/store/actions.js

@@ -1,5 +1,4 @@
 // Actions Constant
-export const PING = 'ping'
 export const LOADING = 'app: loading'
 
 export const GET_CARS = 'app: get cars'

App/store/index.js

@@ -17,12 +17,11 @@ const composeEnhancers =
   typeof window === 'object' &&
   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
-    // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
-  }) : compose;
+  }) : compose
 
 const enhancer = composeEnhancers(
   applyMiddleware(...middleware),
-);
+)
 
 const store = createStore(
   reducer,

App/store/reducers.js

@@ -3,11 +3,11 @@ import { handleActions } from 'redux-actions'
 import * as actions from './actions'
 
 const initialState = {
-  loading: false,
-  currentLoadedCars: [],
   cars: [],
-  selectedCar: null,
+  currentLoadedCars: [],
+  loading: false,
   resultPage: 1,
+  selectedCar: null,
 }
 
 const rootReducer = handleActions(
@@ -43,10 +43,7 @@ const rootReducer = handleActions(
             return state.defaultCarOrder
         }
       })
-      return {
-        ...state,
-        cars
-      }
+      return { ...state, cars }
     },
 
     [actions.GET_AVAILABILITIES_SUCCESS]: (state, action) => {

App/store/sagas.js

@@ -5,7 +5,7 @@ import {
   takeLatest
 } from 'redux-saga/effects'
 
-import * as api from "App/api";
+import * as api from "App/api"
 
 import {
   getAvailabilities,
@@ -14,7 +14,7 @@ import {
   getCarsFailed,
   getCarsSuccess,
   loading,
-} from './actionCreators';
+} from './actionCreators'
 import * as actions from './actions'
 
 function* fetchCars(action) {

App/theme/colors.js

@@ -1,23 +1,12 @@
 export const AppColors = {
   darkBlue: '#00386F',
-  blue: '#0052A2',
-  clear: 'rgba(0,0,0,0)',
   transparent: 'rgba(0,0,0,0)',
   silver: '#F7F7F7',
   steel: '#CCCCCC',
-  error: 'rgba(200, 0, 0, 0.8)',
-  ricePaper: 'rgba(255,255,255, 0.75)',
-  frost: '#D8D8D8',
+  frost: '#E7E7E7',
   cloud: 'rgba(200,200,200, 0.35)',
-  windowTint: 'rgba(0, 0, 0, 0.4)',
-  panther: '#161616',
   charcoal: '#595959',
   coal: '#2d2d2d',
-  bloodOrange: '#fb5f26',
   snow: 'white',
-  ember: 'rgba(164, 0, 48, 0.5)',
-  fire: '#e73536',
-  drawer: 'rgba(30, 30, 29, 0.95)',
   success: '#006400',
-  danger: '#9a0000'
 }

App/theme/fonts.js

@@ -24,7 +24,7 @@ export const AppFontStyle = {
     fontSize: AppFontSize.h1
   },
   h2: {
-    fontWeight: 'bold',
+    fontWeight: AppType.bold,
     fontSize: AppFontSize.h2
   },
   h3: {
@@ -51,8 +51,4 @@ export const AppFontStyle = {
     fontFamily: AppType.base,
     fontSize: AppFontSize.medium,
   },
-  descriptionContainer: {
-    padding: 4,
-    borderRadius: 5,
-  }
 }

App/theme/metrics.js

@@ -1,33 +1,13 @@
-import { Dimensions } from 'react-native'
-
-const { width, height } = Dimensions.get('window')
-
 export const AppMetrics = {
   marginHorizontal: 10,
   marginVertical: 10,
-  section: 25,
   baseMargin: 10,
   doubleBaseMargin: 20,
   navbarIconMargin: 30,
   smallMargin: 5,
   tinyMargin: 3,
   horizontalLineHeight: 1,
-  screenWidth: width < height ? width : height,
-  screenHeight: width < height ? height : width,
   navBarHeight: 42,
   buttonRadius: 4,
   listImageSize: 64,
-  icons: {
-    tiny: 15,
-    small: 20,
-    medium: 30,
-    large: 45,
-    xl: 60
-  },
-  images: {
-    small: 20,
-    medium: 40,
-    large: 60,
-    logo: 300
-  }
 }