Got data rending. No classes/styles yet.

static/loadfeed.js

@@ -8,11 +8,18 @@
 	}
 
 	var store = {
-		status: "unauthenticated",
+		status: "unauthorized",
-		userName: "",
+		name: "",
 		feed: []
 	}
 
+	function updateStore(newState) {
+		store = newState;
+		var feed = document.getElementById("feed");
+		var header = document.getElementById("header");
+		render(store, header, feed);
+	}
+
 	$Auth.init(AUTH_SETTINGS);
 
 	if(document.readyState === "loading") {
@@ -26,23 +33,109 @@
 		var header = document.getElementById("header");
 		if(!$Auth.isAuthed()) {
 			if($Auth.wasError()){
-				header.textContent = "It won't work if I can't spy on you.  Are you \
+				updateStore({status:"error", name:"", feed: []});
-					sure you don't want to authorize it?";
-				header.appendChild(createAuthButton("TRY AGAIN"));
 			} else {
-				header.textContent = "First you need to authorize Facebook to allow me \
+				updateStore({status:"unauthorized", name:"", feed: []});
-					to spy on you.";
-				header.appendChild(createAuthButton("AUTHORIZE"));
 			}
 		} else {
+			updateStore({status:"success", name:"", feed: []});
 			$Auth.addExpireListener(onload);
 			header.textContent = "Hello person.";
+			requestFeed($Auth.isAuthed().value, handleRes);
 		}
 
 	}
 
-	function renderFeed() {
+	function render(state, header, feed) {
+		if(!state || state.status === "unauthorized") {
+			
+			header.textContent = "First you need to authorize Facebook to allow me \
+				to spy on you.";
+			header.appendChild(createAuthButton("AUTHORIZE"));
+			feed.textContent = "...loading...";
 
+		} else if(state.status ===  "error") {
+			
+			header.textContent = "It won't work if I can't spy on you.  Are you \
+					sure you don't want to authorize it?";
+			header.appendChild(createAuthButton("TRY AGAIN"));
+			feed.textContent = "...loading...";
+
+		} else if (state.status === "success") {
+
+			feed.textContent = "";
+			
+			header.textContent = "Hello " + (state.name ? state.name : "Person") + ".";
+			var feedEles = state.feed.map(createFeedEle);
+			feedEles.forEach(function(ele){
+				feed.appendChild(ele);
+			});
+		}
+	}
+
+	function requestFeed(token, callback) {
+		var url = "https://graph.facebook.com/v2.10/me?access_token=" + token + 
+			"&debug=all&fields=id%2Cname%2Cfeed.limit(20)%7Bcaption%2Cdescription\
+			%2Cmessage%2Cname%2Cpicture%2Cstory%2Ctype%7D&format=json&method=get&pretty=0&\
+			suppress_http_code=1";
+		var req =  new XMLHttpRequest();
+		req.open("GET", url);
+		req.onreadystatechange = function() {
+			if(req.readyState === XMLHttpRequest.DONE) {
+				if(req.status === 200) {
+					console.log("request complete!");
+					callback(req.response);
+				} else {
+					console.log("request failed!");
+					$Auth.expire();
+				}
+			} else {
+				console.log("not done yet!");
+			}
+
+		};
+		req.send();
+	}
+
+	function handleRes(json) {
+		var data = JSON.parse(json);
+		var feed = data.feed.data.map(function(item) {
+			var type = (item.type === "status")? 
+				(item.story ?  "event" : "post") :
+			  "share";
+
+			switch(type) {
+				case "post":
+					return {
+						id: item.id,
+						title: "You posted...",
+						type: "post",
+						message: item.message
+					}
+					break;
+				case "share":
+					return {
+						id: item.id,
+						type: "share",
+						title: item.story,
+						message: item.message,
+						shareBox: {
+							name: item.name,
+							description: item.description,
+							picture: item.picture
+						}
+					}
+					break;
+				case "event":
+					return {
+						id: item.id,
+						type: "event",
+						event: item.story
+					}
+					break;
+			}
+		});
+		updateStore({status: store.status, name:data.name, feed: feed});
 	}
 
 	function createAuthButton(buttonText) {
@@ -53,6 +146,50 @@
 		button.textContent = buttonText;
 		return button;
 	}
-	
+	function createFeedEle(item) {
-    
+		console.log(item);
+		var container = document.createElement("div");
+		switch(item.type){
+			case "post":
+				var title = document.createElement("div");
+				title.textContent = item.title;
+				var message = document.createElement("div");
+				message.textContent = item.message;
+
+				container.appendChild(title);
+				container.appendChild(message);
+				break;
+			case "share":
+				var title = document.createElement("div");
+				title.textContent = item.title;
+				
+				var message = document.createElement("div");
+				message.textContent = item.message;
+
+				var shareBox = document.createElement("div");
+
+				var shareBox_name = document.createElement("div");
+				shareBox_name.textContent = item.shareBox.name;
+
+				var shareBox_description = document.createElement("div");
+				shareBox_description.textContent = item.shareBox.description;
+
+				var shareBox_image = document.createElement("img");
+				shareBox_image.src = item.shareBox.picture;
+
+				shareBox.appendChild(shareBox_name);
+				shareBox.appendChild(shareBox_description);
+				shareBox.appendChild(shareBox_image);
+
+				container.appendChild(title);
+				container.appendChild(message);
+				container.appendChild(shareBox);
+
+				break;
+			case "event":
+				container.innerText = item.event;
+				break;
+		};
+		return container;
+	}
 })();