Add release channel name to project list in home (#1539)

* [home] Add release channel name to project list

* [home] Better flex behavior for project rows

* [home] Add comment about extractReleaseChannel

fbshipit-source-id: dce2410

js/Home/components/SmallProjectCard.js

@@ -24,7 +24,16 @@ import TouchableNativeFeedbackSafe from '@expo/react-native-touchable-native-fee
 @withNavigation
 export default class SmallProjectCard extends React.Component {
   render() {
-    let { hideUsername, likeCount, projectName, projectUrl, username, privacy, slug } = this.props;
+    let {
+      hideUsername,
+      likeCount,
+      projectName,
+      projectUrl,
+      username,
+      privacy,
+      slug,
+      releaseChannel,
+    } = this.props;
 
     const isUnlisted = privacy === 'unlisted';
     const renderLikes = typeof likeCount === 'number' && !isUnlisted;
@@ -39,9 +48,22 @@ export default class SmallProjectCard extends React.Component {
         <View style={styles.iconContainer}>{this._maybeRenderIcon()}</View>
 
         <View style={[styles.infoContainer, !this.props.fullWidthBorder && styles.bottomBorder]}>
-          <Text style={styles.projectNameText} ellipsizeMode="tail" numberOfLines={1}>
-            {projectName}
-          </Text>
+          <View style={styles.projectNameContainer}>
+            <View style={{ flex: 1, flexGrow: 4 }}>
+              <Text style={styles.projectNameText} ellipsizeMode="tail" numberOfLines={1}>
+                {projectName}
+              </Text>
+            </View>
+            {releaseChannel && releaseChannel !== 'default' ? (
+              <View style={{ flex: 1, flexGrow: 2 }}>
+                <View style={styles.releaseChannelContainer}>
+                  <Text style={styles.releaseChannelText} numberOfLines={1} ellipsizeMode="tail">
+                    {releaseChannel}
+                  </Text>
+                </View>
+              </View>
+            ) : null}
+          </View>
 
           <View style={styles.projectExtraInfoContainer}>
             <Text
@@ -166,11 +188,14 @@ const styles = StyleSheet.create({
     alignSelf: 'stretch',
     paddingBottom: 10,
   },
+  projectNameContainer: {
+    flexDirection: 'row',
+    marginRight: 10,
+    marginBottom: 2,
+  },
   projectNameText: {
     color: Colors.blackText,
     fontSize: 15,
-    marginRight: 70,
-    marginBottom: 2,
     ...Platform.select({
       ios: {
         fontWeight: '500',
@@ -181,6 +206,22 @@ const styles = StyleSheet.create({
       },
     }),
   },
+  releaseChannelContainer: {
+    alignSelf: 'flex-end',
+    marginTop: -1,
+    marginLeft: 5,
+    paddingRight: 5,
+    backgroundColor: 'rgba(0,0,0,0.025)',
+    borderRadius: 4,
+    paddingHorizontal: 5,
+    paddingVertical: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  releaseChannelText: {
+    color: '#888',
+    fontSize: 11,
+  },
   projectExtraInfoContainer: {
     flexDirection: 'row',
     alignItems: 'center',

js/Home/screens/ProjectsScreen.js

@@ -26,6 +26,8 @@ import SmallProjectCard from '../components/SmallProjectCard';
 import ProjectTools from '../components/ProjectTools';
 import ExStore from 'ExStore';
 
+import extractReleaseChannel from '../../Util/extractReleaseChannel';
+
 @createFocusAwareComponent
 @withNavigation
 @connect(data => HomeScreen.getDataProps(data))
@@ -141,6 +143,11 @@ export default class HomeScreen extends React.Component {
       <SmallProjectCard
         key={project.manifestUrl}
         iconUrl={project.manifest.iconUrl}
+        releaseChannel={
+          /* 28/11/17(brentvatne) - we can remove extractReleaseChannel in a couple of months
+          when project history is unlikely to include any projects with release channels */
+          project.manifest.releaseChannel || extractReleaseChannel(project.manifestUrl)
+        }
         projectName={project.manifest.name}
         username={
           project.manifestUrl.includes('exp://exp.host')

js/Util/extractReleaseChannel.js

@@ -0,0 +1,11 @@
+const url = require('url');
+
+export default function extractReleaseChannel(manifestUrl) {
+  let parsedUrl = url.parse(manifestUrl, true);
+  let releaseChannel = parsedUrl.query && parsedUrl.query['release-channel'];
+  if (!releaseChannel) {
+    return 'default';
+  } else {
+    return releaseChannel;
+  }
+}