2 - Desafio

.vscode/settings.json

@@ -14,6 +14,7 @@
     "Reactotron",
     "devtools",
     "gonative",
-    "ionicons"
+    "ionicons",
+    "repos"
   ]
 }

src/index.js

@@ -1,29 +1,9 @@
-import './config/ReactotronConfig';
-import './config/DevToolsConfig';
+import React from 'react';
+import '~/config/ReactotronConfig';
+import '~/config/DevToolsConfig';
 
-import React, { Component } from 'react';
-import { AsyncStorage } from 'react-native';
+import Routes from './routes';
 
-import createNavigator from './routes';
+const App = () => <Routes />;
 
-export default class App extends Component {
-  state = {
-    userChecked: false,
-    userLogged: false,
-  };
-
-  async componentDidMount() {
-    const username = await AsyncStorage.getItem('@Githuber:username');
-    this.setState({ userChecked: true, userLogged: !!username });
-  }
-
-  render() {
-    const { userChecked, userLogged } = this.state;
-
-    if (!userChecked) return null;
-
-    const Routes = createNavigator(userLogged);
-
-    return <Routes />;
-  }
-}
+export default App;

src/pages/Issues/IssueItem/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  View, Text, Image, TouchableOpacity, Linking,
+} from 'react-native';
+import { withNavigation } from 'react-navigation';
+
+import Icon from 'react-native-ionicons';
+
+import styles from './styles';
+
+const IssueItem = ({ issue }) => (
+  <TouchableOpacity style={styles.container} onPress={() => Linking.openURL(issue.html_url)}>
+    <Image style={styles.avatar} source={{ uri: issue.user.avatar_url }} />
+    <View style={styles.wrapper}>
+      <Text style={styles.title} numberOfLines={1} ellipsizeMode="tail">
+        {issue.title}
+      </Text>
+      <Text style={styles.subtitle}>{issue.user.login}</Text>
+    </View>
+    <Icon style={styles.icon} name="ios-arrow-forward" size={16} />
+  </TouchableOpacity>
+);
+
+IssueItem.propTypes = {
+  issue: PropTypes.shape({
+    title: PropTypes.string,
+    user: PropTypes.shape({
+      login: PropTypes.string,
+      avatar_url: PropTypes.string,
+    }),
+    html_url: PropTypes.string,
+  }).isRequired,
+};
+
+export default withNavigation(IssueItem);

src/pages/Issues/IssueItem/styles.js

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import { colors, metrics } from '~/styles';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: colors.white,
+    borderRadius: metrics.baseRadius,
+    padding: metrics.basePadding / 2,
+    marginHorizontal: metrics.baseMargin * 2,
+    marginBottom: metrics.baseMargin,
+  },
+  avatar: {
+    height: 40,
+    width: 40,
+    borderRadius: 20,
+  },
+  wrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingLeft: metrics.basePadding / 2,
+    paddingRight: metrics.basePadding / 2,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: colors.darker,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: colors.regular,
+  },
+  icon: {
+    color: colors.light,
+  },
+});
+
+export default styles;

src/pages/Issues/IssueSegmented/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { View, TouchableOpacity, Text } from 'react-native';
+
+import styles from './styles';
+
+const Filter = ({ segmented, onChangeSegmented }) => (
+  <View style={styles.container}>
+    <TouchableOpacity style={styles.wrapper} onPress={() => onChangeSegmented('all')}>
+      <Text style={[styles.title, segmented === 'all' && styles.active]}>Todas</Text>
+    </TouchableOpacity>
+    <TouchableOpacity style={styles.wrapper} onPress={() => onChangeSegmented('open')}>
+      <Text style={[styles.title, segmented === 'open' && styles.active]}>Abertas</Text>
+    </TouchableOpacity>
+    <TouchableOpacity style={styles.wrapper} onPress={() => onChangeSegmented('closed')}>
+      <Text style={[styles.title, segmented === 'closed' && styles.active]}>Fechadas</Text>
+    </TouchableOpacity>
+  </View>
+);
+
+Filter.propTypes = {
+  segmented: PropTypes.string.isRequired,
+  onChangeSegmented: PropTypes.func.isRequired,
+};
+
+export default Filter;

