Build forum post frontend part 1

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 { GetforumComponent } from './viewforum/viewforum.component';
 
 @NgModule({
   declarations: [
@@ -43,7 +44,8 @@ import { ForumComponent } from './forum/forum.component';
     HomeComponent,
     GateComponent,
     ProfileEditorComponent,
-    ForumComponent
+    ForumComponent,
+    GetforumComponent
   ],
   imports: [
     BrowserModule,

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

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

frontend/src/app/getforum.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 GetforumService {
+
+  constructor() { }
+}

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

@@ -0,0 +1,12 @@
+<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>
+
+<hr>

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,72 @@
+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';
+
+// 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;
+
+    this.profileService.profile$
+      .subscribe({
+        next: (profile) => this.onSuccess(profile), 
+        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): void {
+    // this is where we have something in scope of type profile
+
+    if (profile == undefined) {
+      // handle this case better?
+      return;
+    }
+
+    this.postService
+        .makePost(1, "blah", profile, [], new Date("2022-03-25"))
+        .subscribe({
+          next: (post) => this.onSuccess(profile), 
+          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,41 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { 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[]> {
+        return this.http.get<Post[]>("/api/post");
+    }
+
+    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/post/", post);
+    }
+
+    deletePost(id: number) {
+        return this.http.delete<Post>("/api/post/" + id)
+    }
+
+}

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

@@ -0,0 +1 @@
+<p>getforum works!</p>

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-getforum',
+  templateUrl: './getforum.component.html',
+  styleUrls: ['./getforum.component.css']
+})
+export class GetforumComponent {
+
+}