Code test

.expo/packager-info.json

@@ -0,0 +1,9 @@
+{
+  "devToolsPort": 19002,
+  "expoServerPort": null,
+  "packagerPort": null,
+  "packagerPid": null,
+  "expoServerNgrokUrl": "https://zk-fpb.anonymous.fe-code-test.exp.direct",
+  "packagerNgrokUrl": "https://packager.zk-fpb.anonymous.fe-code-test.exp.direct",
+  "ngrokPid": 3845
+}

.expo/settings.json

@@ -0,0 +1,7 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": "zk-fpb"
+}

.gitignore

@@ -0,0 +1,84 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/

App.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Platform, StatusBar, StyleSheet, View } from 'react-native';
+import { AppLoading, Asset, Font, Icon } from 'expo';
+import AppNavigator from './navigation/AppNavigator';
+
+export default class App extends React.Component {
+  state = {
+    isLoadingComplete: false,
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
+        <AppNavigator />
+      </View>
+    );
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+});
+

README.md

@@ -1,3 +1,32 @@
+## Please answer the following questions once you finish codding:
+
+A) Describe the strategy used to consume the API endpoints and the data management.
+
+In order to consume the API I've used node's "fetch".
+To avoid making unnecesary requests I simply added the fetch calls inside componentWillMount functions and saved the responses in the state.
+
+I avoided using more complex data stores such as Redux, given the simplicity, again, of the task at hand.
+
+Writing reducers, actions, etc. For such a simple task would definitely be an overkill.
+
+B) Explain which library was used for the routing and why. Would you use the same for a consumer facing app targeting thousands of users? Why?
+
+I used React Navigation given its simplicity and ease of use.
+
+I would surely use React Native Navigation if the app targeted thousands of users, the main reason of this choice would be to leverage the use of native modules in iOS and Android which provide better performance.
+
+
+C) Have you used any strategy to optimize the performance of the list generated for the first feature?
+
+Yes, I used a FlatList which only renders elements that are currently showing on the screen, not all the elements at once.
+
+
+D) Would you like to add any further comments or observations?
+
+No, only that the written instructions do not match exactly with the images displayed which can lead to a bit of confusion. But other than that all good!
+
+
+
 # Code Challenge
 
 ## Instructions:
@@ -12,15 +41,7 @@ Please clone the repository, complete the exercise, and submit a PR for us to re
 3. Create a Pull Request from `code-test` to `base` for us to review.
 
 
-## Please answer the following questions once you finish codding:
-
-A) Describe the strategy used to consume the API endpoints and the data management.
-
-B) Explain which library was used for the routing and why. Would you use the same for a consumer facing app targeting thousands of users? Why?
 
-C) Have you used any strategy to optimize the performance of the list generated for the first feature?
-
-D) Would you like to add any further comments or observations?
 
 
 ## Overview:

app.json

@@ -0,0 +1,29 @@
+{
+  "expo": {
+    "name": "Cocktails App",
+    "slug": "CocktailsApp",
+    "privacy": "public",
+    "sdkVersion": "32.0.0",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

components/CocktailItem.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+import { View, Text, TouchableOpacity, Image } from 'react-native'
+
+class CocktailItem extends Component {
+
+	_onTouch(){
+		return ''
+	};
+
+	render() {
+		return (
+			<TouchableOpacity style={styles.containerStyle} onPress={this.props.onPress}>
+			  <View style={{flex:3}} >
+			  	<Text style={styles.drinkName} > {this.props.cocktail.strDrink} </Text>
+			  </View>
+			  <View style={{flex:2}} >
+			  	<Image
+	          style={{flex:1}}
+	          source={{uri: this.props.cocktail.strDrinkThumb }}
+	          borderRadius={6}
+	        />
+			  </View>
+			</TouchableOpacity>
+		)
+	}
+}
+
+const styles = {
+	containerStyle: {
+		borderWidth: 1,
+		borderRadius: 2,
+		borderColor: '#ddd',
+		borderBottom: 0,
+		shadowColor: '#000',
+		shadowOffset: { width: 0, height: 2 },
+		shadowOppacity: 0.1,
+		shadowRadius: 2,
+		elevation: 1,
+		marginLeft: 5,
+		marginRight: 5,
+		marginTop: 10,
+		height: 160,
+		backgroundColor: '#FFF',
+		flex: 1,
+		flexDirection: 'row',
+		padding:8
+	},
+
+	drinkName: {
+		color: '#7D7D7D',
+		fontSize: 25
+	}
+}
+
+export default CocktailItem;

components/CocktailList.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+import { View, Text, FlatList } from 'react-native'
+import CocktailItem from './CocktailItem'
+
+
+class CocktailList extends Component {
+
+	state = {
+		cocktails: []
+	};
+
+	componentWillMount(){
+
+		fetch('http://www.thecocktaildb.com/api/json/v1/1/filter.php?g=Cocktail_glass')
+	    .then((response) => response.json())
+	    .then((responseJson) => {
+	      this.setState({cocktails: responseJson['drinks'] })
+	    })
+	    .catch((error) => {
+	      console.error(error);
+	    });
+
+
+	    const navigate = this.props.navigation.navigate
+
+	}
+
+	renderCocktail({item}){
+		return <CocktailItem onPress={ () => this.onPress(item) } cocktail={item} key={item.idDrink} />
+	}
+
+	onPress(cocktail){
+		this.props.navigation.navigate('CocktailDetail', {cocktail})
+	}
+
+	render () {
+		return (
+			<View>
+				<FlatList
+          data={ this.state.cocktails }
+          renderItem={ this.renderCocktail.bind(this)}
+          keyExtractor={item => item.idDrink}
+        />
+			</View>
+		)
+	}
+}
+
+export default CocktailList;

components/StyledText.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+export class MonoText extends React.Component {
+  render() {
+    return <Text {...this.props} style={[this.props.style, { fontFamily: 'space-mono' }]} />;
+  }
+}

navigation/AppNavigator.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';
+import CocktailListScreen from '../screens/CocktailListScreen';
+import CocktailDetailScreen from '../screens/CocktailDetailScreen';
+
+
+const MainNavigator = createStackNavigator({
+  CocktailList:   {screen: CocktailListScreen},
+  CocktailDetail: {screen: CocktailDetailScreen},
+});
+
+export default createAppContainer(MainNavigator);

package.json

@@ -0,0 +1,19 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "^32.0.0",
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
+    "react-navigation": "^3.6.1"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^5.0.0"
+  },
+  "private": true
+}