Skip to content

Commit

Permalink
redesign discover communities page
Browse files Browse the repository at this point in the history
  • Loading branch information
@vivganes
vivganes committed Nov 5, 2023
1 parent 78b3953 commit 80a7b3b
Show file tree
Hide file tree
Showing 3 changed files with 199 additions and 109 deletions.
60 changes: 46 additions & 14 deletions src/app/page/community-list/community-list.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div>
<div>
<h3 *ngIf="!showOnlyOwnedCommunities && !showOnlyJoinedCommunities && !showOnlyModeratingCommunities && !showRecentlyActiveCommunities" align="center">
<cds-icon shape="users" size="lg" solid="true"></cds-icon> {{'Recently Created Communities'|translate}} <button type="button" class="btn btn-icon btn-primary btn-sm" aria-label="new community" (click)="showCreateCommunity = !showCreateCommunity" *ngIf="this.ndkProvider.canWriteToNostr">
<cds-icon shape="users" size="lg" solid="true"></cds-icon> {{'Discover Communities'|translate}} <button type="button" class="btn btn-icon btn-primary btn-sm" aria-label="new community" (click)="showCreateCommunity = !showCreateCommunity" *ngIf="this.ndkProvider.canWriteToNostr">
<cds-icon shape="plus-circle"></cds-icon> {{'New Community'|translate}}
</button>
</h3>
Expand All @@ -27,16 +27,32 @@ <h3 *ngIf="showOnlyModeratingCommunities" align="center">
</h3>
</div>
</div>
<div *ngIf="!showRecentlyActiveCommunities" class="clr-row clr-justify-content-end">
<div class="clr-col-md-3 clr-col-10">
<form class="search" onsubmit="return false;">
<label for="search_input_mobile">
<input clrInput id="search_input" type="search" placeholder="🔎︎ {{'Search'|translate}}..." [(ngModel)]="searchTerm"
name="search_input" (ngModelChange)="onSearchTermChange()">
</label>
<div class="clr-row clr-justify-content-end">
<div class="clr-col-md-5 clr-col-10">
<form class="search clr-form" onsubmit="return false;">
<div class="clr-form-control">
<div class="clr-control-container {{(searchTerm.length>0 && searchTerm.length <=2)?'clr-error':''}}">
<div class="clr-input-wrapper">
<input clrInput id="search_input" type="search" placeholder="🔎︎ {{'Type 3 letters'|translate}}..." [(ngModel)]="searchTerm"
name="search_input" (ngModelChange)="onSearchTermChange()">
</div>
<span *ngIf="searchTerm.length>0 && searchTerm.length <=2" class="clr-subtext">Enter minimum of 3 characters</span>
</div>
</div>
</form>
</div>
</div>

<div *ngIf="isCachingCommunities && searchTerm.length>2" class="alert alert-warning" role="alert">
<div class="alert-items">
<div class="alert-item static">
<div class="alert-icon-wrapper">
<cds-icon class="alert-icon" shape="exclamation-triangle"></cds-icon>
</div>
<span class="alert-text" translate>All communities have not yet loaded. Search results may be partial.</span>
</div>
</div>
</div>

<div class="clr-row clr-justify-content-center">
<div *ngIf="loadingEvents" class="clr-col-12">
Expand All @@ -45,26 +61,42 @@ <h3 *ngIf="showOnlyModeratingCommunities" align="center">
</div>
</div>

<div *ngIf="!(loadingEvents) && communities?.length === 0" class="clr-row page-center">
<div *ngIf="searchInProgress" class="clr-col-12">
<div class="event-loading-spinner clr-justify-content-center">
<span class="spinner spinner-md" translate>Searching communities...</span>
</div>
</div>

<div *ngIf="!(loadingEvents) && !discoverCommunities && communities?.length === 0" class="clr-row page-center">
<div class="alert-items">
<div class="alert-item static clr-justify-content-center">
<span *ngIf="!showOnlyOwnedCommunities" class="alert-text" translate>No communities at all. Fishy!</span>
<span *ngIf="showOnlyOwnedCommunities" class="alert-text" translate>You have not created any community so far.</span>
</div>
</div>
</div>
<ng-template [ngIf]="showRecentlyActiveCommunities">
<div *ngFor="let community of communityEventService.communityEvents | async" class="clr-col-12 clr-col-md-5" >
<app-community-card [id]="community.communityId" [lastActive]="community.recentActivityAt!" (onLeave)="onLeave($event)"></app-community-card>

