feat: mvp

projects/test-app/src/app/app.service.ts

@@ -176,7 +176,6 @@ export class AppService {
       .reduce<(number | null)[]>((acc, curr, idx, a) => {
         acc.push(curr);
         if (idx < a.length - 1 && curr + 1 !== a[idx + 1]) {
-          console.log(`push null`);
           acc.push(null);
         }
         return acc;

projects/test-app/src/app/components/content/actor-header/actor-header.component.html

@@ -1,6 +1,6 @@
 <div class="mb-4 relative" *ngIf="actor$ | async; let actor">
   <h1 class="text-2xl">{{ actor?.name || actor?.preferredUsername }}</h1>
-  <div class="mb-1">{{ handle }}</div>
+  <div class="mb-3">{{ handle }}</div>
   @if (actor.summary) {
     <p [innerHTML]="actor.summary"></p>
   }

projects/test-app/src/app/components/content/actor-toolbar/actor-toolbar.component.html

@@ -1,5 +1,5 @@
-<div class="mb-4 sticky top-20 bg-base-100 bg-opacity-70">
-  <div class="flex p-2">
+<div class="sticky top-20 bg-base-100 bg-opacity-70 flex p-2">
+  <div class="">
     <div class="flex flex-grow items-center">
       @if (false) {
         Error loading posts

projects/test-app/src/app/components/content/note/note.component.html

@@ -1,4 +1,4 @@
-<div class="mb-6">
+<div class="border-t border-base-300 py-2">
   <div>
     <h4 class="text-sm flex items-center">
       <ng-container [ngSwitch]="post.type">
@@ -20,7 +20,11 @@ <h4 class="text-sm flex items-center">
         <ng-template *ngSwitchDefault>test</ng-template>
         </ng-container>
 
-        <ng-container [ngSwitch]="typeOf(post.attributedTo)" *ngIf="displayAuthor">
+        @for (author of authors; track $index) {
+          {{ author.name }}
+        }
+        &bullet;
+        <ng-container [ngSwitch]="typeOf(post.attributedTo)" *ngIf="false">
           <ng-template [ngSwitchCase]="undefined">
             {{ post.attributedTo }}
           </ng-template>

projects/test-app/src/app/components/content/note/note.component.ts

@@ -1,18 +1,20 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { NoteCreateDto, ObjectDtoAttributedTo, UserService } from "projects/ui-common/src/lib/api";
+import { ActorDto, NoteCreateDto, ObjectDtoAttributedTo, UserService } from "projects/ui-common/src/lib/api";
 import { AppService } from "../../../app.service";
+import { IsArrayPipe } from "../../../pipes/is-array.pipe";
 
 @Component({
   selector: "app-note",
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, IsArrayPipe],
   templateUrl: "./note.component.html",
   styleUrls: ["./note.component.css"],
 })
 export class NoteComponent {
   @Input() public post!: any;
   @Input() public displayAuthor: boolean = true;
+  @Input() public excludeAuthors?: string | string[];
 
   public isPosting = false;
 
@@ -22,6 +24,18 @@ export class NoteComponent {
     return Array.isArray(value);
   }
 
+  public get authors(): ActorDto[] {
+    if (!this.post.attributedTo) {
+      return [];
+    }
+
+    const attributedTo = Array.isArray(this.post.attributedTo) ? this.post.attributedTo : [this.post.attributedTo];
+    const excludeAuthors = this.excludeAuthors ? (Array.isArray(this.excludeAuthors) ? this.excludeAuthors : [this.excludeAuthors]) : [];
+    const excluded = attributedTo.filter((author: ActorDto) => !excludeAuthors.includes(author.id));
+
+    return excluded;
+  }
+
   getAuthor(attributedTo: string | string[] | ObjectDtoAttributedTo): string {
     const author: string = Array.isArray(attributedTo)
       ? attributedTo[0]

projects/test-app/src/app/forum/forum-index/forum-index.component.html

@@ -1,9 +1,41 @@
-<div>
-  <div class="relative mb-4">
-    <a [routerLink]="['post']" class="btn btn-primary" href="#">Post</a>
+<div class="sticky top-20 bg-base-100 bg-opacity-70">
+  <div class="flex">
+    <div class="flex flex-grow items-center">
+      Pagination list
+    </div>
+    <div class="flex-none">
+      <button class="btn btn-primary" [disabled]="isPosting" (click)="isPosting = true" *ngIf="canPost">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+        </svg>
+        <span>New Post</span>
+      </button>
+    </div>
+  </div>
+  <div *ngIf="isPosting" class="card bg-base-200 shadow-md">
+    <div class="card-body p-2 sm:p-4">
+      <div class="mb-3">
+        <label for="addressee" class="block text-sm font-medium text-gray-700">Title</label>
+        <input [(ngModel)]="name" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md p-2" placeholder="#Title">
+      </div>
+      <div class="mb-3">
+        <label for="content" class="block text-sm font-medium text-gray-700">Content</label>
+        <textarea name="content" #postbox rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 w-full sm:text-sm border border-gray-300 rounded-md hidden" placeholder="Enter your message here"></textarea>
+        <div class="NgxEditor__Wrapper">
+          <ngx-editor-menu [editor]="editor"></ngx-editor-menu>
+          <ngx-editor [editor]="editor" [(ngModel)]="html" [placeholder]="'Type here...'"></ngx-editor>
+        </div>
+      </div>
+      <div class="card-actions justify-end">
+        <button class="btn btn-outline" (click)="isPosting = false">Cancel</button>
+        <button class="btn btn-primary" (click)="postMessage()">Post</button>
+      </div>
+    </div>
   </div>
+</div>
 
+<div>
   <div *ngFor="let post of posts$ | async" class="mb-3">
-    <app-note [post]="post"></app-note>
+    <app-note [post]="post" [excludeAuthors]="(forum$ | async)?.id"></app-note>
   </div>
 </div>

projects/test-app/src/app/forum/forum-index/forum-index.component.ts

@@ -1,31 +1,51 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ActivatedRoute, RouterModule } from '@angular/router';
-import { ForumService } from 'projects/ui-common/src/lib/api';
-import { Observable, map, switchMap } from 'rxjs';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { ActorDto, ForumService } from 'projects/ui-common/src/lib/api';
+import { BehaviorSubject, Observable, map } from 'rxjs';
 import { NoteComponent } from '../../components/content/note/note.component';
+import { Editor, NgxEditorModule } from 'ngx-editor';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-forum-index',
   standalone: true,
   imports: [
     CommonModule,
     RouterModule,
-    NoteComponent
+    NoteComponent,
+    FormsModule,
+    NgxEditorModule
   ],
   templateUrl: './forum-index.component.html',
   styleUrls: ['./forum-index.component.css']
 })
 export class ForumIndexComponent {
   public forumname: string = '';
+  public forum$: BehaviorSubject<ActorDto | null> = new BehaviorSubject<ActorDto | null>(null);
   public posts$: Observable<any> | undefined;
+  public isPosting: boolean = false;
+  public canPost: boolean = true;
+  public editor = new Editor();
+  public html: string = '';
+  public name: string = '';
 
   constructor(
     private route: ActivatedRoute,
+    protected router: Router,
     protected forumService: ForumService,
   ) { }
 
   ngOnInit(): void {
+    this.route.params.subscribe((params: any) => {
+      this.forumname = params['forumname'];
+      this.loadContent();
+    });
+
+    this.route.data.subscribe(data => {
+      this.forum$.next(data['forum']);
+    })
+
     // this.route.params.subscribe((params: any) => {
     //   this.posts$ = this.forumService.getForumContent(params['forumId'])
     //     .pipe(
@@ -34,10 +54,39 @@ export class ForumIndexComponent {
     // });
   }
 
+  /**
+   * Post a message to the forum.
+   */
+  public postMessage(addressee?: string) {
+    const to = addressee || 'https://www.w3.org/ns/activitystreams#Public';
+
+    const data: any = {
+      '@context': 'https://www.w3.org/ns/activitystreams',
+      type: 'Note',
+      to,
+      content: this.html,
+      name: this.name
+    };
+
+    this.forumService.postOutbox(this.forumname, data)
+      .subscribe({
+        next: _response => this.onPostComplete(),
+        error: err => this.onPostError(err)
+      });
+  }
+
+  protected onPostComplete() {
+    this.router.navigate(['..'], {relativeTo: this.route});
+  }
+
+  protected onPostError(err: any) {
+    // handle error
+  }
+
   loadContent() {
-    // this.posts$ = this.forumService.getForumContent(this.forumname)
-    //   .pipe(
-    //     map(response => response.items)
-    //   )
+    this.posts$ = this.forumService.getForumContent(this.forumname)
+      .pipe(
+        map(response => response.items)
+      )
   }
 }

projects/test-app/src/app/modules/user/user.component.html

@@ -2,8 +2,8 @@
   <main role="main">
     <app-actor-header [actor]="user$"></app-actor-header>
 
-    <div class="mb-4 sticky top-20 bg-base-100 bg-opacity-70">
-      <div class="flex p-2">
+    <div class="sticky top-20 bg-base-100 bg-opacity-70 mb-2 p-2 rounded">
+      <div class="flex">
         <div class="flex flex-grow items-center">
           @if (isLoadingError) {
             Error loading posts <a class="btn btn-sm ml-4" (click)="loadContent()">Retry</a>
@@ -34,9 +34,9 @@
         </div>
       </div>
 
-      <div *ngIf="isPosting" class="card bg-base-200 shadow-md mb-4">
+      <div *ngIf="isPosting" class="card bg-base-200 shadow-md">
         <div class="card-body p-2 sm:p-4">
-          <div class="mb-3">
+          <div class="mb-3 hidden">
             <label for="addressee" class="block text-sm font-medium text-gray-700">Addressee</label>
             <input name="addressee" #addressee class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md p-2" placeholder="#Public">
           </div>
@@ -64,9 +64,9 @@
       </div>
     }
     @else {
-      <div *ngFor="let post of posts$ | async" class="mb-3">
-        <app-note [post]="post" [displayAuthor]="false"></app-note>
-      </div>
+      @for (post of posts$ | async; track $index) {
+        <app-note [post]="post" [excludeAuthors]="(user$ | async)?.id"></app-note>
+      }
     }
     </div>
   </main>

projects/test-app/src/app/modules/user/user.module.ts

@@ -7,8 +7,6 @@ import { NgxEditorModule } from 'ngx-editor';
 import { FormsModule } from '@angular/forms';
 import { ActorHeaderComponent } from '../../components/content/actor-header/actor-header.component';
 
-
-
 @NgModule({
   declarations: [
     UserComponent

projects/test-app/src/app/pipes/is-array.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { IsArrayPipe } from './is-array.pipe';
+
+describe('IsArrayPipe', () => {
+  it('create an instance', () => {
+    const pipe = new IsArrayPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

projects/test-app/src/app/pipes/is-array.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'isArray',
+  standalone: true
+})
+export class IsArrayPipe implements PipeTransform {
+
+  transform(value: unknown, ..._args: unknown[]): unknown {
+    return Array.isArray(value);
+  }
+
+}