catalinmiron · blackPeanut · Jun 28, 2016 · Jun 28, 2016 · Jun 29, 2016 · Jun 29, 2016
diff --git a/app/CommentItem.js b/app/CommentItem.js
@@ -1,54 +1,55 @@
 "use strict";
-
-var React = require("react-native");
-var {
+import React, {
+  Component,
   Image,
   StyleSheet,
   PixelRatio,
   Text,
   TouchableHighlight,
   View,
-  Component,
   Dimensions
-} = React;
+} from 'react-native';
 
-var Icon = require("react-native-vector-icons/FontAwesome"),
-    getImage = require("./helpers/getImage"),
-    HTML = require("react-native-htmlview"),
-    screen = Dimensions.get('window');
+import * as getImage from './helpers/getImage';
+import { Icon } from 'react-native-vector-icons/FontAwesome';
+import HTML from 'react-native-htmlview';
+const screen = Dimensions.get('window');
 
-var CommentItem = React.createClass({
-  getDefaultProps: function() {
-    return {
-      comments: []
-    }
-  },
+export default class CommentItem extends Component {
+  constructor(props) {
+    super(props);
+  }//constructor
 
-  render: function() {
-    return <View>
-      <TouchableHighlight onPress={this.props.onSelect.bind(this, this.props.comment)}
-                          underlayColor={"#f3f3f3"}>
-        <View>
-          <View style={styles.commentContent}>
-              <Image source={getImage.authorAvatar(this.props.comment.user)}
-                     style={styles.avatar}/>
-            <View style={styles.commentBody}>
-              <Text style={styles.userName}>
-                {this.props.comment.user.name}
-              </Text>
-              <Text style={styles.commentText}>
-                <HTML value={this.props.comment.body} />
-              </Text>
+  render() {
+    return (
+      <View>
+        <TouchableHighlight
+          onPress={this.props.onSelect.bind(this, this.props.comment)}
+          underlayColor={"#f3f3f3"}>
+          <View>
+            <View style={styles.commentContent}>
+                <Image source={getImage.authorAvatar(this.props.comment.user)}
+                       style={styles.avatar}/>
+              <View style={styles.commentBody}>
+                <Text style={styles.userName}>
+                  {this.props.comment.user.name}
+                </Text>
+                <Text style={styles.commentText}>
+                  <HTML value={this.props.comment.body} />
+                </Text>
+              </View>
             </View>
+            <View style={styles.cellBorder} />
           </View>
-          <View style={styles.cellBorder} />
-        </View>
-      </TouchableHighlight>
-    </View>;
-  }
-});
+        </TouchableHighlight>
+      </View>
+    )//return
+  }//render
+}//class
+CommentItem.propTypes = {comments: React.PropTypes.array.isRequired};
+CommentItem.defaultProps = {comments: []};
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   commentContent: {
     padding: 10,
     flex: 1,
@@ -80,5 +81,3 @@ var styles = StyleSheet.create({
     marginRight: 10
   }
 });
-
-module.exports = CommentItem;
diff --git a/app/ShotCell.js b/app/ShotCell.js
@@ -1,21 +1,24 @@
 "use strict";
 
-var React = require("react-native");
-var {
+import React, {
+  Component,
   Image,
   PixelRatio,
   StyleSheet,
   Text,
   TouchableHighlight,
   View,
   Dimensions
-} = React;
+} from 'react-native';
 
-var getImage = require("./helpers/getImage"),
-    screen = Dimensions.get('window');
+import * as getImage from "./helpers/getImage";
+const screen = Dimensions.get('window');
 
-var ShotCell = React.createClass({
-  render: function() {
+export default class ShotCell extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
     return (
       <View>
         <TouchableHighlight onPress={this.props.onSelect}>
@@ -29,11 +32,11 @@ var ShotCell = React.createClass({
         </TouchableHighlight>
         <View style={styles.cellBorder} />
       </View>
-    );
-  }
-});
+    )//return
+  }//render
+};//class
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   textContainer: {
     flex: 1,
   },
@@ -54,5 +57,3 @@ var styles = StyleSheet.create({
     marginLeft: 4,
   },
 });
