Implemented post page; when you click on a posts's message or timestamp, you'll be redirected to a page with the post

8 files changed, 47 insertions, 5 deletions

diff --git a/src/DevHive.Angular/src/app/app-routing.module.ts b/src/DevHive.Angular/src/app/app-routing.module.ts
index c9a8c61..e4e3d63 100644
--- a/src/DevHive.Angular/src/app/app-routing.module.ts
+++ b/src/DevHive.Angular/src/app/app-routing.module.ts
@@ -4,8 +4,9 @@ import { FeedComponent } from './components/feed/feed.component';
 import { LoginComponent } from './components/login/login.component';
 import { RegisterComponent } from './components/register/register.component';
 import { ProfileComponent } from './components/profile/profile.component';
-import {ProfileSettingsComponent} from './components/profile-settings/profile-settings.component';
-import {NotFoundComponent} from './components/not-found/not-found.component';
+import { ProfileSettingsComponent } from './components/profile-settings/profile-settings.component';
+import { NotFoundComponent } from './components/not-found/not-found.component';
+import { PostPageComponent } from './components/post-page/post-page.component';
 
 const routes: Routes = [
   { path: '', component: FeedComponent },
@@ -13,6 +14,7 @@ const routes: Routes = [
   { path: 'register', component: RegisterComponent },
   { path: 'profile/:username', component: ProfileComponent },
   { path: 'profile/:username/settings', component: ProfileSettingsComponent },
+  { path: 'post/:id', component: PostPageComponent },
   { path: 'not-found', component: NotFoundComponent },
   { path: '**', component: NotFoundComponent }
 ];
diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts
index 586064e..1867787 100644
--- a/src/DevHive.Angular/src/app/app.module.ts
+++ b/src/DevHive.Angular/src/app/app.module.ts
@@ -19,6 +19,7 @@ import { NotFoundComponent } from './components/not-found/not-found.component';
 import { LoadingComponent } from './components/loading/loading.component';
 import { ErrorBarComponent } from './components/error-bar/error-bar.component';
 import { SuccessBarComponent } from './components/success-bar/success-bar.component';
+import { PostPageComponent } from './components/post-page/post-page.component';
 
 @NgModule({
   declarations: [
@@ -32,7 +33,8 @@ import { SuccessBarComponent } from './components/success-bar/success-bar.compon
     NotFoundComponent,
     LoadingComponent,
     ErrorBarComponent,
-    SuccessBarComponent
+    SuccessBarComponent,
+    PostPageComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.css b/src/DevHive.Angular/src/app/components/post-page/post-page.component.css
new file mode 100644
index 0000000..fec3466
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.css
@@ -0,0 +1,7 @@
+#content {
+  justify-content: flex-start !important;
+}
+
+#content > * {
+  width: 100%;
+}
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.html b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html
new file mode 100644
index 0000000..5a824a4
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html
@@ -0,0 +1,3 @@
+<div id="content">
+	<app-post [paramId]="postId.toString()"></app-post>
+<div>
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
new file mode 100644
index 0000000..026f97f
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Guid } from 'guid-typescript';
+
+@Component({
+  selector: 'app-post-page',
+  templateUrl: './post-page.component.html',
+  styleUrls: ['./post-page.component.css']
+})
+export class PostPageComponent implements OnInit {
+  public postId: Guid;
+
+  constructor(private _router: Router)
+  { }
+
+  ngOnInit(): void {
+    this.postId = Guid.parse(this._router.url.substring(6));
+  }
+
+}
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.css b/src/DevHive.Angular/src/app/components/post/post.component.css
index 4095ff2..1ae5d8f 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.css
+++ b/src/DevHive.Angular/src/app/components/post/post.component.css
@@ -55,6 +55,10 @@ hr {
   color: gray;
 }
 
+.message:hover, .timestamp:hover {
+  cursor: pointer;
+}
+
 /* Rating */
 
 .rating {
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html
index 8fbda35..95011d2 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.html
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -11,10 +11,10 @@
 				</div>
 			</div>
 		</div>
-		<div class="message">
+		<div class="message" (click)="goToPostPage()">
 			{{ post.message }}
 		</div>
-		<div class="timestamp">
+		<div class="timestamp" (click)="goToPostPage()">
 			{{ timeCreated }}
 		</div>
 	</div>
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts
index 43ea058..0842e3c 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.ts
+++ b/src/DevHive.Angular/src/app/components/post/post.component.ts
@@ -49,4 +49,8 @@ export class PostComponent implements OnInit {
   goToAuthorProfile(): void {
     this._router.navigate(['/profile/' + this.user.userName]);
   }
+
+  goToPostPage(): void {
+    this._router.navigate(['/post/' + this.post.postId]);
+  }
 }