From d035328d84150a61df5d1997dfd5e003105ccd3b Mon Sep 17 00:00:00 2001
From: Piotr K <44520613+astropio3000@users.noreply.github.com>
Date: Sat, 27 May 2023 08:51:06 +0200
Subject: [PATCH] comments

---
 apps/frontend/src/app/app-routing.module.ts   |  7 ++++
 apps/frontend/src/app/app.module.ts           |  3 +-
 .../frontend/src/app/models/solution.model.ts |  1 -
 .../src/app/modules/comment/comment.module.ts | 35 ++++++++++++++++
 .../comment-form/comment-form.component.html  | 40 +++++++++++++++++++
 .../comment-form/comment-form.component.scss  |  9 +++++
 .../comment-form.component.spec.ts            | 21 ++++++++++
 .../comment-form/comment-form.component.ts    | 25 ++++++++++++
 .../components/comment/comment.component.html | 13 ++++++
 .../components/comment/comment.component.scss |  9 +++++
 .../comment/comment.component.spec.ts         | 21 ++++++++++
 .../components/comment/comment.component.ts   | 11 +++++
 .../comments/comments.component.html          |  8 ++++
 .../comments/comments.component.scss          |  6 +++
 .../comments/comments.component.spec.ts       | 21 ++++++++++
 .../components/comments/comments.component.ts | 12 ++++++
 .../comment/services/comment.service.ts       | 31 ++++++++++++++
 .../app/modules/issue/issue-routing.module.ts |  7 +++-
 .../app/modules/issue/issue.component.html    | 22 +++-------
 .../app/modules/issue/issue.component.scss    | 20 ----------
 .../src/app/modules/issue/issue.module.ts     |  2 +
 .../services/solution-form.service.ts         | 17 +++++++-
 .../solution/solution-routing.module.ts       | 11 +++++
 .../modules/solution/solution.component.html  | 18 +++++++++
 .../modules/solution/solution.component.scss  | 25 ++++++++++++
 .../solution/solution.component.spec.ts       | 21 ++++++++++
 .../modules/solution/solution.component.ts    | 24 +++++++++++
 .../app/modules/solution/solution.module.ts   | 17 ++++++++
 .../solutions/solutions.component.html        |  3 +-
 .../app/store/selectors/solution.selectors.ts |  5 +++
 .../frontend/src/environments/environments.ts |  2 +-
 apps/frontend/src/styles.scss                 |  4 ++
 32 files changed, 427 insertions(+), 44 deletions(-)
 create mode 100644 apps/frontend/src/app/modules/comment/comment.module.ts
 create mode 100644 apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.html
 create mode 100644 apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.scss
 create mode 100644 apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.spec.ts
 create mode 100644 apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.ts
 create mode 100644 apps/frontend/src/app/modules/comment/components/comment/comment.component.html
 create mode 100644 apps/frontend/src/app/modules/comment/components/comment/comment.component.scss
 create mode 100644 apps/frontend/src/app/modules/comment/components/comment/comment.component.spec.ts
 create mode 100644 apps/frontend/src/app/modules/comment/components/comment/comment.component.ts
 create mode 100644 apps/frontend/src/app/modules/comment/components/comments/comments.component.html
 create mode 100644 apps/frontend/src/app/modules/comment/components/comments/comments.component.scss
 create mode 100644 apps/frontend/src/app/modules/comment/components/comments/comments.component.spec.ts
 create mode 100644 apps/frontend/src/app/modules/comment/components/comments/comments.component.ts
 create mode 100644 apps/frontend/src/app/modules/comment/services/comment.service.ts
 create mode 100644 apps/frontend/src/app/modules/solution/solution-routing.module.ts
 create mode 100644 apps/frontend/src/app/modules/solution/solution.component.html
 create mode 100644 apps/frontend/src/app/modules/solution/solution.component.scss
 create mode 100644 apps/frontend/src/app/modules/solution/solution.component.spec.ts
 create mode 100644 apps/frontend/src/app/modules/solution/solution.component.ts
 create mode 100644 apps/frontend/src/app/modules/solution/solution.module.ts
 create mode 100644 apps/frontend/src/app/store/selectors/solution.selectors.ts

