add ability to refresh feed

vivganes · Jan 27, 2024 · f980d26 · f980d26
1 parent bf83d5c
commit f980d26
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 8 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -38,7 +38,8 @@ import {
   arrowIcon,
   bubbleExclamationIcon,
   bitcoinIcon,
-  connectIcon
+  connectIcon,
+  refreshIcon
 } from '@cds/core/icon';
 import { NdkproviderService } from './service/ndkprovider.service';
 import { ActivatedRoute, NavigationEnd, RouteReuseStrategy, Router } from '@angular/router';
@@ -93,7 +94,8 @@ ClarityIcons.addIcons(
   paperclipIcon,
   wandIcon,
   downloadCloudIcon,
-  uploadCloudIcon
+  uploadCloudIcon,
+  refreshIcon
 );
 @Component({
   selector: 'app-root',

diff --git a/src/app/component/event-feed/event-feed.component.html b/src/app/component/event-feed/event-feed.component.html
@@ -23,6 +23,9 @@ <h3>
             </button>
           </ng-template>
         </ng-template>
+        <button type="button" class="btn btn-icon btn-outline btn-sm" aria-label="refresh" (click)="loadFeedFromBeginning()">
+          <cds-icon shape="refresh"></cds-icon>
+        </button>
       </h3>
     </div>
   </div>
@@ -55,6 +58,9 @@ <h3>
               <span>&nbsp;
                 <cds-icon class="alert-icon" shape="info-circle" (click)="showingCommunityInfo = true" title="{{'Show community details'|translate}}"></cds-icon>
                 <button *ngIf="weblnEnabled" class="btn btn-sm btn-icon btn-primary" (click)="zapMods()"><cds-icon shape="bolt" solid="true"></cds-icon>Zap Mods</button>
+                &nbsp; <button type="button" class="btn btn-icon btn-outline btn-sm" aria-label="refresh" (click)="loadFeedFromBeginning()">
+                  <cds-icon shape="refresh"></cds-icon>
+                </button>
               </span>
             </span>  
           </div>
@@ -79,12 +85,21 @@ <h3>
 <ng-template [ngIf]="(tag ===undefined && community === undefined) && !loadingCommunityDetails" #homefeedHeader>
   <div class="clr-row clr-justify-content-center">
     <div class="clr-col-12 clr-col-md-8">
-      <clr-select-container>
-        <select  id="select-full" title="{{'Feed type'|translate}}" clrSelect name="options" [(ngModel)]="feedType" (ngModelChange)="onChangeFeedType($event)" class="giant-text-in-select select-feed-type">
-          <option [value]="feedTypeOptions[0]" class="option-feed-type">#️⃣ {{'Topics Feed'|translate}}</option>
-          <option [value]="feedTypeOptions[1]" class="option-feed-type">🫂 {{'Communities Feed'|translate}} - BETA</option>
-        </select>
-      </clr-select-container>      
+      <div class="clr-row">
+        <div class="clr-col">
+          <clr-select-container class="less-top-margin-feed-type">
+            <select  id="select-full" title="{{'Feed type'|translate}}" clrSelect name="options" [(ngModel)]="feedType" (ngModelChange)="onChangeFeedType($event)" class="giant-text-in-select select-feed-type">
+              <option [value]="feedTypeOptions[0]" class="option-feed-type">#️⃣ {{'Topics Feed'|translate}}</option>
+              <option [value]="feedTypeOptions[1]" class="option-feed-type">🫂 {{'Communities Feed'|translate}} - BETA</option>
+            </select>
+          </clr-select-container>
+        </div>
+        <div class="clr-col">    
+          <button type="button" class="btn btn-icon btn-outline btn-sm" aria-label="refresh" (click)="loadFeedFromBeginning()">
+            <cds-icon shape="refresh"></cds-icon>
+          </button>
+        </div>
+      </div>  
       <div class="clr-control-container ml-5">
         <div class="clr-toggle-wrapper" *ngIf="feedType === feedTypeOptions[1]">
           <input type="checkbox" id="toggle1" name="toggle-full" [(ngModel)]="showUnapprovedPosts" (ngModelChange)="loadFeedFromBeginning()" class="clr-toggle"  />

diff --git a/src/app/component/event-feed/event-feed.component.ts b/src/app/component/event-feed/event-feed.component.ts
@@ -67,6 +67,10 @@ export class EventFeedComponent implements OnInit,OnDestroy{
       }
     }
 
+    this.ndkProvider.reloadFeedEmitter.subscribe((reloadNow: boolean )=> {
+      this.loadFeedFromBeginning();
+    })
+
     this.ndkProvider.followedTopicsEmitter.subscribe((followedTopics: string) => {
       if (followedTopics === '') {
         this.followedTopics = [];

diff --git a/src/app/service/ndkprovider.service.ts b/src/app/service/ndkprovider.service.ts
@@ -86,6 +86,7 @@ export class NdkproviderService {
   canWriteToNostr: boolean = false;
   @Output()
   launchOnboardingWizard: EventEmitter<boolean> = new EventEmitter<boolean>();
+  reloadFeedEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   constructor(private dbService: ZappeditdbService,
     private objectCache: ObjectCacheService,

diff --git a/src/styles.scss b/src/styles.scss
@@ -308,6 +308,10 @@ a{
   border-bottom-left-radius:10px
 }
 
+.less-top-margin-feed-type{
+  margin-top:0.2rem !important;
+}
+
 .reply-count-parent{
   display: flex;
   align-content: flex-end !important;