From 297bd473a624f811fbaecb0d27a5c0c766ef85fe Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Sat, 5 Apr 2025 22:07:53 +0200
Subject: [PATCH] Refactor IP copy functionality into a reusable component

Extracted the "Copy IP" button to a new `CopyIpComponent` to improve reusability and modularity. Updated `HomeComponent` to use this new component and removed redundant methods for copying text to the clipboard. Added tests and styles for the new component.
---
 frontend/src/app/app.module.ts                |  2 ++
 .../src/app/copy-ip/copy-ip.component.html    |  3 +++
 .../src/app/copy-ip/copy-ip.component.scss    |  0
 .../src/app/copy-ip/copy-ip.component.spec.ts | 23 +++++++++++++++++++
 frontend/src/app/copy-ip/copy-ip.component.ts | 16 +++++++++++++
 frontend/src/app/home/home.component.html     |  9 ++------
 frontend/src/app/home/home.component.ts       |  5 ----
 7 files changed, 46 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/app/copy-ip/copy-ip.component.html
 create mode 100644 frontend/src/app/copy-ip/copy-ip.component.scss
 create mode 100644 frontend/src/app/copy-ip/copy-ip.component.spec.ts
 create mode 100644 frontend/src/app/copy-ip/copy-ip.component.ts

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index ee59719..b6037fc 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -9,6 +9,7 @@ import {ThemeComponent} from "./theme/theme.component";
 import {CookieService} from 'ngx-cookie-service';
 import {MapComponent} from './map/map.component';
 import {RulesComponent} from './rules/rules.component';
+import {CopyIpComponent} from './copy-ip/copy-ip.component';
 
 const routes: Routes = [
   {path: '', component: HomeComponent},
@@ -29,6 +30,7 @@ const routes: Routes = [
     BrowserModule,
     RouterModule.forRoot(routes),
     NgOptimizedImage,
+    CopyIpComponent,
   ],
   providers: [CookieService],
   bootstrap: [AppComponent]
diff --git a/frontend/src/app/copy-ip/copy-ip.component.html b/frontend/src/app/copy-ip/copy-ip.component.html
new file mode 100644
index 0000000..8d42ab0
--- /dev/null
+++ b/frontend/src/app/copy-ip/copy-ip.component.html
@@ -0,0 +1,3 @@
+<button type="button" style="margin-top: 50px;" class="button-outer" (click)="copyIpToClipboard()">
+  <span class="button-inner">{{ displayText }}</span>
+</button>
diff --git a/frontend/src/app/copy-ip/copy-ip.component.scss b/frontend/src/app/copy-ip/copy-ip.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/copy-ip/copy-ip.component.spec.ts b/frontend/src/app/copy-ip/copy-ip.component.spec.ts
new file mode 100644
index 0000000..605d0d9
--- /dev/null
+++ b/frontend/src/app/copy-ip/copy-ip.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CopyIpComponent } from './copy-ip.component';
+
+describe('CopyIpComponent', () => {
+  let component: CopyIpComponent;
+  let fixture: ComponentFixture<CopyIpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CopyIpComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CopyIpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/copy-ip/copy-ip.component.ts b/frontend/src/app/copy-ip/copy-ip.component.ts
new file mode 100644
index 0000000..71f2e12
--- /dev/null
+++ b/frontend/src/app/copy-ip/copy-ip.component.ts
@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-copy-ip',
+  templateUrl: './copy-ip.component.html',
+  styleUrl: './copy-ip.component.scss'
+})
+export class CopyIpComponent {
+  public displayText: string = 'Copy IP'
+
+  public copyIpToClipboard(): void {
+    navigator.clipboard.writeText('play.alttd.com');
+    this.displayText = 'Copied!';
+  }
+
+}
diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
index 6750e5a..e1bf89a 100644
--- a/frontend/src/app/home/home.component.html
+++ b/frontend/src/app/home/home.component.html
@@ -17,10 +17,7 @@
       <!--      TODO load player count from old api or backend?-->
       <h2 style="color: white;"><span class="player-count">Loading...</span></h2>
       <h2 style="color: white;">Server IP: play.alttd.com</h2>
-      <!--      TODO make copy be angular not js-->
-      <button type="button" style="margin-top: 50px;" class="button-outer" (click)="copyToClipboard('play.alttd.com')">
-        <span class="button-inner" id="copybutton">Copy IP</span>
-      </button>
+      <app-copy-ip></app-copy-ip>
     </section>
     <section class="darkmodeSection">
       <div class="container">
@@ -140,9 +137,7 @@
         <img ngSrc="/public/img/logos/log.png" alt="Alternative Altitude Server Logo" height="129"
              width="120">
         <h2 style="margin: 20px 0; font-size: 1.8em;">play.alttd.com</h2>
-        <button type="button" class="button-outer" (click)="copyToClipboard('play.alttd.com')">
-          <span class="button-inner" id="copybutton2">Copy IP</span>
-        </button>
+        <app-copy-ip></app-copy-ip>
       </div>
     </section>
     <a (click)="this.scrollService.scrollToTop()" class="scroll-up-button, active">
diff --git a/frontend/src/app/home/home.component.ts b/frontend/src/app/home/home.component.ts
index ddc81bd..999db45 100644
--- a/frontend/src/app/home/home.component.ts
+++ b/frontend/src/app/home/home.component.ts
@@ -25,7 +25,6 @@ export class HomeComponent implements OnInit {
     this.randomizeSlides()
   }
 
-
   private randomizeSlides(): void {
     const array = [...this.slides];
 
@@ -55,10 +54,6 @@ export class HomeComponent implements OnInit {
     this.slideIndex = (this.slideIndex + 1) % this.slides.length;
   }
 
-  public copyToClipboard(text: string): void {
-    navigator.clipboard.writeText(text);
-  }
-
   public getSlideIndices(): number[] {
     return Array.from({length: this.slides.length}, (_, i) => i);
   }