src/pages/Organizations/OrganizationItem/styles.js → src/pages/Issues/IssueSegmented/styles.js

@@ -1,29 +1,29 @@
 import { StyleSheet } from 'react-native';
+
 import { colors, metrics } from '~/styles';
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: colors.white,
-    borderRadius: metrics.baseRadius,
-    padding: metrics.basePadding,
+    backgroundColor: colors.light,
+    flexDirection: 'row',
+    marginHorizontal: metrics.baseMargin * 2,
     marginTop: metrics.baseMargin,
-    alignItems: 'center',
-    maxWidth: (metrics.screenWidth - 40) / 2,
-    borderBottomColor: colors.lightTransparent,
-    borderBottomWidth: 1,
+    borderRadius: metrics.baseRadius,
   },
-
-  avatar: {
-    width: 50,
-    height: 50,
+  wrapper: {
+    flex: 1,
+    alignItems: 'center',
+    padding: metrics.basePadding / 2,
+    borderRadius: metrics.baseRadius,
+    borderWidth: 1,
+    borderColor: colors.light,
   },
-
   title: {
+    color: colors.regular,
     fontSize: 14,
-    fontWeight: 'bold',
+  },
+  active: {
     color: colors.darker,
-    marginTop: metrics.baseMargin,
   },
 });
 

src/pages/Issues/index.js

@@ -0,0 +1,101 @@
+import React, { Component } from 'react';
+
+import {
+  View, Text, ActivityIndicator, Alert, FlatList,
+} from 'react-native';
+
+import api from '~/services/api';
+import IssueItem from './IssueItem';
+import IssueSegmented from './IssueSegmented';
+import styles from './styles';
+
+export default class Issues extends Component {
+  static navigationOptions = ({ navigation }) => ({
+    title: navigation.getParam('title'),
+  });
+
+  state = {
+    items: [],
+    segmented: 'all',
+    loading: true,
+    refreshing: false,
+  };
+
+  componentDidMount() {
+    this.loadIssues();
+  }
+
+  loadIssues = async () => {
+    this.setState({ refreshing: true });
+
+    const { navigation } = this.props;
+    const { segmented } = this.state;
+
+    try {
+      const { data } = await api.get(
+        `/repos/${navigation.getParam('full_name')}/issues?state=${segmented}`,
+      );
+
+      this.setState({ items: data });
+    } catch (error) {
+      Alert.alert('Ops!', 'Erro ao recuperar as Issues');
+    } finally {
+      this.setState({ loading: false, refreshing: false });
+    }
+  };
+
+  onChangeSegmented = async (value) => {
+    this.setState({ segmented: value });
+    this.setState({ refreshing: true });
+
+    const { navigation } = this.props;
+
+    try {
+      const { data } = await api.get(
+        `/repos/${navigation.getParam('full_name')}/issues?state=${value}`,
+      );
+
+      this.setState({ items: data });
+    } catch (error) {
+      Alert.alert('Ops!', 'Erro ao recuperar as Issues');
+    } finally {
+      this.setState({ loading: false, refreshing: false });
+    }
+  };
+
+  renderListItem = ({ item }) => <IssueItem issue={item} />;
+
+  renderList = () => {
+    const { items, refreshing } = this.state;
+
+    if (!items.length) {
+      return <Text style={styles.empty}>Nenhuma issue encontrada</Text>;
+    }
+
+    return (
+      <FlatList
+        data={items}
+        keyExtractor={item => String(item.id)}
+        renderItem={this.renderListItem}
+        onRefresh={this.loadIssues}
+        refreshing={refreshing}
+      />
+    );
+  };
+
+  render() {
+    const { loading, segmented } = this.state;
+
+    return (
+      <View style={styles.container}>
+        <IssueSegmented segmented={segmented} onChangeSegmented={this.onChangeSegmented} />
+        <View style={styles.divider} />
+        {loading ? (
+          <ActivityIndicator size="large" color={styles.loading.color} style={styles.loading} />
+        ) : (
+          this.renderList()
+        )}
+      </View>
+    );
+  }
+}