Replace defaultLink with infoLink in Showcase

Reviewed By: ericvicenti Differential Revision: D4671154 fbshipit-source-id: ee9df269b91ec140afc8dace9bbf960f9a47f0b0
facebook · Mar 9, 2017 · 04ef14f · 04ef14f
1 parent ca09981
commit 04ef14f
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 110 deletions.
diff --git a/website/core/ShowcaseAppIcon.js b/website/core/ShowcaseAppIcon.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ShowcaseAppIcon
+ */
+
+'use strict';
+
+var React = require('React');
+
+const ShowcaseAppIcon = React.createClass({
+  render: function() {
+    return (
+      <a href={this.props.linkUri}>
+        <img src={this.props.iconUri} alt={this.props.name} />
+      </a>
+    );
+  }
+});
+
+module.exports = ShowcaseAppIcon;
diff --git a/website/showcase.json b/website/showcase.json
@@ -6,7 +6,6 @@
     "linkPlayStore": "https://play.google.com/store/apps/details?id=com.facebook.katana&hl=en",
     "infoLink": "https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/",
     "infoTitle": "Using React Native in the Facebook App",
-    "defaultLink": "https://itunes.apple.com/app/facebook/id284882215",
     "pinned": true
   },
   {
@@ -16,16 +15,6 @@
     "linkPlayStore": "https://play.google.com/store/apps/details?id=com.facebook.adsmanager",
     "infoLink": "https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/",
     "infoTitle": "How We Built the First Cross-Platform React Native App",
-    "defaultLink": "https://itunes.apple.com/us/app/facebook-ads-manager/id964397083?mt=8",
-    "pinned": true
-  },
-  {
-    "name": "Facebook Groups",
-    "icon": "http://is4.mzstatic.com/image/pf/us/r30/Purple69/v4/57/f8/4c/57f84c0c-793d-5f9a-95ee-c212d0369e37/mzl.ugjwfhzx.png",
-    "linkAppStore": "https://itunes.apple.com/us/app/facebook-groups/id931735837?mt=8",
-    "infoLink": "https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/",
-    "infoTitle": "React Native: Bringing Modern Web Techniques to Mobile",
-    "defaultLink": "https://itunes.apple.com/us/app/facebook-groups/id931735837?mt=8",
     "pinned": true
   },
   {
@@ -35,7 +24,6 @@
     "linkPlayStore": "https://play.google.com/store/apps/details?id=com.instagram.android&referrer=utm_source%3Dinstagramweb%26utm_campaign%3DunifiedHome%26utm_medium%3Dbadge",
     "infoLink": "https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7#.3h4wir4zr",
     "infoTitle": "React Native at Instagram",
-    "defaultLink": "https://www.instagram.com/",
     "pinned": true
   },
   {
@@ -45,35 +33,56 @@
     "linkPlayStore": "https://play.google.com/store/apps/details?id=com.airbnb.android&hl=en&referrer=bev%3D1472279725_4ITWKWGX6KrmU6pT%26utm_medium%3Dweb%26utm_source%3Dairbnb",
     "infoLink": "https://www.youtube.com/watch?v=tUfgQtmG3R0",
     "infoTitle": "Hybrid React Native Apps at Airbnb",
-    "defaultLink": "https://www.airbnb.com/mobile",
     "pinned": true
   },
   {
-    "name": "Baidu (手机百度)",
+    "name": "Walmart",
+    "icon": "http://is2.mzstatic.com/image/thumb/Purple111/v4/64/9f/20/649f2026-e968-0417-660c-e5ee6d7977ff/source/350x350bb.jpg",
+    "linkAppStore": "https://itunes.apple.com/us/app/walmart-app-shopping-savings/id338137227?mt=8",
+    "linkPlayStore": "https://play.google.com/store/apps/details?id=com.walmart.android&hl=en",
+    "infoLink": " https://medium.com/walmartlabs/react-native-at-walmartlabs-cdd140589560#.ueonqqloc",
+    "infoTitle": "React Native at Walmart Labs",
+    "pinned": true
+  },
+  {
+    "name": "Tesla",
+    "icon": "https://lh3.googleusercontent.com/b79jRmQK2sZABaN0xI2wIAFrEcBxs0CuDzNTmF088DGrJXbemaMNRvrhqH0St28J7CU=w300-rw",
+    "linkPlayStore": "https://play.google.com/store/apps/details?id=com.teslamotors.tesla",
+    "linkAppStore": "https://itunes.apple.com/us/app/tesla-motors/id582007913?mt=8",
+    "pinned": true
+  },
+  {
+    "name": "Tencent QQ",
+    "icon": "http://pp.myapp.com/ma_icon/0/icon_6633_1461768893/96",
+    "linkPlayStore": "http://android.myapp.com/myapp/detail.htm?apkName=com.tencent.mobileqq",
+    "infoLink": "https://www.tencent.com/en-us/system.html",
+    "infoTitle": "QQ is China's largest messaging platform, with over 829 million active accounts",
+    "pinned": true
+  },
+  {
+    "name": "Baidu Mobile (手机百度)",
     "icon": "http://a3.mzstatic.com/us/r30/Purple62/v4/90/7c/9b/907c9b4e-556d-1a45-45d4-0ea801719abd/icon175x175.png",
     "linkPlayStore": "http://shouji.baidu.com/software/9896302.html",
-    "linkAppStore": "https://itunes.apple.com/en/app/shou-ji-bai-du-hai-liang-xin/id382201985?l=en&mt=8",
+    "linkAppStore": "https://itunes.apple.com/us/app/%E6%89%8B%E6%9C%BA%E7%99%BE%E5%BA%A6-%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B%E4%BD%A0%E5%B0%B1%E5%BE%97%E5%88%B0/id382201985?mt=8",
     "infoLink": "http://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K",
-    "infoTitle": "Baidu is a search engine that has 600 million users.",
-    "defaultLink": "http://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K",
+    "infoTitle": "Baidu Mobile is a search engine used by over 600 million people in China",
     "pinned": true
   },
   {
-    "name": "Discord",
-    "icon": "http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg",
-    "linkAppStore":  "https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8",
-    "infoLink": "https://discord.engineering/react-native-deep-dive-91fd5e949933#.5jnqftgof",
-    "infoTitle": "Using React Native: One Year Later",
-    "defaultLink": "https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8",
+    "name": "Bloomberg",
+    "icon": "http://is1.mzstatic.com/image/thumb/Purple71/v4/31/24/72/312472df-3d53-0acf-fc31-8a25682e528f/source/175x175bb.jpg",
+    "linkAppStore": "https://itunes.apple.com/us/app/bloomberg/id281941097?mt=8",
+    "linkPlayStore": "https://play.google.com/store/apps/details?id=com.bloomberg.android.plus&hl=en",
+    "infoLink": "https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/",
+    "infoTitle": "How Bloomberg Used React Native to Develop its new Consumer App",
     "pinned": true
   },
   {
-    "name": "Gyroscope",
-    "icon": "https://media.gyrosco.pe/images/magneto/180x180.png",
-    "linkAppStore": "https://itunes.apple.com/app/apple-store/id1104085053?pt=117927205&ct=website&mt=8",
-    "infoLink": "https://blog.gyrosco.pe/building-the-app-1dac1a97d253",
-    "infoTitle": "Building a visualization experience with React Native",
-    "defaultLink": "https://itunes.apple.com/app/apple-store/id1104085053?pt=117927205&ct=website&mt=8",
+    "name": "Vogue",
+    "icon": "http://a2.mzstatic.com/us/r30/Purple30/v4/06/24/92/0624927f-a389-746c-27f9-e2466d59e55b/icon175x175.jpeg",
+    "linkAppStore": "https://itunes.apple.com/app/apple-store/id1087973225?pt=45076&ct=site-promo&mt=8",
+    "infoLink": "http://www.vogue.com/app",
+    "infoTitle": "",
     "pinned": true
   },
   {
@@ -82,44 +91,30 @@
     "linkPlayStore": "https://play.google.com/store/apps/details?id=st.li.listapp",
     "infoLink": "https://www.youtube.com/watch?v=cI9bDvDEsYE",
     "infoTitle": "Building li.st for Android with React Native",
-    "defaultLink": "https://play.google.com/store/apps/details?id=st.li.listapp",
     "pinned": true
   },
   {
-    "name": "QQ",
-    "icon": "http://pp.myapp.com/ma_icon/0/icon_6633_1461768893/96",
-    "linkPlayStore": "http://android.myapp.com/myapp/detail.htm?apkName=com.tencent.mobileqq",
-    "infoLink": "https://en.wikipedia.org/wiki/Tencent_QQ",
-    "infoTitle": "QQ is a Chinese messaging service with 829 million active accounts",
-    "defaultLink": "http://android.myapp.com/myapp/detail.htm?apkName=com.tencent.mobileqq",
+    "name": "Discord",
+    "icon": "http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg",
+    "linkAppStore":  "https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8",
+    "infoLink": "https://discord.engineering/react-native-deep-dive-91fd5e949933#.5jnqftgof",
+    "infoTitle": "Using React Native: One Year Later",
+    "pinned": true
+  },
+  {
+    "name": "Gyroscope",
+    "icon": "https://media.gyrosco.pe/images/magneto/180x180.png",
+    "linkAppStore": "https://itunes.apple.com/app/apple-store/id1104085053?pt=117927205&ct=website&mt=8",
+    "infoLink": "https://blog.gyrosco.pe/building-the-app-1dac1a97d253",
+    "infoTitle": "Building a visualization experience with React Native",
     "pinned": true
   },
   {
     "name": "Townske",
     "icon": "http://a3.mzstatic.com/us/r30/Purple69/v4/8b/42/20/8b4220af-5165-91fd-0f05-014332df73ef/icon175x175.png",
     "linkAppStore": "https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8",
     "infoLink": "https://hackernoon.com/townske-app-in-react-native-6ad557de7a7c",
-    "infoTitle": "\"I would recommend React Native in a heartbeat.\"",
-    "defaultLink": "https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8",
-    "pinned": true
-  },
-  {
-    "name": "Vogue",
-    "icon": "http://a2.mzstatic.com/us/r30/Purple30/v4/06/24/92/0624927f-a389-746c-27f9-e2466d59e55b/icon175x175.jpeg",
-    "linkAppStore": "https://itunes.apple.com/app/apple-store/id1087973225?pt=45076&ct=site-promo&mt=8",
-    "infoLink": "http://www.vogue.com/app",
-    "infoTitle": "",
-    "defaultLink": "https://itunes.apple.com/app/apple-store/id1087973225?pt=45076&ct=site-promo&mt=8",
-    "pinned": true
-  },
-  {
-    "name": "Walmart",
-    "icon": "http://is2.mzstatic.com/image/thumb/Purple111/v4/64/9f/20/649f2026-e968-0417-660c-e5ee6d7977ff/source/350x350bb.jpg",
-    "linkAppStore": "https://itunes.apple.com/us/app/walmart-app-shopping-savings/id338137227?mt=8",
-    "linkPlayStore": "https://play.google.com/store/apps/details?id=com.walmart.android&hl=en",
-    "infoLink": " https://medium.com/walmartlabs/react-native-at-walmartlabs-cdd140589560#.ueonqqloc",
-    "infoTitle": "React Native at Walmart Labs",
-    "defaultLink": "https://itunes.apple.com/us/app/walmart-app-shopping-savings/id338137227?mt=8",
+    "infoTitle": "The experience of a web developer building an app using React Native",
     "pinned": true
   },
   {
@@ -144,7 +139,7 @@
     "linkPlayStore": "http://android.myapp.com/myapp/detail.htm?apkName=com.tencent.edu",
     "linkAppStore": "https://itunes.apple.com/cn/app/teng-xun-ke-tang-zhuan-ye/id931720936?mt=8",
     "infoLink": "http://baike.baidu.com/view/13030839.htm",
-    "infoTitle": "Classroom is an education app by Chinese Internet giant Tencent",
+    "infoTitle": "Classroom is an education app by Chinese Internet giant Baidu",
     "pinned": false
   },
   {
@@ -441,15 +436,6 @@
     "infoTitle": "How we built Chop",
     "pinned": false
   },
