(feat) ability to search in feeds

src/app/modules/pro/channel/channel.component.html

@@ -13,6 +13,7 @@
  <div class="mdl-textfield mdl-js-textfield">
  <i class="material-icons">search</i>
  <input
+ [(ngModel)]="searchedText"
  id="search"
  autocomplete="off"
  class="mdl-textfield__input ng-pristine ng-valid ng-touched"
@@ -33,43 +34,37 @@
  >Feed</a>-->
  <a
  class="m-proChannelTopbar__navItem"
- [routerLink]="['/pro', channel.username, 'videos']"
- [queryParams]="{algorithm: 'top'}"
+ [routerLink]="linkTo('videos', searchedText)"
  routerLinkActive="active"
  i18n
  >Videos</a>
  <a
  class="m-proChannelTopbar__navItem"
- [routerLink]="['/pro', channel.username, 'images']"
- [queryParams]="{algorithm: 'top'}"
+ [routerLink]="linkTo('images', searchedText)"
  routerLinkActive="active"
  i18n
  >Images</a>
  <a
  class="m-proChannelTopbar__navItem"
- [routerLink]="['/pro', channel.username, 'articles']"
- [queryParams]="{algorithm: 'top'}"
+ [routerLink]="linkTo('articles', searchedText)"
  routerLinkActive="active"
  i18n
  >Articles</a>
  <a
  class="m-proChannelTopbar__navItem"
- [routerLink]="['/pro', channel.username, 'groups']"
- [queryParams]="{algorithm: 'top'}"
+ [routerLink]="linkTo('groups', query)"
  routerLinkActive="active"
  i18n
  >Groups</a>
  <a
  class="m-proChannelTopbar__navItem"
  [routerLink]="['/pro', channel.username, 'donate']"
- [queryParams]="{algorithm: 'top'}"
  routerLinkActive="active"
  i18n
  >Donate</a>
  <a
  class="m-proChannelTopbar__navItem"
  [routerLink]="['/pro', channel.username, 'signup']"
- [queryParams]="{algorithm: 'top'}"
  routerLinkActive="active"
  *ngIf="!currentUser"
  i18n
@@ -82,7 +77,7 @@
  </a>
  </ng-container>
 
- <m-pro-user-menu [channelName]="channel.username" [showNavItems]="collapseNavItems"></m-pro-user-menu>
+ <m-pro-user-menu [channelName]="channel.username" [showNavItems]="collapseNavItems" [query]="searchedText"></m-pro-user-menu>
  </div>
 
  <div class="m-proChannel__body">

src/app/modules/pro/channel/channel.component.ts

@@ -7,7 +7,7 @@ import {
  OnDestroy,
  OnInit
 } from '@angular/core';
-import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRoute, Router, NavigationEnd, NavigationStart  } from "@angular/router";
 import { Session } from "../../../services/session";
 import { Subscription } from "rxjs";
 import { MindsUser } from "../../../interfaces/entities";
@@ -37,6 +37,12 @@ export class ProChannelComponent implements OnInit, OnDestroy {
 
  params$: Subscription;
 
+ searchedText: string;
+
+ routerSubscription: Subscription;
+
+ currentURL: string;
+
  constructor(
  protected element: ElementRef,
  protected session: Session,
@@ -50,6 +56,25 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  }
 
  ngOnInit() {
+ this.listen();
+ this.onResize();
+ }
+
+ listen() {
+ this.routerSubscription = this.router.events.subscribe((navigationEvent) => {
+ try {
+ if (navigationEvent instanceof NavigationEnd) {
+ if (!navigationEvent.urlAfterRedirects) {
+ return;
+ }
+ 
+ this.currentURL = navigationEvent.urlAfterRedirects;
+ }
+ } catch (e) {
+ console.error('Minds: router hook(SearchBar)', e);
+ }
+ });
+
  this.params$ = this.route.params.subscribe(params => {
  if (params['username']) {
  this.username = params['username'];
@@ -59,12 +84,11 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  this.load();
  }
  });
-
- this.onResize();
  }
 
  ngOnDestroy() {
  this.params$.unsubscribe();
+ this.routerSubscription.unsubscribe();
  }
 
  async load() {
@@ -93,7 +117,7 @@ export class ProChannelComponent implements OnInit, OnDestroy {
 
  this.detectChanges();
  }
-
+ 
  bindCssVariables() {
  const styles = this.channel.pro_settings.styles;
 
@@ -140,6 +164,18 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  }
 
  search() {
- return;
+ if(!this.currentURL){
+ this.currentURL = `/pro/${this.channel.username}/feed/top`;
+ } else {
+ if (this.currentURL.includes('query')) {
+ this.currentURL = this.currentURL.split(';')[0];
+ }
+ }
+
+ this.router.navigate([this.currentURL,{ query: this.searchedText, period: '24h' }]);
+ }
+
+ get linkTo() {
+ return this.channelService.linkTo.bind(this.channelService);
  }
 }

src/app/modules/pro/channel/channel.service.ts

@@ -29,4 +29,14 @@ export class ProChannelService {
  }
  }
  }
