From 73ac37a8f4e60d4b1a04b94172b480d86700f9c7 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 5 Aug 2023 18:32:23 -0400
Subject: [PATCH] added translation revert

---
 .../status-translate.component.html           |  6 ++--
 .../status-translate.component.scss           | 17 +++++++++++
 .../status-translate.component.ts             | 28 +++++++++++++++++--
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/app/components/stream/status/status-translate/status-translate.component.html b/src/app/components/stream/status/status-translate/status-translate.component.html
index 8ec878b1..0109ff73 100644
--- a/src/app/components/stream/status/status-translate/status-translate.component.html
+++ b/src/app/components/stream/status/status-translate/status-translate.component.html
@@ -1,6 +1,6 @@
-<div class="translation" *ngIf="isTranslationAvailable">
+<div class="translation" *ngIf="isTranslationAvailable && showTranslationButton">
     <a href class="translation__link" (click)="translate()">Translate</a>
 </div>
-<div class="translation" *ngIf="translatedBy">
-    <span class="translation__by">Translated by {{translatedBy}}</span>
+<div class="translation translation__display" *ngIf="isTranslationAvailable && !showTranslationButton">
+    <span class="translation__by">Translated by {{translatedBy}}</span> <a href (click)="revertTranslation()" class="translation__display__link">revert</a>
 </div>
diff --git a/src/app/components/stream/status/status-translate/status-translate.component.scss b/src/app/components/stream/status/status-translate/status-translate.component.scss
index 5f2198fb..9724ddfd 100644
--- a/src/app/components/stream/status/status-translate/status-translate.component.scss
+++ b/src/app/components/stream/status/status-translate/status-translate.component.scss
@@ -24,4 +24,21 @@
         text-align: left;
         padding: 5px 0 0 0;
     }
+
+    &__display {
+        display: flex;
+        justify-content: space-between;
+
+        &__link {
+            padding: 5px 0 0 0;
+            font-size: 12px;
+            color: #656b8f;
+
+            transition: all .2s;
+            &:hover {
+                text-decoration: none;
+                color: #9fa5ca;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/app/components/stream/status/status-translate/status-translate.component.ts b/src/app/components/stream/status/status-translate/status-translate.component.ts
index 0d1db41c..54a98f35 100644
--- a/src/app/components/stream/status/status-translate/status-translate.component.ts
+++ b/src/app/components/stream/status/status-translate/status-translate.component.ts
@@ -19,11 +19,13 @@ export class StatusTranslateComponent implements OnInit, OnDestroy {
 
     private languageSub: Subscription;
     private languagesSub: Subscription;
+    private loadedTranslation: Translation;
 
     selectedLanguage: ILanguage;
     configuredLanguages: ILanguage[] = [];
 
     isTranslationAvailable: boolean;
+    showTranslationButton: boolean = true;
     translatedBy: string;
 
     @Input() status: StatusWrapper;
@@ -79,11 +81,18 @@ export class StatusTranslateComponent implements OnInit, OnDestroy {
     }
 
     translate(): boolean {
+        if(this.loadedTranslation){
+            this.translation.next(this.loadedTranslation);
+            this.showTranslationButton = false;
+            return false;
+        }
+
         this.mastodonWrapperService.translate(this.status.provider, this.status.status.id, this.selectedLanguage.iso639)
-            .then(x => {                
+            .then(x => {
+                this.loadedTranslation = x;  
                 this.translation.next(x);
                 this.translatedBy = x.provider;
-                this.isTranslationAvailable = false;
+                this.showTranslationButton = false;
             })
             .catch((err: HttpErrorResponse) => {
                 console.error(err);
@@ -91,4 +100,19 @@ export class StatusTranslateComponent implements OnInit, OnDestroy {
             });
         return false;
     }
+
+    revertTranslation(): boolean {
+        let revertTranslate: Translation;
+        revertTranslate = {
+            content: this.status.status.content,
+            language: this.loadedTranslation.detected_source_language,
+            detected_source_language: this.loadedTranslation.language,
+            provider: this.loadedTranslation.provider,
+            spoiler_text: this.status.status.spoiler_text
+        };
+        this.translation.next(revertTranslate);
+
+        this.showTranslationButton = true;
+        return false;
+    }
 }