Merge pull request #5 from scpwiki/caching

Caching

Author: rossjrw

.eslintrc.json

@@ -1,7 +1,9 @@
 {
     "env": {
         "browser": true,
-        "es2020": true
+        "es2020": true,
+        "greasemonkey": true,
+        "jquery": true
     },
     "extends": "eslint:recommended",
     "parserOptions": {

.prettierrc.json

@@ -0,0 +1 @@
+{}

package-lock.json

@@ -17,6 +17,7 @@
   },
   "homepage": "https://github.com/scpwiki/SCP-Wiki-Staff-Identification#readme",
   "devDependencies": {
-    "eslint": "^7.6.0"
+    "eslint": "^7.6.0",
+    "prettier": "2.5.1"
   }
 }

package.json

@@ -35,55 +35,70 @@ select "SCP-Wiki Staff Identification", and click Uninstall.
 // ==/UserScript==
 
 "use strict";
-var staff, doCount = 0;
+var staff,
+  doCount = 0;
+var day = 1000 * 60 * 60 * 24;
 
 // page is loaded, let's do this
 getStaffList();
 
 // we also need to do this whenever the user changes page
-jQuery(document).on("click",".pager .target a",function(e) {
+jQuery(document).on("click", ".pager .target a", function () {
   doCount = 0;
   setStaffIds(staff);
 });
 
-
 //the data should already be fetched, so we can skip the fetching step
 
 // fetch the whole list of staff from 05command
 function getStaffList() {
-  GM.xmlHttpRequest({
-    method: "GET",
-    url: "http://05command.wikidot.com/staff-list",
-    /*headers: {
-      "User-Agent": "Mozilla/5.0",  // If not specified, navigator.userAgent will be used.
-    },*/
-    timeout: 10000,
-    onload: function(response) {
-      structureStaffList(response.responseText);
-    },
-    onerror: function(response) {
-      console.error("An error occurred while fetching staff data");
-    },
-    ontimeout: function(response) {
-      console.error("The request to fetch staff data timed out");
-    }
-  });
+  var lastFetchedTimestamp = localStorage.getItem("scp-staff-ids-timestamp");
+  var lastFetchedResponse = localStorage.getItem("scp-staff-ids-response");
+  var useCachedResponse =
+    lastFetchedTimestamp != null &&
+    lastFetchedResponse != null &&
+    new Date(lastFetchedTimestamp).getTime() + day > new Date().getTime();
+
+  if (useCachedResponse) {
+    console.info("SCP Wiki Staff ID: Using cached staff list");
+    structureStaffList(lastFetchedResponse);
+  } else {
+    console.info("SCP Wiki Staff ID: Fetching new staff list");
+    GM.xmlHttpRequest({
+      method: "GET",
+      url: "http://05command.wikidot.com/staff-list",
+      timeout: 10000,
+      onload: function (response) {
+        localStorage.setItem("scp-staff-ids-timestamp", new Date());
+        localStorage.setItem("scp-staff-ids-response", response.responseText);
+        structureStaffList(response.responseText);
+      },
+      onerror: function () {
+        console.error("An error occurred while fetching staff data");
+      },
+      ontimeout: function () {
+        console.error("The request to fetch staff data timed out");
+      },
+    });
+  }
 }
 
 // rummage through the list of staff and twist it into a format that JS understands
 function structureStaffList(staffText) {
   var parser = new DOMParser();
-  var staffList = parser.parseFromString(staffText, "application/xml").getElementById('page-content');
+  var staffList = parser
+    .parseFromString(staffText, "application/xml")
+    .getElementById("page-content");
   // next thing to do is to compile a list of all of the staff members
   staff = [];
   var staffType = "Staff Member";
   // 4 tables:  admin, mod, opstaff, jstaff
 
-  for(let node = 0; node < staffList.childNodes.length; node++) {
+  for (let node = 0; node < staffList.childNodes.length; node++) {
     var currNode = staffList.childNodes[node];
 
     // if the current node is not a table, we don't care about it, but if it's a title then we can use it to get the current staff type instead of hardcoding that
-    switch(currNode.nodeName.toLowerCase()) {
+    switch (currNode.nodeName.toLowerCase()) {
       case "table":
         break;
       case "h1":
@@ -95,35 +110,44 @@ function structureStaffList(staffText) {
     }
 
     // if we got here, then we need to go deeper into the table
-    for(let i = 0; i < currNode.childNodes.length; i++) { // starting at 1 because the first tr is the title
+    for (let i = 0; i < currNode.childNodes.length; i++) {
+      // starting at 1 because the first tr is the title
       var tr = currNode.childNodes[i];
       // there's a lot of empty text nodes for some reason, so we ignore these
-      if(tr.nodeName !== "tr") continue;
+      if (tr.nodeName !== "tr") continue;
 
       // iterate through the columns of the tr
-      var td, columns = [];
-      for(let j = 0; j < tr.childNodes.length; j++) {
+      var td,
+        columns = [];
+      for (let j = 0; j < tr.childNodes.length; j++) {
         td = tr.childNodes[j];
         // there's a lot of empty text nodes for some reason, so we remove these
-        if(td.nodeName !== "td") continue;
+        if (td.nodeName !== "td") continue;
         // so each td is, in order: user | teams | timezone | activity | contact | captain
         //                          0      1       2          3          4         5
         // for JS, only 0 and 1 exist
         // now we shove each td into a clean array so we can iterate over it without the messy text nodes ruining life for everyone
         columns.push(td);
       }
 
-      var staffmember = {username: "", teams: [], active: "Active", captain: [], type: staffType};
+      var staffmember = {
+        username: "",
+        teams: [],
+        active: "Active",
+        captain: [],
+        type: staffType,
+      };
 
-      for(let j = 0; j < columns.length; j++) {
-        switch(j) {
+      for (let j = 0; j < columns.length; j++) {
+        switch (j) {
           case 0: // username
             // extract the username from [[*user username]]
-            staffmember.username = columns[j].childNodes[0].childNodes[1].textContent;
+            staffmember.username =
+              columns[j].childNodes[0].childNodes[1].textContent;
             break;
           case 1: // teams
             staffmember.teams = columns[j].textContent.split(", ");
-            if(staffmember.teams[0] === "-") staffmember.teams = [];
+            if (staffmember.teams[0] === "-") staffmember.teams = [];
             break;
           case 3: // activity
             staffmember.active = columns[j].textContent;
@@ -134,7 +158,7 @@ function structureStaffList(staffText) {
         }
       }
       // now let's do something incredibly lazy to drop this member if the tr is a title
-      if(staffmember.username === "") continue;
+      if (staffmember.username === "") continue;
       // push staff data into the staff list
       staff.push(staffmember);
     }
@@ -145,20 +169,22 @@ function structureStaffList(staffText) {
 // run through the forum page and add the staff roles
 function setStaffIds() {
   var container;
-  if(document.getElementById('thread-container')) {
-    container = document.getElementById('thread-container');
+  if (document.getElementById("thread-container")) {
+    container = document.getElementById("thread-container");
   } else {
-    container = document.getElementsByClassName('thread-container')[0];
+    container = document.getElementsByClassName("thread-container")[0];
   }
 
-  var infoSpans = container.getElementsByClassName('info');
+  var infoSpans = container.getElementsByClassName("info");
   var userName = "";
   var staffName, staffId;
 
   for (var x = 0; x < infoSpans.length; x++) {
     try {
-      userName = infoSpans[x].getElementsByTagName('span')[0].getElementsByTagName('a')[1].innerHTML;
-    } catch(error) {
+      userName = infoSpans[x]
+        .getElementsByTagName("span")[0]
+        .getElementsByTagName("a")[1].innerHTML;
+    } catch (error) {
       // so far as I can tell this only errors for a deleted account, so ignore it
       continue;
     }
@@ -174,29 +200,32 @@ function setStaffIds() {
           // I want to format this as "Administrator - Disciplinary" or "Junior Staff - Technical" or "Operational Staff (Inactive)"
           staffId = "SCP Wiki - " + staff[y].type;
 
-          if(staff[y].active.toLowerCase() !== "active") staffId += " (" + staff[y].active + ")";
+          if (staff[y].active.toLowerCase() !== "active")
+            staffId += " (" + staff[y].active + ")";
 
-          if(staff[y].captain.length > 0) {
-            for(let i = 0; i < staff[y].captain.length; i++) {
-              for(let j = 0; j < staff[y].teams.length; j++) {
-                if(staff[y].captain[i] === staff[y].teams[j]) staff[y].teams[j] += " (Captain)";
+          if (staff[y].captain.length > 0) {
+            for (let i = 0; i < staff[y].captain.length; i++) {
+              for (let j = 0; j < staff[y].teams.length; j++) {
+                if (staff[y].captain[i] === staff[y].teams[j])
+                  staff[y].teams[j] += " (Captain)";
               }
             }
           }
-          if(staff[y].teams.length > 0) staffId += " - " + staff[y].teams.join(", ");
+          if (staff[y].teams.length > 0)
+            staffId += " - " + staff[y].teams.join(", ");
         }
       }
 
       if (staffId !== "") {
-        var br = infoSpans[x].getElementsByTagName('br')[0];
-        var staffSpan = document.createElement('span');
+        var br = infoSpans[x].getElementsByTagName("br")[0];
+        var staffSpan = document.createElement("span");
         staffSpan.style.fontSize = "0.8em";
         staffSpan.innerHTML = staffId + "<br>";
 
         if (br) {
           infoSpans[x].insertBefore(staffSpan, br.nextSibling);
         } else {
-          br = document.createElement('br');
+          br = document.createElement("br");
           infoSpans[x].appendChild(br);
           infoSpans[x].appendChild(staffSpan);
         }
@@ -205,5 +234,8 @@ function setStaffIds() {
   }
   // repeat this a few times just so that we catch everything if the forum loads slowly
   doCount++;
-  if(doCount < 10) setTimeout(function() {setStaffIds()}, 500);
+  if (doCount < 10)
+    setTimeout(function () {
+      setStaffIds();
+    }, 500);
 }