-  {
-    "name": "Bloomberg",
-    "icon": "http://is1.mzstatic.com/image/thumb/Purple71/v4/31/24/72/312472df-3d53-0acf-fc31-8a25682e528f/source/175x175bb.jpg",
-    "linkAppStore": "https://itunes.apple.com/us/app/bloomberg/id281941097?mt=8",
-    "linkPlayStore": "https://play.google.com/store/apps/details?id=com.bloomberg.android.plus&hl=en",
-    "infoLink": "https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/",
-    "infoTitle": "How Bloomberg Used React Native to Develop its new Consumer App",
-    "pinned": false
-  },
   {
     "name": "Blink",
     "icon": "https://lh3.googleusercontent.com/QaId7rFtOjAT-2tHVkKB4lebX_w4ujWiO7ZIDe3Hd99TfBmPmiZySbLbVJV65qs0ViM=w300-rw",

diff --git a/website/src/react-native/index.js b/website/src/react-native/index.js
@@ -8,17 +8,18 @@
  */
 'use strict';
 
-var Hero = require('Hero');
-var Prism = require('Prism');
-var React = require('React');
-var Site = require('Site');
-var Metadata = require('Metadata');
+const Hero = require('Hero');
+const Metadata = require('Metadata');
+const Prism = require('Prism');
+const React = require('React');
+const ShowcaseAppIcon = require('ShowcaseAppIcon');
+const Site = require('Site');
 
 const pinnedApps = Metadata.showcaseApps.filter(app => {
   return app.pinned;
 });
 
-var AppList = React.createClass({
+const AppList = React.createClass({
   render: function() {
     return (
       <div>
@@ -30,29 +31,16 @@ var AppList = React.createClass({
   _renderApp: function(app, i) {
     return (
       <div className="showcase" key={i}>
-        {this._renderIcon(app)}
+        <ShowcaseAppIcon
+          iconUri={app.icon}
+          name={app.name}
+          linkUri={app.infoLink} />
       </div>
     );
   },
-
-  _renderIcon: function(app) {
-    return (
-      <a href={app.infoLink}>
-        <img src={app.icon} alt={app.name} />
-      </a>
-    );
-  },
-
-  _renderTitle: function(app) {
-    return (
-      <a href={app.infoLink}>
-        <h3>{app.name}</h3>
-      </a>
-    );
-  },
 });
 
-var index = React.createClass({
+const index = React.createClass({
   render: function() {
     return (
       <Site>

diff --git a/website/src/react-native/showcase.js b/website/src/react-native/showcase.js
@@ -8,9 +8,10 @@
 */
 'use strict';
 
-var React = require('React');
-var Site = require('Site');
-var Metadata = require('Metadata');
+const Metadata = require('Metadata');
+const React = require('React');
+const ShowcaseAppIcon = require('ShowcaseAppIcon');
+const Site = require('Site');
 
 /*
  * Thousands of applications use React Native, so we can't list all of them
@@ -66,13 +67,7 @@ const featuredApps = showcaseApps.filter(app => {
 
 const apps = pinnedApps.concat(featuredApps);
 
-var AppIcon = React.createClass({
-  render: function() {
-    return <img src={this.props.icon} alt={this.props.appName} />;
-  }
-});
-
-var AppList = React.createClass({
+const AppList = React.createClass({
 
   render: function() {
     return (
@@ -86,10 +81,13 @@ var AppList = React.createClass({
     return (
       <div className="showcase" key={i}>
         <div>
-          {this._renderAppIcon(app)}
-          {this._renderAppName(app)}
+          <ShowcaseAppIcon
+            iconUri={app.icon}
+            name={app.name}
+            linkUri={app.infoLink} />
+          {this._renderAppName(app.name)}
           {this._renderLinks(app)}
-          {this._renderInfo(app)}
+          {this._renderInfo(app.infoTitle, app.infoLink)}
         </div>
       </div>
     );
@@ -99,14 +97,14 @@ var AppList = React.createClass({
     return <img src={app.icon} alt={app.name} />;
   },
 
-  _renderAppName: function(app) {
-    return <h3>{app.name}</h3>;
+  _renderAppName: function(name) {
+    return <h3>{name}</h3>;
   },
 
-  _renderInfo: function(app) {
+  _renderInfo: function(title, uri) {
     let info = null;
-    if (app.infoLink) {
-      info = <p><a href={app.infoLink} target="_blank">{app.infoTitle}</a></p>;
+    if (uri) {
+      info = <p><a href={uri} target="_blank">{title}</a></p>;
     }
 
     return (
@@ -132,7 +130,7 @@ var AppList = React.createClass({
   },
 });
 
-var showcase = React.createClass({
+const showcase = React.createClass({
   render: function() {
     return (
       <Site section="showcase" title="Showcase">