From afe7e2d63d4567ee77556650c223137186c03aa6 Mon Sep 17 00:00:00 2001 From: John Shaver Date: Fri, 6 Oct 2017 15:30:57 -0700 Subject: [PATCH] Got data rending. No classes/styles yet. --- static/loadfeed.js | 159 +++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 148 insertions(+), 11 deletions(-) diff --git a/static/loadfeed.js b/static/loadfeed.js index d80f7c1..70f8454 100644 --- a/static/loadfeed.js +++ b/static/loadfeed.js @@ -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 { - header.textContent = "First you need to authorize Facebook to allow me \ - to spy on you."; - header.appendChild(createAuthButton("AUTHORIZE")); + updateStore({status:"unauthorized", name:"", feed: []}); } } 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; + } })();