diff --git a/apps/frontend/src/app/app-routing.module.ts b/apps/frontend/src/app/app-routing.module.ts
index b7071be..8e981da 100644
--- a/apps/frontend/src/app/app-routing.module.ts
+++ b/apps/frontend/src/app/app-routing.module.ts
@@ -31,6 +31,13 @@ const routes: Routes = [
         (m) => m.SolutionFormModule
       ),
   },
+  {
+    path: 'issue/:id/solution',
+    loadChildren: () =>
+      import('./modules/solution/solution.module').then(
+        (m) => m.SolutionModule
+      ),
+  },
 ];
 
 @NgModule({
diff --git a/apps/frontend/src/app/app.module.ts b/apps/frontend/src/app/app.module.ts
index 71e091d..0bd22f6 100644
--- a/apps/frontend/src/app/app.module.ts
+++ b/apps/frontend/src/app/app.module.ts
@@ -12,6 +12,7 @@ import { SidebarModule } from 'primeng/sidebar';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { IssueEffect } from './store/effect/issue.effect';
+import { SolutionEffect } from './store/effect/solution.effect';
 import { issueReducer } from './store/reducer/issue.reducer';
 @NgModule({
   declarations: [AppComponent],
@@ -20,7 +21,7 @@ import { issueReducer } from './store/reducer/issue.reducer';
     AppRoutingModule,
     FontAwesomeModule,
     StoreModule.forRoot({ issueState: issueReducer }),
-    EffectsModule.forRoot([IssueEffect]),
+    EffectsModule.forRoot([IssueEffect, SolutionEffect]),
     HttpClientModule,
     StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: !isDevMode() }),
     SidebarModule,
diff --git a/apps/frontend/src/app/models/solution.model.ts b/apps/frontend/src/app/models/solution.model.ts
index 304cd2c..cbcaa69 100644
--- a/apps/frontend/src/app/models/solution.model.ts
+++ b/apps/frontend/src/app/models/solution.model.ts
@@ -1,7 +1,6 @@
 import { CommentModel } from './comment.model';
 
 export interface SolutionModel {
-  id?: string;
   title: string;
   description: string;
   comments: CommentModel[];
diff --git a/apps/frontend/src/app/modules/comment/comment.module.ts b/apps/frontend/src/app/modules/comment/comment.module.ts
new file mode 100644
index 0000000..f2ae0e0
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/comment.module.ts
@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import { CardModule } from 'primeng/card';
+import { InputTextModule } from 'primeng/inputtext';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { CommentFormComponent } from './components/comment-form/comment-form.component';
+import { CommentComponent } from './components/comment/comment.component';
+import { CommentsComponent } from './components/comments/comments.component';
+import { CommentService, commentTypeToken } from './services/comment.service';
+
+@NgModule({
+  declarations: [CommentsComponent, CommentComponent, CommentFormComponent],
+  imports: [
+    CommonModule,
+    CardModule,
+    InputTextModule,
+    ButtonModule,
+    InputTextareaModule,
+    ReactiveFormsModule,
+  ],
+  exports: [CommentsComponent],
+  providers: [CommentService],
+})
+export class CommentModule {
+  static forRoot(
+    commentType: 'solution' | 'issues'
+  ): ModuleWithProviders<CommentModule> {
+    return {
+      ngModule: CommentModule,
+      providers: [{ provide: commentTypeToken, useValue: commentType }],
+    };
+  }
+}
diff --git a/apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.html b/apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.html
new file mode 100644
index 0000000..e47a6ca
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.html
@@ -0,0 +1,40 @@
+<div class="comment-form">
+  <form [formGroup]="formGroup">
+    <p-card>
+      <ng-template pTemplate="header">
+        <div class="comment-header">
+          <span class="p-float-label">
+            <input
+              pInputText
+              id="username"
+              type="text"
+              formControlName="username"
+            />
+            <label htmlFor="username">Nazwa Użytkownika</label>
+          </span>
+        </div>
+      </ng-template>
+      <span class="p-float-label">
+        <textarea
+          id="content"
+          rows="5"
+          cols="40"
+          pInputTextarea
+          [autoResize]="true"
+          formControlName="content"
+        ></textarea>
+        <label htmlFor="content">Komentarz</label>
+      </span>
+      <ng-template pTemplate="footer">
+        <div class="footer">
+          <button
+            pButton
+            type="button"
+            label="Dodaj"
+            (click)="submit()"
+          ></button>
+        </div>
+      </ng-template>
+    </p-card>
+  </form>
+</div>
diff --git a/apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.scss b/apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.scss
new file mode 100644
index 0000000..d643e93
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.scss
@@ -0,0 +1,9 @@
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.comment-header {
+  margin-right: 20px;
+  padding: 28px 0 0 28px;
+}
diff --git a/apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.spec.ts b/apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.spec.ts
new file mode 100644
index 0000000..2987078
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentFormComponent } from './comment-form.component';
+
+describe('CommentFormComponent', () => {
+  let component: CommentFormComponent;
+  let fixture: ComponentFixture<CommentFormComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CommentFormComponent]
+    });
+    fixture = TestBed.createComponent(CommentFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.ts b/apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.ts
new file mode 100644
index 0000000..cf26db6
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/components/comment-form/comment-form.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { CommentService } from '../../services/comment.service';
+
+@Component({
+  selector: 'app-comment-form',
+  templateUrl: './comment-form.component.html',
+  styleUrls: ['./comment-form.component.scss'],
+})
+export class CommentFormComponent {
+  @Input() issueId!: string;
+
+  constructor(private commentService: CommentService) {}
+  formGroup = new FormGroup({
+    content: new FormControl('', Validators.required),
+    username: new FormControl('', Validators.required),
+  });
+
+  submit() {
+    const form = this.formGroup.getRawValue();
+    this.commentService
+      .addComment(this.issueId, form.username || '', form.content || '')
+      .subscribe();
+  }
+}
diff --git a/apps/frontend/src/app/modules/comment/components/comment/comment.component.html b/apps/frontend/src/app/modules/comment/components/comment/comment.component.html
new file mode 100644
index 0000000..c9f47e1
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/components/comment/comment.component.html
@@ -0,0 +1,13 @@
+<div class="comment">
+  <p-card>
+    <ng-template pTemplate="header">
+      <p class="comment-header">{{ comment.userName }}</p>
+    </ng-template>
+    <p>{{ comment.content }}</p>
+    <ng-template pTemplate="footer">
+      <div class="date">
+        {{ comment.createdAt | date : "dd.MM.yyyy, HH:mm" }}
+      </div>
+    </ng-template>
+  </p-card>
+</div>
diff --git a/apps/frontend/src/app/modules/comment/components/comment/comment.component.scss b/apps/frontend/src/app/modules/comment/components/comment/comment.component.scss
new file mode 100644
index 0000000..0709421
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/components/comment/comment.component.scss
@@ -0,0 +1,9 @@
+.date {
+  display: flex;
+  justify-content: end;
+}
+
+.comment-header {
+  margin-right: 20px;
+  padding: 20px 0 0 20px;
+}
diff --git a/apps/frontend/src/app/modules/comment/components/comment/comment.component.spec.ts b/apps/frontend/src/app/modules/comment/components/comment/comment.component.spec.ts
new file mode 100644
index 0000000..b95dbad
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/components/comment/comment.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentComponent } from './comment.component';
+
+describe('CommentComponent', () => {
+  let component: CommentComponent;
+  let fixture: ComponentFixture<CommentComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CommentComponent]
+    });
+    fixture = TestBed.createComponent(CommentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/frontend/src/app/modules/comment/components/comment/comment.component.ts b/apps/frontend/src/app/modules/comment/components/comment/comment.component.ts
new file mode 100644
index 0000000..7f55300
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/components/comment/comment.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { CommentModel } from 'src/app/models/comment.model';
+
+@Component({
+  selector: 'app-comment',
+  templateUrl: './comment.component.html',
+  styleUrls: ['./comment.component.scss'],
+})
+export class CommentComponent {
+  @Input() comment!: CommentModel;
+}
diff --git a/apps/frontend/src/app/modules/comment/components/comments/comments.component.html b/apps/frontend/src/app/modules/comment/components/comments/comments.component.html
new file mode 100644
index 0000000..c7f0c5a
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/components/comments/comments.component.html
@@ -0,0 +1,8 @@
+<h2>Komentarze</h2>
+<div class="comments">
+  <app-comment
+    *ngFor="let comment of comments"
+    [comment]="comment"
+  ></app-comment>
+  <app-comment-form [issueId]="issueId"></app-comment-form>
+</div>
diff --git a/apps/frontend/src/app/modules/comment/components/comments/comments.component.scss b/apps/frontend/src/app/modules/comment/components/comments/comments.component.scss
new file mode 100644
index 0000000..d1c8c08
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/components/comments/comments.component.scss
@@ -0,0 +1,6 @@
+.comments {
+  margin: 30px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
diff --git a/apps/frontend/src/app/modules/comment/components/comments/comments.component.spec.ts b/apps/frontend/src/app/modules/comment/components/comments/comments.component.spec.ts
new file mode 100644
index 0000000..39d5725
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/components/comments/comments.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentsComponent } from './comments.component';
+
+describe('CommentsComponent', () => {
+  let component: CommentsComponent;
+  let fixture: ComponentFixture<CommentsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CommentsComponent]
+    });
+    fixture = TestBed.createComponent(CommentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/frontend/src/app/modules/comment/components/comments/comments.component.ts b/apps/frontend/src/app/modules/comment/components/comments/comments.component.ts
new file mode 100644
index 0000000..e4dfadb
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/components/comments/comments.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { CommentModel } from 'src/app/models/comment.model';
+
+@Component({
+  selector: 'app-comments',
+  templateUrl: './comments.component.html',
+  styleUrls: ['./comments.component.scss'],
+})
+export class CommentsComponent {
+  @Input() comments!: CommentModel[];
+  @Input() issueId!: string;
+}
diff --git a/apps/frontend/src/app/modules/comment/services/comment.service.ts b/apps/frontend/src/app/modules/comment/services/comment.service.ts
new file mode 100644
index 0000000..cc60280
--- /dev/null
+++ b/apps/frontend/src/app/modules/comment/services/comment.service.ts
@@ -0,0 +1,31 @@
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable, InjectionToken } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { environments } from 'src/environments/environments';
+
+export const commentTypeToken = new InjectionToken<'issues' | 'solution'>(
+  'Comment Type'
+);
+
+@Injectable()
+export class CommentService {
+  constructor(
+    private http: HttpClient,
+    private store: Store,
+    @Inject(commentTypeToken) private commentType: 'issues' | 'solution'
+  ) {}
+
+  addComment(issueId: string, username: string, content: string) {
+    return this.http.post(
+      environments.apiUrl +
+        '/issues/' +
+        issueId +
+        (this.commentType === 'issues' ? '' : '/solution') +
+        '/comments',
+      {
+        username,
+        content,
+      }
+    );
+  }
+}
diff --git a/apps/frontend/src/app/modules/issue/issue-routing.module.ts b/apps/frontend/src/app/modules/issue/issue-routing.module.ts
index 941aecc..7b06a96 100644
--- a/apps/frontend/src/app/modules/issue/issue-routing.module.ts
+++ b/apps/frontend/src/app/modules/issue/issue-routing.module.ts
@@ -2,7 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { IssueComponent } from './issue.component';
 
