Updated example to showcase 3 Transmit components: Newsfeed, Story, a…

…nd Like.
RickWong · Mar 25, 2015 · 8b2d2e7 · 8b2d2e7
1 parent 8a71b6a
commit 8b2d2e7
Show file tree

Hide file tree

Showing 8 changed files with 337 additions and 190 deletions.
diff --git a/README.md b/README.md
@@ -22,14 +22,13 @@ const Newsfeed = React.createClass(...);
 
 export default Transmit.createContainer(Newsfeed, {
 	queryParams: {
-		count: 50,
-		page: 1
+		count: 10
 	},
 	queries: {
 		stories (queryParams, prevProps) {
 			// All Transmit queries return a Promise.
 			return Promise.all([
-				Story.getQuery("story");
+				Story.getQuery("story")
 			]);
 		}
 	}

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-transmit",
   "description": "Relay-inspired library based on Promises instead of GraphQL.",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "BSD-3",
   "repository": {
     "type": "git",
@@ -16,23 +16,23 @@
   ],
   "main": "src/lib/react-transmit.js",
   "scripts": {
-    "localhost": "sleep 2; which open && open http://localhost:8080",
+    "localhost": "sleep 3; which open && open http://localhost:8080",
     "build": "webpack --verbose --colors --display-error-details --config webpack.client.js",
     "watch-client": "webpack --verbose --colors --display-error-details --config webpack.client-watch.js && webpack-dev-server --config webpack.client-watch.js",
     "watch": "concurrent --kill-others 'npm run watch-client' 'npm run localhost'"
   },
   "dependencies": {
-    "react": ">= 0.12.0",
-    "react-inline-css": "1.1.1",
-    "isomorphic-fetch": "2.0.0"
+    "react": ">= 0.12.0"
   },
   "devDependencies": {
     "babel-core": "4.7.16",
     "babel-loader": "4.2.0",
     "babel-runtime": "4.7.16",
     "concurrently": "0.0.5",
+    "isomorphic-fetch": "2.0.0",
     "json-loader": "0.5.1",
     "react-hot-loader": "1.2.3",
+    "react-inline-css": "1.1.1",
     "webpack": "1.7.3",
     "webpack-dev-server": "1.7.0"
   },

diff --git a/src/example/Like.js b/src/example/Like.js
@@ -0,0 +1,70 @@
+import React from "react";
+import InlineCss from "react-inline-css";
+import Transmit from "lib/react-transmit";
+
+/**
+ * @class Like
+ */
+const Like = React.createClass({
+	statics: {
+		css: () => `
+			& {
+				padding: 2px 12px;
+				float: left;
+				width: 50%;
+				font-size: 12px;
+			}
+			& img {
+				float: left;
+				border: 1px solid #e1e1e1;
+				margin-right: 6px;
+				width: 20px;
+				height: 20px;
+			}
+			& h4 {
+				display: inline-block;
+				margin: 4px 0;
+			}`
+	},
+	render () {
+		/**
+		 * This is a Transmit prop.
+		 */
+		const {user} = this.props;
+
+		return (
+			<InlineCss stylesheet={Like.css()} wrapper="li">
+				<img src={user.profile_picture.uri}/>
+				<h4><a href={user.uri} target="_blank">{user.name}</a></h4>
+				<span> likes this.</span>
+			</InlineCss>
+		);
+	}
+});
+
+/**
+ * Like Relay, export a Transmit container instead of the React component.
+ */
+export default Transmit.createContainer(Like, {
+	queryParams: {
+		user: null
+	},
+	queries: {
+		user (queryParams) {
+			if (!queryParams.user) {
+				throw new Error("queryParams.user required");
+			}
+
+			/**
+			 * All Transmit queries must return a promise.
+			 */
+			return Promise.resolve({
+				name: queryParams.user.login,
+				uri: queryParams.user.html_url,
+				profile_picture: {
+					uri: `${queryParams.user.avatar_url}&s=20`
+				}
+			});
+		}
+	}
+});
diff --git a/src/example/Main.js b/src/example/Main.js
@@ -13,38 +13,29 @@ export default React.createClass({
 		 * Style this example app like Facebook.
 		 */
 		css: () => `
+			* {
+				box-sizing: border-box;
+			}
 			body {
 				background: #E9EAED;
-				box-sizing: border-box;
 				font-family: Helvetica, sans-serif;
 			}
-			& .github {
-				position: absolute;
-				top: 0;
-				right: 0;
-				border: 0;
-			}
-			& {
-				width: 500px;
-				margin: 10px auto;
-			}
-			& header {
-				padding: 20px 30px;
-				background: #fff;
-				border: 1px solid #e1e1e1;
-				border-radius: 3px 3px 0 0;
-				font-size: 14px;
-			}
-			& header span, & header span a {
-				color: #6d84b4;
-				font-size: 13px;
-			}
-			& a {
+			a {
 				color: #3B5998;
 				text-decoration: none;
 			}
-			& a:hover {
+			a:hover {
 				text-decoration: underline;
+			}
+			hr {
+				border: none;
+				clear: both;
+			}
+			& .github {
+				position: fixed;
+				top: 0;
+				right: 0;
+				border: 0;
 			}`
 	},
 	render () {
@@ -53,21 +44,9 @@ export default React.createClass({
 		return (
 			<InlineCss stylesheet={this.constructor.css()} namespace="Main">
 				<a className="github" href={repositoryUrl}>
-					<img src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" />
+					<img src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"/>
 				</a>
-				<header>
-					<h1>
-						<a href={repositoryUrl}>React Transmit</a>
-					</h1>
-					<p>
-						Relay-inspired library based on Promises instead of GraphQL.
-					</p>
-					<span>
-						<a href={repositoryUrl + "/stargazers"}>Like</a><span> · </span>
-						<a href={"https://twitter.com/intent/tweet?text=React%20Transmit:%20a%20Relay-inspired+library+based+on+Promises+instead+of+GraphQL.%20" + repositoryUrl + "%20@rygu%20@reactjs"} target="_blank">Share</a>
-					</span>
-				</header>
-				<Newsfeed repositoryUrl={repositoryUrl} />
+				<Newsfeed repositoryUrl={repositoryUrl}/>
 			</InlineCss>
 		);
 	}

diff --git a/src/example/Newsfeed.js b/src/example/Newsfeed.js
@@ -1,4 +1,3 @@
-import _fetch from "isomorphic-fetch";
 import React from "react";
 import InlineCss from "react-inline-css";
 import Transmit from "lib/react-transmit";
@@ -9,40 +8,43 @@ import Story from "example/Story";
  */
 const Newsfeed = React.createClass({
 	statics: {
-		css: (avatarSize) => `
-			& footer {
+		css: () => `
+			& {
+				width: 500px;
+				margin: 0 auto;
+			}
+			& > footer {
 				text-align: center;
-				margin: 12px;
+				margin: 20px;
+			}
+			& button {
+				border: 1px solid #ccc;
+				background: #f4f4f4;
+				padding: 5px 15px;
+				border-radius: 3px;
+				cursor: pointer;
+				outline: 0;
 			}`
 	},
-	onLoadMore (event) {
-		event.preventDefault();
-
+	onLoadMore () {
 		this.props.setQueryParams({
-			page: this.props.queryParams.page + 1
+			nextStoryId: this.props.queryParams.nextStoryId + 1
 		});
 	},
 	render () {
-		// This is a normal property.
-		const repositoryUrl = this.props.repositoryUrl;
-
-		/**
-		 * This is a Transmit property.
-		 */
-		const stories = this.props.stories;
+		// This is a normal prop.
+		const {repositoryUrl} = this.props;
 
 		/**
-		 * Unlike with Relay, Transmit properties aren't guaranteed.
+		 * This is a Transmit prop.
 		 */
-		if (!stories) {
-			return null;
-		}
+		const {stories} = this.props;
 
 		return (
-			<InlineCss stylesheet={Newsfeed.css()} namespace="Newsfeed">
+			<InlineCss stylesheet={Newsfeed.css()}>
 				<main>
-					{stories.map((story, i) => {
-						return <Story story={story} key={i} />;
+					{stories.map((story, key) => {
+						return <Story story={story} key={key}/>;
 					})}
 				</main>
 				<footer>
@@ -60,28 +62,26 @@ const Newsfeed = React.createClass({
  */
 export default Transmit.createContainer(Newsfeed, {
 	queryParams: {
-		count: 50,
-		page: 1
+		nextStoryId: 1
 	},
 	queries: {
-		stories (queryParams, prevProps) {
-			const url = `https://api.github.com/repos/RickWong/react-transmit/stargazers?per_page=${queryParams.count}&page=${queryParams.page}`;
-
-			return fetch(url).then((response) => {
-				return response.json();
-			}).then((stargazers) => {
-				let promises = [];
-
-				if (prevProps.stories) {
-					promises = prevProps.stories.map((story) => Promise.resolve(story));
-				}
-
-				return Promise.all(promises.concat(
-					stargazers.map((stargazer) => {
-						return Story.getQuery("story", {stargazer});
-					})
-				));
-			});
+		stories (queryParams, prevStories = []) {
+			/**
+			 * All Transmit queries must return a promise.
+			 */
+			return Promise.all(
+				prevStories.map(
+					/**
+					 * Turn previous stories into promises so they persist.
+ 					 */
+					(prevStory) => Promise.resolve(prevStory)
+				).concat(
+					/**
+					 *  Add new story as promise.
+					 */
+					[Story.getQuery("story", {storyId: queryParams.nextStoryId})]
+				)
+			);
 		}
 	}
 });