From c540a39dd10cefbd607cc90003d9e0b5869c6b03 Mon Sep 17 00:00:00 2001
From: Sashika Nawarathne <cazci269@gmail.com>
Date: Fri, 10 Jan 2020 10:17:04 +0530
Subject: [PATCH 1/2] Implement routing module

---
 src/app/app-routing.module.ts | 34 ++++++++++++++++++++++++++++++++++
 src/app/app.module.ts         | 33 ++++++---------------------------
 2 files changed, 40 insertions(+), 27 deletions(-)
 create mode 100644 src/app/app-routing.module.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
new file mode 100644
index 0000000..e7054c9
--- /dev/null
+++ b/src/app/app-routing.module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
+import { SignInComponent } from "./public/sign-in/sign-in.component";
+import { SignUpComponent } from "./public/sign-up/sign-up.component";
+import { CreateArticleComponent } from "./secure/create-article/create-article.component";
+import { HomeComponent } from "./public/home/home.component";
+import { ArticleComponent } from "./public/article/article.component";
+import { EditArticleComponent } from "./secure/edit-article/edit-article.component";
+
+const routes: Routes = [
+  { path: 'sign-in', component: SignInComponent },
+  { path: 'sign-up', component: SignUpComponent },
+  { path: 'create-article', component: CreateArticleComponent },
+  { path: 'edit-article/:id', component: EditArticleComponent },
+  { path: 'home', component: HomeComponent },
+  { path: 'article/:id', component: ArticleComponent },
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: '**', redirectTo: '/home' }
+]
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
+
+export const PublicComponents = [
+  SignInComponent,
+  SignUpComponent,
+  CreateArticleComponent,
+  EditArticleComponent,
+  HomeComponent,
+  ArticleComponent,
+]
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 479ae34..e19e142 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,60 +1,39 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule, Routes } from '@angular/router';
-import { FormsModule,  ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
+import { AppRoutingModule, PublicComponents } from "./app-routing.module";
 
 import { MDBBootstrapModule } from 'angular-bootstrap-md';
-import { SignUpComponent } from './public/sign-up/sign-up.component';
 import { TopNavComponent } from './shared/top-nav/top-nav.component';
-import { HomeComponent } from './public/home/home.component';
-import { SignInComponent } from './public/sign-in/sign-in.component';
 import { FooterComponent } from './shared/footer/footer.component';
-import { ArticleComponent } from './public/article/article.component';
 import { UserService } from './services/user.service';
 import { ArticleService } from './services/article.service';
 
 import { QuillModule } from 'ngx-quill';
-import { CreateArticleComponent } from './secure/create-article/create-article.component';
-import { EditArticleComponent } from './secure/edit-article/edit-article.component';
-
-const router: Routes = [
-  { path: 'sign-in' , component: SignInComponent},
-  { path: 'sign-up' , component: SignUpComponent},
-  { path: 'createarticle', component: CreateArticleComponent},
-  { path: 'home' , component: HomeComponent},
-  { path: 'article' , component: ArticleComponent},
-  { path: 'article/:id' , component: ArticleComponent},
-  { path: '' , redirectTo: '/home' , pathMatch: 'full'}
-];
 
 @NgModule({
   declarations: [
     AppComponent,
-    SignUpComponent,
     TopNavComponent,
-    HomeComponent,
-    SignInComponent,
     FooterComponent,
-    ArticleComponent,
-    CreateArticleComponent,
-    EditArticleComponent,
+    PublicComponents,
   ],
   imports: [
     BrowserModule,
+    AppRoutingModule,
     BrowserAnimationsModule,
     MDBBootstrapModule.forRoot(),
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
-    RouterModule.forRoot(router),
     QuillModule
   ],
   providers: [UserService, ArticleService],
   bootstrap: [AppComponent],
-  schemas: [ NO_ERRORS_SCHEMA ]
+  schemas: [NO_ERRORS_SCHEMA]
 })
-export class AppModule { }
+export class AppModule { }
\ No newline at end of file

From 553d748cab29579d7a1b8124bbde233c9a2c095e Mon Sep 17 00:00:00 2001
From: Sashika Nawarathne <cazci269@gmail.com>
Date: Fri, 10 Jan 2020 10:17:13 +0530
Subject: [PATCH 2/2] Bind article edit route

---
 src/app/public/article/article.component.html  |  2 +-
 src/app/public/article/article.component.ts    | 18 +++++++++++-------
 .../edit-article/edit-article.component.html   |  1 +
 .../edit-article/edit-article.component.ts     |  5 ++++-
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/app/public/article/article.component.html b/src/app/public/article/article.component.html
index 3ee4746..df9981a 100644
--- a/src/app/public/article/article.component.html
+++ b/src/app/public/article/article.component.html
@@ -26,7 +26,7 @@ <h2>
             <!--Social shares-->
             <div class="social-counters ">
 
-              <button mdbBtn type="button" color="secondary" class="waves-light" mdbWavesEffect>Edit Document</button>
+              <button mdbBtn type="button" color="secondary" class="waves-light" mdbWavesEffect (click)="onEdit()">Edit Document</button>
 
               <!--Facebook-->
               <a mdbBtn class="btn-fb waves-light" mdbWavesEffect>
diff --git a/src/app/public/article/article.component.ts b/src/app/public/article/article.component.ts
index fd7e225..cc350aa 100644
--- a/src/app/public/article/article.component.ts
+++ b/src/app/public/article/article.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-article',
@@ -15,26 +15,26 @@ export class ArticleComponent implements OnInit {
   articleInfo = [
     {
       articleId: 1,
-      userName : 'Raveen',
-      articleTitle : 'What is block chain',
+      userName: 'Raveen',
+      articleTitle: 'What is block chain',
       content: 'This is all about block chain'
-    }, 
+    },
 
     {
       articleId: 2,
-      userName : 'Azkar',
+      userName: 'Azkar',
       articleTitle: 'Why do we need computers?',
       content: 'This is why we need computers'
     }
   ];
 
-  constructor(private route: ActivatedRoute) { }
+  constructor(private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit() {
     this.articleId = this.route.snapshot.params['id'];
 
     this.articleInfo.forEach(element => {
-      if(element.articleId == this.articleId) {
+      if (element.articleId == this.articleId) {
         this.articleTitle = element.articleTitle;
         this.articleContent = element.content;
         this.articleAuthor = element.userName;
@@ -42,4 +42,8 @@ export class ArticleComponent implements OnInit {
     });
   }
 
+  onEdit() {
+    this.router.navigateByUrl(`/edit-article/${this.articleId}`)
+  }
+
 }
diff --git a/src/app/secure/edit-article/edit-article.component.html b/src/app/secure/edit-article/edit-article.component.html
index e69de29..b3abae2 100644
--- a/src/app/secure/edit-article/edit-article.component.html
+++ b/src/app/secure/edit-article/edit-article.component.html
@@ -0,0 +1 @@
+<h4>Editing article: {{ articleId }}</h4>
\ No newline at end of file
diff --git a/src/app/secure/edit-article/edit-article.component.ts b/src/app/secure/edit-article/edit-article.component.ts
index 4d163d1..ea5caf1 100644
--- a/src/app/secure/edit-article/edit-article.component.ts
+++ b/src/app/secure/edit-article/edit-article.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-edit-article',
@@ -6,10 +7,12 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./edit-article.component.scss']
 })
 export class EditArticleComponent implements OnInit {
+  public articleId;
 
-  constructor() { }
+  constructor(private route: ActivatedRoute) { }
 
   ngOnInit() {
+    this.articleId = this.route.snapshot.params['id'];
   }
 
 }