-const routes: Routes = [{ path: ':id', component: IssueComponent }];
+const routes: Routes = [
+  {
+    path: ':id',
+    component: IssueComponent,
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/apps/frontend/src/app/modules/issue/issue.component.html b/apps/frontend/src/app/modules/issue/issue.component.html
index d4c137b..c9af679 100644
--- a/apps/frontend/src/app/modules/issue/issue.component.html
+++ b/apps/frontend/src/app/modules/issue/issue.component.html
@@ -21,25 +21,13 @@
         <p-button
           *ngIf="(issue$ | async)?.solution"
           label="Rozwiązanie"
-          [routerLink]="['/', 'solution', (issue$ | async)?.solution?.id]"
+          [routerLink]="['/', 'issue', (issue$ | async)?.id, 'solution']"
         ></p-button>
       </div>
     </p-card>
-  </div>
-  <h2>Komentarze</h2>
-  <div class="comments">
-    <div class="comment" *ngFor="let comment of (issue$ | async)?.comments">
-      <p-card>
-        <ng-template pTemplate="header">
-          <p class="comment-header">{{ comment.userName }}</p>
-        </ng-template>
-        <p>{{ comment.content }}</p>
-        <ng-template pTemplate="footer">
-          <div class="date">
-            {{ comment.createdAt | date : "dd.MM.yyyy, HH:mm" }}
-          </div>
-        </ng-template>
-      </p-card>
-    </div>
+    <app-comments
+      [comments]="(issue$ | async)?.comments || []"
+      [issueId]="(issue$ | async)?.id || ''"
+    ></app-comments>
   </div>
 </div>
diff --git a/apps/frontend/src/app/modules/issue/issue.component.scss b/apps/frontend/src/app/modules/issue/issue.component.scss
index 30a6245..8b79bb8 100644
--- a/apps/frontend/src/app/modules/issue/issue.component.scss
+++ b/apps/frontend/src/app/modules/issue/issue.component.scss
@@ -12,13 +12,6 @@
   }
 }
 