<div *ngIf="!searchInProgress && discoverCommunities && searchTerm.length <=2" class="clr-row page-center">
<div class="alert-items">
<div class="alert-item static clr-justify-content-center">
<span class="alert-text" translate>Search to see communities 👆</span>
</div>
</div>
</div>
<ng-template [ngIf]="showRecentlyActiveCommunities">
<ng-template [ngIf]="!searchTerm || searchTerm.length<=2">
<div *ngFor="let community of communityEventService.communityEvents | async" class="clr-col-12 clr-col-md-5" >
<app-community-card [id]="community.communityId" [lastActive]="community.recentActivityAt!" (onLeave)="onLeave($event)"></app-community-card>
</div>
</ng-template>
</ng-template>

<ng-template [ngIf]="!showRecentlyActiveCommunities && searchTerm.length === 0">
<ng-template [ngIf]="!showRecentlyActiveCommunities && searchTerm.length <=2">
<div *ngFor="let community of communities " class="clr-col-12 clr-col-md-5">
<app-community-card [community]="community" (onLeave)="onLeave($event)"></app-community-card>
</div>
</ng-template>
<ng-template [ngIf]="!showRecentlyActiveCommunities && searchTerm.length > 0">
<ng-template [ngIf]="searchTerm.length > 2">
<div *ngFor="let community of searchResults " class="clr-col-12 clr-col-md-5">
<app-community-card [community]="community" (onLeave)="onLeave($event)"></app-community-card>
</div>
Expand Down
46 changes: 38 additions & 8 deletions src/app/page/community-list/community-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export class CommunityListComponent {
searchTerm:string='';
communities?:Community[];
allCommunities?:Observable<Community[]>;
isCachingCommunities:boolean;
until: number | undefined = Date.now();
limit: number | undefined = BUFFER_REFILL_PAGE_SIZE;
loadingEvents: boolean = false;
Expand All @@ -35,13 +36,27 @@ export class CommunityListComponent {
searchResults?:Community[];
showCreateCommunity:boolean = false;
communityEventService:CommunityEventService;
searchInProgress:boolean = false;
discoverCommunities:boolean = false;

constructor(public ndkProvider:NdkproviderService, private router:Router,
private communityService:CommunityService, private objectCache:ObjectCacheService, communityEventService:CommunityEventService){
this.communityEventService = communityEventService;
}


ngOnInit(){
this.ndkProvider.loadingCommunitiesEmitter$.subscribe((loading)=>{
if(loading){
console.log("Received event for true")
this.isCachingCommunities = true
} else {
console.log("Received event for false")
this.isCachingCommunities = false
}
})


const url = this.router.url;
if(url.indexOf('/own')>-1){
this.showOnlyOwnedCommunities = true;
Expand All @@ -55,6 +70,10 @@ export class CommunityListComponent {
this.showOnlyModeratingCommunities = true;
}

if(url.indexOf('/discover')>-1){
this.discoverCommunities = true;
}

if(url.indexOf('/recently-active')>-1){
this.showRecentlyActiveCommunities = true;
}
Expand All @@ -63,9 +82,9 @@ export class CommunityListComponent {
this.isLoggedInUsingPubKey = val;
});

if(url.indexOf('/recently-active')==-1){
if(!this.discoverCommunities && !this.showRecentlyActiveCommunities ){
this.fetchCommunities();
}
}
}

onLeave(community:any){
Expand All @@ -76,15 +95,20 @@ export class CommunityListComponent {

onSearchTermChange(){
let searchFor = this.searchTerm;
if(searchFor.startsWith('n/')){
searchFor = searchFor.substring(2,searchFor.length);
if(searchFor.length>2){
if(searchFor.startsWith('n/')){
searchFor = searchFor.substring(2,searchFor.length);
}
this.populateSearchResults(searchFor);
}
this.populateSearchResults(searchFor);


}

async populateSearchResults(searchFor:string){
const filtered = this.communities?.filter((c) => {
if(searchFor.length>0){
this.searchInProgress = true;
const filtered = await this.objectCache.communities?.filter((c) => {
//this.communities?.filter((c) => {
if(c.displayName && c.displayName.toLocaleLowerCase().indexOf(searchFor.toLocaleLowerCase())>-1){
return true;
}
Expand All @@ -93,7 +117,13 @@ export class CommunityListComponent {
}
return false;
})
this.searchResults = filtered;
this.searchResults = await filtered.toArray();
this.searchInProgress = false;
} else {
this.searchInProgress = false;
this.searchResults = this.communities;
}

}

async fetchCommunities(){
Expand Down
Loading

0 comments on commit 80a7b3b

Please sign in to comment.