Code challenge

.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

.flowconfig

@@ -0,0 +1,69 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+
+; Ignore polyfills
+.*/Libraries/polyfills/.*
+
+; Ignore metro
+.*/node_modules/metro/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow/
+
+[options]
+emoji=true
+
+esproposal.optional_chaining=enable
+esproposal.nullish_coalescing=enable
+
+module.system=haste
+module.system.haste.use_name_reducers=true
+# get basename
+module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
+# strip .js or .js.flow suffix
+module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
+# strip .ios suffix
+module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
+module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
+module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
+module.system.haste.paths.blacklist=.*/__tests__/.*
+module.system.haste.paths.blacklist=.*/__mocks__/.*
+module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
+module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.native.js
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+[version]
+^0.92.0

.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

.gitignore

@@ -0,0 +1,56 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.js

@@ -0,0 +1,30 @@
+/**
+* @Author: Preiti Demian <demian>
+* @Date:   2019-04-28T11:33:22-03:00
+* @Email:  pldemian@gmail.com
+* @Project: Buoy Cocktails
+ * @Last modified by:   demian
+ * @Last modified time: 2019-05-06T16:57:06-03:00
+*/
+
+import React, {Component} from 'react';
+import  { Provider } from 'react-redux';
+import { createStore,applyMiddleware } from 'redux';
+import rootReducer from './src/reducers';
+import configureStore from './src/configureStore';
+import AppNavigator from './src/navigator';
+import { createAppContainer} from 'react-navigation'
+
+let store = configureStore()
+
+const AppContainer =  createAppContainer(AppNavigator);
+
+export default class App extends Component {
+  render() {
+    return(
+      <Provider store={store}>
+        <AppContainer/>
+      </Provider>
+    )
+  }
+}

README.md

@@ -17,12 +17,29 @@ Please clone the repository, complete the exercise, and submit a Pull Request fo
 
 A) Describe the strategy used to consume the API endpoints and the data management.
 
+There are several problems with these APIs. There is now way to paginate the queries, so  we have to make the request for all the cocktails at once. Also, the API that is in charge of bringing the details for the requested cocktail, cannot be used to request for multiple drinks despite that it returns a list. 
+The strategy used was:
+
+ - Request the list of cocktails once and then  request the next 20 cocktail ingredients. 
+
+ - When the user scrolls and it is closed to the end of the list, request 20 more cocktail ingredients.
+
+ As I use a virtualize list (when we scroll an item it can be reused when going out of sight), I want to avoid showing the ingredients of another cocktail or the request response handled in a missing object. Also I don't want  the ingredients to appear later. That's why I choose this strategy. 
+
 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?
 
+The routing navigation used was **react-navigation**.  React navigation is a solution written in JS so it is well integrated in RN and easy to use it. 
+Other solutions like **react-native-navigation**  could perform better as it uses native components, but it becomes tricky to manipulate as there are differences between ios and android.
+Perhaps for a very high performant app I would choose **react-native-navigation**.
+
 C) Have you used any strategy to optimize the performance of the list generated for the first feature?
 
+I make use of **FlatList** react native component, which is supposed to be very performant. It makes use of virtualization, so the rows are reused once they go out of screen.
+
 D) Would you like to add any further comments or observations?
 
+There are many things to improve this app, like adding a persistor so we can save the data to use next time the app launches, or adding themes.
+Also the tests are missing and the search feature.
 
 ## Overview:
 

__tests__/App-test.js

@@ -0,0 +1,14 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});

android/app/BUCK

@@ -0,0 +1,55 @@
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
+
+lib_deps = []
+
+create_aar_targets(glob(["libs/*.aar"]))
+
+create_jar_targets(glob(["libs/*.jar"]))
+
+android_library(
+    name = "all-libs",
+    exported_deps = lib_deps,
+)
+
+android_library(
+    name = "app-code",
+    srcs = glob([
+        "src/main/java/**/*.java",
+    ]),
+    deps = [
+        ":all-libs",
+        ":build_config",
+        ":res",
+    ],
+)
+
+android_build_config(
+    name = "build_config",
+    package = "com.buoycocktails",
+)
+
+android_resource(
+    name = "res",
+    package = "com.buoycocktails",
+    res = "src/main/res",
+)
+
+android_binary(
+    name = "app",
+    keystore = "//android/keystores:debug",
+    manifest = "src/main/AndroidManifest.xml",
+    package_type = "debug",
+    deps = [
+        ":app-code",
+    ],
+)