-.comments {
-  margin: 30px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
 .main .content {
   display: flex;
   justify-content: space-around;
@@ -30,21 +23,8 @@
   justify-content: space-around;
   align-items: flex-start;
 }
-.date {
-  display: flex;
-  justify-content: end;
-}
-
-.comment-header {
-  margin-right: 20px;
-  padding: 20px 0 0 20px;
-}
 
 .issue {
   max-width: 900px;
   margin: auto;
 }
-
-::ng-deep .p-card-content {
-  padding: 0 !important;
-}
diff --git a/apps/frontend/src/app/modules/issue/issue.module.ts b/apps/frontend/src/app/modules/issue/issue.module.ts
index bb8781e..c82cce9 100644
--- a/apps/frontend/src/app/modules/issue/issue.module.ts
+++ b/apps/frontend/src/app/modules/issue/issue.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { CardModule } from 'primeng/card';
 import { TagModule } from 'primeng/tag';
+import { CommentModule } from '../comment/comment.module';
 import { IssueRoutingModule } from './issue-routing.module';
 import { IssueComponent } from './issue.component';
 
@@ -14,6 +15,7 @@ import { IssueComponent } from './issue.component';
     IssueRoutingModule,
     TagModule,
     ButtonModule,
+    CommentModule.forRoot('issues'),
   ],
   providers: [],
 })
