// ==UserScript==
// @name         Shared Project Viewer
// @namespace    http://tampermonkey.net/
// @license      MIT
// @version      0.52
// @description  Adds a page at scratch.mit.edu/shared to see projects people you follow have shared.
// @author       Mrcoat
// @match        *://scratch.mit.edu/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=scratch.mit.edu
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    // Your code here...
    if (window.location.href == "https://scratch.mit.edu/shared/" || window.location.href == "https://scratch.mit.edu/shared") {
        getToken().then(
            (value) => {
                start(value[0],value[1]);
            }
        );
        const content = document.getElementById("content");
        var link = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('href', 'https://scratch.mit.edu/splash.css');
        document.head.appendChild(link);
        content.innerHTML = '<div class="box activity"><div class="box-header"><h4>Who shared what?</h4><h5></h5><p><a></a></p></div><div class="box-content"><ul id="list" class="activity-ul"></div></div></li></ul></div></div>';
    } else {
        const element = document.getElementsByTagName("ul")[0];
        element.innerHTML = element.innerHTML + '<li class="link about"><a href="/shared/"><span>Shared</span></a></li>';
        console.log(element.innerHTML);
    }
})();

async function getToken() {
    const response = await fetch("https://scratch.mit.edu/session/", {"headers": {"X-Requested-With":"XMLHttpRequest"}});
    const session = await response.json();
    return [session.user.token, session.user.username];
}

function start(token,user) {
    const response = fetch("https://api.scratch.mit.edu/users/"+user+"/following/users/activity?limit=40&x-token="+token, {"headers": {"X-Requested-With":"XMLHttpRequest"}})
        .then((response) => response.json()).then((data) => readData(data));
}

function readData(data) {
    const list = document.getElementById("list");
    for (let i=0;i<data.length;i++) {
        // console.log(data[i].type)
        if (data[i].type=="shareproject") {
            list.innerHTML = list.innerHTML + '<li class="activity-li"><a href=/projects/'+data[i].project_id+'/><img src="//cdn2.scratch.mit.edu/get_image/project/'+data[i].project_id+'_300x300.png"><a href="/users/'+data[i].actor_username+'/"><img alt="" class="activity-img" src="//uploads.scratch.mit.edu/users/avatars/'+data[i].actor_id+'.png"></a><div class="social-message mod-love-favorite"><div class="flex-row mod-social-message"><div class="social-message-content"><div><span><a href="/users/'+data[i].actor_username+'">'+data[i].actor_username+'</a> shared <a href="/projects/'+data[i].project_id+'">'+data[i].title+'</a></span></div></div><span class="social-message-date"><span>'+data[i].datetime_created+'</span></span></div></div></li>';
        }
    }
}