Build forum post frontend part 1 (#16)

* build forum post frontend part 1

* created viewforum as a page to look at all forums

* Start working on forwarding form responses to the viewforum component.

* Clean up whitespace on makeforum.

* Edited onSuccess to include dynamic responses as input comes in. Created VewForm HTML similar to STATS page.

---------

Co-authored-by: angelinasu57 <[email protected]>

frontend/src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import { AppTitleStrategy } from './app-title.strategy';
 import { GateComponent } from './gate/gate.component';
 import { HomeComponent } from './home/home.component';
 import { ProfileEditorComponent } from './profile/profile-editor/profile-editor.component';
-import { ForumComponent } from './forum/forum.component';
+import { ForumComponent } from './makeforum/makeforum.component';
 
 
 const routes: Routes = [

frontend/src/app/app.module.ts

@@ -32,8 +32,9 @@ import { NavigationComponent } from './navigation/navigation.component';
 import { ErrorDialogComponent } from './navigation/error-dialog/error-dialog.component';
 import { HomeComponent } from './home/home.component';
 import { GateComponent } from './gate/gate.component';
-import { ProfileEditorComponent } from './profile/profile-editor/profile-editor.component';
-import { ForumComponent } from './forum/forum.component';
+import { ProfileEditorComponent } from './profile/profile-editor/profile-editor.component';
+import { ForumComponent } from './makeforum/makeforum.component';
+import { viewforumComponent } from './viewforum/viewforum.component';
 
 @NgModule({
   declarations: [
@@ -43,7 +44,8 @@ import { ForumComponent } from './forum/forum.component';
     HomeComponent,
     GateComponent,
     ProfileEditorComponent,
-    ForumComponent
+    ForumComponent,
+    viewforumComponent
   ],
   imports: [
     BrowserModule,

frontend/src/app/makeforum/makeforum.component.html

@@ -0,0 +1,29 @@
+<h1>Welcome to the Forum!</h1>
+
+<h1>Make a Forum Post With Resources!!</h1>
+
+<form [formGroup]="form" (ngSubmit)="onSubmit()">
+    <div>
+        <label for="enter your text here">Enter Your Text Here!</label>
+        <input id="text" type="text" formControlName="text">
+    </div>
+</form>
+
+<!-- <table>
+  <thead>
+      <td>Response</td>
+      <td>First Name</td>
+      <td>Last Name</td>
+      <td>Date</td>
+  </thead>
+  <tbody>
+      <tr *ngFor="let profile of | async">
+          <td>{{ user.pid }}</td>
+          <td>{{ user.first_name}}</td>
+          <td>{{ user.last_name }}</td>
+          <button class="button" (click)="deleteFunction(user.pid)">Delete</button>
+          <td>{{ check.created_at | date:'YYYY/MM/dd @ hh:MMaa' }}</td>
+      </tr>
+  </tbody>
+</table> -->
+

frontend/src/app/forum/forum.component.spec.ts → frontend/src/app/makeforum/makeforum.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ForumComponent } from './forum.component';
+import { ForumComponent } from './makeforum.component';
 
 describe('ForumComponent', () => {
   let component: ForumComponent;

frontend/src/app/makeforum/makeforum.component.ts

@@ -0,0 +1,77 @@
+import { Component } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { PostService, Post } from '../post.service';
+import { Role } from "../role";
+import { HttpErrorResponse } from '@angular/common/http';
+import { Profile, ProfileService } from '../profile/profile.service';
+import { viewforumComponent } from '../viewforum/viewforum.component';
+
+// things we need to do - change the name of forum component and you have to call one: makeforum and one should be seeforum
+//also we need to figure out how to create an actual user and not just a dummy one
+// also we need to fix onerror
+@Component({
+  selector: 'app-forum',
+  templateUrl: './makeforum.component.html',
+  styleUrls: ['./makeforum.component.css']
+})
+export class ForumComponent {
+
+  public static Route = {
+    path: 'forum',
+    component: ForumComponent
+  };
+
+  form = this.formBuilder.group({
+    content: ''
+  });
+
+  constructor (
+    private postService: PostService,
+    private formBuilder: FormBuilder,
+    private profileService: ProfileService
+  ) {}
+
+  onSubmit(): void {
+    let form = this.form.value;
+    let formContent = form.content ?? "";
+
+    this.profileService.profile$
+      .subscribe({
+        next: (profile) => this.onSuccess(profile, formContent), 
+        error: (err) => this.onError(err)
+      });
+
+
+    if (this.form.value.content?.length == 0) {
+      window.alert("Please check your input!")
+
+    }
+    // we need to define onerror
+} 
+
+private onSuccess(profile: Profile | undefined, formContent: string): void {
+  // this is where we have something in scope of type profile
+  // let current: new Date
+  let unique = Math.random() // generates unique post id
+  let date: Date = new Date() // generates date of successful form
+
+  if (profile == undefined) {
+    // handle this case better?
+    return;
+  }
+
+  this.postService.makePost(unique, formContent, profile, [], date)
+      // .subscribe({
+      //   next: (post) => this.onSuccess(profile, formContent),
+      //   error: (err) => this.onError(err)
+      // });
+
+  window.alert('Thank you for posting')
+
+  this.form.reset()
+}
+
+private onError(error: Error): void {
+
+  }
+}

frontend/src/app/post.service.ts

@@ -0,0 +1,56 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { map, Observable, throwError } from 'rxjs';
+import { Profile } from './profile/profile.service';
+import { Role } from './role';
+
+export interface Post {
+    id: number;
+    content: string;
+    user: Profile;
+    votes: [];
+    timestamp: Date;
+}
+//  these attributes will most likely change
+
+@Injectable ({
+    providedIn: 'root'
+})
+
+export class PostService {
+
+
+    constructor(private http: HttpClient) {}
+
+    posts: Post[] = [];
+
+    getPost() {
+        return this.posts;
+    }
+
+    getPosts(): Observable<Post[]> {
+        // let table: Observable<Post[]> = this.http.get<Post[]>("/api/forum"); // copied from the getCheckIns
+
+        // let new_table = table
+        //                     .pipe(
+        //                     map((x: Post[])=> {
+        //                     x.forEach(new_post => {
+        //                         new_post.timestamp = new Date(new_post.timestamp)
+        //                     });
+        //                     return x;
+        //                     })
+        //                 )
+        // return new_table
+        return this.http.get<Post[]>("/api/forum"); 
+    }
+
+    makePost(id: number, content: string, user: Profile, votes: [], timestamp: Date): Observable<Post> {
+        let post: Post = {id, content, user, votes, timestamp};
+        return this.http.post<Post>("/api/forum/", post);
+    }
+
+    // deletePost(id: number) {
+    //     return this.http.delete<Post>("/api/forum/" + id)
+    // }
+
+}

frontend/src/app/viewforum.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { viewforumService } from './viewforum.service';
+
+describe('makeforumService', () => {
+  let service: viewforumService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(viewforumService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/viewforum.service.ts

@@ -0,0 +1,12 @@
+
+import { Injectable, PLATFORM_ID } from '@angular/core';
+import { map, Observable, throwError } from 'rxjs';
+import { HttpClient } from '@angular/common/http'; //just added this
+
+@Injectable({
+  providedIn: 'root'
+})
+export class viewforumService {
+
+  constructor() { }
+}

frontend/src/app/viewforum/viewforum.component.html

@@ -0,0 +1,18 @@
+<p>getforum works!</p>
+
+<table>
+  <thead>
+      <td>Response</td>
+      <td>First Name</td> 
+      <td>Last Name</td>
+      <td>Date</td>
+  </thead>
+  <tbody>
+      <tr *ngFor="let post of post$| async">
+          <td>{{ post.content }}</td>
+          <td>{{ post.user.first_name}}</td>
+          <td>{{ post.user.last_name }}</td>
+          <td>{{ post.timestamp | date:'YYYY/MM/dd @ hh:MMaa' }}</td>
+      </tr>
+  </tbody>
+</table>

frontend/src/app/viewforum/viewforum.component.spec.ts

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

frontend/src/app/viewforum/viewforum.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { Post, PostService } from '../post.service';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-getforum',
+  templateUrl: './viewforum.component.html',
+  styleUrls: ['./viewforum.component.css']
+})
+export class viewforumComponent {
+  public post$: Observable<Post[]>;
+
+  constructor(private postService: PostService) {
+    this.post$ = postService.getPosts()
+  }
+
+}