Translated Pages are Cached

4 files changed, 61 insertions, 65 deletions

diff --git a/middleware/translationMiddleware.py b/middleware/translationMiddleware.py
deleted file mode 100644
index 06373877..00000000
--- a/middleware/translationMiddleware.py
+++ /dev/null
@@ -1,47 +0,0 @@
-import os
-
-from bs4 import BeautifulSoup
-from django.conf import settings
-from django.http import HttpResponse
-from google.cloud import translate_v2 as translate
-
-cred_path = os.path.join(settings.BASE_DIR, 'credentials-translate.json')
-os.environ['GOOGLE_APPLICATION_CREDENTIALS'] = cred_path
-
-class TranslationMiddleware:
-    def __init__(self, get_response):
-        self.get_response = get_response
-        self.CACHE_TTL = 60 * 60
-
-    def __call__(self, request):
-        response = self.get_response(request)
-        lang_cookie = request.COOKIES.get('lang', '')
-        
-        if lang_cookie != 'ja':
-            return response
-
-        content_type = response.get('Content-Type', '').lower()
-        if 'text' not in content_type:
-            return response
-
-        HTML_content =response.content.decode('utf-8')
-
-        # add no translate class to the 'highlight' class
-        soup = BeautifulSoup(HTML_content, 'html.parser')
-        for tag in soup.find_all(class_='highlight'):
-            tag['class'].append('notranslate')
-        HTML_content = str(soup)
-        
-        HTML_content = HTML_content.replace(
-            "That Computer Scientist",
-            "ザットコンピュータサイエンティスト"
-        )
-
-        translate_client = translate.Client()
-        target_language = 'ja'
-        translated_content = translate_client.translate(
-            HTML_content,
-            target_language=target_language,
-        )['translatedText']
-
-        return HttpResponse(translated_content)
diff --git a/static/js/db.js b/static/js/db.js
new file mode 100644
index 00000000..2cffa80c
--- /dev/null
+++ b/static/js/db.js
@@ -0,0 +1,20 @@
+function savePageToDB(entirePage, path) {
+    window.sessionStorage.setItem(path, entirePage);
+    // db.collection('pages').doc(path).set({ path: path, page: entirePage });
+}
+
+const lang = localStorage.getItem("lang");
+const path = window.location.pathname;
+
+const storedPage = window.sessionStorage.getItem(path);
+
+if (lang === "ja" && storedPage) {
+    console.log("Page already translated");
+    document.getElementById('wrap').innerHTML = storedPage;
+} else {
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src =
+        "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
+    document.getElementById("tl_block").appendChild(script);
+}
diff --git a/static/js/tl.js b/static/js/tl.js
index 44c8b044..df6c69eb 100644
--- a/static/js/tl.js
+++ b/static/js/tl.js
@@ -45,6 +45,9 @@ function translateJapanese() {
   } else {
     selectEl.value = 'ja';
     selectEl.dispatchEvent(new Event("change"));
+    setTimeout(function () {
+      save();
+    }, 6969);
   }
 }
 
@@ -59,6 +62,9 @@ if (currentLang === "ja") {
   $('#tl_ja').show();
   $('body').addClass('ja');
   $('body').removeClass('en');
+  setTimeout(function () {
+    save();
+  }, 6969);
 } else {
   $('#tl_ja').hide();
   $('#tl_en').show();
@@ -66,3 +72,26 @@ if (currentLang === "ja") {
   $('body').removeClass('ja');
   restoreLang();
 }
+
+// let entirePage;
+
+function save() {
+  // only body
+  const entirePage = document.getElementById('wrap').innerHTML;
+  const path = window.location.pathname;
+  
+  const storedPage = window.sessionStorage.getItem(path);
+
+  if (storedPage === null || storedPage !== entirePage) {
+    console.log('Saving page to DB');
+    window.sessionStorage.setItem(path, entirePage);
+  }
+
+  // db.collection('pages').doc(path).get().then(page => {
+  //   const storedPage = page?.page;
+  //   if (storedPage === null || storedPage !== entirePage) {
+  //     console.log('Saving page to DB');
+  //     savePageToDB(entirePage, path);
+  //   }
+  // });
+}
diff --git a/templates/blog/partials/base.html b/templates/blog/partials/base.html
index 3db00ea9..77558c39 100644
--- a/templates/blog/partials/base.html
+++ b/templates/blog/partials/base.html
@@ -14,10 +14,7 @@
     <meta property="og:image" content="{{ request.meta.image }}" />
     <meta property="og:url" content="{{ request.meta.url }}" />
     <meta property="twitter:card" content="summary_large_image" />
-    <meta
-      property="twitter:title"
-      content="Shifoo - {{ title }}"
-    />
+    <meta property="twitter:title" content="Shifoo - {{ title }}" />
     <meta
       property="twitter:description"
       content="{{ request.meta.description }}"
@@ -145,19 +142,16 @@
         </p>
       </div>
     </div>
-    
-    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
-    <script src="{% static 'js/globals.js' %}"></script>
-    <script src="{% static 'js/spells.js' %}"></script>
-    <script src="{% static 'js/phone_compatibility.js' %}"></script>
-    <script
-      type="text/javascript"
-      src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
-    ></script>
-    <script src="{% static 'js/tl.js' %}"></script>
-    {% if request.COOKIES.summonOneko == 'true' %}
-    <script src="{% static 'js/oneko.js' %}"></script>
-    {% endif %} 
-    {% block scripts %} {% endblock %}
   </body>
+
+  <div id="tl_block" style="display: none"></div>
+  <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
+  <script src="{% static 'js/globals.js' %}"></script>
+  <script src="{% static 'js/spells.js' %}"></script>
+  <script src="{% static 'js/phone_compatibility.js' %}"></script>
+  <script src="{% static 'js/db.js' %}"></script>
+  <script src="{% static 'js/tl.js' %}"></script>
+  {% if request.COOKIES.summonOneko == 'true' %}
+  <script src="{% static 'js/oneko.js' %}"></script>
+  {% endif %} {% block scripts %} {% endblock %}
 </html>