diff --git a/apps/frontend/src/app/modules/solution-form/services/solution-form.service.ts b/apps/frontend/src/app/modules/solution-form/services/solution-form.service.ts
index 29e0c0e..35189af 100644
--- a/apps/frontend/src/app/modules/solution-form/services/solution-form.service.ts
+++ b/apps/frontend/src/app/modules/solution-form/services/solution-form.service.ts
@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { tap } from 'rxjs';
 import { IssueModel } from 'src/app/models/issue.model';
+import { receivedSolutionSuccessAction } from 'src/app/store/actions/solution.actions';
 import { environments } from 'src/environments/environments';
 
 @Injectable({
@@ -16,6 +17,20 @@ export class SolutionFormService {
         title,
         description,
       })
-      .pipe(tap());
+      .pipe(
+        tap(() =>
+          this.store.dispatch(
+            receivedSolutionSuccessAction({
+              issueId: issue.id,
+              solution: {
+                comments: [],
+                createdAt: new Date(),
+                description,
+                title,
+              },
+            })
+          )
+        )
+      );
   }
 }
diff --git a/apps/frontend/src/app/modules/solution/solution-routing.module.ts b/apps/frontend/src/app/modules/solution/solution-routing.module.ts
new file mode 100644
index 0000000..9f169cb
--- /dev/null
+++ b/apps/frontend/src/app/modules/solution/solution-routing.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { SolutionComponent } from './solution.component';
+
+const routes: Routes = [{ path: '', component: SolutionComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SolutionRoutingModule {}
diff --git a/apps/frontend/src/app/modules/solution/solution.component.html b/apps/frontend/src/app/modules/solution/solution.component.html
new file mode 100644
index 0000000..5ff823b
--- /dev/null
+++ b/apps/frontend/src/app/modules/solution/solution.component.html
@@ -0,0 +1,18 @@
+<div class="solution">
+  <div class="main">
+    <p-card>
+      <ng-template pTemplate="header">
+        <div class="header">
+          <h1>{{ (solution$ | async)?.title }}</h1>
+        </div>
+      </ng-template>
+      <div class="content">
+        <p>{{ (solution$ | async)?.description }}</p>
+      </div>
+    </p-card>
+    <app-comments
+      [comments]="(solution$ | async)?.comments || []"
+      [issueId]="issueId"
+    ></app-comments>
+  </div>
+</div>
diff --git a/apps/frontend/src/app/modules/solution/solution.component.scss b/apps/frontend/src/app/modules/solution/solution.component.scss
new file mode 100644
index 0000000..2abb93b
--- /dev/null
+++ b/apps/frontend/src/app/modules/solution/solution.component.scss
@@ -0,0 +1,25 @@
+.header {
+  margin: 10px 30px;
+  display: flex;
+  align-items: center;
+  h1 {
+    flex: 7;
+  }
+}
+
+.main .content {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.comments .content {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+
+.solution {
+  max-width: 900px;
+  margin: auto;
+}
diff --git a/apps/frontend/src/app/modules/solution/solution.component.spec.ts b/apps/frontend/src/app/modules/solution/solution.component.spec.ts
new file mode 100644
index 0000000..593db74
--- /dev/null
+++ b/apps/frontend/src/app/modules/solution/solution.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SolutionComponent } from './solution.component';
+
+describe('SolutionComponent', () => {
+  let component: SolutionComponent;
+  let fixture: ComponentFixture<SolutionComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SolutionComponent]
+    });
+    fixture = TestBed.createComponent(SolutionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/frontend/src/app/modules/solution/solution.component.ts b/apps/frontend/src/app/modules/solution/solution.component.ts
new file mode 100644
index 0000000..9931e4b
--- /dev/null
+++ b/apps/frontend/src/app/modules/solution/solution.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { EMPTY, Observable } from 'rxjs';
+import { SolutionModel } from 'src/app/models/solution.model';
+import { selectSolution } from 'src/app/store/selectors/solution.selectors';
+
+@Component({
+  selector: 'app-solution',
+  templateUrl: './solution.component.html',
+  styleUrls: ['./solution.component.scss'],
+})
+export class SolutionComponent implements OnInit {
+  solution$: Observable<SolutionModel | undefined> = EMPTY;
+  issueId!: string;
+  constructor(private store: Store, private route: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.route.params.subscribe((params) => {
+      this.issueId = params['id'];
+      this.solution$ = this.store.select(selectSolution(params['id']));
+    });
+  }
+}
diff --git a/apps/frontend/src/app/modules/solution/solution.module.ts b/apps/frontend/src/app/modules/solution/solution.module.ts
new file mode 100644
index 0000000..565f1c4
--- /dev/null
+++ b/apps/frontend/src/app/modules/solution/solution.module.ts
@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { CardModule } from 'primeng/card';
+import { CommentModule } from '../comment/comment.module';
+import { SolutionRoutingModule } from './solution-routing.module';
+import { SolutionComponent } from './solution.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CommentModule.forRoot('solution'),
+    SolutionRoutingModule,
+    CardModule,
+  ],
+  declarations: [SolutionComponent],
+})
+export class SolutionModule {}
diff --git a/apps/frontend/src/app/modules/solutions/solutions.component.html b/apps/frontend/src/app/modules/solutions/solutions.component.html
index 90e3e1e..0d29572 100644
--- a/apps/frontend/src/app/modules/solutions/solutions.component.html
+++ b/apps/frontend/src/app/modules/solutions/solutions.component.html
@@ -1,4 +1,3 @@
 <div *ngFor="let solution of solutions$ | async">
