chore(prettier): run prettier, add refreshing footer

jgfidelis · Nov 9, 2018 · cadca07 · cadca07
1 parent a0a005b
commit cadca07
Show file tree

Hide file tree

Showing 9 changed files with 1,124 additions and 461 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,72 @@
+{
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "node": true,
+    "jest": true,
+    "es6": true,
+  },
+  "plugins": [
+    "react",
+    "react-native",
+    "flowtype",
+    "import"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "modules": true
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:import/errors"
+  ],
+  "rules": {
+    "comma-dangle": [2, "always-multiline"],
+    "quotes": [2, "single", { "allowTemplateLiterals": true }],
+    "react/prop-types": 0,
+    "no-case-declarations": 0,
+    "react/jsx-no-bind": 0,
+    "react/display-name": 0,
+    "new-cap": 0,
+    "react-native/no-unused-styles": 2,
+    "react-native/split-platform-components": 0,
+    "react-native/no-inline-styles": 0,
+    "react-native/no-color-literals": 0,
+    "no-unexpected-multiline": 0,
+    "no-class-assign": 1,
+    "no-console": 2,
+    "object-curly-spacing": [1, "always"],
+    "flowtype/define-flow-type": 1,
+    "flowtype/use-flow-type": 1,
+    "import/first": 2,
+    "import/default": 0,
+    "no-unused-vars": ["error", { "ignoreRestSiblings": true }],
+    "import/named": 0,
+    "import/namespace": [2, { "allowComputed": true }],
+    "no-extra-boolean-cast": 0,
+    "import/no-duplicates": 2
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions":[
+          ".js",
+          ".android.js",
+          ".ios.js",
+          ".json"
+        ]
+      }
+    }
+  },
+  "globals": {
+    "__DEV__": true,
+    "jasmine": true,
+    "device": true,
+    "element": true,
+    "by": true
+  }
+}
diff --git a/package.json b/package.json
@@ -3,8 +3,12 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
+    "flow": "flow",
+    "lint": "node_modules/.bin/eslint src --max-warnings=0",
     "relay": "relay-compiler --src ./src --schema ./schema.graphql",
     "start": "node node_modules/react-native/local-cli/cli.js start",
+    "prettier": "prettier --write --single-quote true --trailing-comma all --print-width 120",
+    "prettier:all": "prettier --write --single-quote true --trailing-comma all --print-width 120 --write 'src/**/*.js'",
     "test": "jest"
   },
   "dependencies": {
@@ -15,8 +19,18 @@
     "react-relay": "^1.7.0"
   },
   "devDependencies": {
+    "babel-eslint": "8.2.3",
     "babel-jest": "23.6.0",
     "babel-plugin-relay": "^1.7.0",
+    "eslint": "4.19.1",
+    "eslint-config-airbnb": "16.1.0",
+    "eslint-import-resolver-babel-module": "4.0.0",
+    "eslint-plugin-flowtype": "2.46.3",
+    "eslint-plugin-import": "2.11.0",
+    "eslint-plugin-jsx-a11y": "6.0.3",
+    "eslint-plugin-react": "7.7.0",
+    "eslint-plugin-react-native": "3.2.1",
+    "flow-bin": "0.78.0",
     "graphql": "^14.0.2",
     "jest": "23.6.0",
     "metro-react-native-babel-preset": "0.49.0",

diff --git a/src/Environment.js b/src/Environment.js
@@ -1,14 +1,6 @@
-import {
-  Environment,
-  Network,
-  RecordSource,
-  Store,
-} from 'relay-runtime';
+import { Environment, Network, RecordSource, Store } from 'relay-runtime';
 
-function fetchQuery(
-  operation,
-  variables,
-) {
+function fetchQuery(operation, variables) {
   return fetch('http://localhost:5000/graphql', {
     method: 'POST',
     headers: {
@@ -25,7 +17,7 @@ function fetchQuery(
 
 const environment = new Environment({
   network: Network.create(fetchQuery),
-  store: new Store(new RecordSource()),  
+  store: new Store(new RecordSource()),
 });
 
-export default environment;
+export default environment;
diff --git a/src/Home.js b/src/Home.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, FlatList, StyleSheet } from 'react-native';
+import { ActivityIndicator, View, FlatList, StyleSheet } from 'react-native';
 import { createRefetchContainer, graphql } from 'react-relay';
 import type { RelayRefetchProp } from 'react-relay';
 
@@ -22,7 +22,6 @@ type State = {
 };
 
 class Home extends React.PureComponent<Props, State> {
-
   state = {
     isFetchingTop: false,
     isFetchingEnd: false,
@@ -31,7 +30,7 @@ class Home extends React.PureComponent<Props, State> {
 
   renderItem = ({ item }) => {
     return <PokemonRow pokemon={item.node} />;
-  }
+  };
 
   onRefresh = () => {
     const { isFetchingTop } = this.state;
@@ -100,11 +99,17 @@ class Home extends React.PureComponent<Props, State> {
     );
   };
 
+  renderFooter = () => {
+    const { isFetchingEnd } = this.state;
+    if (!isFetchingEnd) return null;
+    return <ActivityIndicator />
+  }
+
   render() {
     const { pokemons } = this.props.query;
     return (
       <View style={styles.container}>
-        <FlatList 
+        <FlatList
           data={pokemons.edges}
           renderItem={this.renderItem}
           keyExtractor={item => item.node.id}
@@ -114,9 +119,10 @@ class Home extends React.PureComponent<Props, State> {
           onRefresh={this.onRefresh}
           refreshing={this.state.refreshing}
           onEndReachedThreshold={0.3}
+          ListFooterComponent={this.renderFooter}
         />
       </View>
-    )
+    );
   }
 }
 
@@ -133,10 +139,8 @@ const HomeRefectContainer = createRefetchContainer(
   Home,
   {
     query: graphql`
-      fragment Home_query on Query
-        @argumentDefinitions(count: { type: "Int" }, cursor: { type: "String" }) {
-        pokemons(first: $count, after: $cursor)
-          @connection(key: "home_pokemons") {
+      fragment Home_query on Query @argumentDefinitions(count: { type: "Int" }, cursor: { type: "String" }) {
+        pokemons(first: $count, after: $cursor) @connection(key: "home_pokemons") {
           count
           pageInfo {
             hasNextPage

diff --git a/src/PokemonRow.js b/src/PokemonRow.js
@@ -5,23 +5,23 @@ import { createFragmentContainer, graphql } from 'react-relay';
 import type { PokemonRow_pokemon } from './__generated__/PokemonRow_pokemon.graphql';
 
 type Props = {
- pokemon: PokemonRow_pokemon,
+  pokemon: PokemonRow_pokemon,
 };
 
 class PokemonRow extends React.PureComponent<Props> {
-  capitalizeFirstLetter = (string) => {
+  capitalizeFirstLetter = string => {
     return string.charAt(0).toUpperCase() + string.slice(1);
-  }
+  };
 
-  hectogramToKg = (mass) => {
+  hectogramToKg = mass => {
     const kg = mass / 10;
     return kg.toFixed(1);
-  }
+  };
 
-  decimeterToMeter = (height) => {
+  decimeterToMeter = height => {
     const meter = height / 10;
     return meter.toFixed(1);
-  }
+  };
 
   render() {
     const { imageUrl, name, types, number, weight, height } = this.props.pokemon;