From 08552d1427446270f95a05688113f8b5813671bb Mon Sep 17 00:00:00 2001
From: pilliarunkumar <arunkumar.pilli@tarento.com>
Date: Mon, 15 Feb 2021 15:05:15 +0530
Subject: [PATCH 01/12] fixing the routing issue

---
 .../my-discussion.component.html              | 10 +++----
 .../side-pannel/side-pannel.component.ts      | 29 +++++++++++--------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html
index c34e373c..483df611 100644
--- a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html
+++ b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html
@@ -8,25 +8,25 @@
         <span class="box-text"><span class="circle-label"></span>{{userInitial}}</span>
       </div>
       <div class="flex-1">
-        <div class="profile-label fs-1 name mb-4" [innerHTML]="data.username"></div>
+        <div class="profile-label fs-1 name mb-4" [innerHTML]="data?.username"></div>
         <div class="profile-label fnormal department mb-4">{{department}}</div>
         <div class="profile-label fnormal location mb-4">{{location}} </div>
-        <div class='profile-label fnormal email mb-4'>{{data.email || data.username}}</div>
+        <div class='profile-label fnormal email mb-4'>{{data?.email || data?.username}}</div>
         <ng-container>
           <div class="fnormal mt-16">
             <div class="flex flex-1 flex-custom-m">
               <span class="flex mobile ">
-                <span class="fnormal number">{{data.topiccount || 0 }}</span>
+                <span class="fnormal number">{{data?.topiccount || 0 }}</span>
                 <span class="fnormal ml-4">Discussions</span>
               </span>
               <span class="flex post-count-area mobile">
-                <span class="fnormal number">{{data.postcount || 0 }}</span>
+                <span class="fnormal number">{{data?.postcount || 0 }}</span>
                 <span class="fnormal ml-4">Posts</span>
               </span>
             </div>
             <div class="flex flex-1" class="text-right mobile2">
               <!-- Enable lated when other user can visit your profile -->
-              <!-- <span class="noocoments" mat-card-subtitle>Last online {{data.lastonline | pipeRelativeTime}}</span> -->
+              <!-- <span class="noocoments" mat-card-subtitle>Last online {{data?.lastonline | pipeRelativeTime}}</span> -->
             </div>
           </div>
         </ng-container>
