Styling comments list, add date format pipe.

src/app/pipe/dateTimeFormat.pipe.ts

@@ -0,0 +1,15 @@
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { DateService } from '../service/date.service';
+
+@Pipe({
+    name: 'dateTimeFormat'
+})
+export class DateTimeFormatPipe implements PipeTransform {
+
+    private readonly dateService = inject(DateService);
+
+    public transform(raw: string): string {
+        return this.dateService.format(raw);
+    }
+
+}

src/app/recipe-comments-list/recipe-comments-list.component.css

@@ -0,0 +1,49 @@
+#add-comment-form {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 10px;
+}
+
+#add-comment-form > textarea {
+    width: 80ch;
+    height: 100px;
+    padding: 10px;
+    font-size: 16px;
+}
+
+#comments {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    margin: 0;
+    padding: 0;
+}
+
+#comments > li:not(:last-child) {
+    border-bottom: 1px solid var(--off-white-5);
+}
+
+.comment {
+    display: flex;
+    flex-direction: column;
+}
+
+.comment-username-time {
+    display: flex;
+    align-items: center;
+    column-gap: 10px;
+}
+
+.comment-username {
+    font-weight: bold;
+    font-size: 1.25em;
+}
+
+.comment-time {
+    opacity: 0.75;
+}
+
+.comment-text {
+    padding-bottom: 10px;
+}

src/app/recipe-comments-list/recipe-comments-list.component.html

@@ -3,10 +3,8 @@
     @if (isLoggedIn()) {
         <div id="add-comment-container">
             <h3>Add Comment</h3>
-            <form [formGroup]="addCommentForm" (ngSubmit)="onCommentSubmit()">
+            <form id="add-comment-form" [formGroup]="addCommentForm" (ngSubmit)="onCommentSubmit()">
-                <label for="comment">Comment</label>
+                <textarea id="comment" formControlName="comment" type="text"></textarea>
-                <input id="comment" formControlName="comment" type="text" />
-
                 <button type="submit" [disabled]="!addCommentForm.valid">Post Comment</button>
             </form>
         </div>
@@ -19,18 +17,23 @@
     } @else if (commentsQuery.isError()) {
         <p>There was an error loading the comments.</p>
     } @else {
-        <ul>
+        <ul id="comments">
             @if (addCommentMutation.isPending()) {
-                <li style="opacity: 0.5">
+                <li class="comment" style="opacity: 0.5">
-                    <p>{{ username() }}</p>
+                    <div class="comment-username-time">
+                        <span class="comment-username">{{ username() }}</span>
+                    </div>
                     <div>{{ addCommentMutation.variables() }}</div>
                 </li>
             }
             @for (recipeComments of commentsQuery.data()?.pages; track $index) {
                 @for (recipeComment of recipeComments.content; track recipeComment.id) {
-                    <li>
+                    <li class="comment">
-                        <p>{{ recipeComment.owner.username }} at {{ recipeComment.created }}</p>
+                        <div class="comment-username-time">
-                        <div [innerHTML]="recipeComment.text"></div>
+                            <span class="comment-username">{{ recipeComment.owner.username }}</span>
+                            <span class="comment-time">{{ recipeComment.created | dateTimeFormat }}</span>
+                        </div>
+                        <div class="comment-text" [innerHTML]="recipeComment.text"></div>
                     </li>
                 }
             }

src/app/recipe-comments-list/recipe-comments-list.component.ts

@@ -4,10 +4,11 @@ import { RecipeService } from '../service/recipe.service';
 import { injectInfiniteQuery, injectMutation } from '@tanstack/angular-query-experimental';
 import { AuthService } from '../service/auth.service';
 import { RecipeComments } from '../model/RecipeComment.model';
+import { DateTimeFormatPipe } from '../pipe/dateTimeFormat.pipe';
 
 @Component({
     selector: 'app-comments-list',
-    imports: [ReactiveFormsModule],
+    imports: [ReactiveFormsModule, DateTimeFormatPipe],
     templateUrl: './recipe-comments-list.component.html',
     styleUrl: './recipe-comments-list.component.css',
 })
@@ -29,7 +30,7 @@ export class RecipeCommentsList {
         queryFn: ({ pageParam }) => {
             return this.recipeService.getComments(this.recipeUsername(), this.recipeSlug(), {
                 page: pageParam,
-                size: 1,
+                size: 10,
                 sort: [
                     {
                         property: 'created',
@@ -46,8 +47,7 @@ export class RecipeCommentsList {
 
     protected readonly addCommentMutation = injectMutation(() => ({
         mutationFn: (commentText: string) =>
-            this.recipeService.addComment(this.recipeUsername(), this.recipeSlug(), commentText),
+            this.recipeService.addComment(this.recipeUsername(), this.recipeSlug(), commentText)
-        onSuccess: () => this.commentsQuery.fetchNextPage(),
     }));
 
     protected onCommentSubmit() {

src/app/service/date.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class DateService {
+
+    private readonly dateTimeFormat = Intl.DateTimeFormat('en-US', {
+        dateStyle: 'long',
+        timeStyle: 'short'
+    });
+
+    public format(raw: string): string {
+        return this.dateTimeFormat.format(new Date(raw));
+    }
+
+}

src/styles.css

@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 :root {
+    --primary-font-family: 'Inter';
     --primary-white: #ffffff;
     --primary-red: #91351d;
     --primary-yellow: #ffb61d;
@@ -15,7 +16,8 @@
 
 body {
     margin: 0;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--primary-font-family), sans-serif;
+    font-size: 16px;
     box-sizing: border-box;
     color: var(--primary-black);
 }
@@ -51,3 +53,7 @@ fa-icon {
 .fa-star {
     color: var(--primary-yellow);
 }
+
+textarea {
+    font-family: var(--primary-font-family), sans-serif;
+}