Add formatNumber function

app/components/SpotCard.jsx

@@ -16,7 +16,7 @@ import React, {
 import { Avatar, ResponsiveImage } from '.';
 import { Profile, Spot } from '../views';
 
-import { formatTime } from '../utils';
+import { formatNumber, formatTime } from '../utils';
 
 import Icon from 'react-native-vector-icons/EvilIcons';
 
@@ -111,11 +111,11 @@ class SpotCard extends Component {
               <TouchableOpacity onPress={this.toggleLike.bind(this)}>
                 <Icon name="star" size={30} color={this.state.liked ? '#CC9B47' : '#AAA'} />
               </TouchableOpacity>
-              <Text style={{ marginLeft: 8, marginTop: 4, color: '#AAA' }}>{data.likesCount}</Text>
+              <Text style={{ marginLeft: 8, marginTop: 4, color: '#AAA' }}>{formatNumber(data.likesCount)}</Text>
             </View>
             <View style={{ marginLeft: 16, flexDirection: 'row' }}>
               <Icon name="comment" size={30} color="#AAA" />
-              <Text style={{ marginLeft: 8, marginTop: 4, color: '#AAA' }}>{data.commentsCount}</Text>
+              <Text style={{ marginLeft: 8, marginTop: 4, color: '#AAA' }}>{formatNumber(data.commentsCount)}</Text>
             </View>
 
             <TouchableOpacity

app/utils.js

@@ -21,3 +21,21 @@ export function formatTime(timestamp: Date | string): string {
 
   return interval + '' + periods[i];
 }
+
+// http://stackoverflow.com/a/10600491
+export function formatNumber(number: number): string {
+  let round: (n: number, precision: number) => number = (n, precision) => {
+    let prec = Math.pow(10, precision);
+
+    return Math.round(n * prec) / prec;
+  };
+
+  let format: (n: number) => string = n => {
+    let base = Math.floor(Math.log(Math.abs(n)) / Math.log(1000));
+    let suffix = 'KMB'[base - 1];
+
+    return suffix ? round(n / Math.pow(1000, base), 2) + suffix : '' + n;
+  };
+
+  return format(number);
+}

app/views/Feed.jsx

@@ -49,7 +49,7 @@ class Feed extends Component {
   componentDidMount(): void {
     console.log("Feed View Mounted");
 
-    fetch('http://192.168.100.102:1998/api/spots', {
+    fetch('http://10.28.163.16:1998/api/spots', {
       method: 'GET'
     })
     .then(res => res.json())

app/views/NewSpotSource.jsx

@@ -13,7 +13,7 @@ import React, {
 
 import { NextButton, TopBar } from '../components';
 
-import { Search } from '.';
+import { SpotEditor } from '.';
 
 class NewSpotSource extends Component {
   constructor(props: Object): void {
@@ -31,7 +31,7 @@ class NewSpotSource extends Component {
         <TopBar
           title='New Spot'
           rightButton={
-            <NextButton onPress={() => push({ component: Search })} />
+            <NextButton onPress={() => push({ component: SpotEditor })} />
           }
         />
 

app/views/SpotEditor.jsx

@@ -0,0 +1,57 @@
+/* @flow */
+
+'use strict';
+
+import React, {
+  Component,
+  StyleSheet,
+  Text,
+  View,
+  TextInput,
+  ScrollView,
+} from 'react-native';
+
+import { NextButton, TopBar } from '../components';
+
+import { Search } from '.';
+
+class SpotEditor extends Component {
+  constructor(props: Object): void {
+    super(props);
+
+    this.state = {};
+  }
+
+  render(): ReactElement {
+    let { push, ...other } = this.props;
+
+    return (
+      <View style={styles.container}>
+
+        <TopBar
+          title='Spot Editor'
+          rightButton={
+            <NextButton onPress={() => push({ component: Search })} />
+          }
+        />
+
+        <ScrollView
+          style={styles.container}
+          automaticallyAdjustContentInsets={false}
+        >
+
+          <Text>New Spot Editor</Text>
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+});
+
+export { SpotEditor };

app/views/index.js

@@ -7,4 +7,4 @@ export { Notifications } from './Notifications';
 export { Profile } from './Profile';
 export { Search } from './Search';
 export { Spot } from './Spot';
-
+export { SpotEditor } from './SpotEditor';