diff --git a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
index e525dbb7..27792d50 100644
--- a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
+++ b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
@@ -24,7 +24,7 @@ export class SidePannelComponent implements OnInit, OnDestroy {
 
   defaultPage = 'categories';
 
-  queryParams: any;
+  data: any;
   hideSidePanel: boolean;
 
   selectedTab: string;
@@ -43,17 +43,17 @@ export class SidePannelComponent implements OnInit, OnDestroy {
     // TODO: loader or spinner
     this.hideSidePanel = document.body.classList.contains('widget');
     this.telemetryUtils.logImpression(NSDiscussData.IPageName.HOME);
-    this.paramsSubscription = this.activatedRoute.queryParams.pipe(first()).subscribe((params) => {
-      this.queryParams = params;
-      this.discussService.userName = _.get(params, 'userName');
-      const rawCategories = JSON.parse(_.get(params, 'categories'));
+    this.activatedRoute.data.subscribe((data) => {
+      this.data = data;
+      this.discussService.userName = _.get(data, 'userName');
+      const rawCategories = _.get(data, 'categories');
       this.discussService.forumIds = _.get(rawCategories, 'result');
-    });
 
-    localStorage.setItem('userName', _.get(this.queryParams, 'userName'));
-    this.discussService.initializeUserDetails(localStorage.getItem('userName'));
-    this.activatedRoute.data.subscribe((data) => {
-      this.menu = data.menuOptions.length > 0 ? data.menuOptions: CONSTANTS.MENUOPTIONS
+
+      localStorage.setItem('userName', _.get(this.data, 'userName'));
+      this.discussService.initializeUserDetails(this.discussService.userName);
+
+      this.menu = data.menuOptions.length > 0 ? data.menuOptions : CONSTANTS.MENUOPTIONS
     })
     for (let i = 0; i < this.menu.length; i++) {
       let item = this.menu
@@ -71,7 +71,12 @@ export class SidePannelComponent implements OnInit, OnDestroy {
 
   isActive(selectedItem) {
     debugger
-    if(this.router.url.indexOf(`/${selectedItem}`) > -1 || this.selectedTab === selectedItem){
+    if (this.router.url.indexOf(`/${selectedItem}`) > -1 || this.selectedTab === selectedItem) {
+      if(!this.selectedTab){
+        this.selectedTab = selectedItem
+      }
+      return true
+    } else if (selectedItem === 'categories' && !this.selectedTab ) {
       return true
     }
     return false
@@ -83,7 +88,7 @@ export class SidePannelComponent implements OnInit, OnDestroy {
     if (event) {
       this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.HOME);
     }
-    this.router.navigate([`${CONSTANTS.ROUTES.DISCUSSION}${pageName}`], { queryParams: this.queryParams });
+    this.router.navigate([`${CONSTANTS.ROUTES.DISCUSSION}${pageName}`]);
   }
 
   ngOnDestroy() {

From 3dfe1af38ca8c77db6e6c45b4bdcf44d8d8a7c24 Mon Sep 17 00:00:00 2001
From: pilliarunkumar <arunkumar.pilli@tarento.com>
Date: Tue, 16 Feb 2021 10:55:54 +0530
Subject: [PATCH 02/12] fixing router navigate issue

---
 .../src/lib/components/side-pannel/side-pannel.component.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
index 27792d50..7927b231 100644
--- a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
+++ b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
@@ -88,7 +88,7 @@ export class SidePannelComponent implements OnInit, OnDestroy {
     if (event) {
       this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.HOME);
     }
-    this.router.navigate([`${CONSTANTS.ROUTES.DISCUSSION}${pageName}`]);
+    this.router.navigate([`${pageName}`], { relativeTo: this.activatedRoute });
   }
 
   ngOnDestroy() {

From 3151fd3b3cfde3b18650a5763c98ed62e58eff26 Mon Sep 17 00:00:00 2001
From: pilliarunkumar <arunkumar.pilli@tarento.com>
Date: Tue, 16 Feb 2021 17:00:29 +0530
Subject: [PATCH 03/12] Task#SB-22655  feat: configure driven menu optinos

---
 package.json                                  |   1 +
 .../discussion-ui/assets/styles/global.scss   |  52 +-
 .../discussion-ui/assets/styles/theme.scss    |  72 ++
 projects/discussion-ui/package.json           |   2 +-
 .../src/lib/common/constants.json             |   2 +-
 .../src/lib/components/components.module.ts   |  11 +-
 .../discuss-category.component.css            |   2 +
 .../discuss-category.component.ts             |  11 +-
 .../discuss-home/discuss-home.component.ts    |   5 -
 .../discuss-start/discuss-start.component.ts  |   1 -
 .../discuss-tags/discuss-tags.component.html  |   3 +-
 .../discuss-tags/discuss-tags.component.scss  |  62 +-
 .../discuss-tags/discuss-tags.component.ts    |  29 +-
 .../discussion-details.component.html         | 671 ++++++++----------
 .../discussion-details.component.scss         |  29 +-
 .../discussion-details.component.ts           |  83 ++-
 .../lib-entry/lib-entry.component.html        |  40 +-
 .../lib-entry/lib-entry.component.scss        |   6 +-
 .../my-discussion.component.html              |  14 +-
 .../my-discussion/my-discussion.component.ts  |   5 +-
 .../side-pannel/side-pannel.component.html    |   7 +-
 .../side-pannel/side-pannel.component.scss    |   8 +-
 .../side-pannel/side-pannel.component.ts      |  35 +-
 .../src/lib/config/url.config.ts              |   9 +-
 .../discussion-routing.module.ts              |  16 +-
 .../src/lib/elements/elements.module.ts       |  17 +-
 .../post-reply/post-reply.component.css       |  51 ++
 .../post-reply/post-reply.component.html      |  37 +
 .../post-reply/post-reply.component.spec.ts   |  25 +
 .../post-reply/post-reply.component.ts        |  55 ++
 .../related-discussion.component.html         |  25 +
 .../related-discussion.component.scss         |  60 ++
 .../related-discussion.component.spec.ts      |  25 +
 .../related-discussion.component.ts           |  24 +
 .../pipe-relative-time.pipe.spec.ts           |   8 +
 .../pipe-relative-time.pipe.ts                |  19 +
 .../src/lib/pipes/pipes.module.ts             |   5 +-
 .../src/lib/services/config.service.spec.ts   |  12 +
 .../src/lib/services/config.service.ts        |  44 ++
 .../src/lib/services/discussion.service.ts    |  36 +-
 40 files changed, 1069 insertions(+), 550 deletions(-)
 create mode 100644 projects/discussion-ui/assets/styles/theme.scss
 create mode 100644 projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.css
 create mode 100644 projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.html
 create mode 100644 projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.spec.ts
 create mode 100644 projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.ts
 create mode 100644 projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.html
 create mode 100644 projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.scss
 create mode 100644 projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.spec.ts
 create mode 100644 projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts
 create mode 100644 projects/discussion-ui/src/lib/pipes/pipe-relative-time/pipe-relative-time.pipe.spec.ts
 create mode 100644 projects/discussion-ui/src/lib/pipes/pipe-relative-time/pipe-relative-time.pipe.ts
 create mode 100644 projects/discussion-ui/src/lib/services/config.service.spec.ts
 create mode 100644 projects/discussion-ui/src/lib/services/config.service.ts

diff --git a/package.json b/package.json
index b71d4e28..0e67fd06 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "lodash-es": "^4.17.20",
+    "moment": "^2.29.1",
     "ng-packagr": "^4.2.0",
     "ngx-chips": "2.0.2",
     "protractor": "~5.4.0",
diff --git a/projects/discussion-ui/assets/styles/global.scss b/projects/discussion-ui/assets/styles/global.scss
index ad23f529..eb0a0d5c 100644
--- a/projects/discussion-ui/assets/styles/global.scss
+++ b/projects/discussion-ui/assets/styles/global.scss
@@ -1,28 +1,22 @@
-.background-blue{
-    background-color: blueviolet;
-}
+@import "theme.scss";
 
 :root {
     font-size: 16px;
+   // base colors
+    --blue: #024f9d;
+    --green: #008840;
+    --orange: #e55a28;
+    --red: #ff4558;
+    --indigo: #6610f2;
+    --purple: #6f42c1;
+    --pink: #e83e8c;
+    --yellow: #ffc107;
+    --teal: #20c997;
+    --cyan: #17a2b8;
+    --black: #000000;
+    --white: #ffffff;
 }
 
-//rem calculator
-@function calculateRem($size) {
-    $remSize: $size / 16px;
-    @return #{$remSize}rem;
-  }
-  
-  @function calculateEm($size) {
-    $emSize: $size / 16px;
-    @return #{$emSize}em;
-  }
-  
-  @mixin fontSize($size) {
-    font-size: $size; //Fallback in px
-    font-size: calculateRem($size);
-  }
-
-  
 .recent-tabs{
     transition: box-shadow 280ms cubic-bezier(.4,0,.2,1);
     display: block;
@@ -30,6 +24,7 @@
     box-shadow: none!important;
     border-radius: unset;
     background: inherit!important; 
+    z-index: 2;
 }
 .tabs-content{
     display: flex;
@@ -52,7 +47,6 @@
     user-select: none;
     cursor: pointer;
     outline: 0;
-    -webkit-tap-highlight-color: transparent;
     display: inline-block;
     white-space: nowrap;
     text-decoration: none;
@@ -62,20 +56,21 @@
     line-height: 40px;
     padding: 0 4px;
     overflow: visible;
-    font-size: 14px;
-    color: #000;
+    font-size: 0.875rem;
+    color: var(--black);
 }
 .filter-option:first-child {
     margin-left: 0;
 }
 .filter-option:hover,.tabs-active {
-    border-bottom: 3px solid #0074b6;
+    border-bottom: 3px solid var(--blue);
     font-weight: 700;
+    text-decoration: none;
 }
 
 .discuss-card-content{
     box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
-    background: #fff;
+    background: var(--white);
     color: rgba(0,0,0,.87);
     flex: 1;
     height: auto;
@@ -86,6 +81,7 @@
     padding: 1.4rem;
     border-radius: 4px;
     width: 100%;
+    z-index: 2;
 }
 
 .tags{
@@ -93,6 +89,8 @@
     flex: 1;
     flex-direction: row;
     flex-wrap: wrap; 
+    position: relative;
+    z-index: 2;
 }
 
 .tag {
@@ -112,7 +110,7 @@
 
 .count {
     height: auto;
-    background: #fff;
+    background: var(--white);
     border-radius: 4px;
     padding: 1px 3px;
     display: inline-flex;
@@ -121,7 +119,7 @@
     width: auto;
     min-width: 16px;
     margin: 0 0 0 15px;
-    color: #0074b6;
+    color: var(--blue);
     font: 700 14px/21px Lato;
 }
 
diff --git a/projects/discussion-ui/assets/styles/theme.scss b/projects/discussion-ui/assets/styles/theme.scss
new file mode 100644
index 00000000..c3067f65
--- /dev/null
+++ b/projects/discussion-ui/assets/styles/theme.scss
@@ -0,0 +1,72 @@
+html[layout='joy'] {
+  --df-primary-bg: #FFD954;
+  --df-gray-bg: #E9E8D9;
+  --sbt-bradius: 0.125rem;
+  --sbt-bradius-xs: calc(var(--sbt-bradius) * 4);  /* 8 value */
+  --sbt-bradius-sm: calc(var(--sbt-bradius) * 8);  /* 16 value */
+  --sbt-bradius-md: calc(var(--sbt-bradius) * 12);  /* 24 value */
+  --sbt-bradius-lg: calc(var(--sbt-bradius) * 16);  /* 32 value */
+
+  .df-back-btn-container {
+    background: var(--df-gray-bg) !important;
+    border-radius: var(--sbt-bradius-md);
+    margin: 1rem;
+    z-index: 2;
+    position: relative;
+  }
+
+  .df-back-btn {
+    margin-left: 1rem;
+  }
+
+  .df-main-content {
+    background: var(--df-primary-bg) !important;
+    border-radius: var(--sbt-bradius-md);
+
+    @media (max-width: 768px) {
+      margin: 1.5rem 0;
+      padding: 1.5rem;
+    }
+  }
+
+  .df-side-content {
+    background: var(--white);
+    border-radius: var(--sbt-bradius-md);
+    margin-right: 1.5rem;
+
+    @media (max-width: 768px) {
+      margin-right: 0;
+      padding: 1.5rem;
+    }
+  }
+
+  .df-filter-option {
+    background: var(--white);
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    box-shadow: var(--sbt-box-shadow-6px);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    white-space: nowrap;
+    font-weight: bold;
+    margin-right: 1.5rem;
+    height: 3rem;
+    transition: all ease 0.3s;
+    margin-top: 1rem;
+    font-size: 0.75rem;
+  }
+
+  .df-filter-option:hover,
+  .tabs-active {
+    color: var(--white) !important;
+    text-decoration: none;
+    background-color: var(--primary-color);
+  }
+
+  .df-sidebar-menu-list:hover,
+  .menu-active {
+    background: var(--df-gray-bg) !important;
+  }
+
+}
\ No newline at end of file
diff --git a/projects/discussion-ui/package.json b/projects/discussion-ui/package.json
index 0ed0a7dc..e91f66c9 100644
--- a/projects/discussion-ui/package.json
+++ b/projects/discussion-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@project-sunbird/discussions-ui-v8",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Sunbird-Ed/discussions-UI.git"
diff --git a/projects/discussion-ui/src/lib/common/constants.json b/projects/discussion-ui/src/lib/common/constants.json
index 47852202..def9ec5f 100644
--- a/projects/discussion-ui/src/lib/common/constants.json
+++ b/projects/discussion-ui/src/lib/common/constants.json
@@ -594,7 +594,7 @@
       "route": "All discussions",
       "enable": true
     },
-    {
+    {   
       "route": "categories",
       "enable": true
     },
diff --git a/projects/discussion-ui/src/lib/components/components.module.ts b/projects/discussion-ui/src/lib/components/components.module.ts
index 28822918..03a59c87 100644
--- a/projects/discussion-ui/src/lib/components/components.module.ts
+++ b/projects/discussion-ui/src/lib/components/components.module.ts
@@ -1,5 +1,6 @@
 import { PipesModule } from './../pipes/pipes.module';
 import { DiscussionService } from './../services/discussion.service';
+import { ConfigService } from './../services/config.service';
 import { HttpClientModule } from '@angular/common/http';
 import { ElementsModule } from './../elements/elements.module';
 import { NgModule } from '@angular/core';
@@ -13,6 +14,9 @@ import { DiscussionDetailsComponent } from './discussion-details/discussion-deta
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DiscussStartComponent } from './discuss-start/discuss-start.component';
 import { TagInputModule } from 'ngx-chips';
+// TODO: Add this components
+// import { DiscussAllComponent } from './discuss-all/discuss-all.component';
+// import { TagAllDiscussionComponent } from './tag-all-discussion/tag-all-discussion.component';
 
 
 @NgModule({
@@ -24,6 +28,9 @@ import { TagInputModule } from 'ngx-chips';
     MyDiscussionComponent,
     DiscussionDetailsComponent,
     DiscussStartComponent,
+    // TODO: Add this components
+    // DiscussAllComponent,
+    // TagAllDiscussionComponent,
   ],
   imports: [
     CommonModule,
@@ -42,9 +49,11 @@ import { TagInputModule } from 'ngx-chips';
     MyDiscussionComponent,
     DiscussionDetailsComponent,
     DiscussStartComponent
+    // TODO: Add this components
+    //  DiscussAllComponent, TagAllDiscussionComponent
   ],
   providers: [
-    DiscussionService
+    DiscussionService, ConfigService
   ]
 })
 export class ComponentsModule { }
diff --git a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.css b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.css
index c6addba3..bfaac228 100644
--- a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.css
+++ b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.css
@@ -4,6 +4,8 @@
     grid-gap: 24px;
     margin-bottom: 24px;
     cursor: pointer;
+    position: relative;
+    z-index: 2;
 }
 
 @media (max-width: 700px) {
diff --git a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts
index 58f3b710..7ca42e16 100644
--- a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts
+++ b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts
@@ -39,7 +39,7 @@ export class DiscussCategoryComponent implements OnInit, OnDestroy {
     public router: Router,
     public activatedRoute: ActivatedRoute,
     private telemetryUtils: TelemetryUtilsService
-    ) { }
+  ) { }
 
   ngOnInit() {
     /** It will look for the queryParams, if back button is clicked,
@@ -50,7 +50,7 @@ export class DiscussCategoryComponent implements OnInit, OnDestroy {
     this.telemetryUtils.logImpression(NSDiscussData.IPageName.CATEGORY);
     this.forumIds = this.discussService.forumIds;
     this.paramsSubscription = this.activatedRoute.queryParams.subscribe((params) => {
-      if ( _.get(params, 'cid')) {
+      if (_.get(params, 'cid')) {
         this.navigateToDiscussionPage(_.get(params, 'cid'));
       } else {
         this.categories = [];
@@ -83,14 +83,14 @@ export class DiscussCategoryComponent implements OnInit, OnDestroy {
    */
   navigateToDiscussionPage(cid, slug?) {
     this.showLoader = true;
-    this.telemetryUtils.uppendContext({id: cid, type: 'Category'});
+    this.telemetryUtils.uppendContext({ id: cid, type: 'Category' });
     this.discussService.fetchSingleCategoryDetails(cid).subscribe(response => {
       this.showLoader = false;
-      this.categoryId  = _.get(response, 'cid') ;
+      this.categoryId = _.get(response, 'cid');
       this.isTopicCreator = _.get(response, 'privileges.topics:create') === true ? true : false;
       this.showStartDiscussionModal = false;
       if (_.get(response, 'children').length > 0) {
-        this.router.navigate([], { relativeTo: this.activatedRoute.parent, queryParams: { cid: this.categoryId }});
+        this.router.navigate([], { relativeTo: this.activatedRoute.parent, queryParams: { cid: this.categoryId } });
         this.categories = [];
         _.get(response, 'children').forEach(subCategoryData => {
           this.categories.push(subCategoryData);
@@ -111,7 +111,6 @@ export class DiscussCategoryComponent implements OnInit, OnDestroy {
   }
 
   closeModal(event) {
-    console.log('event', event);
     this.showStartDiscussionModal = false;
   }
 
diff --git a/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts b/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts
index 43e7881d..5eb6dd09 100644
--- a/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts
+++ b/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts
@@ -34,15 +34,11 @@ export class DiscussHomeComponent implements OnInit {
     this.route.params.subscribe(params => {
       this.routeParams = params;
       this.categoryId = this.discussionService.getContext(CONTEXT_PROPS.cid);
-      console.log(this.discussionService.getContext(CONTEXT_PROPS.cid));
       this.getDiscussionList(_.get(this.routeParams, 'slug'));
-      console.log(this.routeParams);
     });
   }
 
   navigateToDiscussionDetails(discussionData) {
-    console.log('discussionData', discussionData);
-
     const matchedTopic = _.find(this.telemetryUtils.getContext(), { type: 'Topic' });
     if (matchedTopic) {
       this.telemetryUtils.deleteContext(matchedTopic);
@@ -61,7 +57,6 @@ export class DiscussHomeComponent implements OnInit {
       this.showLoader = false;
       this.isTopicCreator = _.get(data, 'privileges.topics:create') === true ? true : false;
       this.discussionList = _.union(_.get(data, 'topics'), _.get(data, 'children'));
-      console.log('this.discussionList', this.discussionList);
     }, error => {
       this.showLoader = false;
       // TODO: Toaster
diff --git a/projects/discussion-ui/src/lib/components/discuss-start/discuss-start.component.ts b/projects/discussion-ui/src/lib/components/discuss-start/discuss-start.component.ts
index a731cec6..62a22db4 100644
--- a/projects/discussion-ui/src/lib/components/discuss-start/discuss-start.component.ts
+++ b/projects/discussion-ui/src/lib/components/discuss-start/discuss-start.component.ts
@@ -57,7 +57,6 @@ export class DiscussStartComponent implements OnInit {
 
   initializeData() {
     this.discussService.fetchAllTag().subscribe(data => {
-      console.log('all tag from api', data);
       const tags = _.get(data, 'tags');
       this.allTags = _.map(tags, (tag) => tag.value);
     });
diff --git a/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.html b/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.html
index ae1abcbc..5a96370c 100644
--- a/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.html
+++ b/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.html
@@ -2,7 +2,8 @@
 <div class="flex flex-1 margin-top-m flex-column discussion-tag-content">
   <ng-container *ngIf="filteredTags && filteredTags.length > 0">
     <div class="tags">
-      <div *ngFor="let tag of filteredTags " class="tag" [ngStyle]="getBgColor(tag.value)">
+      <div *ngFor="let tag of filteredTags " class="tag" [ngStyle]="getBgColor(tag.value)"
+        (click)="getAllDiscussions(tag)">
         <!-- Can enable random colors from below commented code -->
         <!-- <div *ngFor="let tag of filteredTags | pipeFilter:'score,value':query"
         class="tag text-capitalize" [ngStyle]="getBgColor(tag.value)"> -->
diff --git a/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.scss b/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.scss
index 00336eb8..1bc03704 100644
--- a/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.scss
+++ b/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.scss
@@ -1,43 +1,47 @@
 .sb-search-box {
-    display: flex;
-    align-items: center;
-    border: 0px;
+	display: flex;
+	align-items: center;
+	border: 0px;
 }
 
 .sb-search-box .sb-search-input {
-    width: 100%;
-    font-size: 14px;
-    min-height: 2rem;
-    outline: 0;
-    border-radius: 0;
-    line-height: normal;
-    background: none;
-    padding: 1em;
-    border-radius: 5px;
-    border:0px;
+	width: 100%;
+	font-size: 14px;
+	min-height: 2rem;
+	outline: 0;
+	border-radius: 0;
+	line-height: normal;
+	background: none;
+	padding: 1em;
+	border-radius: 5px;
+	border: 0px;
 }
 
-.search-icon{
-    width: 18px;
-    height: 18px;
-    margin: 16px 0px 16px 16px;
+.search-icon {
+	width: 18px;
+	height: 18px;
+	margin: 16px 0px 16px 16px;
 }
 
 .sb-search-box .input-div {
-    border-radius: 24px;
-    background: #ffff;
-    display: flex;
-    align-items: center;
-    border: 1px solid #ddd;
-    width: 100%;
+	border-radius: 24px;
+	background: #ffff;
+	display: flex;
+	align-items: center;
+	border: 1px solid #ddd;
+	width: 100%;
 }
 
-.sb-search-box .input-div:hover{
-    border-color: #0074b6;
+.sb-search-box .input-div:hover {
+	border-color: #0074b6;
+}
+
+.tag {
+	cursor: pointer;
 }
 
 @media (max-width: 768px) {
-  .discuss-tags{
-      flex-direction: column;
-  }
-}
\ No newline at end of file
+	.discuss-tags {
+		flex-direction: column;
+	}
+}
diff --git a/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.ts b/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.ts
index dd846df4..831d495d 100644
--- a/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.ts
+++ b/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.ts
@@ -5,6 +5,9 @@ import * as _ from 'lodash'
 import { DiscussionService } from '../../services/discussion.service';
 import { NSDiscussData } from '../../models/discuss.model';
 import { TelemetryUtilsService } from './../../telemetry-utils.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { ConfigService } from '../../services/config.service';
 /* tslint:enable */
 
 @Component({
@@ -16,14 +19,25 @@ export class DiscussTagsComponent implements OnInit {
   query: string;
   filteredTags: NSDiscussData.ITag[];
   showLoader = false;
+  queryParam: any;
+  paramsSubscription: Subscription;
+  getParams: any;
+  cIds: any;
   constructor(
     private discussionService: DiscussionService,
-    private telemetryUtils: TelemetryUtilsService
+    private telemetryUtils: TelemetryUtilsService, private router: Router,
+    public activatedRoute: ActivatedRoute,
+    private configService: ConfigService,
   ) { }
 
   ngOnInit() {
     this.telemetryUtils.setContext([]);
     this.telemetryUtils.logImpression(NSDiscussData.IPageName.TAGS);
+    // this.configService.setConfig(this.activatedRoute)
+    this.getParams = this.configService.getConfig()
+    this.cIds = _.get(this.getParams, 'categories')
+    console.log(this.getParams, this.cIds)
+
     this.fetchAllTags();
   }
 
@@ -63,4 +77,17 @@ export class DiscussTagsComponent implements OnInit {
   getContrast() {
     return 'rgba(255, 255, 255, 80%)';
   }
+
+  getAllDiscussions(tag: { value: any }) {
+    this.queryParam = tag.value
+    const tagdata = {
+      tagname: '',
+      categories: '',
+    }
+    tagdata.categories = JSON.stringify(this.cIds)
+    tagdata.tagname = tag.value
+    this.queryParam = tagdata
+    // this.router.navigate([`/app/discussion-forum/tags/tag-discussions`], { queryParams: this.queryParam })
+  }
+
 }
diff --git a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.html b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.html
index 2485596d..280a53fe 100644
--- a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.html
+++ b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.html
@@ -1,396 +1,335 @@
-<div class="discussion-details">
+<div class=" flex flex-1 margin-fix">
+  <div class="flex flex-3 flex-column pb-10 discussion-details">
+    <!-- card -->
     <div>
-      <!-- card -->
-      <div>
-        <!-- header -->
-        <div role="link" tabindex="0">
-          <!-- title -->
-          <div class="discussion-card-title mb-8" [innerHTML]="data?.title"></div>
-          <!-- <mat-card-subtitle>{{'General discussion'}}</mat-card-subtitle> -->
-        </div>
-        <!-- /header -->
-        <ng-container *ngFor="let post of data?.posts">
-          <div *ngIf="post?.index === 0">
-          <!-- card content -->
-          <div class="margin-left-m mb-0-imp ">
-            <!-- <div [innerHTML]="post.content | safeHtml"></div> -->
-            <p role="link" tabindex="0" class="discussion-heading fnormal mb-16" [innerHTML]="post?.content"></p>
-            <div class="discussion-content" role="link" tabindex="0">
-              <!-- <span class="ws-mat-default-text">{{'Asked by'}}</span> -->
-              <!-- TODO: avatar photo -->
-              <!-- <ws-widget-avatar-photo [name]="post.user.fullname || 'Anonymous'" size="s"></ws-widget-avatar-photo> -->
-              <span class="circle-text"><span class="circle-label">CF</span></span>
-              <span class=" fnormal ml-16 discussion-labels">{{'Asked by '}}</span>
-              <span class="fnormal ml-16 discussion-labels" *ngIf="post.user.fullname"
-                [innerHTML]="post.user.fullname"></span>
-              <span class="fnormal ml-16 discussion-labels" *ngIf="!post.user.fullname"
-                [innerHTML]="post.user.username"></span>
-                <!-- TODO: pipeRelativeTime -->
-              <!-- <span class="discussion-labels margin-left-s">{{ post.timestamp | pipeRelativeTime}}</span> -->
-            </div>
-  
-  
-            <div class="flex flex-1 margin-top-m tags" role="link" tabindex="0" aria-label="tags" >
-              <ng-container *ngIf="data && data?.tags && data?.tags?.length > 0">
-                <span *ngFor="let tag of data?.tags" class="tag"  role="link" tabindex="0"
-                  i18n-aria-label [ngStyle]="getBgColor(tag.value)">
-                  {{tag.value}}
-                </span>
-              </ng-container>
-            </div>
-            <div class="comments-area fnormal mt-8 mb-16">
-              <div class="flex flex-1 flex-row margin-left-xs margin-right-xs">
-                <span class="flex margin-right-l mobile">
-                  <a href="javascript:void(0)" i18n-aria-label role="link" *ngIf="!post.upvoted" (click)="upvote(post);logTelemetry($event, post)"
-                    aria-label="upvote the post" id="up-vote">
-                    <!-- upward arrow -->
-                    <img src="./assets/discussion-ui/images/up-arrow.png" width="14px" height="14px" class="icons">
-                  </a>
-                  <a href="javascript:void(0)" i18n-aria-label *ngIf="post.upvoted" role="link" (click)="deleteVote(post);logTelemetry($event, post)"
-                    aria-label="remove upvote" id="delete-vote">
-                    <!-- upward arrow -->
-                    <img src="./assets/discussion-ui/images/select-up-arrow.png" width="14px" height="14px">
-                  </a>
-                  <span class="pad-4" role="text"
-                    [attr.aria-label]="'total upvoat is' + data?.upvotes">{{data?.upvotes}}</span>
-                </span>
-                <span class="flex margin-right-l mobile">
-                  <a href="javascript:void(0)" *ngIf="!post?.downvoted" i18n-aria-label role="link"
-                    (click)="downvote(post);logTelemetry($event, post)" aria-label="downvote post" id="down-vote">
-                    <!-- downward arrow -->
-                    <img src="./assets/discussion-ui/images/down-arrow.png" width="14px" height="14px">
-                  </a>
-                  <a href="javascript:void(0)" *ngIf="post?.downvoted" i18n-aria-label role="link"
-                    (click)="deleteVote(post);logTelemetry($event, post)" aria-label="remove down vote" id="delete-vote">
-                    <!-- downward arrow -->
-                    <img src="./assets/discussion-ui/images/select-down-arrow.png" width="14px" height="14px">
-                  </a>
-                  <span class="pad-4" role="text"
-                    [attr.aria-label]="'total upvoat is' + data?.upvotes">{{data?.downvotes}}</span>
-                </span>
-                <span class="flex margin-right-l mobile" role="link" tabindex="0">
-                   <!-- trending -->
-                   <img src="./assets/discussion-ui/images/profits.png" width="14px" height="14px">
-                  <span class="pad-4" i18n-aria-label aria-label="views count">{{data.viewcount}} views</span>
-                </span>
-                <span class="flex mobile margin-right-l">
-                  <a href="javascript:void(0)" *ngIf="!data?.posts[0]?.bookmarked" i18n-aria-label role="link"
-                    (click)="bookmark(post);logTelemetry($event, post)" aria-label="Bookmark post" id="bookmark">
-                    <!-- bookmark -->
-                    <img src="./assets/discussion-ui/images/bookmarks.png" width="20px" height="20px">
-                  </a>
-                  <a href="javascript:void(0)" *ngIf="data?.posts[0]?.bookmarked" i18n-aria-label role="link"
-                    (click)="unBookMark(post);logTelemetry($event, post)" aria-label="unBookmark post" id="un-bookmark-vote">
-                    <!-- bookmark -->
-                     <img src="./assets/discussion-ui/images/select-bookmarks.png" width="20px" height="20px">
-                  </a>
-                </span>
-              </div>
-              <div class="flex flex-1" class="cursor-pointer comments-count">
-                <span *ngIf="data?.postcount-1 > 0" i18n-aria-label
-                  aria-label="comments count">
-                  {{data?.postcount-1}}
-                  comments
-                </span>
-                <span *ngIf="data?.postcount-1 <=0" i18n-aria-label
-                  aria-label="comments count">
-                  0
-                  comments</span>
-              </div>
+      <!-- header -->
+      <div role="link" tabindex="0">
+        <!-- title -->
+        <div class="discussion-card-title mb-8" [innerHTML]="data?.title"></div>
+        <!-- <mat-card-subtitle>{{'General discussion'}}</mat-card-subtitle> -->
+      </div>
+      <!-- /header -->
+      <ng-container *ngFor="let post of data?.posts">
+        <div *ngIf="post?.index === 0">
+        <!-- card content -->
+        <div class="margin-left-m mb-0-imp ">
+          <!-- <div [innerHTML]="post.content | safeHtml"></div> -->
+          <p role="link" tabindex="0" class="discussion-heading fnormal mb-16" [innerHTML]="post?.content"></p>
+          <div class="discussion-content" role="link" tabindex="0">
+            <!-- <span class="ws-mat-default-text">{{'Asked by'}}</span> -->
+            <!-- TODO: avatar photo -->
+            <!-- <ws-widget-avatar-photo [name]="post.user.fullname || 'Anonymous'" size="s"></ws-widget-avatar-photo> -->
+            <span class="circle-text"><span class="circle-label">CF</span></span>
+            <span class=" fnormal ml-16 discussion-labels">{{'Asked by '}}</span>
+            <span class="fnormal ml-16 discussion-labels" *ngIf="post.user.fullname"
+              [innerHTML]="post.user.fullname"></span>
+            <span class="fnormal ml-16 discussion-labels" *ngIf="!post.user.fullname"
+              [innerHTML]="post.user.username"></span>
+              <!-- TODO: pipeRelativeTime -->
+            <!-- <span class="discussion-labels margin-left-s">{{ post.timestamp | pipeRelativeTime}}</span> -->
+          </div>
+
+
+          <div class="flex flex-1 margin-top-m tags" role="link" tabindex="0" aria-label="tags" >
+            <ng-container *ngIf="data && data?.tags && data?.tags?.length > 0">
+              <span *ngFor="let tag of data?.tags" class="tag"  role="link" tabindex="0"
+                i18n-aria-label [ngStyle]="getBgColor(tag.value)">
+                {{tag.value}}
+              </span>
+            </ng-container>
+          </div>
+          <div class="comments-area fnormal mt-8 mb-16">
+            <div class="flex flex-1 flex-row margin-left-xs margin-right-xs">
+              <span class="flex margin-right-l mobile">
+                <a href="javascript:void(0)" i18n-aria-label role="link" *ngIf="!post.upvoted" (click)="upvote(post);logTelemetry($event, post)"
+                  aria-label="upvote the post" id="up-vote">
+                  <!-- upward arrow -->
+                  <img src="./assets/discussion-ui/images/up-arrow.png" width="14px" height="14px" class="icons">
+                </a>
+                <a href="javascript:void(0)" i18n-aria-label *ngIf="post.upvoted" role="link" (click)="deleteVote(post);logTelemetry($event, post)"
+                  aria-label="remove upvote" id="delete-vote">
+                  <!-- upward arrow -->
+                  <img src="./assets/discussion-ui/images/select-up-arrow.png" width="14px" height="14px">
+                </a>
+                <span class="pad-4" role="text"
+                  [attr.aria-label]="'total upvoat is' + data?.upvotes">{{data?.upvotes}}</span>
+              </span>
+              <span class="flex margin-right-l mobile">
+                <a href="javascript:void(0)" *ngIf="!post?.downvoted" i18n-aria-label role="link"
+                  (click)="downvote(post);logTelemetry($event, post)" aria-label="downvote post" id="down-vote">
+                  <!-- downward arrow -->
+                  <img src="./assets/discussion-ui/images/down-arrow.png" width="14px" height="14px">
+                </a>
+                <a href="javascript:void(0)" *ngIf="post?.downvoted" i18n-aria-label role="link"
+                  (click)="deleteVote(post);logTelemetry($event, post)" aria-label="remove down vote" id="delete-vote">
+                  <!-- downward arrow -->
+                  <img src="./assets/discussion-ui/images/select-down-arrow.png" width="14px" height="14px">
+                </a>
+                <span class="pad-4" role="text"
+                  [attr.aria-label]="'total upvoat is' + data?.upvotes">{{data?.downvotes}}</span>
+              </span>
+              <span class="flex margin-right-l mobile" role="link" tabindex="0">
+                 <!-- trending -->
+                 <img src="./assets/discussion-ui/images/profits.png" width="14px" height="14px">
+                <span class="pad-4" i18n-aria-label aria-label="views count">{{data.viewcount}} views</span>
+              </span>
+              <span class="flex mobile margin-right-l">
+                <a href="javascript:void(0)" *ngIf="!data?.posts[0]?.bookmarked" i18n-aria-label role="link"
+                  (click)="bookmark(post);logTelemetry($event, post)" aria-label="Bookmark post" id="bookmark">
+                  <!-- bookmark -->
+                  <img src="./assets/discussion-ui/images/bookmarks.png" width="20px" height="20px">
+                </a>
+                <a href="javascript:void(0)" *ngIf="data?.posts[0]?.bookmarked" i18n-aria-label role="link"
+                  (click)="unBookMark(post);logTelemetry($event, post)" aria-label="unBookmark post" id="un-bookmark-vote">
+                  <!-- bookmark -->
+                   <img src="./assets/discussion-ui/images/select-bookmarks.png" width="20px" height="20px">
+                </a>
+              </span>
             </div>
-  
-            <div class="flex flex-1 flex-column margin-top-xl">
-              <h3 class="fnormal font-weight-bold mb-16"> Your answer here </h3>
-              <form [formGroup]=" postAnswerForm">
-                <!-- <ws-widget-ck-editor [location]="location" [basic]="true" [id]="data.tid"
-                  [content]="postAnswerForm.controls.answer.value || ''" (value)="updatedata('answer', $event)">
-                </ws-widget-ck-editor> -->
-                <div appearance="outline" class="flex-1 w-full text-form-field">
-                  <textarea formControlName="answer" class="text-content fsmall"  [ngClass]="{ 'is-valid': showError('answer') }"></textarea>
-                  <div *ngIf="showError('answer')" i18n="answer Error|Explains answer is required" class="mt-8 fsmall sb-color-error font-weight-bold">
-                    This is mandatory
-                  </div>
-                </div>
-              </form>
+            <div class="flex flex-1" class="cursor-pointer comments-count">
+              <span *ngIf="data?.postcount-1 > 0" i18n-aria-label
+                aria-label="comments count">
+                {{data?.postcount-1}}
+                comments
+              </span>
+              <span *ngIf="data?.postcount-1 <=0" i18n-aria-label
+                aria-label="comments count">
+                0
+                comments</span>
             </div>
-  
           </div>
-          <!-- /card content -->
-          <!-- post reply -->
-          <div align="end">
-            <!-- TODO: Add check below:  [disabled]="answer.value.length < 3 -->
-            <button mat-raised-button type="button" (click)="postReply(post);logTelemetry($event, post)"
-              class="text-white ws-mat-primary-background flex-auto-display margin-right-xs post-btn" id="post-reply">
-              <span class="text-white" i18n>Post reply</span>
-            </button>
-            <!-- <button mat-raised-button type="button" [mat-dialog-close]="true"
-                      class="ws-mat-accent-border flex-auto-display">
-                      <span class="ws-mat-default-text" i18n>Discard</span>
-                    </button> -->
-                  </div>
-          <!-- /post reply -->
+
+          <div class="flex flex-1 flex-column margin-top-xl">
+            <h3 class="fs-1 font-weight-bold"> Your answer here </h3>
+          </div>
+
         </div>
-        </ng-container>
+        <!-- /card content -->
+        <!-- post reply -->
+        <lib-post-reply (actionEvent)="postReplyHandler($event, post); logTelemetry($event, post)" [mode]="'reply'" [showCancel]="false"></lib-post-reply>
       </div>
-      <!-- /card end -->
+      </ng-container>
+    </div>
+    <!-- /card end -->
 
-      <ng-container *ngIf="data?.posts && data?.postcount > 1">
-        <div class="recent-tabs">
-          <div class="tabs-content">
-            <div class="tabs-filter">
-              <a href="javascript:void(0)" class="filter-option" role="link" [ngClass]="{'tabs-active' : currentFilter === 'timestamp',
-                              'ws-mat-accent-border':currentFilter !== 'timestamp'}" mat-button
-                (click)="filter('timestamp');logTelemetry($event)" id="recent-post">
-                Recent </a>
-              <!-- <a href="javascript:void(0)" class="filter-option" role="link" [ngClass]="{'tabs-active' : currentFilter === 'upvotes',
-                              'ws-mat-accent-border':currentFilter !== 'upvotes'}" mat-button
-                (click)="filter('upvotes')">
-                Most upvoted </a> -->
-            </div>
+    <ng-container *ngIf="data?.posts && data?.postcount > 1">
+      <div class="recent-tabs">
+        <div class="tabs-content">
+          <div class="tabs-filter">
+            <a href="javascript:void(0)" class="filter-option df-filter-option" role="link" [ngClass]="{'tabs-active' : currentFilter === 'timestamp',
+                            'ws-mat-accent-border':currentFilter !== 'timestamp'}" mat-button
+              (click)="filter('timestamp');logTelemetry($event)" id="recent-post">
+              Recent </a>
+            <!-- <a href="javascript:void(0)" class="filter-option df-filter-option" role="link" [ngClass]="{'tabs-active' : currentFilter === 'upvotes',
+                            'ws-mat-accent-border':currentFilter !== 'upvotes'}" mat-button
+              (click)="filter('upvotes')">
+              Most upvoted </a> -->
           </div>
         </div>
-      </ng-container>
-      <ng-container *ngFor="let post of data?.posts | sortBy: 'timestampISO':'desc'; index as i">
-        <!-- card content -->
-        <div *ngIf="post?.index != 0" class="post-card">
-          <!-- header -->
-          <div class="mb-8 comment-section align-center" role="link" tabindex="0">
-            <!-- TODO: Avatar photo -->
-            <!-- <ws-widget-avatar-photo [name]="post?.user?.fullname || post?.user?.username" size="s">
-            </ws-widget-avatar-photo> -->
-            <div class="post-header-content">
-              <span class="circle-text"><span class="circle-label">CF</span></span>
-              <span class="post-name" *ngIf="post?.user?.fullname"
-                [innerHTML]="post?.user?.fullname"></span>
-              <span class="post-name" *ngIf="!post?.user?.fullname"
-                [innerHTML]="post?.user?.username"></span>
+      </div>
+    </ng-container>
+    <ng-container *ngFor="let post of data?.posts | sortBy: 'timestampISO':'desc'; index as i">
+      <!-- card content -->
+      <div *ngIf="post?.index != 0" class="post-card">
+        <!-- header -->
+        <div class="mb-8 comment-section align-center" role="link" tabindex="0">
+          <!-- TODO: Avatar photo -->
+          <!-- <ws-widget-avatar-photo [name]="post?.user?.fullname || post?.user?.username" size="s">
+          </ws-widget-avatar-photo> -->
+          <div class="post-header-content">
+            <span class="circle-text"><span class="circle-label">CF</span></span>
+            <span class="post-name" *ngIf="post?.user?.fullname"
+              [innerHTML]="post?.user?.fullname"></span>
+            <span class="post-name" *ngIf="!post?.user?.fullname"
+              [innerHTML]="post?.user?.username"></span>
+          </div>
+          <div class="custom-actions">
+              <span class="post-time fnormal">{{ post?.timestamp | date: 'dd MMM yyyy hh:mm a'}}</span>                
+              <ng-container *ngIf="mainUid === post?.uid">
+              <img src="./assets/discussion-ui/images/edit.svg" width="14px" class="edit-icon ml-16" id="edit-post" (click)="getRealtimePost(post, i)">
+              <img src="./assets/discussion-ui/images/delete.svg" width="14px" class="delete-icon ml-16" id="delete-post" (click)="confirmDelete(post?.pid)">
+             </ng-container>
             </div>
-            <div class="custom-actions">
-                <span class="post-time fnormal">{{ post?.timestamp | date: 'dd MMM yyyy hh:mm a'}}</span>                
-                <ng-container *ngIf="mainUid === post?.uid">
-                  <!-- <button class="text-white post-btn edit-post" (click)="getRealtimePost(post?.content, i)" id="edit-post" mat-raised-button=""
-                  type="button">
-                  <span class="text-white">Edit</span>
-                  </button> -->
-        
-                  <img src="./assets/discussion-ui/images/edit.svg" width="14px" class="ml-16" id="edit-post" (click)="getRealtimePost(post?.content, i)">
-             
-                <img src="./assets/discussion-ui/images/delete.svg" width="14px" class="ml-16" id="delete-post" (click)="confirmDelete(post?.pid)">
-
-               </ng-container>
-              </div>
+          </div>
+        <!-- / header -->
+        <div>
+            <div class="d-flex" *ngIf="!editMode || editContentIndex !== i">
+                <p role="link" tabindex="0" [innerHTML]="post?.content" class="post-labels"></p><div class="edited-text" *ngIf="post?.edited">(edited)</div>
             </div>
-          <!-- / header -->
-          <div>
-              <div *ngIf="!editMode || editContentIndex !== i">
-                  <p role="link" tabindex="0" [innerHTML]="post?.content" class="post-labels my-8"></p>
-              </div>
-              <div *ngIf="editMode && editContentIndex === i">
-                  <form [formGroup]="UpdatePostAnswerForm">
-                      <div appearance="outline" class="flex-1 w-full text-form-field">
-                        <textarea formControlName="updatedAnswer" class="text-content fsmall edit-field"
-                          [ngClass]="{ 'is-valid': showError('answer') }" [ngModel]="contentPost" #updatedPost></textarea>
-                      </div>
-                    </form>
-                    <div class="updatePostActions">
-                         <button class="text-white post-btn cancel-update-post" (click)="onEditMode(false)" id="cancel-update-post" mat-raised-button="" type="button">
-                          <span class="text-white">Cancel</span>
-                        </button>
-                        <button class="text-white post-btn update-post" (click)="updatePost(updatedPost.value, post?.pid)" id="update-post" mat-raised-button=""
-                          type="button">
-                          <span class="text-white">Update</span>
-                        </button>
-                      </div>
-              </div>
-            <div class="reply-area my-8 font-weight-bold fnormal">
-              <div class="flex flex-1 flex-row margin-left-xs">
-                <span class="flex mobile">
-                   <!-- upward arrow -->
-                  <a href="javascript:void(0)" class="up-vote-text"  *ngIf="!post?.upvoted" i18n-aria-label role="link" (click)="upvote(post);logTelemetry($event, post)"
-                    aria-label="upvote comment" id="up-vote"> 
-                    <img src="./assets/discussion-ui/images/up-arrow.png" width="14px" height="14px">   
-                  </a>
-                </span>
-                <span class="flex margin-right-l mobile">
-                  <!-- upward arrow -->
-                  <a href="javascript:void(0)" class="down-vote-text" *ngIf="post.upvoted" i18n-aria-label role="link" (click)="deleteVote(post);logTelemetry($event, post)"
-                    aria-label="delete upvote on comment" id="delete-vote">
-                    <img src="./assets/discussion-ui/images/select-up-arrow.png" width="14px" height="14px">
-                  </a>
-                  <span class="pad-4">{{post?.upvotes}}</span>
-                </span>
+            <div *ngIf="editMode && editContentIndex === i">
+              <lib-post-reply (actionEvent)="editReplyHandler($event, post)" [mode]="'edit'" [showCancel]="true" [content]="contentPost"></lib-post-reply>
+            </div>
+          <div class="reply-area my-8 font-weight-bold fnormal">
+            <div class="flex flex-1 flex-row margin-left-xs">
+              <span class="flex mobile">
+                 <!-- upward arrow -->
+                <a href="javascript:void(0)" class="up-vote-text"  *ngIf="!post?.upvoted" i18n-aria-label role="link" (click)="upvote(post);logTelemetry($event, post)"
+                  aria-label="upvote comment" id="up-vote"> 
+                  <img src="./assets/discussion-ui/images/up-arrow.png" width="14px" height="14px">   
+                </a>
+              </span>
+              <span class="flex margin-right-l mobile">
+                <!-- upward arrow -->
+                <a href="javascript:void(0)" class="down-vote-text" *ngIf="post.upvoted" i18n-aria-label role="link" (click)="deleteVote(post);logTelemetry($event, post)"
+                  aria-label="delete upvote on comment" id="delete-vote">
+                  <img src="./assets/discussion-ui/images/select-up-arrow.png" width="14px" height="14px">
+                </a>
+                <span class="pad-4">{{post?.upvotes}}</span>
+              </span>
 
-                <span class="flex mobile">
-                  <a href="javascript:void(0)" id="down-vote" *ngIf="!post?.downvoted" i18n-aria-label role="link"
-                    (click)="downvote(post);logTelemetry($event, post)" aria-label="downvote comment">
-                     <!-- downward arrow -->
-                     <img src="./assets/discussion-ui/images/down-arrow.png" width="14px" height="14px">
+              <span class="flex mobile">
+                <a href="javascript:void(0)" id="down-vote" *ngIf="!post?.downvoted" i18n-aria-label role="link"
+                  (click)="downvote(post);logTelemetry($event, post)" aria-label="downvote comment">
+                   <!-- downward arrow -->
+                   <img src="./assets/discussion-ui/images/down-arrow.png" width="14px" height="14px">
+                </a>
+              </span>
+              <span class="flex margin-right-l mobile">
+                <a href="javascript:void(0)" id="delete-vote" *ngIf="post?.downvoted" i18n-aria-label role="link"
+                  (click)="deleteVote(post);logTelemetry($event, post)" aria-label="delete downvote on comment">
+                   <!-- down arrow -->
+                   <img src="./assets/discussion-ui/images/select-down-arrow.png" width="14px" height="14px">
+                </a>
+                <span class="pad-4">{{post?.downvotes}}</span>
+              </span>
+              <!-- <span class="flex margin-right-l mobile">
+                <mat-icon>trending_up</mat-icon>
+                <span class="pad-4">{{post.viewcount}} views</span>
+              </span> -->
+              <!-- <span class="flex mobile">
+                <img src="./assets/discussion-ui/images/bookmarks.png" width="14px" height="14px">
+              </span> -->
+            </div>
+            
+              <button mat-button (click)="togglePost(post); logTelemetry($event, post)" class="reply-btn" id="reply-comment">
+                <span class="noocoments"> Reply</span>
+              </button>
+         
+          </div>
+          <div class="w-full" *ngIf="post?.toggle">
+            <ng-container [ngTemplateOutlet]="reply" [ngTemplateOutletContext]="{post:post}">
+            </ng-container>
+          </div>
+          <ng-container *ngIf="post?.replies?.count > 0">
+            <div class="flex flex-1 custom margin-0 margin-top-xl">
+              <div class="width-expand flex align-center">
+                <!-- Disabled the user display of users avatars who replied -->
+                <!-- <div class="flex align-center" (click)="post.replyCountToggle = !post.replyCountToggle">
+                  <ng-container *ngFor="let user of post?.replies?.users">
+                    <ws-widget-avatar-photo [name]="user.fullname || user.username" size="s" class="mr-2">
+                    </ws-widget-avatar-photo>
+                  </ng-container>
+                </div> -->
+                <div class="ml-2 flex align-center" (click)="post.replyCountToggle = !post.replyCountToggle">
+                  <span class="cursor-pointer fnormal font-weight-bold"> {{post?.replies?.count}} reply(s) </span>
+                  <a href="javascript:void(0)" class="flex align-center" *ngIf="post?.replyCountToggle" i18n-aria-label
+                    role="link" aria-label="reply toggle">
+                    <span class="pl-2 pr-1 sm:pr-2 cursor-pointer" *ngIf="post?.replyCountToggle"
+                      aria-label="reply toggle upwards">
+                      <!-- up arrow -->
+                      <img src="./assets/discussion-ui/images/up-chevron.png" width="12px" height="12px">
+                    </span>
                   </a>
-                </span>
-                <span class="flex margin-right-l mobile">
-                  <a href="javascript:void(0)" id="delete-vote" *ngIf="post?.downvoted" i18n-aria-label role="link"
-                    (click)="deleteVote(post);logTelemetry($event, post)" aria-label="delete downvote on comment">
+                  <a href="javascript:void(0)" *ngIf="!post.replyCountToggle" class="flex align-center" i18n-aria-label
+                    role="link" aria-label="reply toggle">
+                    <span class="pl-2 pr-1 sm:pr-2 cursor-pointer" *ngIf="!post.replyCountToggle"
+                      aria-label="reply toggle downwards">
                      <!-- down arrow -->
-                     <img src="./assets/discussion-ui/images/select-down-arrow.png" width="14px" height="14px">
+                     <img src="./assets/discussion-ui/images/down-chevron.png" width="12px" height="12px">
+                    </span>
                   </a>
-                  <span class="pad-4">{{post?.downvotes}}</span>
-                </span>
-                <!-- <span class="flex margin-right-l mobile">
-                  <mat-icon>trending_up</mat-icon>
-                  <span class="pad-4">{{post.viewcount}} views</span>
-                </span> -->
-                <!-- <span class="flex mobile">
-                  <img src="./assets/discussion-ui/images/bookmarks.png" width="14px" height="14px">
-                </span> -->
+                </div>
+              </div>
+              <div class="my-24 fnormal">
+                <span *ngIf="!post.replyCountToggle">Last reply
+                  {{ post?.replies?.timestampISO | date: 'dd MMM yyyy hh:mm a' }} </span>
               </div>
-              
-                <button mat-button (click)="post.toggle =! post.toggle; post.comment='';logTelemetry($event, post)" class="reply-btn" id="reply-comment">
-                  <span class="noocoments"> Reply</span>
-                </button>
-           
             </div>
-            <div class="w-full" *ngIf="post?.toggle">
-              <ng-container [ngTemplateOutlet]="reply" [ngTemplateOutletContext]="{post:post}">
+            <div class="w-full" *ngIf="post?.replyCountToggle">
+              <ng-container [ngTemplateOutlet]="replies"
+                [ngTemplateOutletContext]="{posts:data.posts, postId:post.pid}">
               </ng-container>
             </div>
-            <ng-container *ngIf="post?.replies?.count > 0">
-              <div class="flex flex-1 custom margin-0 margin-top-xl">
-                <div class="width-expand flex align-center">
-                  <!-- Disabled the user display of users avatars who replied -->
-                  <!-- <div class="flex align-center" (click)="post.replyCountToggle = !post.replyCountToggle">
-                    <ng-container *ngFor="let user of post?.replies?.users">
-                      <ws-widget-avatar-photo [name]="user.fullname || user.username" size="s" class="mr-2">
-                      </ws-widget-avatar-photo>
-                    </ng-container>
-                  </div> -->
-                  <div class="ml-2 flex align-center" (click)="post.replyCountToggle = !post.replyCountToggle">
-                    <span class="cursor-pointer fnormal font-weight-bold"> {{post?.replies?.count}} reply(s) </span>
-                    <a href="javascript:void(0)" class="flex align-center" *ngIf="post?.replyCountToggle" i18n-aria-label
-                      role="link" aria-label="reply toggle">
-                      <span class="pl-2 pr-1 sm:pr-2 cursor-pointer" *ngIf="post?.replyCountToggle"
-                        aria-label="reply toggle upwards">
-                        <!-- up arrow -->
-                        <img src="./assets/discussion-ui/images/up-chevron.png" width="12px" height="12px">
-                      </span>
-                    </a>
-                    <a href="javascript:void(0)" *ngIf="!post.replyCountToggle" class="flex align-center" i18n-aria-label
-                      role="link" aria-label="reply toggle">
-                      <span class="pl-2 pr-1 sm:pr-2 cursor-pointer" *ngIf="!post.replyCountToggle"
-                        aria-label="reply toggle downwards">
-                       <!-- down arrow -->
-                       <img src="./assets/discussion-ui/images/down-chevron.png" width="12px" height="12px">
-                      </span>
-                    </a>
-                  </div>
-                </div>
-                <div class="my-24 fnormal">
-                  <span *ngIf="!post.replyCountToggle">Last reply
-                    {{ post?.replies?.timestampISO | date: 'dd MMM yyyy hh:mm a' }} </span>
-                </div>
-              </div>
-              <div class="w-full" *ngIf="post?.replyCountToggle">
-                <ng-container [ngTemplateOutlet]="replies"
-                  [ngTemplateOutletContext]="{posts:data.posts, postId:post.pid}">
-                </ng-container>
-              </div>
-            </ng-container>
-          </div>
-          <!-- /card content -->
+          </ng-container>
         </div>
-        <!--  / card -->
-        <!-- Divider -->
-        <div *ngIf="post.index != 0"></div>
-      </ng-container>
-      <div class="flex flex-1 flex-column margin-fix pagination-container">
-        <!-- <ws-app-pagination [pager]="pager" (changePage)="navigateWithPage($event)"></ws-app-pagination> -->
-      </div>
-    </div>
-    <div class="flex flex-1 display-hide hidden-imp">
-      <div *ngIf="fetchSingleCategoryLoader" class="pr-4 flex items-center justify-center">
-        <!-- TODO: loader -->
-        <!-- <mat-spinner [diameter]="30"></mat-spinner> -->
+        <!-- /card content -->
       </div>
-      <!-- TODO: related discussion -->
-      <!-- <app-discuss-related-discussion *ngIf="!fetchSingleCategoryLoader" [relatedDiscussions]="similarPosts">
-      </app-discuss-related-discussion> -->
+      <!--  / card -->
+      <!-- Divider -->
+      <div *ngIf="post.index != 0"></div>
+    </ng-container>
+    <div class="flex flex-1 flex-column margin-fix pagination-container">
+      <!-- <ws-app-pagination [pager]="pager" (changePage)="navigateWithPage($event)"></ws-app-pagination> -->
     </div>
   </div>
-  
-  
-  <ng-template #reply let-post="post">
-    <div class="mt-2 flex flex-col">
-      <div class="flex-1">
-        <form [formGroup]="replyForm">
-          <!-- <ws-widget-ck-editor [location]="location" [basic]="true" [id]="data.tid"
-            [content]="postAnswerForm.controls.answer.value || ''" (value)="updatedata('answer', $event)">
-          </ws-widget-ck-editor> -->
-          <div appearance="outline" class="flex-1 w-full text-form-field">
-            <textarea formControlName="reply" class="text-content fsmall"></textarea>
-          </div>
-        </form>
-      </div>
-      <div class="comment-btns">
-        <button mat-button class="mr-2 cancel-btn" (click)="post.toggle=!post.toggle; post.comment='';logTelemetry($event, post)" id="cancel-comment-reply">
-          <span class="noocoments"> Cancel</span>
-        </button>
-        <button mat-raised-button type="button" (click)="postCommentsReply(post);logTelemetry($event, post)" class="text-white ws-mat-primary-background flex-auto-display post-reply-btn">
-          <span class="text-white" i18n>Post reply</span>
-        </button>
-      </div>
+  <div class="flex flex-1 display-hide hidden-imp">
+    <div *ngIf="fetchSingleCategoryLoader" class="pr-4 flex items-center justify-center">
+      <!-- TODO: loader -->
+      <!-- <mat-spinner [diameter]="30"></mat-spinner> -->
     </div>
-  </ng-template>
-  
-  <ng-template #replies let-posts="posts" let-postId="postId">
-    <div class="mt-2 flex flex-col">
-      <ng-container *ngFor="let post of posts | pipeFilter:'toPid': postId; index as index; last as last">
-        <!-- card -->
-        <div class="post-card border-0">
-          <!-- card-header -->
-          <div class="my-16 comment-section align-center" role="link" tabindex="0">
-            <!-- TODO: avatar photo -->
-            <!-- <ws-widget-avatar-photo [name]="post?.user?.fullname || post?.user?.username" size="s">
-            </ws-widget-avatar-photo> -->
+    <lib-related-discussion *ngIf="!fetchSingleCategoryLoader" [relatedDiscussions]="similarPosts">
+    </lib-related-discussion>
+  </div>
+</div>
 
-            <div class="post-header-content">
-              <span class="circle-text"><span class="circle-label">CF</span></span>
-              <span class="margin-left-s capitalize f-medium width-expand post-name" *ngIf="post?.user?.fullname"
-              [innerHTML]="post?.user?.fullname"></span>
-            <span class="margin-left-s capitalize f-medium width-expand post-name" *ngIf="!post?.user?.fullname"
-              [innerHTML]="post?.user?.username"></span>
-            </div>
-            <span class="post-time fnormal">{{ post?.timestamp | date}}</span>
+
+<ng-template #reply let-post="post">
+  <div class="mt-2 flex flex-col">
+    <lib-post-reply (actionEvent)="commentReplyHandler($event, post)" [mode]="'reply'" [showCancel]="true"></lib-post-reply>
+  </div> 
+</ng-template>
+
+<ng-template #replies let-posts="posts" let-postId="postId">
+  <div class="mt-2 flex flex-col">
+    <ng-container *ngFor="let post of posts | pipeFilter:'toPid': postId; index as index; last as last">
+      <!-- card -->
+      <div class="post-card border-0">
+        <!-- card-header -->
+        <div class="my-16 comment-section align-center" role="link" tabindex="0">
+          <!-- TODO: avatar photo -->
+          <!-- <ws-widget-avatar-photo [name]="post?.user?.fullname || post?.user?.username" size="s">
+          </ws-widget-avatar-photo> -->
+
+          <div class="post-header-content">
+            <span class="circle-text"><span class="circle-label">CF</span></span>
+            <span class="margin-left-s capitalize f-medium width-expand post-name" *ngIf="post?.user?.fullname"
+            [innerHTML]="post?.user?.fullname"></span>
+          <span class="margin-left-s capitalize f-medium width-expand post-name" *ngIf="!post?.user?.fullname"
+            [innerHTML]="post?.user?.username"></span>
           </div>
-          <!-- /card-header -->
+          <span class="post-time fnormal">{{ post?.timestamp | date}}</span>
+        </div>
+        <!-- /card-header -->
 
-          <!-- card-content -->
-          <div>
-            <p role="link" tabindex="0" [innerHTML]="post?.content"></p>
-            <div class="reply-area my-8 font-weight-bold fnormal">
-              <div class="flex flex-1 flex-row margin-left-xs">
-                <span class="flex margin-right-l mobile">
-                  <!-- up arrow -->
-                  <img *ngIf="!post?.upvoted" class="cursor-pointer" (click)="upvote(post);logTelemetry($event, post)" src="./assets/discussion-ui/images/up-arrow.png" width="11px" height="11px">
-                  <img *ngIf="post?.upvoted" class="cursor-pointer" (click)="deleteVote(post);logTelemetry($event, post)" src="./assets/discussion-ui/images/select-up-arrow.png" width="11px" height="11px">
-                  <span class="pad-4">{{post.upvotes}}</span>
-                </span>
-                <span class="flex margin-right-l mobile">
-                  <img *ngIf="!post?.downvoted" class="cursor-pointer" (click)="downvote(post); logTelemetry($event, post)" id="up-vote" src="./assets/discussion-ui/images/down-arrow.png" width="11px" height="11px">
-                  <img *ngIf="post?.downvoted" class="cursor-pointer" (click)="deleteVote(post);logTelemetry($event, post)" id="delete-vote" src="./assets/discussion-ui/images/select-down-arrow.png" width="11px" height="11px">
-                  <span class="pad-4">{{post?.downvotes}}</span>
-                </span>
-              </div>
+        <!-- card-content -->
+        <div>
+          <p role="link" tabindex="0" [innerHTML]="post?.content"></p>
+          <div class="reply-area my-8 font-weight-bold fnormal">
+            <div class="flex flex-1 flex-row margin-left-xs">
+              <span class="flex margin-right-l mobile">
+                <!-- up arrow -->
+                <img *ngIf="!post?.upvoted" class="cursor-pointer" (click)="upvote(post);logTelemetry($event, post)" src="./assets/discussion-ui/images/up-arrow.png" width="11px" height="11px">
+                <img *ngIf="post?.upvoted" class="cursor-pointer" (click)="deleteVote(post);logTelemetry($event, post)" src="./assets/discussion-ui/images/select-up-arrow.png" width="11px" height="11px">
+                <span class="pad-4">{{post.upvotes}}</span>
+              </span>
+              <span class="flex margin-right-l mobile">
+                <img *ngIf="!post?.downvoted" class="cursor-pointer" (click)="downvote(post); logTelemetry($event, post)" id="up-vote" src="./assets/discussion-ui/images/down-arrow.png" width="11px" height="11px">
+                <img *ngIf="post?.downvoted" class="cursor-pointer" (click)="deleteVote(post);logTelemetry($event, post)" id="delete-vote" src="./assets/discussion-ui/images/select-down-arrow.png" width="11px" height="11px">
+                <span class="pad-4">{{post?.downvotes}}</span>
+              </span>
             </div>
-            <!-- divider -->
-            <!-- <div class="mt-2" *ngIf="!last"></div> -->
           </div>
-          <!-- /card-content -->
+          <!-- divider -->
+          <!-- <div class="mt-2" *ngIf="!last"></div> -->
         </div>
-        <!-- /card -->
-      </ng-container>
-    </div>
-  </ng-template>
-  
-  <input type="hidden" i18-value i18-aria-value aria-value="Thank you for voting!" value="Thank you for voting!!"
-    #toastSuccess />
-  <input type="hidden" i18-value i18-aria-value aria-value="Something went wrong, please try again later!"
-    value="Something went wrong, please try again later!" #toastError />
\ No newline at end of file
+        <!-- /card-content -->
+      </div>
+      <!-- /card -->
+    </ng-container>
+  </div>
+</ng-template>
+
+<input type="hidden" i18-value i18-aria-value aria-value="Thank you for voting!" value="Thank you for voting!!"
+  #toastSuccess />
+<input type="hidden" i18-value i18-aria-value aria-value="Something went wrong, please try again later!"
+  value="Something went wrong, please try again later!" #toastError />
\ No newline at end of file
diff --git a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.scss b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.scss
index a554f351..1a4ce912 100644
--- a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.scss
+++ b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.scss
@@ -2,13 +2,15 @@
     box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
     background: #fff;
     color: rgba(0,0,0,.87);
-    flex: 1;
+    flex: 3;
     height: auto;
     transition: box-shadow 280ms cubic-bezier(.4,0,.2,1);
     display: block;
     position: relative;
     padding: 1.4rem;
     border-radius: 4px;
+    justify-content: space-between;
+    z-index: 2;
 }
 
 .pad-4{
@@ -99,7 +101,7 @@
 }
 
 .post-btn,.post-reply-btn{
-    background-color: #0074b6!important;
+    background-color: #0074b6;
     color: #fff;
     border: 0;
     vertical-align: baseline;
@@ -162,10 +164,15 @@
 }
 .post-time{
     color: rgba(0,0,0,.6);
-    margin-left: 16px; 
+    margin-right: 10px; 
 }
 .post-labels{
     font-size: 12px;
+    display: -webkit-box;
+    -webkit-line-clamp: 6;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .reply-area{
     display: flex;
@@ -225,3 +232,19 @@
     align-items: start;
  }
 }
+
+.sb-btn-disabled {
+    background-color: var(--gray-100);
+    border: solid var(--gray-100);
+}
+
+.edited-text {
+    padding-left: 8px;
+    margin-top: 3px;
+    font-size: 12px;
+    color: rgba(0,0,0,0.6);
+}
+
+.delete-icon, .edit-icon {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts
index 5d6f480a..01835ee7 100644
--- a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts
+++ b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts
@@ -3,7 +3,7 @@ import { DiscussionService } from './../../services/discussion.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import { NSDiscussData } from './../../models/discuss.model';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import * as CONSTANTS from '../../common/constants.json';
 /* tslint:disable */
 import * as _ from 'lodash'
@@ -18,13 +18,14 @@ import { Subscription } from 'rxjs';
 })
 export class DiscussionDetailsComponent implements OnInit, OnDestroy {
   @Input() topicId: any;
+  @Input() slug: string;
+
   routeParams: any;
   currentActivePage = 1;
   currentFilter = 'timestamp'; // 'recent
   data: any;
   paginationData!: any;
   pager = {};
-  @Input() slug: string;
   postAnswerForm!: FormGroup;
   UpdatePostAnswerForm: FormGroup;
   replyForm: FormGroup;
@@ -35,6 +36,7 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
   contentPost: any;
   editContentIndex: any;
   mainUid: number;
+  similarPosts: any[];
 
   constructor(
     private route: ActivatedRoute,
@@ -49,7 +51,6 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
     if (!this.topicId && !this.slug) {
       this.route.params.subscribe(params => {
         this.routeParams = params;
-        console.log('discuss params', params);
         this.slug = _.get(this.routeParams, 'slug');
         this.topicId = _.get(this.routeParams, 'topicId');
         this.refreshPostData(this.currentActivePage);
@@ -66,6 +67,20 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
     });
     this.telemetryUtils.logImpression(NSDiscussData.IPageName.DETAILS);
   }
+
+  fetchSingleCategoryDetails(cid: number) {
+    this.fetchSingleCategoryLoader = true
+    this.discussionService.fetchSingleCategoryDetails(cid).subscribe(
+      (data: NSDiscussData.ICategoryData) => {
+        this.similarPosts = data.topics
+        this.fetchSingleCategoryLoader = false
+      },
+      (err: any) => {
+        // this.openSnackbar(err.error.message.split('|')[1] || this.defaultError)
+        this.fetchSingleCategoryLoader = false
+      })
+  }
+
   initializeFormFiled() {
     this.postAnswerForm = this.formBuilder.group({
       answer: [],
@@ -80,12 +95,13 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
 
   refreshPostData(page: any) {
     if (this.currentFilter === 'timestamp') {
-      console.log('from component refreshPostData method', this.slug);
       this.discussionService.fetchTopicById(this.topicId, this.slug, page).subscribe(
         (data: NSDiscussData.IDiscussionData) => {
           this.data = data;
           this.paginationData = _.get(data, 'pagination');
           this.mainUid = _.get(data, 'loggedInUser.uid');
+          this.fetchSingleCategoryDetails(this.data.cid)
+
           // this.setPagination();
         },
         (err: any) => {
@@ -93,12 +109,13 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
          // this.openSnackbar(err.error.message.split('|')[1] || this.defaultError);
         });
     } else {
-      console.log('from component refreshPostData method else', this.slug);
       this.discussionService.fetchTopicByIdSort(this.topicId, 'voted', page).subscribe(
         (data: NSDiscussData.IDiscussionData) => {
           this.data = data;
           this.paginationData = _.get(data, 'pagination');
           this.mainUid = _.get(data, 'loggedInUser.uid');
+          this.fetchSingleCategoryDetails(this.data.cid)
+
           // this.setPagination();
         },
         (err: any) => {
@@ -182,12 +199,10 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
       });
   }
 
-  postReply(post: NSDiscussData.IDiscussionData) {
+  postReply(replyContent: string, post: NSDiscussData.IDiscussionData) {
     const req = {
-      // tslint:disable-next-line:no-string-literal
-      content: this.postAnswerForm.controls['answer'].value,
+      content: replyContent,
     };
-    // tslint:disable-next-line:no-string-literal
     this.postAnswerForm.controls['answer'].setValue('');
     if (post && post.tid) {
       this.discussionService.replyPost(post.tid, req).subscribe(
@@ -204,10 +219,9 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
     }
   }
 
-  postCommentsReply(post: NSDiscussData.IPosts) {
+  postCommentsReply(replyContent: string, post: NSDiscussData.IPosts) {
     const req = {
-      // tslint:disable-next-line:no-string-literal
-      content: this.replyForm.controls['reply'].value,
+      content: replyContent,
       toPid: post.pid,
     };
     if (post && post.tid) {
@@ -281,17 +295,18 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
   }
 
   onEditMode(UpdatePostStatus: boolean) {
-  if (UpdatePostStatus) {
-    this.editMode = true;
-  } else {
-    this.editMode = false;
-  }
+    if (UpdatePostStatus) {
+      this.editMode = true;
+    } else {
+      this.editMode = false;
+    }
   }
 
-  getRealtimePost(postContent: any, index: any) {
+  getRealtimePost(post: any, index: any) {
     this.editMode = true;
     this.editContentIndex = index;
-    this.contentPost = postContent.replace(/<[^>]*>/g, '');
+    this.contentPost = _.get(post, 'content').replace(/<[^>]*>/g, '');
+    post.toggle = false;
   }
 
   updatePost(updatedPostContent: any, pid: number) {
@@ -321,6 +336,36 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
       console.log('e', error);
     });
   }
+
+  editReplyHandler(event, post) {
+    if (_.get(event, 'action') === 'cancel') {
+      this.onEditMode(false);
+    } else if (_.get(event, 'action') === 'edit') {
+      this.updatePost(_.get(event, 'content'), _.get(post, 'pid'));
+      this.logTelemetry(event, post);
+    }
+  }
+
+  commentReplyHandler(event, post) {
+    if (_.get(event, 'action') === 'cancel') {
+      this.togglePost(post);
+    } else if (_.get(event, 'action') === 'reply') {
+      this.postCommentsReply(_.get(event, 'content'), post);
+      this.logTelemetry(event, post);
+    }
+  }
+
+  postReplyHandler(event, post) {
+    if (_.get(event, 'action') === 'reply') {
+      this.postReply(_.get(event, 'content'), post);
+      this.logTelemetry(event, post);
+    }
+  }
+
+  togglePost(post) {
+    post.toggle = !post.toggle;
+    this.onEditMode(false);
+  }
   ngOnDestroy() {
     if (this.paramsSubscription) {
       this.paramsSubscription.unsubscribe();
diff --git a/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.html b/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.html
index 02940de4..5f57ed22 100644
--- a/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.html
+++ b/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.html
@@ -1,22 +1,22 @@
-<div class="relative position">
-    <div class="ui container">
-      <div (click)="goBack()" class="py-8 d-flex flex-ai-center">
-        <!-- /* Back button */ -->
-       <button type="button" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn mr-auto">
-       <img src="./assets/discussion-ui/images/back-img.png" class="mr-16" width="16px" height="16px">
-          Back
-        </button>
-      </div>
+<div class="ui container">
+    <div class="relative position df-back-btn-container mx-24">
+        <div (click)="goBack()" class="py-8 d-flex flex-ai-center">
+            <!-- /* Back button */ -->
+            <button type="button"
+                class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn mr-auto df-back-btn">
+                <img src="./assets/discussion-ui/images/back-img.png" class="mr-4" width="16px" height="16px">
+                Back
+            </button>
+        </div>
     </div>
-  </div>
-<div class="discussion-forum">
-    <div class="row">
-        <div class="discuss-left-panel">
-            <lib-side-pannel></lib-side-pannel>
-        </div> 
-        <div class="discuss-main-panel">
-            <router-outlet></router-outlet>
-        </div> 
+    <div class="discussion-forum">
+        <div class="row">
+            <div class="discuss-left-panel df-side-content">
+                <lib-side-pannel></lib-side-pannel>
+            </div>
+            <div class="discuss-main-panel df-main-content">
+                <router-outlet></router-outlet>
+            </div>
+        </div>
     </div>
-</div>
-
+</div>
\ No newline at end of file
diff --git a/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.scss b/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.scss
index 75177e05..f0adbbeb 100644
--- a/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.scss
+++ b/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.scss
@@ -6,9 +6,6 @@
 }
 
 .row {
-    width: 90%;
-    margin-left: auto !important;
-    margin-right: auto !important;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -16,6 +13,8 @@
 
 .discuss-left-panel{
     padding: 24px;
+    position: relative;
+    z-index: 2;
 }
 
 .discuss-main-panel{
@@ -31,7 +30,6 @@
     }
     .row {   
       flex-direction: column;
-      width: 100%;
     }
     .discuss-left-panel{
         width: auto;
diff --git a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html
index 483df611..458c4b7a 100644
--- a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html
+++ b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html
@@ -39,26 +39,26 @@
     <div class="recent-tabs pb-8">
       <div class="tabs-content">
         <div class="tabs-filter">
-          <a href="javascript:void(0)" role="button" class="filter-option" [ngClass]="{'tabs-active' : currentFilter === 'timestamp',
+          <a href="javascript:void(0)" role="button" class="filter-option df-filter-option" [ngClass]="{'tabs-active' : currentFilter === 'timestamp',
                               'ws-mat-accent-border font-medium':currentFilter !== 'timestamp'}"
             (click)="filter('timestamp');logTelemetry($event)" id="recent-post">
             Recent posts </a>
-          <a href="javascript:void(0)" role="button" class="filter-option" [ngClass]="{'tabs-active' : currentFilter === 'best',
+          <a href="javascript:void(0)" role="button" class="filter-option df-filter-option" [ngClass]="{'tabs-active' : currentFilter === 'best',
                               'ws-mat-accent-border font-medium':currentFilter !== 'best'}" (click)="filter('best');logTelemetry($event)" id="best-post">
-            Best posts </a>
-          <a href="javascript:void(0)" role="button" class="filter-option" [ngClass]="{'tabs-active' : currentFilter === 'saved',
+            Best posts </a> 
+          <a href="javascript:void(0)" role="button" class="filter-option df-filter-option" [ngClass]="{'tabs-active' : currentFilter === 'saved',
                                           'ws-mat-accent-border font-medium':currentFilter !== 'saved'}"
             (click)="filter('saved');logTelemetry($event)" id="saved-post">
             Saved posts </a>
-          <!-- <a href="javascript:void(0)" role="button" class="filter-option" [ngClass]="{'ws-mat-accent-border-active' : currentFilter === 'watched',
+          <!-- <a href="javascript:void(0)" role="button" class="filter-option df-filter-option" [ngClass]="{'ws-mat-accent-border-active' : currentFilter === 'watched',
                                             'ws-mat-accent-border font-medium':currentFilter !== 'watched'}" mat-button
             (click)="filter('watched')">
             Watched </a> -->
-          <a href="javascript:void(0)" role="button" class="filter-option" [ngClass]="{'tabs-active' : currentFilter === 'upvoted',
+          <a href="javascript:void(0)" role="button" class="filter-option df-filter-option" [ngClass]="{'tabs-active' : currentFilter === 'upvoted',
                                               'ws-mat-accent-border font-medium':currentFilter !== 'upvoted'}"
             (click)="filter('upvoted');logTelemetry($event)" id="upvoted-post">
             Upvoted </a>
-          <a href="javascript:void(0)" role="button" class="filter-option" [ngClass]="{'tabs-active' : currentFilter === 'downvoted',
+          <a href="javascript:void(0)" role="button" class="filter-option df-filter-option" [ngClass]="{'tabs-active' : currentFilter === 'downvoted',
                                                 'ws-mat-accent-border font-medium':currentFilter !== 'downvoted'}"
             (click)="filter('downvoted');logTelemetry($event)" id="downvoted-post">
             Downvoted </a>
diff --git a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts
index 7ace4478..b9209040 100644
--- a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts
+++ b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts
@@ -39,7 +39,6 @@ export class MyDiscussionComponent implements OnInit {
       if (_.get(this.data, 'posts')) {
         this.discussionList = _.get(this.data, 'posts').filter(p => (p.isMainPost === true));
       }
-      console.log('>>>>>>>', this.discussionList);
       // if (this.configSvc.userProfile) {
       //   localStorage.setItem(this.configSvc.userProfile.userId, this.profilePhoto);
       // }
@@ -53,8 +52,8 @@ export class MyDiscussionComponent implements OnInit {
   ngOnInit() {
     this.telemetryUtils.setContext([]);
     this.telemetryUtils.logImpression(NSDiscussData.IPageName.MY_DISCUSSION);
-    if (localStorage.getItem('userName')) {
-      this.fetchUserProfile(localStorage.getItem('userName'));
+    if ( this.discussService.userName) {
+      this.fetchUserProfile( this.discussService.userName);
     }
   }
 
diff --git a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.html b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.html
index 04398006..e5e8705f 100644
--- a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.html
+++ b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.html
@@ -1,8 +1,7 @@
 <ul class="sb-sidebar-menu pl-0" *ngIf="!hideSidePanel">
-  <!-- <li *ngIf="true" (click)="navigate('home', $event)" id="all-discussions"><a>All discussions</a></li> -->
-  <li *ngFor='let d of menu' [ngClass]="{'active': isActive(d.route)}" (click)="navigate(d.route, $event)" id='d.route'>
-    <a>{{d.route}}</a></li>
-
+  <!-- <li class="df-sidebar-menu-list" *ngIf="false" (click)="navigate('home', $event)" id="all-discussions"><a>All discussions</a></li> -->
+  <li *ngFor='let d of menu' class="df-sidebar-menu-list" [ngClass]="{'menu-active': isActive(d.route)}"
+    (click)="navigate(d.route, $event)" id="d.route"><a>{{d.route}}</a></li>
 </ul>
 
 
diff --git a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.scss b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.scss
index 0b77b70a..d6217217 100644
--- a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.scss
+++ b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.scss
@@ -15,10 +15,11 @@
   color: #333;
   cursor: pointer;
   border-left: 0.125rem solid transparent;
+  cursor: pointer;
 }
 
-.sb-sidebar-menu li.active {
-  background-color: #eee;
+.sb-sidebar-menu li.menu-active{
+  background-color: var(--white);
   font-weight: 700;
   border-left: 3px solid #005391;
   color: #002e50;
@@ -26,8 +27,7 @@
 }
 
 .sb-sidebar-menu li:hover {
-  cursor: pointer;
-  background: rgba(0,0,0,.04);
+  background-color: var(--white);
 }
 
 .openbtn,.overlay-sidebar{
diff --git a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
index 7927b231..1ad15bb7 100644
--- a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
+++ b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
@@ -9,6 +9,7 @@ import * as CONSTANTS from './../../common/constants.json';
 /* tslint:disable */
 import * as _ from 'lodash'
 import { first } from 'rxjs/operators';
+import { ConfigService } from '../../services/config.service';
 /* tslint:enable */
 
 @Component({
@@ -26,57 +27,51 @@ export class SidePannelComponent implements OnInit, OnDestroy {
 
   data: any;
   hideSidePanel: boolean;
-
+  menu: any;
   selectedTab: string;
   showSideMenu: Boolean = true;
-  menu: any;
-
 
   constructor(
     public router: Router,
     public discussService: DiscussionService,
     public activatedRoute: ActivatedRoute,
     private telemetryUtils: TelemetryUtilsService,
+    private configService: ConfigService
   ) { }
 
   ngOnInit() {
     // TODO: loader or spinner
     this.hideSidePanel = document.body.classList.contains('widget');
     this.telemetryUtils.logImpression(NSDiscussData.IPageName.HOME);
-    this.activatedRoute.data.subscribe((data) => {
-      this.data = data;
-      this.discussService.userName = _.get(data, 'userName');
-      const rawCategories = _.get(data, 'categories');
-      this.discussService.forumIds = _.get(rawCategories, 'result');
+    this.configService.setConfig(this.activatedRoute)
+    // this.activatedRoute.data.subscribe((data) => {
+    this.data = this.configService.getConfig();
+    this.discussService.userName = _.get(this.data, 'userName');
+    const rawCategories = _.get(this.data, 'categories');
+    this.discussService.forumIds = _.get(rawCategories, 'result');
 
 
-      localStorage.setItem('userName', _.get(this.data, 'userName'));
-      this.discussService.initializeUserDetails(this.discussService.userName);
+    this.discussService.initializeUserDetails(this.discussService.userName);
 
-      this.menu = data.menuOptions.length > 0 ? data.menuOptions : CONSTANTS.MENUOPTIONS
-    })
+    this.menu = this.data.menuOptions.length > 0 ? this.data.menuOptions : CONSTANTS.MENUOPTIONS
+    // })
     for (let i = 0; i < this.menu.length; i++) {
       let item = this.menu
       if (!item[i].enable) {
         this.menu.splice(i, 1)
       }
     }
-    if (this.discussService.forumIds) {
-      // this.navigate(this.defaultPage);
-    } else {
-      // TODO: Error toast
-      console.log('forum ids not found');
-    }
+
   }
 
   isActive(selectedItem) {
     debugger
     if (this.router.url.indexOf(`/${selectedItem}`) > -1 || this.selectedTab === selectedItem) {
-      if(!this.selectedTab){
+      if (!this.selectedTab) {
         this.selectedTab = selectedItem
       }
       return true
-    } else if (selectedItem === 'categories' && !this.selectedTab ) {
+    } else if (selectedItem === 'categories' && !this.selectedTab) {
       return true
     }
     return false
diff --git a/projects/discussion-ui/src/lib/config/url.config.ts b/projects/discussion-ui/src/lib/config/url.config.ts
index 48676a8b..ccc62136 100644
--- a/projects/discussion-ui/src/lib/config/url.config.ts
+++ b/projects/discussion-ui/src/lib/config/url.config.ts
@@ -1,5 +1,6 @@
 export const urlConfig = {
     // endpoint configs...!
+    // host: 'http://localhost:3002',
     host: 'https://dev.sunbirded.org',
     apiSlug: '/discussion',
     apiBasePath: () => `${urlConfig.host}${urlConfig.apiSlug}`,
@@ -8,12 +9,13 @@ export const urlConfig = {
     getAllCategories: () => `${urlConfig.apiBasePath()}/categories`,
     getSingleCategoryDetails: (cid: number) => `${urlConfig.apiBasePath()}/category/${cid}`,
     getAllTags: () => `${urlConfig.apiBasePath()}/tags`,
+    getTagBasedDiscussion: (tag: string) => `${urlConfig.apiBasePath()}/tags/${tag}`,
     createPost: () => `${urlConfig.apiBasePath()}/v2/topics`,
     votePost: (pid: number) => `${urlConfig.apiBasePath()}/v2/posts/${pid}/vote`,
     replyPost: (tid: number) => `${urlConfig.apiBasePath()}/v2/topics/${tid}`,
     bookmarkPost: (pid: number) => `${urlConfig.apiBasePath()}/v2/posts/${pid}/bookmark`,
-    recentPost: () => `${urlConfig.apiBasePath()}/topics/recent`,
-    popularPost: () => `${urlConfig.apiBasePath()}/topics/popular`,
+    recentPost: () => `${urlConfig.apiBasePath()}/recent`,
+    popularPost: () => `${urlConfig.apiBasePath()}/popular`,
     unread: () => `${urlConfig.apiBasePath()}/topics/unread/total`,
     getTopic: () => `${urlConfig.apiBasePath()}/topic`,
     profile: () => `${urlConfig.apiBasePath()}/users/me`,
@@ -25,5 +27,6 @@ export const urlConfig = {
     userDetails: (username: string) => `${urlConfig.apiBasePath()}/user/${username}`,
     getContextBasedTopics: (slug: string) => `${urlConfig.apiBasePath()}/category/${slug}`,
     registerUser: () => `${urlConfig.apiBasePath()}/user/v1/create`,
-    getMenuOptions:  () => `${urlConfig.apiBasePath()}/admin/settings/navigation`
+    getContextBasedDiscussion: () => `${urlConfig.apiBasePath()}/category/list`,
+    getContextBasedTagDiscussion: () => `${urlConfig.apiBasePath()}/tags/list`
 };
diff --git a/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts b/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts
index e7101505..dc213b45 100644
--- a/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts
+++ b/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts
@@ -7,6 +7,9 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from '@angular/router';
 import { DiscussHomeComponent } from './../components/discuss-home/discuss-home.component';
+// TODO: ADD LATER
+// import { DiscussAllComponent } from './../components/discuss-all/discuss-all.component';
+// import { TagAllDiscussionComponent } from './../components/tag-all-discussion/tag-all-discussion.component';
 
 
 const routes: Routes = [
@@ -14,15 +17,10 @@ const routes: Routes = [
     path: '',
     component: LibEntryComponent,
     children: [
-      {
-        path: '',
-        pathMatch: 'full',
-        redirectTo: 'categories'
-    },
       {
         path: 'home',
         pathMatch: 'full',
-        component: DiscussHomeComponent
+        // component: DiscussAllComponent
       },
       {
         path: 'categories',
@@ -34,6 +32,12 @@ const routes: Routes = [
         pathMatch: 'full',
         component: DiscussTagsComponent
       },
+      // TODO: ADD LATER
+      // {
+      //   path: 'tags/tag-discussions',
+      //   pathMatch: 'full',
+      //   component: TagAllDiscussionComponent
+      // },
       {
         path: 'my-discussion',
         pathMatch: 'full',
diff --git a/projects/discussion-ui/src/lib/elements/elements.module.ts b/projects/discussion-ui/src/lib/elements/elements.module.ts
index e1a54907..22f37111 100644
--- a/projects/discussion-ui/src/lib/elements/elements.module.ts
+++ b/projects/discussion-ui/src/lib/elements/elements.module.ts
@@ -1,24 +1,35 @@
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CategoryCardComponent } from './category-card/category-card.component';
 import { DiscussCardComponent } from './discuss-card/discuss-card.component';
 import { AvatarPhotoComponent } from './avatar-photo/avatar-photo.component';
 import { AppLoaderComponent } from './app-loader/app-loader.component';
+import { RelatedDiscussionComponent } from './related-discussion/related-discussion.component';
+import { PipesModule } from './../pipes/pipes.module';
+
+import { PostReplyComponent } from './post-reply/post-reply.component';
 @NgModule({
   declarations: [
+    PostReplyComponent,
     CategoryCardComponent,
     DiscussCardComponent,
     AvatarPhotoComponent,
-    AppLoaderComponent
+    AppLoaderComponent,
+    RelatedDiscussionComponent
   ],
   imports: [
-    CommonModule,
+    CommonModule, PipesModule,
+     FormsModule,
+    ReactiveFormsModule
   ],
   exports: [
     CategoryCardComponent,
     DiscussCardComponent,
     AvatarPhotoComponent,
-    AppLoaderComponent
+    AppLoaderComponent, RelatedDiscussionComponent,
+    AppLoaderComponent,
+    PostReplyComponent
   ]
 })
 export class ElementsModule { }
diff --git a/projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.css b/projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.css
new file mode 100644
index 00000000..c5ddf87f
--- /dev/null
+++ b/projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.css
@@ -0,0 +1,51 @@
+.text-form-field{
+    display: flex;
+    flex-direction: column;
+    /* width: 97.6%;   */
+}
+
+.text-content{
+    min-height: 108px;
+    max-height: 540px;
+    /* width: 97.6%;  */
+    border: 1.5px solid #ccc2c2;
+    border-radius: 4px;
+    margin: 16px 0;
+    cursor: pointer;
+    padding: 16px;
+}
+
+.edit-field {
+    min-height: 40px;
+}
+
+.updatePostActions {
+    display: flex;
+    justify-content: flex-end;
+    padding-bottom: 15px
+}
+
+.post-btn,.post-reply-btn{
+    background-color: #0074b6;
+    color: #fff;
+    border: 0;
+    vertical-align: baseline;
+    text-align: center;
+    margin: 0;
+    min-width: 64px;
+    line-height: 36px;
+    padding: 0 16px;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.cancel-update-post {
+    margin-right: 20px;
+}
+
+.sb-btn-disabled {
+    background-color: var(--gray-100);
+    border: solid var(--gray-100);
+}
\ No newline at end of file
diff --git a/projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.html b/projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.html
new file mode 100644
index 00000000..905b00f8
--- /dev/null
+++ b/projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.html
@@ -0,0 +1,37 @@
+<form [formGroup]="replyForm">
+    <div appearance="outline" class="flex-1 w-full text-form-field">
+      <textarea placeholder="Type your message here (minimum 10 characters)" 
+        minlength="10" 
+        formControlName="replyContent" 
+        class="text-content fnormal edit-field"
+        [ngModel]="content">
+    </textarea>
+    </div>
+  </form>
+  <div class="updatePostActions">
+       <button class="text-white post-btn cancel-update-post"
+        *ngIf="showCancel"
+        (click)="onCancelClick()" 
+        id="cancel-update-post" 
+        type="button">
+        <span class="text-white">Cancel</span>
+      </button>
+      <button [ngClass]="{'sb-btn-disabled': !isButtonEnabled }" 
+        *ngIf="mode === 'edit'"
+        [disabled]="!isButtonEnabled" 
+        class="text-white post-btn update-post" 
+        (click)="onReplyClick('edit')" 
+        id="update-post"
+        type="button">
+        <span class="text-white">Update</span>
+      </button>
+      <button [ngClass]="{'sb-btn-disabled': !isButtonEnabled }" 
+        *ngIf="mode !== 'edit'"
+        [disabled]="!isButtonEnabled" 
+        class="text-white post-btn update-post" 
+        (click)="onReplyClick('reply')" 
+        id="update-post"
+        type="button">
+        <span class="text-white">Post Reply</span>
+      </button>
+  </div>
\ No newline at end of file
diff --git a/projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.spec.ts b/projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.spec.ts
new file mode 100644
index 00000000..8e7c0498
--- /dev/null
+++ b/projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostReplyComponent } from './post-reply.component';
+
+describe('PostReplyComponent', () => {
+  let component: PostReplyComponent;
+  let fixture: ComponentFixture<PostReplyComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PostReplyComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PostReplyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.ts b/projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.ts
new file mode 100644
index 00000000..7ef4db37
--- /dev/null
+++ b/projects/discussion-ui/src/lib/elements/post-reply/post-reply.component.ts
@@ -0,0 +1,55 @@
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'lib-post-reply',
+  templateUrl: './post-reply.component.html',
+  styleUrls: ['./post-reply.component.css']
+})
+export class PostReplyComponent implements OnInit {
+  @Input() showCancel = true;
+  @Input() mode = 'add';
+  @Input() content: string;
+
+  @Output() actionEvent = new EventEmitter();
+
+  replyForm!: FormGroup;
+
+  isButtonEnabled = false;
+
+  constructor(
+    private formBuilder: FormBuilder
+  ) { }
+
+  ngOnInit() {
+    console.log('conent came', this.content);
+    this.initializeFormFields();
+  }
+
+  initializeFormFields() {
+    this.replyForm = this.formBuilder.group({
+      replyContent: ['', Validators.required]
+    });
+    this.replyForm.valueChanges.subscribe(val => {
+      this.isButtonEnabled = this.validateForm();
+    });
+  }
+
+  validateForm() {
+    if (this.replyForm.status === 'VALID') {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  onReplyClick(mode: string) {
+    // tslint:disable-next-line:no-string-literal
+    this.actionEvent.emit({action: mode, content: this.replyForm.controls['replyContent'].value.trim()});
+  }
+
+  onCancelClick() {
+    this.actionEvent.emit({action: 'cancel'});
+  }
+
+}
diff --git a/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.html b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.html
new file mode 100644
index 00000000..dc734608
--- /dev/null
+++ b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.html
@@ -0,0 +1,25 @@
+<div class="margin-right-s">
+    <h3 i18n-aria-label aria-label="Related discussions">Related discussions</h3>
+    <ng-container *ngIf="relatedDiscussions && relatedDiscussions.length > 0">
+        <div *ngFor="let discussion of relatedDiscussions | slice:0:5;"
+            class="tag ws-mat-primary-lite-background-important">
+
+            <div class="discuss-card-header">
+                <div class="discuss-card-subtitle responsive" (click)="getDiscussion(discussion)">
+                    <a href="javascript:void(0)" i18n-aria-label role="link" aria-label="related discussion post">
+                        <span class="discuss-user-label">{{discussion?.title}}</span>
+                    </a>
+                </div>
+                <div>
+                    <div class="flex items-center justify-start">
+                        <div class="mr-2 truncate category-name ws-mat-default-text"
+                            [innerHTML]="discussion.category.name">
+                        </div>
+                        <div class="mr-2 separator-dot"> </div>
+                        <div class=" truncate time">{{ discussion.timestamp | pipeRelativeTime }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-container>
+</div>
\ No newline at end of file
diff --git a/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.scss b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.scss
new file mode 100644
index 00000000..4c7b79f0
--- /dev/null
+++ b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.scss
@@ -0,0 +1,60 @@
+// @import 'ws-common';
+// @import 'ws-vars';
+// @import 'ws-mixins';
+
+.tag {
+	display: flex;
+    min-width: 276px;
+    height: 100px;
+
+	// height: 32px;
+	border-radius: 4px;
+	// justify-content: space-between;
+	//   margin: $size-m 0;
+	// background-color: red;
+	// align-items: center;
+
+	//   @include breakpoint-xs {
+	//     width: auto;
+	//   }
+
+	//   @include breakpoint-s {
+	//     width: auto;
+
+	//   }
+}
+
+// .f-medium {
+//   // font-family: "Poppins-Medium";
+// }
+
+.example-header-image {
+	background-size: cover;
+}
+
+.discuss-card-subtitle {
+	margin: 0px;
+	color: #000;
+	cursor: pointer;
+	font-size: 15px;
+	font-weight: 700;
+	text-transform: capitalize;
+}
+
+
+
+.separator-dot {
+	display: inline-block;
+	height: 5px;
+	width: 5px;
+	border-radius: 50%;
+	background-color: rgba(0, 0, 0, 0.4);
+}
+
+.title {
+	color: #000 !important;
+}
+
+.time {
+	color: rgba(0, 0, 0, 0.4);
+}
diff --git a/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.spec.ts b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.spec.ts
new file mode 100644
index 00000000..f31de03d
--- /dev/null
+++ b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RelatedDiscussionComponent } from './related-discussion.component';
+
+describe('RelatedDiscussionComponent', () => {
+  let component: RelatedDiscussionComponent;
+  let fixture: ComponentFixture<RelatedDiscussionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RelatedDiscussionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RelatedDiscussionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts
new file mode 100644
index 00000000..b4d0bda7
--- /dev/null
+++ b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router'
+import * as CONSTANTS from './../../common/constants.json';
+
+@Component({
+  selector: 'lib-related-discussion',
+  templateUrl: './related-discussion.component.html',
+  styleUrls: ['./related-discussion.component.scss'],
+  host: { class: 'margin-left-l' },
+})
+export class RelatedDiscussionComponent implements OnInit {
+  @Input()
+  relatedDiscussions!: []
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+
+  getDiscussion(discuss) {
+    this.router.navigate([`${CONSTANTS.ROUTES.DISCUSSION}topic/${discuss.slug}`]);
+  }
+
+}
diff --git a/projects/discussion-ui/src/lib/pipes/pipe-relative-time/pipe-relative-time.pipe.spec.ts b/projects/discussion-ui/src/lib/pipes/pipe-relative-time/pipe-relative-time.pipe.spec.ts
new file mode 100644
index 00000000..62b2d1a3
--- /dev/null
+++ b/projects/discussion-ui/src/lib/pipes/pipe-relative-time/pipe-relative-time.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { PipeRelativeTimePipe } from './pipe-relative-time.pipe';
+
+describe('PipeRelativeTimePipe', () => {
+  it('create an instance', () => {
+    const pipe = new PipeRelativeTimePipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/projects/discussion-ui/src/lib/pipes/pipe-relative-time/pipe-relative-time.pipe.ts b/projects/discussion-ui/src/lib/pipes/pipe-relative-time/pipe-relative-time.pipe.ts
new file mode 100644
index 00000000..f1c70968
--- /dev/null
+++ b/projects/discussion-ui/src/lib/pipes/pipe-relative-time/pipe-relative-time.pipe.ts
@@ -0,0 +1,19 @@
+
+
+
+
+import { Pipe, PipeTransform } from '@angular/core'
+import moment from 'moment'
+
+@Pipe({
+  name: 'pipeRelativeTime',
+})
+export class PipeRelativeTimePipe implements PipeTransform {
+  transform(value: number): string {
+    if (value) {
+      return moment((new Date(value))).fromNow()
+    }
+    return moment().startOf('hour').fromNow()
+  }
+}
+
diff --git a/projects/discussion-ui/src/lib/pipes/pipes.module.ts b/projects/discussion-ui/src/lib/pipes/pipes.module.ts
index 06830890..e50cd46a 100644
--- a/projects/discussion-ui/src/lib/pipes/pipes.module.ts
+++ b/projects/discussion-ui/src/lib/pipes/pipes.module.ts
@@ -2,14 +2,15 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PipeFilterPipe } from './pipe-filter/pipe-filter.pipe';
 import { SortByPipe } from './sort-by/sort-by.pipe';
+import { PipeRelativeTimePipe } from './pipe-relative-time/pipe-relative-time.pipe';
 
 
 
 @NgModule({
-  declarations: [ PipeFilterPipe, SortByPipe ],
+  declarations: [PipeFilterPipe, SortByPipe, PipeRelativeTimePipe],
   imports: [
     CommonModule
   ],
-  exports: [ PipeFilterPipe, SortByPipe ]
+  exports: [PipeFilterPipe, SortByPipe, PipeRelativeTimePipe]
 })
 export class PipesModule { }
diff --git a/projects/discussion-ui/src/lib/services/config.service.spec.ts b/projects/discussion-ui/src/lib/services/config.service.spec.ts
new file mode 100644
index 00000000..c8fff3dd
--- /dev/null
+++ b/projects/discussion-ui/src/lib/services/config.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ConfigService } from './config.service';
+
+describe('ConfigService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ConfigService = TestBed.get(ConfigService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/discussion-ui/src/lib/services/config.service.ts b/projects/discussion-ui/src/lib/services/config.service.ts
new file mode 100644
index 00000000..b35d0136
--- /dev/null
+++ b/projects/discussion-ui/src/lib/services/config.service.ts
@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
+import * as _ from 'lodash'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConfigService {
+
+  paramsSubscription: Subscription;
+  private _config: any;
+  public checkContext: boolean
+
+
+  constructor(
+    public activatedRoute: ActivatedRoute,
+  ) { }
+
+  ngOnInit() {
+
+  }
+
+  setConfig(activatedRoute) {
+    activatedRoute.data.subscribe((data) => {
+      debugger
+      this._config = data;
+    })
+
+  }
+
+  public getConfig() {
+    return this._config;
+  }
+
+
+
+
+  // if (_.get(this._config, 'cid')) {
+  //   // this.checkContext = true
+  // } else {
+  //   // this.checkContext = false;
+  // }
+}
diff --git a/projects/discussion-ui/src/lib/services/discussion.service.ts b/projects/discussion-ui/src/lib/services/discussion.service.ts
index e26fcf54..d8dcb722 100644
--- a/projects/discussion-ui/src/lib/services/discussion.service.ts
+++ b/projects/discussion-ui/src/lib/services/discussion.service.ts
@@ -79,10 +79,6 @@ export class DiscussionService {
     // return this.http.post(urlConfig.createPost(), data);
     return this.csDiscussionService.createPost(data);
   }
-
-  getMenuOptions(){
-    return this.http.get(urlConfig.getMenuOptions());
-  }
   /**
    * @description To get all the categories
    */
@@ -154,15 +150,29 @@ export class DiscussionService {
   }
 
   fetchRecentD(page?: any) {
-    // const url = this.appendPage(page, urlConfig.recentPost());
-    // return this.http.get(url);
-    return this.csDiscussionService.fetchRecentD(page);
+    const url = this.appendPage(page, urlConfig.recentPost());
+    return this.http.get(url);
+    // return this.csDiscussionService.fetchRecentD(page);
+  }
+
+  getTagBasedDiscussion(tag?: string, page?: any) {
+    const url = this.appendPage(page, urlConfig.getTagBasedDiscussion(tag));
+    return this.http.get(url);
+  }
+
+  getContextBasedDiscussion(data) {
+    return this.http.post(urlConfig.getContextBasedDiscussion(), data);
+  }
+
+  getContextBasedTagDiscussion(data) {
+    return this.http.post(urlConfig.getContextBasedTagDiscussion(), data);
+  }
+
+  fetchPopularD(page?: any) {
+    const url = this.appendPage(page, urlConfig.popularPost());
+    return this.http.get(url);
+    // return this.csDiscussionService.fetchPopularD(page);
   }
-  // fetchPopularD(page?: any) {
-  //   // const url = this.appendPage(page, urlConfig.popularPost());
-  //   // return this.http.get(url);
-  //   return this.csDiscussionService.fetchPopularD(page);
-  // }
 
   fetchTopicById(topicId: number, slug?: any, page?: any) {
     // let url = urlConfig.getTopic() + '/' + topicId.toString() + '/' + slug;
@@ -260,6 +270,6 @@ export class DiscussionService {
 
   deletePost(pid: number, uid: number) {
     return this.csDiscussionService.deletePost(pid, uid);
-   }
+  }
 
 }

From 876298e4d0c5387064969457a25e540f2c5ba4c0 Mon Sep 17 00:00:00 2001
From: pilliarunkumar <arunkumar.pilli@tarento.com>
Date: Tue, 16 Feb 2021 17:13:17 +0530
Subject: [PATCH 04/12] Task#SB-22655 feat: removing /app from constants.json

---
 projects/discussion-ui/src/lib/common/constants.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/discussion-ui/src/lib/common/constants.json b/projects/discussion-ui/src/lib/common/constants.json
index def9ec5f..722fe6ea 100644
--- a/projects/discussion-ui/src/lib/common/constants.json
+++ b/projects/discussion-ui/src/lib/common/constants.json
@@ -585,9 +585,9 @@
     }
   ],
   "ROUTES": {
-    "TOPIC": "/app/discussion-forum/topic/",
-    "DISCUSSION": "/app/discussion-forum/",
-    "CATEGORY": "/app/discussion-forum/category/"
+    "TOPIC": "/discussion-forum/topic/",
+    "DISCUSSION": "/discussion-forum/",
+    "CATEGORY": "/discussion-forum/category/"
   },
   "MENUOPTIONS":[
     {

From a961e2777f9681989d67d86ddfdc20e9d3e4d276 Mon Sep 17 00:00:00 2001
From: pilliarunkumar <arunkumar.pilli@tarento.com>
Date: Wed, 17 Feb 2021 11:06:20 +0530
Subject: [PATCH 05/12] Task#SB-22655 fix: fixed the default eouting

---
 .../side-pannel/side-pannel.component.ts         | 16 ++++++++--------
 .../discussion-routing.module.ts                 |  5 +++++
 projects/discussion-ui/src/public-api.ts         |  1 +
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
index b30367b0..a4a74108 100644
--- a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
+++ b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
@@ -10,6 +10,7 @@ import * as CONSTANTS from './../../common/constants.json';
 import * as _ from 'lodash'
 import { first } from 'rxjs/operators';
 import { ConfigService } from '../../services/config.service';
+import { IdiscussionConfig, IMenuOptions } from '../../models/discussion-config.model';
 /* tslint:enable */
 
 @Component({
@@ -25,9 +26,9 @@ export class SidePannelComponent implements OnInit, OnDestroy {
 
   defaultPage = 'categories';
 
-  data: any;
+  data: IdiscussionConfig;
   hideSidePanel: boolean;
-  menu: any;
+  menu: Array<IMenuOptions>;
   selectedTab: string;
   showSideMenu: Boolean = true;
 
@@ -65,7 +66,6 @@ export class SidePannelComponent implements OnInit, OnDestroy {
   }
 
   isActive(selectedItem) {
-    debugger
     if (this.router.url.indexOf(`/${selectedItem}`) > -1 || this.selectedTab === selectedItem) {
       if (!this.selectedTab) {
         this.selectedTab = selectedItem
@@ -94,10 +94,10 @@ export class SidePannelComponent implements OnInit, OnDestroy {
 
   showMenuButton() {
     this.showSideMenu = this.showSideMenu ? false : true;
- }
+  }
+
+  closeNav() {
+    this.showSideMenu = this.showSideMenu ? false : true;
+  }
 
- closeNav(){
-  this.showSideMenu = this.showSideMenu ? false : true;
- }
- 
 }
diff --git a/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts b/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts
index dc213b45..634d2199 100644
--- a/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts
+++ b/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts
@@ -17,6 +17,11 @@ const routes: Routes = [
     path: '',
     component: LibEntryComponent,
     children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        component: DiscussCategoryComponent
+      },
       {
         path: 'home',
         pathMatch: 'full',
diff --git a/projects/discussion-ui/src/public-api.ts b/projects/discussion-ui/src/public-api.ts
index fb62d476..ba9d1a6d 100644
--- a/projects/discussion-ui/src/public-api.ts
+++ b/projects/discussion-ui/src/public-api.ts
@@ -4,3 +4,4 @@
 
 export * from './lib/discussion-ui.module';
 export * from './lib/discussion-events.service';
+export *  from './lib/models/discussion-config.model';

From 826309d1160d9bc966c9948e39933c5457a00ca8 Mon Sep 17 00:00:00 2001
From: pilliarunkumar <arunkumar.pilli@tarento.com>
Date: Wed, 17 Feb 2021 11:20:41 +0530
Subject: [PATCH 06/12] Task#SB-22655 feat: removed debugger

---
 projects/discussion-ui/src/lib/services/config.service.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/projects/discussion-ui/src/lib/services/config.service.ts b/projects/discussion-ui/src/lib/services/config.service.ts
index b35d0136..3cf24693 100644
--- a/projects/discussion-ui/src/lib/services/config.service.ts
+++ b/projects/discussion-ui/src/lib/services/config.service.ts
@@ -23,7 +23,6 @@ export class ConfigService {
 
   setConfig(activatedRoute) {
     activatedRoute.data.subscribe((data) => {
-      debugger
       this._config = data;
     })
 

From a33566a78a0f367a6305130d3066767ce18428f0 Mon Sep 17 00:00:00 2001
From: pilliarunkumar <arunkumar.pilli@tarento.com>
Date: Wed, 17 Feb 2021 18:00:20 +0530
Subject: [PATCH 07/12] Task#SB-22655 feat: change in configure service

---
 projects/discussion-ui/src/lib/services/config.service.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/discussion-ui/src/lib/services/config.service.ts b/projects/discussion-ui/src/lib/services/config.service.ts
index 3cf24693..677eb2d6 100644
--- a/projects/discussion-ui/src/lib/services/config.service.ts
+++ b/projects/discussion-ui/src/lib/services/config.service.ts
@@ -22,8 +22,8 @@ export class ConfigService {
   }
 
   setConfig(activatedRoute) {
-    activatedRoute.data.subscribe((data) => {
-      this._config = data;
+    activatedRoute.data.subscribe((config) => {
+      this._config = config.data;
     })
 
   }

From 67d4b15b15dcf9369e15db7ac34e089c6e2f5c13 Mon Sep 17 00:00:00 2001
From: pilliarunkumar <arunkumar.pilli@tarento.com>
Date: Wed, 17 Feb 2021 18:34:38 +0530
Subject: [PATCH 08/12] Task#SB-22655 feat: Configure router slug from config
 options

---
 .../discuss-category/discuss-category.component.ts    |  4 +++-
 .../components/discuss-home/discuss-home.component.ts |  4 +++-
 .../discussion-details.component.ts                   |  4 +++-
 .../my-discussion/my-discussion.component.ts          |  4 +++-
 .../components/side-pannel/side-pannel.component.ts   | 11 +++++------
 .../related-discussion.component.ts                   |  7 +++++--
 .../discussion-ui/src/lib/services/config.service.ts  |  3 ++-
 7 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts
index 7ca42e16..c8ead408 100644
--- a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts
+++ b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts
@@ -8,6 +8,7 @@ import { TelemetryUtilsService } from './../../telemetry-utils.service';
 import * as CONSTANTS from './../../common/constants.json';
 /* tslint:disable */
 import * as _ from 'lodash'
+import { ConfigService } from '../../services/config.service';
 /* tslint:enable */
 
 @Component({
@@ -36,6 +37,7 @@ export class DiscussCategoryComponent implements OnInit, OnDestroy {
 
   constructor(
     public discussService: DiscussionService,
+    public configService: ConfigService,
     public router: Router,
     public activatedRoute: ActivatedRoute,
     private telemetryUtils: TelemetryUtilsService
@@ -97,7 +99,7 @@ export class DiscussCategoryComponent implements OnInit, OnDestroy {
         });
       } else {
         this.discussService.setContext(CONTEXT_PROPS.cid, this.categoryId);
-        this.router.navigate([`${CONSTANTS.ROUTES.CATEGORY}`, `${this.categoryId}`]);
+        this.router.navigate([`${this.configService.getConfig().routerSlug}${CONSTANTS.ROUTES.CATEGORY}`, `${this.categoryId}`]);
       }
     }, error => {
       this.showLoader = false;
diff --git a/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts b/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts
index 5eb6dd09..d2bf221d 100644
--- a/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts
+++ b/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts
@@ -7,6 +7,7 @@ import * as CONSTANTS from './../../common/constants.json';
 /* tslint:disable */
 import * as _ from 'lodash'
 import { NSDiscussData } from '../../models/discuss.model';
+import { ConfigService } from '../../services/config.service';
 /* tslint:enable */
 
 @Component({
@@ -27,6 +28,7 @@ export class DiscussHomeComponent implements OnInit {
     public router: Router,
     private route: ActivatedRoute,
     private discussionService: DiscussionService,
+    private configService: ConfigService,
     private telemetryUtils: TelemetryUtilsService) {}
 
   ngOnInit() {
@@ -48,7 +50,7 @@ export class DiscussHomeComponent implements OnInit {
       id: _.get(discussionData, 'tid'),
       type: 'Topic'
     });
-    this.router.navigate([`${CONSTANTS.ROUTES.TOPIC}${_.trim(_.get(discussionData, 'slug'))}`]);
+    this.router.navigate([`${this.configService.getConfig().routerSlug}${CONSTANTS.ROUTES.TOPIC}${_.trim(_.get(discussionData, 'slug'))}`]);
   }
 
   getDiscussionList(slug: string) {
diff --git a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts
index 01835ee7..93e94eb2 100644
--- a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts
+++ b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts
@@ -8,6 +8,7 @@ import * as CONSTANTS from '../../common/constants.json';
 /* tslint:disable */
 import * as _ from 'lodash'
 import { Subscription } from 'rxjs';
+import { ConfigService } from '../../services/config.service';
 /* tslint:enable */
 
 
@@ -41,6 +42,7 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
   constructor(
     private route: ActivatedRoute,
     private discussionService: DiscussionService,
+    private configService: ConfigService,
     private formBuilder: FormBuilder,
     public router: Router,
     private telemetryUtils: TelemetryUtilsService,
@@ -253,7 +255,7 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
 
   navigateWithPage(page: any) {
     if (page !== this.currentActivePage) {
-      this.router.navigate([`${CONSTANTS.ROUTES.CATEGORY} ${this.topicId}`], { queryParams: { page } });
+      this.router.navigate([`${this.configService.getConfig().routerSlug}${CONSTANTS.ROUTES.CATEGORY} ${this.topicId}`], { queryParams: { page } });
     }
   }
 
diff --git a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts
index b9209040..0612d3b8 100644
--- a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts
+++ b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts
@@ -6,6 +6,7 @@ import { Router } from '@angular/router';
 import * as CONSTANTS from '../../common/constants.json';
 /* tslint:disable */
 import * as _ from 'lodash'
+import { ConfigService } from '../../services/config.service';
 /* tslint:enable */
 
 @Component({
@@ -25,6 +26,7 @@ export class MyDiscussionComponent implements OnInit {
   showLoader = false;
   constructor(
     private discussService: DiscussionService,
+    private configService: ConfigService,
     public router: Router,
     private telemetryUtils: TelemetryUtilsService) {}
 
@@ -131,7 +133,7 @@ export class MyDiscussionComponent implements OnInit {
 
   navigateToDiscussionDetails(discussionData) {
     console.log('discussionData', discussionData);
-    this.router.navigate([`${CONSTANTS.ROUTES.TOPIC}${_.get(discussionData, 'topic.slug')}`]);
+    this.router.navigate([`${this.configService.getConfig().routerSlug}${CONSTANTS.ROUTES.TOPIC}${_.get(discussionData, 'topic.slug')}`]);
   }
 
   logTelemetry(event) {
diff --git a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
index a4a74108..7bd7129e 100644
--- a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
+++ b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
@@ -28,7 +28,7 @@ export class SidePannelComponent implements OnInit, OnDestroy {
 
   data: IdiscussionConfig;
   hideSidePanel: boolean;
-  menu: Array<IMenuOptions>;
+  menu: Array<IMenuOptions> = [];
   selectedTab: string;
   showSideMenu: Boolean = true;
 
@@ -54,12 +54,11 @@ export class SidePannelComponent implements OnInit, OnDestroy {
 
     this.discussService.initializeUserDetails(this.discussService.userName);
 
-    this.menu = this.data.menuOptions.length > 0 ? this.data.menuOptions : CONSTANTS.MENUOPTIONS
+    let menuArr = this.data.menuOptions.length > 0 ? this.data.menuOptions : CONSTANTS.MENUOPTIONS
     // })
-    for (let i = 0; i < this.menu.length; i++) {
-      let item = this.menu
-      if (!item[i].enable) {
-        this.menu.splice(i, 1)
+    for (let i = 0; i < menuArr.length; i++) {
+      if (menuArr[i].enable) {
+        this.menu.push(menuArr[i])
       }
     }
 
diff --git a/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts
index b4d0bda7..309556ea 100644
--- a/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts
+++ b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router'
+import { ConfigService } from '../../services/config.service';
 import * as CONSTANTS from './../../common/constants.json';
 
 @Component({
@@ -12,13 +13,15 @@ export class RelatedDiscussionComponent implements OnInit {
   @Input()
   relatedDiscussions!: []
 
-  constructor(private router: Router) { }
+  constructor(private router: Router,
+    private configService: ConfigService
+    ) { }
 
   ngOnInit() {
   }
 
   getDiscussion(discuss) {
-    this.router.navigate([`${CONSTANTS.ROUTES.DISCUSSION}topic/${discuss.slug}`]);
+    this.router.navigate([`${this.configService.getConfig().routerSlug}${CONSTANTS.ROUTES.DISCUSSION}topic/${discuss.slug}`]);
   }
 
 }
diff --git a/projects/discussion-ui/src/lib/services/config.service.ts b/projects/discussion-ui/src/lib/services/config.service.ts
index 677eb2d6..986a26f6 100644
--- a/projects/discussion-ui/src/lib/services/config.service.ts
+++ b/projects/discussion-ui/src/lib/services/config.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 import * as _ from 'lodash'
+import { IdiscussionConfig } from '../models/discussion-config.model';
 
 @Injectable({
   providedIn: 'root'
@@ -9,7 +10,7 @@ import * as _ from 'lodash'
 export class ConfigService {
 
   paramsSubscription: Subscription;
-  private _config: any;
+  private _config: IdiscussionConfig;
   public checkContext: boolean
 
 

From 60a1975089be79fd7dd3c170ada0984f3b471eaf Mon Sep 17 00:00:00 2001
From: pilliarunkumar <arunkumar.pilli@tarento.com>
Date: Thu, 18 Feb 2021 11:29:05 +0530
Subject: [PATCH 09/12] Task#SB-22655 feat: added discussion model

---
 .../src/lib/models/discussion-config.model.ts  | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 projects/discussion-ui/src/lib/models/discussion-config.model.ts

diff --git a/projects/discussion-ui/src/lib/models/discussion-config.model.ts b/projects/discussion-ui/src/lib/models/discussion-config.model.ts
new file mode 100644
index 00000000..ccf23132
--- /dev/null
+++ b/projects/discussion-ui/src/lib/models/discussion-config.model.ts
@@ -0,0 +1,18 @@
+export interface IdiscussionConfig {
+    menuOptions?: Array<IMenuOptions>
+    userName: string
+    context: Object
+    categories: Array<string>
+    path: string
+    routerSlug: string
+  }
+  
+  export interface Icontext {
+   id: number
+  }
+  
+  export interface IMenuOptions {
+    route: string
+    enable: boolean
+  }
+  
\ No newline at end of file

From 214a54ec2fd746a602b1c186dfa2c621b7f6440c Mon Sep 17 00:00:00 2001
From: pilliarunkumar <arunkumar.pilli@tarento.com>
Date: Thu, 18 Feb 2021 12:32:07 +0530
Subject: [PATCH 10/12] Task#SB-22655 feat: Addressed code comments

---
 .../discuss-category.component.ts                 |  3 ++-
 .../discuss-home/discuss-home.component.ts        |  5 +++--
 .../discussion-details.component.ts               |  3 ++-
 .../components/lib-entry/lib-entry.component.ts   | 15 ++++++++++++++-
 .../my-discussion/my-discussion.component.ts      |  9 +++++----
 .../side-pannel/side-pannel.component.ts          | 11 +----------
 .../related-discussion.component.ts               |  5 +++--
 7 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts
index c8ead408..0b72cbcf 100644
--- a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts
+++ b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts
@@ -99,7 +99,8 @@ export class DiscussCategoryComponent implements OnInit, OnDestroy {
         });
       } else {
         this.discussService.setContext(CONTEXT_PROPS.cid, this.categoryId);
-        this.router.navigate([`${this.configService.getConfig().routerSlug}${CONSTANTS.ROUTES.CATEGORY}`, `${this.categoryId}`]);
+        let routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : ''
+        this.router.navigate([`${routerSlug}${CONSTANTS.ROUTES.CATEGORY}`, `${this.categoryId}`]);
       }
     }, error => {
       this.showLoader = false;
diff --git a/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts b/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts
index d2bf221d..957ff3b2 100644
--- a/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts
+++ b/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts
@@ -29,7 +29,7 @@ export class DiscussHomeComponent implements OnInit {
     private route: ActivatedRoute,
     private discussionService: DiscussionService,
     private configService: ConfigService,
-    private telemetryUtils: TelemetryUtilsService) {}
+    private telemetryUtils: TelemetryUtilsService) { }
 
   ngOnInit() {
     this.telemetryUtils.logImpression(NSDiscussData.IPageName.HOME);
@@ -50,7 +50,8 @@ export class DiscussHomeComponent implements OnInit {
       id: _.get(discussionData, 'tid'),
       type: 'Topic'
     });
-    this.router.navigate([`${this.configService.getConfig().routerSlug}${CONSTANTS.ROUTES.TOPIC}${_.trim(_.get(discussionData, 'slug'))}`]);
+    let routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : ''
+    this.router.navigate([`${routerSlug}${CONSTANTS.ROUTES.TOPIC}${_.trim(_.get(discussionData, 'slug'))}`]);
   }
 
   getDiscussionList(slug: string) {
diff --git a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts
index 93e94eb2..47d54626 100644
--- a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts
+++ b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts
@@ -255,7 +255,8 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
 
   navigateWithPage(page: any) {
     if (page !== this.currentActivePage) {
-      this.router.navigate([`${this.configService.getConfig().routerSlug}${CONSTANTS.ROUTES.CATEGORY} ${this.topicId}`], { queryParams: { page } });
+      let routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : ''
+      this.router.navigate([`${routerSlug}${CONSTANTS.ROUTES.CATEGORY} ${this.topicId}`], { queryParams: { page } });
     }
   }
 
diff --git a/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.ts b/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.ts
index 20c1d009..ba1a8c43 100644
--- a/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.ts
+++ b/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.ts
@@ -5,6 +5,8 @@ import { Location } from '@angular/common';
 
 /* tslint:disable */
 import * as _ from 'lodash'
+import { IdiscussionConfig } from '../../models/discussion-config.model';
+import { ConfigService } from '../../services/config.service';
 /* tslint:enable */
 @Component({
   selector: 'lib-lib-entry',
@@ -13,13 +15,24 @@ import * as _ from 'lodash'
 })
 export class LibEntryComponent implements OnInit {
 
+  data: IdiscussionConfig;
+
   constructor(
     public activatedRoute: ActivatedRoute,
     private discussionService: DiscussionService,
+    private configService: ConfigService,
     private location: Location
   ) { }
 
-  ngOnInit() {  }
+  ngOnInit() { 
+    this.configService.setConfig(this.activatedRoute)
+    // this.activatedRoute.data.subscribe((data) => {
+    this.data = this.configService.getConfig();
+    this.discussionService.userName = _.get(this.discussionService, 'userName');
+    const rawCategories = _.get(this.data, 'categories');
+    this.discussionService.forumIds = _.get(rawCategories, 'result');
+    this.discussionService.initializeUserDetails(this.discussionService.userName);
+   }
 
   goBack() {
     this.location.back();
diff --git a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts
index 0612d3b8..7dd1f534 100644
--- a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts
+++ b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts
@@ -28,7 +28,7 @@ export class MyDiscussionComponent implements OnInit {
     private discussService: DiscussionService,
     private configService: ConfigService,
     public router: Router,
-    private telemetryUtils: TelemetryUtilsService) {}
+    private telemetryUtils: TelemetryUtilsService) { }
 
   /** To fetch user details */
   fetchUserProfile(userName) {
@@ -54,8 +54,8 @@ export class MyDiscussionComponent implements OnInit {
   ngOnInit() {
     this.telemetryUtils.setContext([]);
     this.telemetryUtils.logImpression(NSDiscussData.IPageName.MY_DISCUSSION);
-    if ( this.discussService.userName) {
-      this.fetchUserProfile( this.discussService.userName);
+    if (this.discussService.userName) {
+      this.fetchUserProfile(this.discussService.userName);
     }
   }
 
@@ -133,7 +133,8 @@ export class MyDiscussionComponent implements OnInit {
 
   navigateToDiscussionDetails(discussionData) {
     console.log('discussionData', discussionData);
-    this.router.navigate([`${this.configService.getConfig().routerSlug}${CONSTANTS.ROUTES.TOPIC}${_.get(discussionData, 'topic.slug')}`]);
+    let routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : ''
+    this.router.navigate([`${routerSlug}${CONSTANTS.ROUTES.TOPIC}${_.get(discussionData, 'topic.slug')}`]);
   }
 
   logTelemetry(event) {
diff --git a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
index 7bd7129e..096e2cb4 100644
--- a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
+++ b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
@@ -44,16 +44,7 @@ export class SidePannelComponent implements OnInit, OnDestroy {
     // TODO: loader or spinner
     this.hideSidePanel = document.body.classList.contains('widget');
     this.telemetryUtils.logImpression(NSDiscussData.IPageName.HOME);
-    this.configService.setConfig(this.activatedRoute)
-    // this.activatedRoute.data.subscribe((data) => {
-    this.data = this.configService.getConfig();
-    this.discussService.userName = _.get(this.data, 'userName');
-    const rawCategories = _.get(this.data, 'categories');
-    this.discussService.forumIds = _.get(rawCategories, 'result');
-
-
-    this.discussService.initializeUserDetails(this.discussService.userName);
-
+    this.data = this.configService.getConfig()
     let menuArr = this.data.menuOptions.length > 0 ? this.data.menuOptions : CONSTANTS.MENUOPTIONS
     // })
     for (let i = 0; i < menuArr.length; i++) {
diff --git a/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts
index 309556ea..58ac1fcd 100644
--- a/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts
+++ b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts
@@ -15,13 +15,14 @@ export class RelatedDiscussionComponent implements OnInit {
 
   constructor(private router: Router,
     private configService: ConfigService
-    ) { }
+  ) { }
 
   ngOnInit() {
   }
 
   getDiscussion(discuss) {
-    this.router.navigate([`${this.configService.getConfig().routerSlug}${CONSTANTS.ROUTES.DISCUSSION}topic/${discuss.slug}`]);
+    let routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : ''
+    this.router.navigate([`${routerSlug}${CONSTANTS.ROUTES.DISCUSSION}topic/${discuss.slug}`]);
   }
 
 }

From 14c519c23cb1411e630dd9c7ed3cc6919665803b Mon Sep 17 00:00:00 2001
From: pilliarunkumar <arunkumar.pilli@tarento.com>
Date: Thu, 18 Feb 2021 12:52:50 +0530
Subject: [PATCH 11/12] Task#SB-22655 feat: changing categories type to object

---
 .../discussion-ui/src/lib/models/discussion-config.model.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/discussion-ui/src/lib/models/discussion-config.model.ts b/projects/discussion-ui/src/lib/models/discussion-config.model.ts
index ccf23132..e5fe45b0 100644
--- a/projects/discussion-ui/src/lib/models/discussion-config.model.ts
+++ b/projects/discussion-ui/src/lib/models/discussion-config.model.ts
@@ -2,7 +2,7 @@ export interface IdiscussionConfig {
     menuOptions?: Array<IMenuOptions>
     userName: string
     context: Object
-    categories: Array<string>
+    categories: Object
     path: string
     routerSlug: string
   }

From 8d412233a2d0ddf2905677b0bac1f0be0baeef5a Mon Sep 17 00:00:00 2001
From: pilliarunkumar <arunkumar.pilli@tarento.com>
Date: Thu, 18 Feb 2021 15:19:24 +0530
Subject: [PATCH 12/12] Task#SB-22655 feat: changing data type for category

---
 .../discussion-ui/src/lib/models/discussion-config.model.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/projects/discussion-ui/src/lib/models/discussion-config.model.ts b/projects/discussion-ui/src/lib/models/discussion-config.model.ts
index e5fe45b0..7b856e82 100644
--- a/projects/discussion-ui/src/lib/models/discussion-config.model.ts
+++ b/projects/discussion-ui/src/lib/models/discussion-config.model.ts
@@ -2,7 +2,7 @@ export interface IdiscussionConfig {
     menuOptions?: Array<IMenuOptions>
     userName: string
     context: Object
-    categories: Object
+    categories: Icategory
     path: string
     routerSlug: string
   }
@@ -15,4 +15,8 @@ export interface IdiscussionConfig {
     route: string
     enable: boolean
   }
+
+  export interface Icategory {
+    result : Array<string>
+  }
   
\ No newline at end of file