Good luck peeps

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

.flowconfig

@@ -0,0 +1,75 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore templates for 'react-native init'
+<PROJECT_ROOT>/node_modules/react-native/local-cli/templates/.*
+
+; Ignore RN jest
+<PROJECT_ROOT>/node_modules/react-native/jest/.*
+
+; Ignore RNTester
+<PROJECT_ROOT>/node_modules/react-native/RNTester/.*
+
+; Ignore the website subdir
+<PROJECT_ROOT>/node_modules/react-native/website/.*
+
+; Ignore the Dangerfile
+<PROJECT_ROOT>/node_modules/react-native/danger/dangerfile.js
+
+; Ignore Fbemitter
+<PROJECT_ROOT>/node_modules/fbemitter/.*
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/node_modules/react-native/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore polyfills
+<PROJECT_ROOT>/node_modules/react-native/Libraries/polyfills/.*
+
+; Ignore various node_modules
+<PROJECT_ROOT>/node_modules/react-native-gesture-handler/.*
+<PROJECT_ROOT>/node_modules/expo/.*
+<PROJECT_ROOT>/node_modules/react-navigation/.*
+<PROJECT_ROOT>/node_modules/xdl/.*
+<PROJECT_ROOT>/node_modules/reqwest/.*
+<PROJECT_ROOT>/node_modules/metro-bundler/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow/
+node_modules/expo/flow/
+
+[options]
+emoji=true
+
+module.system=haste
+
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.ios.js
+
+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'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.56.0

.gitignore

@@ -0,0 +1,17 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# expo
+.expo/
+
+# dependencies
+/node_modules
+
+# misc
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.watchmanconfig

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

App.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import {StatusBar, StyleSheet, View} from 'react-native';
+import { NativeRouter, Route} from 'react-router-native'
+
+import Header from './src/__client__/Header';
+import Stages from './src/__client__/stage/Stages';
+import StageDetails from './src/__client__/stage/StageDetails';
+import Navigation from './src/__client__/navigation/Navigation';
+import Artists from './src/__client__/artists/Artists';
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <StatusBar barStyle="light-content" backgroundColor="#000088"/>
+        <NativeRouter>
+          <View style={{flex: 1}}>
+            <View style={styles.viewContainer}>
+              <Route exact path="/" component={Stages}/>
+              <Route path="/stage/:id" component={StageDetails}/>
+              <Route path="/artists" component={Artists}/>
+            </View>
+            <Navigation style={styles.navigation}/>
+          </View>
+        </NativeRouter>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  viewContainer: {
+    flex: 1,
+    justifyContent: 'space-between'
+  },
+  contentContainer: {
+    flex: 1
+  },
+});

App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import App from './App';
+
+import renderer from 'react-test-renderer';
+
+it('renders without crashing', () => {
+  const rendered = renderer.create(<App />).toJSON();
+  expect(rendered).toBeTruthy();
+});

README.md

@@ -0,0 +1,27 @@
+## Music Festival App
+
+This is a broken festival music app, good luck to make it work!
+
+In `__server__`, there's a NodeJS server. Nothing is broken in there!
+You can take a look at the `__server__/index.js` to see available paths
+
+#### Launching the app
+
+```
+yarn start:server
+yarn start
+```
+
+##### TODO's
+
+1. `Header.js` (Be sure to then add the Header component in your App)
+2. `Stages.js` 
+3. `NavigationButton.js` Fix navigation (not much to change here)
+3. `ArtistRow.js`
+4. `StageDetails.js` get all information to render details of a Stage
+
+
+##### Refactor
+`StageDetails.js` and `Artists.js` both uses `FlatList` which needs the same props.
+ Can you make a render prop or a children as a function component to avoid duplication between both component?
+

app.json