-    {{solution.title}}
+  {{ solution.title }}
 </div>
-gv gvghv
\ No newline at end of file
diff --git a/apps/frontend/src/app/store/selectors/solution.selectors.ts b/apps/frontend/src/app/store/selectors/solution.selectors.ts
new file mode 100644
index 0000000..a3c0945
--- /dev/null
+++ b/apps/frontend/src/app/store/selectors/solution.selectors.ts
@@ -0,0 +1,5 @@
+import { createSelector } from '@ngrx/store';
+import { selectIssue } from './issue.selectors';
+
+export const selectSolution = (issueId: string) =>
+  createSelector(selectIssue(issueId), (issue) => issue?.solution);
diff --git a/apps/frontend/src/environments/environments.ts b/apps/frontend/src/environments/environments.ts
index 6f5d035..37e1ba0 100644
--- a/apps/frontend/src/environments/environments.ts
+++ b/apps/frontend/src/environments/environments.ts
@@ -1,4 +1,4 @@
 // Dev
 export const environments = {
-  apiUrl: 'http://localhost',
+  apiUrl: 'http://localhost/api',
 };
diff --git a/apps/frontend/src/styles.scss b/apps/frontend/src/styles.scss
index 6ea801b..944fda5 100644
--- a/apps/frontend/src/styles.scss
+++ b/apps/frontend/src/styles.scss
@@ -16,3 +16,7 @@ h3,
 p {
   color: #495057;
 }
+
+.p-card-content {
+  padding: 0 !important;
+}