Feature/refactors (#4)

gusgard · web-flow · commit 6ae95351cfaa · 2017-11-17T23:09:04.000-03:00
* add solidarity, upgrade packages and remove old code

* add gif demo

* update snapshots
diff --git a/.solidarity b/.solidarity
@@ -0,0 +1,73 @@
+{
+  "$schema": "http://json.schemastore.org/solidaritySchema",
+  "requirements": {
+    "Node": [
+      {
+        "rule": "cli",
+        "binary": "node",
+        "semver": "8.9.1"
+      }
+    ],
+    "Watchman": [
+      {
+        "rule": "cli",
+        "binary": "watchman",
+        "error": "Please install watchman on this machine. Refer to the official Watchman installation instructions for additional help.",
+        "platform": [
+          "darwin",
+          "linux"
+        ]
+      }
+    ],
+    "React Native": [
+      {
+        "rule": "cli",
+        "binary": "react-native",
+        "semver": "0.50.3",
+        "line": 2
+      }
+    ],
+    "Package JSON": [
+      {
+        "rule": "file",
+        "location": "./package.json"
+      }
+    ],
+    "NPM": [
+      {
+        "rule": "cli",
+        "binary": "npm",
+        "semver": "5.5.1"
+      }
+    ],
+    "Yarn": [
+      {
+        "rule": "cli",
+        "binary": "yarn",
+        "version": "--version",
+        "semver": "1.3.2"
+      }
+    ],
+    "Android": [
+      {
+        "rule": "env",
+        "variable": "ANDROID_HOME",
+        "error": "The ANDROID_HOME environment variable must be set to your local SDK.  Refer to getting started docs for help."
+      }
+    ],
+    "Xcode": [
+      {
+        "rule": "cli",
+        "binary": "xcodebuild",
+        "semver": "9.1",
+        "platform": "darwin"
+      },
+      {
+        "rule": "cli",
+        "binary": "xcrun",
+        "semver": "35",
+        "platform": "darwin"
+      }
+    ]
+  }
+}
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+![Travis](https://travis-ci.org/gusgard/rn-graphql-example.svg)
+
 # Installation
 
 Example with graphql api
@@ -6,10 +8,10 @@ Example with graphql api
 
 Run `yarn install`
 
-
 ## Start
 
 Run `yarn start`
+
 Run `yarn api`
 
 ## Simulator
@@ -18,7 +20,8 @@ For an Android device `yarn android`
 
 For an iOS device `yarn ios`
 
-![Demo](./demo.gif.)
+![Demo](./demo.gif)
 
 ## Author
+
 Gustavo Gard
diff --git a/db.js b/db.js
@@ -1,37 +1,45 @@
 const Faker = require('faker');
 
+const newImage = {
+  0: Faker.image.business,
+  1: Faker.image.cats,
+  2: Faker.image.city,
+  3: Faker.image.food,
+  4: Faker.image.nightlife,
+  5: Faker.image.fashion,
+  6: Faker.image.people,
+  7: Faker.image.nature,
+  8: Faker.image.animals,
+  9: Faker.image.imageUrl,
+};
+const getNewImage = index =>
+  newImage[index % (Object.keys(newImage).length - 1)]();
+
 const user = {
   description: Faker.lorem.paragraphs(),
   id: 1234,
   name: Faker.name.findName(),
   thumbnail: Faker.image.avatar(),
 };
 
-const photo = () => ({
+const photo = index => ({
   id: Faker.random.uuid(),
-  thumbnail: Faker.image.imageUrl(),
+  thumbnail: getNewImage(index),
   user_id: user.id,
 });
 
-// business
-// cats
-// city
-// food
-// nightlife
-// fashion
-// people
-// nature
-
-const pop = () => ({
+const popular = index => ({
   id: Faker.random.uuid(),
-  thumbnail: Faker.image.animals(),
+  thumbnail: getNewImage(index),
 });
 
 const MAX_PHOTOS = Math.round(Math.random() * 10) + 1;
-const profiles = Array.from(Array(MAX_PHOTOS)).map(() => photo());
+const profiles = Array.from(Array(MAX_PHOTOS)).map((_, index) => photo(index));
 
-const MAX_POPULAR = Math.round(Math.random() * 30) + 1;
-const populars = Array.from(Array(MAX_POPULAR)).map(() => pop());
+const MAX_POPULAR = Math.round(Math.random() * 100) + 1;
+const populars = Array.from(Array(MAX_POPULAR)).map((_, index) =>
+  popular(index),
+);
 
 module.exports = {
   profiles,
diff --git a/demo.gif b/demo.gif
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "api": "json-graphql-server db.js",
     "test": "jest",
+    "check-env": "yarn solidarity",
     "test-watch": "jest --watch"
   },
   "dependencies": {
@@ -57,14 +58,14 @@
     "prettier": "^1.3.1",
     "prettier-eslint": "^8.2.1",
     "react-dom": "^16.0.0",
-    "redux-mock-store": "^1.3.0"
+    "redux-mock-store": "^1.3.0",
+    "solidarity": "^1.0.0",
+    "solidarity-react-native": "^1.0.0"
   },
   "jest": {
     "preset": "react-native",
     "setupTestFrameworkScriptFile": "./enzyme.js",
-    "snapshotSerializers": [
-      "./node_modules/enzyme-to-json/serializer"
-    ]
+    "snapshotSerializers": ["./node_modules/enzyme-to-json/serializer"]
   },
   "pre-commit": {
     "run": "lint"
diff --git a/src/apolloClient.js b/src/apolloClient.js
@@ -1,7 +1,9 @@
 import { ApolloClient, createNetworkInterface } from 'react-apollo';
 
+import { API_URL } from '@environment';
+
 export default new ApolloClient({
   networkInterface: createNetworkInterface({
-    uri: 'http://localhost:3000',
+    uri: API_URL,
   }),
 });
diff --git a/src/environment/index.js b/src/environment/index.js
@@ -8,3 +8,11 @@ if (isDev) {
   GLOBAL.XMLHttpRequest =
     GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
 }
+
+const urls = {
+  development: 'http://localhost:3000',
+  test: 'http://localhost:3000',
+  production: 'http://localhost:3000',
+};
+
+export const API_URL = urls[env];
diff --git a/src/screens/home/screens/HomeMainScreen/components/Description/__snapshots__/test.js.snap b/src/screens/home/screens/HomeMainScreen/components/Description/__snapshots__/test.js.snap
@@ -1,75 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders Description without Read more text 1`] = `
-<TouchableOpacity
-  activeOpacity={0.2}
-  onPress={[Function]}
+<Text
+  accessible={true}
+  allowFontScaling={true}
+  ellipsizeMode="tail"
+  numberOfLines={4}
 >
   <Text
     accessible={true}
     allowFontScaling={true}
     ellipsizeMode="tail"
-    numberOfLines={0}
+    key="0"
   >
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
-      key="0"
-    >
-      Motivation to become the best version of you!
-    </Text>
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
-      key="1"
-      style={
-        Object {
-          "color": "rgb(15, 45, 90)",
-          "fontWeight": "bold",
-        }
+    Motivation to become the best version of you!
+  </Text>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    key="1"
+    style={
+      Object {
+        "color": "rgb(15, 45, 90)",
+        "fontWeight": "bold",
       }
-    >
-      #Whitebear
-    </Text>
+    }
+  >
+    #Whitebear
   </Text>
-</TouchableOpacity>
+</Text>
 `;
 
 exports[`renders correctly 1`] = `
-<TouchableOpacity
-  activeOpacity={0.2}
-  onPress={[Function]}
+<Text
+  accessible={true}
+  allowFontScaling={true}
+  ellipsizeMode="tail"
+  numberOfLines={4}
 >
   <Text
     accessible={true}
     allowFontScaling={true}
     ellipsizeMode="tail"
-    numberOfLines={4}
+    key="0"
   >
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
-      key="0"
-    >
-      Motivation to become the best version of you!
-    </Text>
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
-      key="1"
-      style={
-        Object {
-          "color": "rgb(15, 45, 90)",
-          "fontWeight": "bold",
-        }
+    Motivation to become the best version of you!
+  </Text>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    key="1"
+    style={
+      Object {
+        "color": "rgb(15, 45, 90)",
+        "fontWeight": "bold",
       }
-    >
-      #Whitebear
-    </Text>
+    }
+  >
+    #Whitebear
   </Text>
-</TouchableOpacity>
+</Text>
 `;
diff --git a/src/screens/home/screens/HomeMainScreen/components/Description/index.js b/src/screens/home/screens/HomeMainScreen/components/Description/index.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Text, TouchableOpacity } from 'react-native';
+import { Text } from 'react-native';
 import PropTypes from 'prop-types';
 
 import styles from './styles';
@@ -11,32 +11,21 @@ export default class Description extends PureComponent {
     texts: PropTypes.array.isRequired,
   };
 
-  state = {
-    readMore: true,
-  };
-
-  toggleReadMore = () => {
-    this.setState({ readMore: !this.state.readMore });
-  };
-
   render() {
     const { texts } = this.props;
-    const { readMore } = this.state;
     return (
-      <TouchableOpacity onPress={this.toggleReadMore}>
-        <Text numberOfLines={readMore ? MAX_LINES : 0} style={styles.texts}>
-          {texts.map(
-            (text, index) =>
-              text.highlighted ? (
-                <Text key={index} style={styles.highlighted}>
-                  {text.value}
-                </Text>
-              ) : (
-                <Text key={index}>{text.value}</Text>
-              ),
-          )}
-        </Text>
-      </TouchableOpacity>
+      <Text numberOfLines={MAX_LINES} style={styles.texts}>
+        {texts.map(
+          (text, index) =>
+            text.highlighted ? (
+              <Text key={index} style={styles.highlighted}>
+                {text.value}
+              </Text>
+            ) : (
+              <Text key={index}>{text.value}</Text>
+            ),
+        )}
+      </Text>
     );
   }
 }
diff --git a/yarn.lock b/yarn.lock