@@ -0,0 +1,5 @@
+{
+  "expo": {
+    "sdkVersion": "23.0.0"
+  }
+}

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react-native-music-festival-app",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "jest-expo": "23.0.0",
+    "nodemon": "^1.12.7",
+    "react-native-scripts": "1.8.1",
+    "react-test-renderer": "16.0.0"
+  },
+  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
+  "scripts": {
+    "start": "react-native-scripts start",
+    "start:server": "nodemon --watch src src/__server__/index.js --exec babel-node",
+    "eject": "react-native-scripts eject",
+    "android": "react-native-scripts android",
+    "ios": "react-native-scripts ios",
+    "test": "node node_modules/jest/bin/jest.js --watch"
+  },
+  "jest": {
+    "preset": "jest-expo"
+  },
+  "dependencies": {
+    "axios": "^0.17.1",
+    "expo": "^23.0.4",
+    "express": "^4.16.2",
+    "moment": "^2.19.4",
+    "react": "16.0.0",
+    "react-native": "0.50.3",
+    "react-native-linear-gradient": "^2.3.0",
+    "react-router-native": "^4.2.0"
+  }
+}

src/__client__/Header.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {View, Text, StyleSheet } from 'react-native';
+
+// TODO Display header 'Music Festival App'
+const Header = ({style}) => (
+  <View style={[styles.container, style]}>
+  </View>
+);
+
+export default Header;
+
+const styles = StyleSheet.create({
+  container: {
+    height: 60,
+    paddingTop: 10,
+    backgroundColor: '#000099',
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: 'grey',
+    shadowOffset: {
+      width: 2,
+      height: 2
+    },
+  },
+  title: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold'
+  }
+});

src/__client__/artists/ArtistRow.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {Image, Text, View, StyleSheet} from 'react-native';
+import PropTypes from 'prop-types';
+
+// TODO: Display Artists Image and Name
+const ArtistRow = ({
+  artist
+}) => (
+  <View style={styles.row}>
+  </View>
+);
+
+ArtistRow.propTypes = {
+  artist: PropTypes.object.isRequired
+};
+
+export default ArtistRow;
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center", padding: 12 },
+  picture: { width: 50, height: 50, borderRadius: 25, marginRight: 18 },
+  primaryText: {
+    fontWeight: "bold",
+    fontSize: 14,
+    color: "black",
+    marginBottom: 4
+  },
+  secondaryText: { color: "grey" }
+});

src/__client__/artists/Artists.js

@@ -0,0 +1,48 @@
+import React, {Component} from 'react';
+import {FlatList, Text, View} from 'react-native';
+import axios from 'axios';
+import {serverUrl} from '../config/server';
+import ArtistRow from './ArtistRow';
+
+class Artists extends Component {
+  state = {
+    artists: []
+  };
+
+  async componentDidMount(){
+    const {data: artists} = await axios.get(`${serverUrl}/artists`);
+    console.log('artists', artists);
+    this.setState({artists});
+  }
+
+  renderItem = ({item}) => {
+    return <ArtistRow artist={item}/>
+  };
+
+  renderSeparator = () => (
+    <View style={{ height: 1, backgroundColor: "grey", marginLeft: 80 }} />
+  );
+
+  renderHeader = () => (
+    <View
+      style={{ height: 30, backgroundColor: "#5E5EB4", justifyContent: "center", alignItems: 'center' }}
+    >
+      <Text style={{color: 'white'}}> All Artists</Text>
+    </View>
+  );
+
+  render() {
+    const {artists} = this.state;
+    return <View>
+      <FlatList
+        data={artists}
+        renderItem={this.renderItem}
+        ItemSeparatorComponent={this.renderSeparator}
+        ListHeaderComponent={this.renderHeader}
+        keyExtractor={item => item.id}
+      />
+    </View>
+  }
+}
+
+export default Artists;

src/__client__/config/server.js

@@ -0,0 +1 @@
+export const serverUrl = 'http://127.0.0.1:3010';

src/__client__/navigation/Navigation.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import NavigationButton from './NavigationButton';
+import { Ionicons } from '@expo/vector-icons';
+import {withRouter} from 'react-router-native';
+
+const Navigation = ({style, location: {pathname}}) => (
+  <View style={[styles.container, style]}>
+    <NavigationButton icon="ios-flag" to="/" label="Stages" currentPathname={pathname}/>
+    <NavigationButton icon="ios-mic" to="/artists" label="Artists" currentPathname={pathname}/>
+  </View>
+);
+
+export default withRouter(Navigation);
+
+const styles = StyleSheet.create({
+  container: {
+    height: 60,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    backgroundColor: '#000099'
+  },
+});