From c989f67e59844716c451835d65c5cf288235fdae Mon Sep 17 00:00:00 2001
From: SondreB <sondre@outlook.com>
Date: Thu, 7 Nov 2024 11:00:37 +0100
Subject: [PATCH] Add "About" section for Community

---
 .../communities/communities.component.html    |  2 +-
 .../app/communities/communities.component.ts  |  2 +-
 .../communities/create/create.component.ts    |  2 +-
 .../app/community/community.component.html    | 55 +++++++++++++++++++
 app/src/app/community/community.component.ts  | 47 +++++++++++++++-
 5 files changed, 102 insertions(+), 6 deletions(-)

diff --git a/app/src/app/communities/communities.component.html b/app/src/app/communities/communities.component.html
index e1845f9d..01eeab31 100644
--- a/app/src/app/communities/communities.component.html
+++ b/app/src/app/communities/communities.component.html
@@ -78,7 +78,7 @@
     </mat-card-content>
     <mat-card-actions>
       <button mat-button (click)="open(community.id)">VIEW</button>
-      <button mat-button (click)="open(community.id)">JOIN</button>
+      <button mat-button (click)="join(community.id)">JOIN</button>
     </mat-card-actions>
   </mat-card>
   } @for(card of cards(); track card) {
diff --git a/app/src/app/communities/communities.component.ts b/app/src/app/communities/communities.component.ts
index 7eeafe7a..7049a69b 100644
--- a/app/src/app/communities/communities.component.ts
+++ b/app/src/app/communities/communities.component.ts
@@ -230,7 +230,7 @@ export class CommunitiesComponent {
   }
 
   join(community: string) {
-    this.router.navigate(['/community', community, 'join']);
+    this.router.navigate(['/community', community], { queryParams: { join: true } });
   }
 
   ngOnInit() {
diff --git a/app/src/app/communities/create/create.component.ts b/app/src/app/communities/create/create.component.ts
index f35a686c..2f44227b 100644
--- a/app/src/app/communities/create/create.component.ts
+++ b/app/src/app/communities/create/create.component.ts
@@ -526,7 +526,7 @@ export class CreateComponent implements OnDestroy {
       // status: profile.status,
       // location: profile.location,
       // birthDate: profile.birthDate,
-      // avatar: profile.avatar,
+      avatar: profile.avatar,
       // hero: profile.hero,
     });
 
diff --git a/app/src/app/community/community.component.html b/app/src/app/community/community.component.html
index 93cdcd87..4c7cb27f 100644
--- a/app/src/app/community/community.component.html
+++ b/app/src/app/community/community.component.html
@@ -1,4 +1,53 @@
+@if (community()) {
+
 <mat-tab-group>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon class="tab-icon">info</mat-icon>
+      <span class="hide-small">About</span>
+    </ng-template>
+
+    <ng-template matTabContent>
+      <div class="tab-content">
+        <mat-card class="discussion-card">
+          <mat-card-header>
+            <mat-card-title>About this community</mat-card-title>
+            <mat-card-subtitle [matTooltip]="community()!.record.dateCreated"
+              >Created {{ community()!.record.dateCreated | ago }}</mat-card-subtitle
+            >
+          </mat-card-header>
+          <mat-card-content>
+            <p>About: {{ community()!.data.bio }}</p>
+            <p>
+              Tier: <strong class="capitalize">{{ community()!.data.option }}</strong>
+            </p>
+            <p>
+              Type: <strong class="capitalize">{{ community()!.data.type }}</strong>
+            </p>
+            <p>
+              Membership fee: $<strong>{{ community()!.data.fee }}</strong>
+            </p>
+            <p>
+              Max members: <strong>{{ community()!.data.members }}</strong>
+            </p>
+            <!-- <p>JSON: {{ community()!.data | json }}</p> -->
+          </mat-card-content>
+        </mat-card>
+
+        <mat-card class="discussion-card">
+          <mat-card-header>
+            <mat-card-title>Owner</mat-card-title>
+            <!-- <mat-card-subtitle [matTooltip]="community()!.record.dateCreated"
+              >Created {{ community()!.record.dateCreated | ago }}</mat-card-subtitle
+            > -->
+          </mat-card-header>
+          <mat-card-content>
+            <app-profile-header [did]="community()!.data.owners[0]"></app-profile-header>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </ng-template>
+  </mat-tab>
   <mat-tab>
     <ng-template mat-tab-label>
       <mat-icon class="tab-icon">chat</mat-icon>
@@ -308,3 +357,9 @@
     </ng-template>
   </mat-tab>
 </mat-tab-group>
+
+} @else {
+
+<mat-spinner></mat-spinner>
+
+}
diff --git a/app/src/app/community/community.component.ts b/app/src/app/community/community.component.ts
index ebd6f732..dfbc7397 100644
--- a/app/src/app/community/community.component.ts
+++ b/app/src/app/community/community.component.ts
@@ -1,10 +1,10 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, effect, inject, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTabsModule } from '@angular/material/tabs';
 import { AgoPipe } from '../shared/pipes/ago.pipe';
-import { RouterModule } from '@angular/router';
+import { ActivatedRoute, RouterModule } from '@angular/router';
 import { MatListModule } from '@angular/material/list';
 import { CommonModule } from '@angular/common';
 import { SizePipe } from '../shared/pipes/size.pipe';
@@ -12,6 +12,11 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatInputModule } from '@angular/material/input';
 import { AppService } from '../app.service';
 import { LayoutService } from '../layout.service';
+import { DataService } from '../data.service';
+import { RecordEntry } from '../data';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ProfileHeaderComponent } from '../shared/components/profile-header/profile-header.component';
 
 @Component({
   selector: 'app-community',
@@ -28,6 +33,9 @@ import { LayoutService } from '../layout.service';
     MatButtonModule,
     MatTabsModule,
     MatIconModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule,
+    ProfileHeaderComponent,
   ],
   templateUrl: './community.component.html',
   styleUrl: './community.component.scss',
@@ -41,11 +49,39 @@ export class CommunityComponent {
 
   layout = inject(LayoutService);
 
-  constructor() {}
+  route = inject(ActivatedRoute);
+
+  data = inject(DataService);
+
+  selectedCommunity = signal<string | null>(null);
+
+  community = signal<RecordEntry<any> | null>(null);
+
+  constructor() {
+    effect(async () => {
+      if (this.app.initialized() && this.selectedCommunity()) {
+        await this.loadCommunity();
+      }
+    });
+  }
 
   ngOnInit() {
     this.layout.marginOff();
 
+    this.route.paramMap.subscribe((params) => {
+      this.layout.resetActions();
+
+      const id = params.get('id');
+
+      console.log('Loading community: ', id);
+
+      if (!id || id == ':id' || id == 'home') {
+        this.selectedCommunity.set(null);
+      } else {
+        this.selectedCommunity.set(params.get('id'));
+      }
+    });
+
     const photos: any[] = [];
     for (let i = 0; i < this.images.length; i++) {
       photos.push({
@@ -80,4 +116,9 @@ export class CommunityComponent {
   hideMembersSearch() {
     this.searchingMembers.set(false);
   }
+
+  async loadCommunity() {
+    const entry = await this.data.get(this.selectedCommunity()!);
+    this.community.set(entry);
+  }
 }