+
+ linkTo(to, query, algorithm?) {
+ let route = ['/pro', this.currentChannel.username, to, algorithm || 'top'];
+
+ if (query) {
+ route.push({ query });
+ }
+
+ return route;
+ }
 }

src/app/modules/pro/channel/list/list.component.html

-<!--<div class="m-proChannelList__algorithm">-->
-<!-- <a [routerLink]="['/pro', channelUsername, getTypeForRoute(type), 'hot']" routerLinkActive="active" i18n>-->
-<!-- <i class="material-icons">whatshot</i>-->
-<!-- <span i18n>HOT</span>-->
-<!-- </a>-->
+<div class="m-proChannelList__tools">
+ <div class="m-proChannelListTools__algorithm">
+ <a [routerLink]="['/pro', channelUsername, getTypeForRoute(type), 'hot']" routerLinkActive="active" i18n>
+ <i class="material-icons">whatshot</i>
+ <span i18n>HOT</span>
+ </a>
 
-<!-- <a [routerLink]="['/pro', channelUsername, getTypeForRoute(type), 'top']" routerLinkActive="active" i18n>-->
-<!-- <i class="material-icons">trending_up</i>-->
-<!-- <span i18n>TOP</span>-->
-<!-- </a>-->
+ <a [routerLink]="['/pro', channelUsername, getTypeForRoute(type), 'top']" routerLinkActive="active" i18n>
+ <i class="material-icons">trending_up</i>
+ <span i18n>TOP</span>
+ </a>
 
-<!-- <a [routerLink]="['/pro', channelUsername, getTypeForRoute(type), 'latest']" routerLinkActive="active" i18n>-->
-<!-- <i class="material-icons">timelapse</i>-->
-<!-- <span i18n>LATEST</span>-->
-<!-- </a>-->
-<!--</div>-->
+ <a [routerLink]="['/pro', channelUsername, getTypeForRoute(type), 'latest']" routerLinkActive="active" i18n>
+ <i class="material-icons">timelapse</i>
+ <span i18n>LATEST</span>
+ </a>
+ </div>
+
+ <ng-container *ngIf="query !== ''">
+ <div class="m-proChannelListTools__searchresult">
+ <span> Showing results for: <strong> {{query}}</strong></span>
+ </div>
+ </ng-container>
+</div>
 
 <div class="m-proChannelList__content">
  <ul class="m-proChannelListContent__list" [class.m-proChannelListContent__normalList]="type === 'activities'">

src/app/modules/pro/channel/list/list.component.scss

@@ -5,16 +5,39 @@ m-pro--channel-list {
  margin: 0 0 0.4em;
  }
 
