Display 'temporarily unavailable' when the API can't be reached

Extensions/combined/_locales/en/messages.json

@@ -29,6 +29,9 @@
     "textSettingsHover": {
         "message": "Stops counting your likes and dislikes."
     },
+    "textTempUnavailable": {
+        "message": "temporarily unavailable"
+    },
     "textUpdate": {
         "message": "update to"
     },

Extensions/combined/_locales/fr/messages.json

@@ -29,6 +29,9 @@
     "textSettingsHover": {
         "message": "Arrête de compter les likes et les dislikes mis sur les vidéos."
     },
+    "textTempUnavailable": {
+        "message": "temporairement indisponible"
+    },
     "textUpdate": {
         "message": "mettre à jour vers"
     }

Extensions/combined/src/state.js

@@ -8,6 +8,7 @@ import {
   getColorFromTheme,
 } from "./utils";
 import { sendVideoIds } from "./events";
+import { localize } from "./utils";
 
 //TODO: Do not duplicate here and in ryd.background.js
 const apiUrl = "https://returnyoutubedislikeapi.com";
@@ -124,6 +125,13 @@ function processResponse(response, storedData) {
   }
 }
 
+// Tells the user if the API is down
+function displayError(error) {
+  getButtons().children[1].querySelector("#text").innerText = localize(
+    "textTempUnavailable"
+  );
+}
+
 async function setState(storedData) {
   storedData.previousState = isVideoDisliked()
     ? DISLIKED_STATE
@@ -144,8 +152,12 @@ async function setState(storedData) {
       },
     }
   )
+    .then((response) => {
+      if (!response.ok) displayError(response.error);
+      return response;
+    })
     .then((response) => response.json())
-    .catch();
+    .catch(displayError);
   cLog("response from api:");
   cLog(JSON.stringify(response));
   likesDisabledState =

Extensions/combined/src/utils.js

@@ -29,6 +29,10 @@ function numberFormat(numberState) {
   );
 }
 
+function localize(localeString) {
+  return chrome.i18n.getMessage(localeString);
+}
+
 function getNumberFormatter(optionSelect) {
   let formatterNotation;
   let formatterCompactDisplay;
@@ -151,4 +155,5 @@ export {
   isVideoLoaded,
   cLog,
   getColorFromTheme,
+  localize,
 };