Got data rending. No classes/styles yet.
This commit is contained in:
parent
83e050345d
commit
afe7e2d63d
1 changed files with 148 additions and 11 deletions
|
|
@ -8,11 +8,18 @@
|
|||
}
|
||||
|
||||
var store = {
|
||||
status: "unauthenticated",
|
||||
userName: "",
|
||||
status: "unauthorized",
|
||||
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 \
|
||||
sure you don't want to authorize it?";
|
||||
header.appendChild(createAuthButton("TRY AGAIN"));
|
||||
updateStore({status:"error", name:"", feed: []});
|
||||
} else {
|
||||
updateStore({status:"unauthorized", name:"", feed: []});
|
||||
}
|
||||
} else {
|
||||
updateStore({status:"success", name:"", feed: []});
|
||||
$Auth.addExpireListener(onload);
|
||||
header.textContent = "Hello person.";
|
||||
requestFeed($Auth.isAuthed().value, handleRes);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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 {
|
||||
$Auth.addExpireListener(onload);
|
||||
header.textContent = "Hello person.";
|
||||
console.log("not done yet!");
|
||||
}
|
||||
|
||||
};
|
||||
req.send();
|
||||
}
|
||||
|
||||
function renderFeed() {
|
||||
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;
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in a new issue