-
-module.exports = ShotCell;
diff --git a/app/helpers/api.js b/app/helpers/api.js
@@ -1,6 +1,6 @@
 "use strict";
 
-var API_URL = "https://api.dribbble.com/v1/",
+const API_URL = "https://api.dribbble.com/v1/",
     ACCESS_TOKEN = "7a22f910dcdff63bd3ebbe48d022f05e8268c67249709b5489d923f97bcf96ec";
 
 function fetchData(URL) {
@@ -11,16 +11,15 @@ function fetchData(URL) {
   }).then((response) => response.json())
 }
 
-module.exports = {
-  getShotsByType: function(type: string, pageNumber: ?number): ?Object {
-    var URL = API_URL + "shots/?list=" + type;
-    if (pageNumber) {
-      URL += "&per_page=10&page=" + pageNumber;
-    }
-
-    return fetchData(URL);
-  },
-  getResources: function(url: ?string): ?Object {
-    return fetchData(url);
+export function getShotsByType(type: string, pageNumber: ?number): ?Object {
+  var URL = API_URL + "shots/?list=" + type;
+  if (pageNumber) {
+    URL += "&per_page=10&page=" + pageNumber;
   }
-};
+
+  return fetchData(URL);
+}
+
+export function getResources(url: ?string): ?Object {
+  return fetchData(url);
+}
diff --git a/app/helpers/getImage.js b/app/helpers/getImage.js
@@ -1,18 +1,17 @@
 'use strict';
 
-module.exports = {
-  shotImage: function(shot: Object): {uri: ?string} {
-    var uri = shot.images.normal ? shot.images.normal : shot.images.teaser;
+export function shotImage(shot: Object): {uri: ?string} {
+  var uri = shot.images.normal ? shot.images.normal : shot.images.teaser;
+  return {uri};
+}
+
+export function authorAvatar(player: Object): {uri: ?string} {
+  var uri;
+  if (player) {
+    uri = player.avatar_url;
     return {uri};
-  },
-  authorAvatar: function(player: Object): {uri: ?string} {
-    var uri;
-    if (player) {
-      uri = player.avatar_url;
-      return {uri};
-    } else {
-      uri = require('../../img/AuthorAvatar.png');
-      return uri;
-    }
+  } else {
+    uri = require('../../img/AuthorAvatar.png');
+    return uri;
   }
 }
diff --git a/index.ios.js b/index.ios.js
@@ -3,28 +3,30 @@
  * Github url: https://github.com/catalinmiron/react-native-dribbble-app
  */
 "use strict";
-
-var React = require("react-native");
-var {
+import React, {
+  Component,
   AppRegistry,
   NavigatorIOS,
   StyleSheet,
   TabBarIOS,
   View,
   Text
-} = React;
+} from 'react-native';
 
-var ShotList = require("./app/ShotList"),
-    Icon = require("react-native-vector-icons/FontAwesome");
+import ShotList from "./app/ShotList";
+const Icon = require("react-native-vector-icons/FontAwesome");
 
-var DribbbleApp = React.createClass({
-  getInitialState: function() {
-    return {
-      selectedTab: "default"
-    };
-  },
+export default class DribbbleApp extends Component {
+  constructor(props) {
+    super(props);
 
-  _renderContent: function(category: string, title: ?string) {
+    this.state = {
+        selectedTab: "default"
+    }
+  }//constructor
+
+  //_renderContent(category: string, title: ?string) {
+  _renderContent(category, title) {
     return (
       <NavigatorIOS style={styles.wrapper}
         initialRoute={{
@@ -34,9 +36,9 @@ var DribbbleApp = React.createClass({
         }}
       />
     );
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <TabBarIOS tintColor={"#ea4c89"}>
         <Icon.TabBarItem
@@ -88,11 +90,11 @@ var DribbbleApp = React.createClass({
           {this._renderContent("rebounds", "Rebounds")}
         </Icon.TabBarItem>
       </TabBarIOS>
-    );
-  }
-});
+    ) //return
+  } //render
+}//class
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   tabContent: {
     flex: 1,
     alignItems: "center",
@@ -107,5 +109,3 @@ var styles = StyleSheet.create({
 });
 
 AppRegistry.registerComponent("DribbbleApp", () => DribbbleApp);
-
-module.exports = DribbbleApp;