Skip to content

Commit

Permalink
Add "About" section for Community
Browse files Browse the repository at this point in the history
  • Loading branch information
sondreb committed Nov 7, 2024
1 parent 574484c commit c989f67
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 6 deletions.
2 changes: 1 addition & 1 deletion app/src/app/communities/communities.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion app/src/app/communities/communities.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
2 changes: 1 addition & 1 deletion app/src/app/communities/create/create.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});

Expand Down
55 changes: 55 additions & 0 deletions app/src/app/community/community.component.html
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -308,3 +357,9 @@
</ng-template>
</mat-tab>
</mat-tab-group>

} @else {

<mat-spinner></mat-spinner>

}
47 changes: 44 additions & 3 deletions app/src/app/community/community.component.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
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';
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',
Expand All @@ -28,6 +33,9 @@ import { LayoutService } from '../layout.service';
MatButtonModule,
MatTabsModule,
MatIconModule,
MatProgressSpinnerModule,
MatTooltipModule,
ProfileHeaderComponent,
],
templateUrl: './community.component.html',
styleUrl: './community.component.scss',
Expand All @@ -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({
Expand Down Expand Up @@ -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);
}
}

0 comments on commit c989f67

Please sign in to comment.