Add the Works link management

src/app/app-routing.module.ts

@@ -12,7 +12,7 @@ import { WorksListComponent } from './components/works-list/works-list.component
 // Toutes les routes de l'application sont définies ici
 const routes: Routes = [
   { path: '', component: LandingPageComponent },
-  { path: 'work/:id', component: WorkComponent },
+  { path: 'work/:link', component: WorkComponent },
   { path: 'works', component: WorksListComponent },
   { path: 'editor', component: EditorComponent },
   { path: 'documentation', component: DocumentationComponent },

src/app/components/editor/editor.component.scss

@@ -79,7 +79,6 @@ select {
 
 .btn-share {
   @include btn-styles(rgb(41, 120, 184), white);
-
 }
 
 .btn-save {

src/app/components/editor/editor.component.ts

@@ -82,7 +82,7 @@ const basicSetup: Extension = (() => [
   ],
 })
 export class EditorComponent {
-  APP_URL = 'http://localhost:4200/'; // à retirer 
+  APP_URL = 'http://localhost:4200/'; // à retirer
 
   @Input() currentWork!: Work;
   isLoaded: boolean = false; // Pour vérifier si le chargement est terminé
@@ -148,6 +148,9 @@ export class EditorComponent {
 
   ngOnInit() {
     if (this.currentWork) {
+      this.selectedLanguage = this.languages.find(
+        (lang) => lang.name === this.currentWork.language
+      )!;
       this.editorContent = this.currentWork.content;
     }
   }
@@ -196,8 +199,12 @@ export class EditorComponent {
     a.click();
   }
 
-  addToDatabase() :string {
-    return this.workService.postWork(this.editorContent, this.selectedLanguage.name, 1); // replace 1 by current_user's id  
+  addToDatabase(): string {
+    return this.workService.postWork(
+      this.editorContent,
+      this.selectedLanguage.name,
+      1
+    ); // replace 1 by current_user's id
   }
 
   shareButtonClicked() {
@@ -206,13 +213,16 @@ export class EditorComponent {
     const ok = TranslateModule;
     // Vérifiez si l'API clipboard est disponible
     if (navigator.clipboard) {
-      navigator.clipboard.writeText(url).then(() => {
-        // Optionnel : Afficher un message à l'utilisateur
-        alert('URL copied to clipboard!');
-      }).catch(() => {
-        // Optionnel : Afficher un message d'erreur à l'utilisateur
-        alert('Failed to copy URL to clipboard.');
-      });
+      navigator.clipboard
+        .writeText(url)
+        .then(() => {
+          // Optionnel : Afficher un message à l'utilisateur
+          alert('URL copied to clipboard!');
+        })
+        .catch(() => {
+          // Optionnel : Afficher un message d'erreur à l'utilisateur
+          alert('Failed to copy URL to clipboard.');
+        });
     } else {
       // Optionnel : Si l'API clipboard n'est pas disponible, afficher un message à l'utilisateur
       alert('Clipboard API not available');
@@ -222,7 +232,8 @@ export class EditorComponent {
   saveButtonClicked() {
     this.workService.updateWork(
       String(this.currentWork.id_work),
-      this.editorContent
+      this.editorContent,
+      this.selectedLanguage.name
     );
   }
 

src/app/components/header/header.component.ts

@@ -25,7 +25,7 @@ export class HeaderComponent {
   version: string = '1.0';
   isMenuOpen: boolean = false;
   isCheck: boolean = false;
-  linkLastWork = ""; //peut-être à cast en string
+  linkLastWork = ''; //peut-être à cast en string
 
   @ViewChild('menuRef') menuRef!: ElementRef;
   @Input() themeClass!: string;
@@ -34,8 +34,7 @@ export class HeaderComponent {
   // Instanciation du service pour les actions de traduction
   constructor(
     private router: Router,
-    private translationService: TranslationService,
-
+    private translationService: TranslationService
   ) {}
 
   // Méthode pour changer la langue

src/app/components/work-list-detail/work-list-detail.component.html

@@ -3,7 +3,7 @@
   <span class="work-list-detail--content">{{
     work.content | slice: 0 : 50
   }}</span>
-  <button class="work-list-detail--btn" [routerLink]="['/work/', work.id_work]">
+  <button class="work-list-detail--btn" [routerLink]="['/work/', work.link]">
     Edit Code
   </button>
 </div>

src/app/components/work/work.component.html

@@ -1,5 +1,4 @@
 <div *ngIf="work">
-  <h2>Works</h2>
-  <h3>CURRENT WORK ID - {{ work.id_work }}</h3>
+  <h3>{{ work.title }}</h3>
   <app-editor [currentWork]="work"></app-editor>
 </div>

src/app/components/work/work.component.ts

@@ -46,9 +46,9 @@ export class WorkComponent implements OnInit {
         : (this.themeClass = 'light-theme');
     });
 
-    const work_id = String(this.route.snapshot.paramMap.get('id'));
+    const work_link = String(this.route.snapshot.paramMap.get('link'));
 
-    this.workService.getWorkById(work_id).subscribe((response: Work) => {
+    this.workService.getWorkByLink(work_link).subscribe((response: Work) => {
       this.work = response as Work;
     });
   }

src/app/models/work.model.ts

@@ -2,7 +2,7 @@ export interface Work {
   id_work: number;
   link: string;
   user_id: number;
-  language_id: number;
+  language: string;
   title: string;
   content: string;
 }

src/app/services/work.service.ts

@@ -18,23 +18,13 @@ export class WorkService {
     return this.http.get(`${this.API_URL}/works`);
   }
 
-  getWorkById(id: string): Observable<any> {
-    return this.http.get(`${this.API_URL}/works/${id}`);
-  }
-
-  //je veux return les works d'un user id
-  getWorksByUserId(user_id: string): Observable<any> {
-    return this.http.get(`${this.API_URL}/works/${user_id}`);
-  }
-
-  //je veux return le link du dernier work d'un user (en l'occurence celui connecté)
-  getLastWorkByUserId(user_id: string): Observable<any> {
-    return this.http.get(`${this.API_URL}/works/last-work/${user_id}`);
+  getWorkByLink(link: string): Observable<any> {
+    return this.http.get(`${this.API_URL}/works/${link}`);
   }
 
   saveWork(form: NgForm): void {
     const code = form.value.content;
-  
+
     this.http.post<any>(`${this.API_URL}/works/save`, code).subscribe();
   }
 
@@ -43,17 +33,18 @@ export class WorkService {
       id_user: id_user, // tant que ça pas résolu -> je peux pas faire le share
       link: crypto.randomUUID(),
       language: language,
-      title: 'Basic JS',
-      code: code
+      title: `Basic ${language}`,
+      code: code,
     };
 
     this.http.post<any>(`${this.API_URL}/works`, body).subscribe();
     return body.link;
   }
 
-  updateWork(id: string, code: string): void {
+  updateWork(id: string, code: string, language: string): void {
     let body = {
       newContent: code,
+      language: language,
     };
     this.http.put<any>(`${this.API_URL}/works/${id}/content`, body).subscribe();
   }