Oauth-Example/static/loadfeed.js

196 lines
4.9 KiB
JavaScript
Raw Normal View History

2017-09-28 23:03:15 +00:00
(function(){
'use strict';
2017-10-06 05:26:57 +00:00
var AUTH_SETTINGS = {
clientID: "1944365805820399",
redirectURI: "http://localhost:3000/",
authEndpoint: "https://www.facebook.com/v2.10/dialog/oauth",
requiredPerms: ["user_posts"]
2017-09-28 23:03:15 +00:00
}
2017-10-06 05:26:57 +00:00
var store = {
status: "unauthorized",
name: "",
2017-10-06 05:26:57 +00:00
feed: []
2017-09-28 23:03:15 +00:00
}
function updateStore(newState) {
store = newState;
var feed = document.getElementById("feed");
var header = document.getElementById("header");
render(store, header, feed);
}
2017-10-06 05:26:57 +00:00
$Auth.init(AUTH_SETTINGS);
if(document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", onload);
} else {
onload();
}
function onload(){
2017-09-28 23:03:15 +00:00
var feed = document.getElementById("feed");
2017-10-06 05:26:57 +00:00
var header = document.getElementById("header");
if(!$Auth.isAuthed()) {
if($Auth.wasError()){
updateStore({status:"error", name:"", feed: []});
2017-10-06 05:26:57 +00:00
} else {
updateStore({status:"unauthorized", name:"", feed: []});
2017-10-06 05:26:57 +00:00
}
2017-09-28 23:03:15 +00:00
} else {
updateStore({status:"success", name:"", feed: []});
2017-10-06 05:26:57 +00:00
$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);
});
2017-09-28 23:03:15 +00:00
}
}
2017-09-28 23:03:15 +00:00
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();
2017-10-06 05:26:57 +00:00
}
2017-09-28 23:03:15 +00:00
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";
2017-09-28 23:03:15 +00:00
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});
2017-09-28 23:03:15 +00:00
}
2017-10-06 05:26:57 +00:00
function createAuthButton(buttonText) {
var button = document.createElement("Button");
button.onclick = function(){$Auth.gotoAuth();};
button.value = "authorize";
button.type = "button";
button.textContent = buttonText;
return button;
2017-09-28 23:03:15 +00:00
}
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;
}
2017-09-28 23:03:15 +00:00
})();