👊 building layout of post details and comments

Author: radvil2

angular-client/src/app/app.component.html

@@ -11,7 +11,7 @@
             alt="avatar"
           />
           <div class="meta">
-            <h4 class="txt-1">{{ authUser.username }}</h4>
+            <h4 class="txt-1">{{ authUser.username | truncate:5 }}</h4>
             <p>{{ authUser.name }}</p>
           </div>
         </div>

angular-client/src/app/app.module.ts

@@ -11,6 +11,7 @@ import { TokenInterceptor, HttpErrorInterceptor } from './interceptors';
 import { AppErrorHandler } from './services';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { TruncatePipe } from './utils';
 
 const CUSTOM_PROVIDERS = [
   { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true },
@@ -20,7 +21,8 @@ const CUSTOM_PROVIDERS = [
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    TruncatePipe,
   ],
   imports: [
     BrowserModule,
@@ -32,7 +34,7 @@ const CUSTOM_PROVIDERS = [
     MatIconModule,
     MatSnackBarModule,
   ],
-  providers: [...CUSTOM_PROVIDERS],
+  providers: [...CUSTOM_PROVIDERS, TruncatePipe],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

angular-client/src/app/components/index.ts

@@ -0,0 +1,2 @@
+export * from './page-header/page-header.module';
+export * from './page-header/page-header.component';

angular-client/src/app/components/page-header/page-header.component.html

@@ -0,0 +1,6 @@
+<div [class]="'page__header ' + style">
+  <div class="header--text">{{ title }}</div>
+  <button *ngIf="icon" (click)="emitIconClick()" mat-icon-button class="header--icon-right">
+    <mat-icon>{{ icon }}</mat-icon>
+  </button>
+</div>

angular-client/src/app/components/page-header/page-header.component.scss

@@ -0,0 +1,17 @@
+.page__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+  padding: 1rem;
+}
+.header--text,
+.header--icon-right {
+  font-size: 2rem;
+  font-weight: bold;
+}
+.sticky {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}

angular-client/src/app/components/page-header/page-header.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageHeaderComponent } from './page-header.component';
+
+describe('PageHeaderComponent', () => {
+  let component: PageHeaderComponent;
+  let fixture: ComponentFixture<PageHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageHeaderComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular-client/src/app/components/page-header/page-header.component.ts

@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-page-header',
+  templateUrl: './page-header.component.html',
+  styleUrls: ['./page-header.component.scss']
+})
+export class PageHeaderComponent {
+
+  @Input() style: string;
+  @Input() title: string;
+  @Input() icon: string;
+  @Output() onIconClicked = new EventEmitter<any>();
+
+  public emitIconClick() {
+    this.onIconClicked.emit();
+  }
+}

angular-client/src/app/components/page-header/page-header.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+import { PageHeaderComponent } from './page-header.component';
+
+@NgModule({
+  declarations: [PageHeaderComponent],
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatButtonModule,
+  ],
+  exports: [PageHeaderComponent],
+})
+export class PageHeaderModule { }

angular-client/src/app/home/home.component.html

@@ -1,10 +1,10 @@
-<!-- home header -->
-<div class="home__header">
-  <div class="logo--text">instAngular</div>
-  <button mat-icon-button class="logo--message">
-    <mat-icon>message</mat-icon>
-  </button>
-</div>
+<!-- page header -->
+<app-page-header
+  [title]="'instAngular'"
+  [style]="'sticky'"
+  [icon]="'message'"
+  (onIconClicked)="showMessages()"
+></app-page-header>
 
 <!-- home story list -->
 <ul class="stories--list">
@@ -21,7 +21,20 @@
 <!-- home post list -->
 <div class="posts--list">
   <ng-container *ngFor="let post of posts$ | async">
-    <app-post-item [post]="post"></app-post-item>
+    <app-post-item
+      [post]="post"
+      (onUserProfileClicked)="viewUserProfile($event)"
+    >
+      <app-post-item-footer
+        [post]="post"
+        [comments]="post.comments"
+        [authUser]="authUser"
+        [viewCommentsText]="'View all ' + post.commentsCount + ' comments'"
+        (onViewCommentsClicked)="viewPostComments($event)"
+        (onUserProfileClicked)="viewUserProfile($event)"
+        (onAddCommentClicked)="addComment($event)"
+      ></app-post-item-footer>
+    </app-post-item>
   </ng-container>
 </div>
 

angular-client/src/app/home/home.component.scss

@@ -1,30 +1,6 @@
-// home header
-.home__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 2;
-  background-color: #fff;
-  padding: 1rem;
-}
-.logo--text,
-.logo--message {
-  font-size: 2rem;
-  font-weight: bold;
-}
-.logo--text {
-  margin-left: 1.5rem;
-  cursor: pointer;
-}
-
 ul.stories--list {
-  // padding: 0;
+  padding: 0;
   margin: 1rem;
-  // width: calc(2 / 3 * 70vw - 4rem);
   list-style: none;
   display: flex;
   flex-direction: row;