- .m-proChannelList__algorithm {
+ .m-proChannelList__tools {
  background-color: var(--plain-background-color) !important;
- width: fit-content;
- margin-left: 20px;
-
- i {
- vertical-align: middle;
- margin-right: 8px;
- font-size: 18px;
- color: #444 !important;
+ width: 100%;
+ padding: 20px;
+ height: 70px;
+ border-radius: 20px;
+ opacity: 0.9;
+ font-size: 16px;
+ font-family: Roboto,Helvetica,sans-serif;
+ letter-spacing: 1px;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ font-weight: 400;
+
+ .m-proChannelListTools__algorithm {
+ width: fit-content;
+
+ a {
+ margin-right: 10px;
+ text-decoration: none;
+ }
+
+ i {
+ vertical-align: middle;
+ margin-right: 8px;
+ font-size: 18px;
+ color: #444 !important;
+ }
+ }
+
+ .m-proChannelListTools__searchresult {
+ padding: 8px;
+ margin-top: 12px;
  }
  }
 

src/app/modules/pro/channel/list/list.component.ts

@@ -15,12 +15,15 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
  type: string;
 
  params$: Subscription;
- queryParams$: Subscription;
 
  entities: any[] = [];
 
  algorithm: string;
 
+ query: string;
+
+ period: string;
+
  constructor(
  public feedsService: FeedsService,
  protected channelService: ProChannelService,
@@ -31,12 +34,15 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
  }
 
  ngOnInit() {
+ this.listen();
+ }
+
+ private listen() {
  this.params$ = this.route.params.subscribe(params => {
  this.entities = [];
  if (params['type']) {
  this.type = params['type'];
  }
-
  switch (params['type']) {
  case 'videos':
  this.type = 'videos';
@@ -56,34 +62,28 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
  default:
  throw new Error('Unknown type');
  }
-
-
+ this.algorithm = params['algorithm'] || 'top';
+ this.query = params['query'] || '';
+ this.period = params['period'] || '';
  this.load(true);
  });
- this.queryParams$ = this.route.queryParams.subscribe(queryParams => {
- this.algorithm = queryParams['algorithm'] || 'top';
- });
 
- this.feedsService.feed.subscribe(async entities => {
+ this.feedsService.feed.subscribe(async (entities) => {
  if (!entities.length)
  return;
-
  for (const entity of entities) {
  if (entity)
  this.entities.push(await entity.pipe(first()).toPromise());
  }
-
  this.detectChanges();
  });
+
  }
 
  ngOnDestroy() {
  if (this.params$) {
  this.params$.unsubscribe();
  }
- if (this.queryParams$) {
- this.queryParams$.unsubscribe();
- }
  }
 
  async load(refresh: boolean = false) {
@@ -93,9 +93,14 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
 
  this.detectChanges();
 
+ let search = '';
+ if (this.query && (this.query !== '')) {
+ search = `?hashtags=null&period=${this.period}&all=1&query=${this.query}&nsfw=&sync=1&limit=150&as_activities=1&from_timestamp=`;
+ }
+
  try {
  this.feedsService
- .setEndpoint(`api/v2/feeds/channel/${this.channelService.currentChannel.guid}/${this.type}/${this.algorithm}`)
+ .setEndpoint(`api/v2/feeds/channel/${this.channelService.currentChannel.guid}/${this.type}/${this.algorithm}${search}`)
  .setLimit(9)
  .fetch();
 

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.html

@@ -14,28 +14,28 @@
  class="m-dropdownList__item m-pro-user-menuDropdown__item"
  (click)="closeMenu()"
  >
- <a [routerLink]="['/pro', channel.username, 'videos']" routerLinkActive="active" i18n>Videos</a>
+ <a [routerLink]="linkTo('videos', query)" routerLinkActive="active" i18n>Videos</a>
  </li>
 
  <li
  class="m-dropdownList__item m-pro-user-menuDropdown__item"
  (click)="closeMenu()"
  >
- <a [routerLink]="['/pro', channel.username, 'images']" routerLinkActive="active" i18n>Images</a>
+ <a [routerLink]="linkTo('images', query)" routerLinkActive="active" i18n>Images</a>
  </li>
 
  <li
  class="m-dropdownList__item m-pro-user-menuDropdown__item"
  (click)="closeMenu()"
  >
- <a [routerLink]="['/pro', channel.username, 'articles']" routerLinkActive="active" i18n>Articles</a>
+ <a [routerLink]="linkTo('articles', query)" routerLinkActive="active" i18n>Articles</a>
  </li>
 
  <li
  class="m-dropdownList__item m-pro-user-menuDropdown__item"
  (click)="closeMenu()"
  >
- <a [routerLink]="['/pro', channel.username, 'groups']" routerLinkActive="active" i18n>Groups</a>
+ <a [routerLink]="linkTo('groups', query)" routerLinkActive="active" i18n>Groups</a>
  </li>
 
  <li

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.ts

@@ -13,6 +13,7 @@ export class ProUserMenuComponent implements OnInit {
 
  @Input() channelName: string;
  @Input() showNavItems: boolean;
+ @Input() query: string;
 
  get channel() {
  return this.channelService.currentChannel;
@@ -48,4 +49,8 @@ export class ProUserMenuComponent implements OnInit {
  this.themeService.applyThemePreference();
  }
 
+ get linkTo() {
+ return this.channelService.linkTo.bind(this.channelService);
+ }
+
 }

src/app/modules/pro/pro.module.ts

@@ -49,7 +49,7 @@ const routes: Routes = [
  component: ProChannelSignupComponent
  },
  {
- path: ':type',
+ path: ':type/:algorithm',
  component: ProChannelListComponent,
  },
  ]