fix de bugs

README.md

@@ -2,16 +2,12 @@
 
 ## Liste des améliorations
 
-- [ ] Bouton "Voir les posts de l'utilisateur" à enlever (un seul écrivain donc inutile...)
-- [ ] Bug CSS concernant le footer
-- [ ] Mauvaise actualisation du pseudo quand on se renomme
-- [ ] Support d'un dark thème (à réflechir...)
-- [ ] Erreur 403 quand on modifie le pseudo mais pas l'image d'un utilisateur
-- [ ] Garder l'avatar de l'utilisateur quand il met à jour uniquement son pseudo
-- [ ] Ne pas avoir à confirmer son mot de passe lors de la connexion
-- [ ] Pouvoir modifier son commentaire
+- [x] Bug CSS concernant le footer
+- [x] Problème d'actualisation des commentaires quand on écrit au moins 2 commentaires à la suite
+- [x] Responsive des commentaires
+- [x] Garder l'avatar de l'utilisateur quand il met à jour uniquement son pseudo
+- [x] Ne pas avoir à confirmer son mot de passe lors de la connexion
 - [x] L'avatar s'affiche pas quand on upload un commentaire (il faut recharger la page)
-- [ ] Faire des meilleurs modal
 - [ ] Terminer l'interface admin
 - [x] Bug (de temps en temps) pour stocker les données utilisateur
 

src/app/components/comment-form/comment-form.component.ts

@@ -42,6 +42,7 @@ export class CommentFormComponent {
       // get l'image de profile après avoir créé le commentaire
       this.subs.push(this.commentService.create(this.commentForm.value.content, this.postId, author.id, token).pipe(
         switchMap((comment: Comment) => {
+          this.createdComment = { ... this.createdComment } // attention a bien mettre à jour la ref sinon ça casse
           this.createdComment.authorId = author.id;
           this.createdComment.content = comment.content;
           this.createdComment.id = comment.id;
@@ -53,10 +54,9 @@ export class CommentFormComponent {
         })
       ).subscribe({
         next: (profilePicture: string) => {
-          this.createdComment.profilePicture = profilePicture; // c'est de la merde
+          this.createdComment.profilePicture = profilePicture;
           this.commentForm.value.content = "";
           this.commentToEmit.emit(this.createdComment);
-          console.log(this.createdComment)
           this.successMessage("Succès", "Commentaire créé avec succès");
         },
         error: (error) => {

src/app/components/loading/loading.component.html

@@ -1,3 +1,3 @@
 <div>
-  <img src="./assets/icon.jpg" alt="loadign">
+  <img src="./assets/icon.png" alt="loadign">
 </div>

src/app/pages/post/post.component.css

@@ -58,16 +58,6 @@ em {
   }
 }
 
-.commentaires {
-  margin: auto;
-  width: 45%;
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-  flex-direction: column;
-  margin-top: 5rem;
-}
-
 .delete-dialog {
   display: flex;
   justify-content: center;
@@ -75,10 +65,48 @@ em {
   gap: 3em;
 }
 
-.comment-div {
+.commentaires {
+  margin: auto;
+  margin-top: 5rem;
+  width: 45%;
   display: flex;
-  align-items: center;
-  gap: 1rem;
+  flex-direction: column;
+  gap: 2.5rem;
+  padding: 0 1rem;
 }
 
+.comment-div {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  background-color: #f9f9f9;
+  padding: 1rem;
+  border-radius: 12px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  flex-wrap: wrap;
+  position: relative;
+}
+
+@media screen and (max-width: 1200px) {
+  .body-content,
+  .commentaires {
+    width: 95%;
+  }
+
+  .comment-div {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .comment-meta-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .delete-button {
+    position: static;
+    align-self: flex-end;
+    margin-top: 0.5rem;
+  }
+}
 

src/app/pages/post/post.component.ts

@@ -68,15 +68,8 @@ export class PostComponent {
             next: res => {
               res.post.body = res.post.body.replace(/ /g, ' ')
               this.concernedPost = res.post;
-              this.sortCommentList(res.comment)
-              this.comments = res.comment.sort((a, b) => {
-                if (a.commentDate > b.commentDate) {
-                  return -1
-                } else if (a.commentDate < b.commentDate) {
-                  return 1
-                }
-                return 0
-              });
+              this.comments = res.comment
+              this.sortCommentList()
               this.comments.forEach(comment => this.commentDeleteDialogMap.set(comment.id, false));
             },
             error: err => this.failureMessage("Erreur", err.error.message)
@@ -90,7 +83,8 @@ export class PostComponent {
 
   addNewCommentToList(comment: Comment) {
     this.comments.push(comment);
-    this.sortCommentList(this.comments);
+    console.log(this.comments)
+    this.sortCommentList();
   }
 
   setCommentDialogVisible(commentId: bigint) {
@@ -118,15 +112,15 @@ export class PostComponent {
     }
   }
 
-  sortCommentList(comments: Comment[]) {
-    comments.sort((a, b) => {
+  sortCommentList() {
+    this.comments = this.comments.sort((a, b) => {
       if (a.commentDate > b.commentDate) {
         return -1
       } else if (a.commentDate < b.commentDate) {
         return 1
       }
       return 0
-    })
+    });
   }
 
   successMessage(summary: string, detail: string): void {

src/app/pages/profile/profile.component.html

@@ -17,7 +17,6 @@
           }
         </div>
       </div>
-      <p-button label="Voir les posts de l'utilisateur"></p-button>
       @if (actualAuthor) {
         @if (concernedAuthor.id === actualAuthor.id) {
           <p-button label="Mettre à jour les données du profil" (onClick)="updateProfileDialog=true"/>

src/app/pages/profile/profile.component.ts

@@ -33,7 +33,6 @@ export class ProfileComponent implements OnDestroy {
   authorName: string = "";
   subs: Subscription[] = [];
   updateProfileDialog: boolean = false;
-  changePasswordDialog: boolean = false;
 
   constructor(private route: ActivatedRoute,
               private authorService: AuthorService,

src/index.html

@@ -6,7 +6,7 @@
   <title>A BON ENTENDEUR</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="icon.jpg">
+  <link rel="icon" type="image/x-icon" href="icon.png">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>

src/styles.css

@@ -11,7 +11,6 @@ body {
   background-color: #1c1c1c;
   color: #f1f1f1;
   padding: 20px;
-  text-align: center;
   font-size: 14px;
 }
 
@@ -20,6 +19,7 @@ body {
 .footer-follow,
 .footer-links,
 .footer-copyright {
+  text-align: center;
   margin: 5px 0;
 }
 
@@ -36,14 +36,6 @@ app-root {
   flex-direction: column;
 }
 
-.footer {
-  width: 100%;
-  text-align: center;
-  padding: 10px;
-  background: #222;
-  color: white;
-}
-
 .footer-link {
   color: #1e90ff;
   text-decoration: none;
@@ -54,5 +46,11 @@ app-root {
   text-decoration: underline;
 }
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}