From 0b7fe4c4f510d2cfc12995026b5332264cf017b7 Mon Sep 17 00:00:00 2001
From: Nicklas Ronge <nicklas.ronge@gmail.com>
Date: Wed, 24 Jun 2020 17:50:40 +0200
Subject: [PATCH] - added market search history

---
 CHANGELOG.md                                  |  11 +-
 README.md                                     |   2 -
 overlay.babel                                 |  57 +++++++++-
 src/app/core/annotation/annotation.service.ts |   2 +-
 .../market-exchange-bar.component.html        |  17 ++-
 .../market-exchange-bar.component.scss        |  19 ++++
 .../market-exchange-bar.component.ts          |  23 +++-
 .../market-exchange.component.html            |   4 +-
 .../market-exchange.component.ts              |   4 +-
 .../market-item-search-bar.component.html     |  34 ++++--
 .../market-item-search-bar.component.scss     |  22 +++-
 .../market-item-search-bar.component.ts       |  87 ++++++++++++---
 .../market-item-search.component.html         |   7 +-
 .../market-item-search.component.ts           |   4 +-
 src/app/shared/module/poe/poe.module.ts       |   9 +-
 .../poe/trade/chat/trade-chat-whisper.pipe.ts |   2 +-
 .../shared/module/poe/trade/exchange/index.ts |   2 +
 .../poe/trade/exchange/trade-exchange.pipe.ts |  12 ++
 .../poe/trade/fetch/trade-fetch-item.pipe.ts  |   6 +-
 src/app/shared/module/poe/trade/index.ts      |   1 +
 .../poe/trade/search/trade-search.pipe.ts     | 103 ++++++++++++++++++
 .../module/poe/trade/search/trade-search.ts   |  67 +++++++++++-
 22 files changed, 440 insertions(+), 55 deletions(-)
 create mode 100644 src/app/shared/module/poe/trade/exchange/trade-exchange.pipe.ts
 create mode 100644 src/app/shared/module/poe/trade/search/trade-search.pipe.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0aae91fa..b1f3a91c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,15 @@
 # Changelog
 
-## 1.0.5 (2020-06-22)
+## 1.0.6 (2020-06-25)
+
+- added market search history
+- added trade offer received timer
+- added trade player name
+- added trade go to hideout action
+- added harvest seeds evaluate support
+- fixed an issue at the market which resulted in crashing the app
+
+## 1.0.5 (2020-06-23)
 
 - added support page with discord and GitHub issues
 - added colors for life, mana and energy shield pseudo stats
diff --git a/README.md b/README.md
index 57be5ea0..667b08cb 100644
--- a/README.md
+++ b/README.md
@@ -24,10 +24,8 @@ The complete guide with pictures can be found [here](INSTALLING.md).
 | Market        | Search History  | 🚧     |
 | Market        | Save Queries    | 📚     |
 | Market        | Sort Results    | 📚     |
-| Stash         | Highlight Item  | 📚     |
 | Stash         | Filter Category | 📚     |
 | Stash         | Navigation      | ⚡     | Waiting 🐺
-| Trade         | Parsing Offers  | ⚡     | Waiting 🐺
 | Commands      | @latest_whisper | ⚡     | Waiting 🐺
 
 🚧 In Progress 📚 Backlog ⚡ Blocked 🐺 Overwolf 
diff --git a/overlay.babel b/overlay.babel
index 1d725aca..57dadbbb 100644
--- a/overlay.babel
+++ b/overlay.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.0">
+<babeledit_project be_version="2.7.0" version="1.2">
     <!--
 
     BabelEdit project file
@@ -130,7 +130,7 @@
                         </children>
                     </folder_node>
                     <folder_node>
-                        <name>changelog-1-0-5</name>
+                        <name>changelog-1-0-6</name>
                         <children>
                             <concept_node>
                                 <name>message</name>
@@ -14269,6 +14269,59 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>hideout</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description></description>
+                                <comment></comment>
+                                <default_text></default_text>
+                                <translations>
+                                    <translation>
+                                        <language>de-DE</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>es-ES</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>fr-FR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>pl-PL</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>pt-BR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ru-RU</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>th-TH</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>zh-CHS</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>zh-CHT</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>interested</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/src/app/core/annotation/annotation.service.ts b/src/app/core/annotation/annotation.service.ts
index b1e10594..a68130d1 100644
--- a/src/app/core/annotation/annotation.service.ts
+++ b/src/app/core/annotation/annotation.service.ts
@@ -95,7 +95,7 @@ const ANNOTATIONS: Annotation[] = [
         hotkey: Hotkey.SettingsToggle
     },
     { id: 'thanks' },
-    { id: 'changelog-1-0-5' },
+    { id: 'changelog-1-0-6' },
 ];
 
 @Injectable({
diff --git a/src/app/modules/market/component/market-exchange-bar/market-exchange-bar.component.html b/src/app/modules/market/component/market-exchange-bar/market-exchange-bar.component.html
index 9c6a0599..53def1dd 100644
--- a/src/app/modules/market/component/market-exchange-bar/market-exchange-bar.component.html
+++ b/src/app/modules/market/component/market-exchange-bar/market-exchange-bar.component.html
@@ -1,10 +1,23 @@
 <div class="wrapper">
     <input #input (keyup)="onKeyup(input)" [placeholder]="'market.exchange.highlight' | translate">
-    <button class="small" appAnnotation="market.filter" (click)="onToggleClick()" [title]="'market.bar.toggle' | translate">
+    <button class="small" appAnnotation="market.filter" (click)="onToggleClick()"
+        [title]="'market.bar.toggle' | translate">
         <mat-icon> filter_list </mat-icon>
     </button>
-    <button class="small" appAnnotation="market.reset" (click)="onClearClick()" [title]="'market.bar.reset' | translate">
+    <button class="small" appAnnotation="market.reset" (click)="onResetClick()"
+        [title]="'market.bar.reset' | translate">
         <mat-icon> history </mat-icon>
     </button>
+    <ng-container *ngIf="records$ | async as records">
+        <button class="small" (click)="recordsVisible$.next(!recordsVisible$.value)"
+            [title]="'market.bar.history' | translate" [disabled]="!records.length">
+            <mat-icon> history_edu </mat-icon>
+        </button>
+        <div class="records" *ngIf="recordsVisible$ | async">
+            <div class="record" *ngFor="let record of records" (click)="onResetClick(record)">
+                {{record | tradeExchangeText}}
+            </div>
+        </div>
+    </ng-container>
     <button (click)="onSearch()" appAnnotation="market.search">{{'market.bar.search' | translate}}</button>
 </div>
\ No newline at end of file
diff --git a/src/app/modules/market/component/market-exchange-bar/market-exchange-bar.component.scss b/src/app/modules/market/component/market-exchange-bar/market-exchange-bar.component.scss
index c7f8fbff..dd3256d6 100644
--- a/src/app/modules/market/component/market-exchange-bar/market-exchange-bar.component.scss
+++ b/src/app/modules/market/component/market-exchange-bar/market-exchange-bar.component.scss
@@ -14,3 +14,22 @@
     }
   }
 }
+
+.records {
+  position: absolute;
+  z-index: 2000;
+  top: 35px;
+  left: 0;
+  right: 0;
+  background: $black;
+  border: 1px solid $brown;
+}
+
+.record {
+  padding: $gutter $gutter * 2;
+  cursor: pointer;
+
+  &:hover {
+    background: $light-brown;
+  }
+}
diff --git a/src/app/modules/market/component/market-exchange-bar/market-exchange-bar.component.ts b/src/app/modules/market/component/market-exchange-bar/market-exchange-bar.component.ts
index 5b9d65d8..7e4dfca0 100644
--- a/src/app/modules/market/component/market-exchange-bar/market-exchange-bar.component.ts
+++ b/src/app/modules/market/component/market-exchange-bar/market-exchange-bar.component.ts
@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { TradeExchangeRequest } from '@shared/module/poe/trade/exchange';
+import { BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'app-market-exchange-bar',
@@ -9,11 +11,17 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angul
 export class MarketExchangeBarComponent {
   private toggled = false;
 
+  public records$ = new BehaviorSubject<TradeExchangeRequest[]>([]);
+  public recordsVisible$ = new BehaviorSubject<boolean>(false);
+
+  @Input()
+  public request: TradeExchangeRequest;
+
   @Output()
   public highlight = new EventEmitter<string>();
 
   @Output()
-  public clear = new EventEmitter<void>();
+  public reset = new EventEmitter<TradeExchangeRequest>();
 
   @Output()
   public toggle = new EventEmitter<boolean>();
@@ -25,8 +33,9 @@ export class MarketExchangeBarComponent {
     this.highlight.next((input.value || '').toLowerCase());
   }
 
-  public onClearClick(): void {
-    this.clear.next();
+  public onResetClick(request?: TradeExchangeRequest): void {
+    this.recordsVisible$.next(false);
+    this.reset.next(request);
   }
 
   public onToggleClick(): void {
@@ -35,6 +44,12 @@ export class MarketExchangeBarComponent {
   }
 
   public onSearch(): void {
+    this.recordsVisible$.next(false);
+    this.records$.value.unshift(JSON.parse(JSON.stringify(this.request)));
+    if (this.records$.value.length > 10) {
+      this.records$.value.pop();
+    }
+    this.records$.next(this.records$.value);
     this.search.next();
   }
 }
diff --git a/src/app/modules/market/component/market-exchange/market-exchange.component.html b/src/app/modules/market/component/market-exchange/market-exchange.component.html
index 075fe795..03ff2d9a 100644
--- a/src/app/modules/market/component/market-exchange/market-exchange.component.html
+++ b/src/app/modules/market/component/market-exchange/market-exchange.component.html
@@ -1,5 +1,5 @@
-<app-market-exchange-bar (search)="onSearch()" (toggle)="onToggle($event)" (highlight)="onHighlight($event)"
-    (clear)="onClear()">
+<app-market-exchange-bar [request]="request" (search)="onSearch()" (toggle)="onToggle($event)"
+    (highlight)="onHighlight($event)" (reset)="onReset($event)">
 </app-market-exchange-bar>
 
 <div class="content">
diff --git a/src/app/modules/market/component/market-exchange/market-exchange.component.ts b/src/app/modules/market/component/market-exchange/market-exchange.component.ts
index be09c90f..ba066aa0 100644
--- a/src/app/modules/market/component/market-exchange/market-exchange.component.ts
+++ b/src/app/modules/market/component/market-exchange/market-exchange.component.ts
@@ -93,8 +93,8 @@ export class MarketExchangeComponent implements OnInit, OnDestroy {
     this.page$.next(this.page$.value + 1);
   }
 
-  public onClear(): void {
-    this.request = DEFAULT_REQUEST();
+  public onReset(request?: TradeExchangeRequest): void {
+    this.request = request || DEFAULT_REQUEST();
     this.initSearch();
     this.clear();
   }
diff --git a/src/app/modules/market/component/market-item-search-bar/market-item-search-bar.component.html b/src/app/modules/market/component/market-item-search-bar/market-item-search-bar.component.html
index 03e70d43..7075e5d9 100644
--- a/src/app/modules/market/component/market-item-search-bar/market-item-search-bar.component.html
+++ b/src/app/modules/market/component/market-item-search-bar/market-item-search-bar.component.html
@@ -1,17 +1,33 @@
 <div class="input-container">
     <input #input [placeholder]="'market.search.search' | translate" (keyup)="onKeyup()" (focus)="onFocus()"
         (blur)="onBlur($event)">
-    <button class="small" appAnnotation="market.filter" (click)="onToggleClick()" [title]="'market.bar.toggle' | translate">
+    <button class="small" appAnnotation="market.filter" (click)="onToggleClick()"
+        [title]="'market.bar.toggle' | translate">
         <mat-icon> filter_list </mat-icon>
     </button>
-    <button class="small" appAnnotation="market.reset" (click)="onClearClick()" [title]="'market.bar.reset' | translate">
-        <mat-icon> history </mat-icon>
+    <button class="small" appAnnotation="market.reset" (click)="onResetClick()"
+        [title]="'market.bar.reset' | translate">
+        <mat-icon> restore </mat-icon>
     </button>
-    <button (click)="onSearch()" appAnnotation="market.search">{{'market.bar.search' | translate}}</button>
-    <cdk-virtual-scroll-viewport class="filter" [class.shown]="filterVisible$ | async" itemSize="30" minBufferPx="200"
-        maxBufferPx="400">
-        <div class="entry" [class.group]="entry.group" [class.item]="!entry.group" [innerHTML]="entry.text"
-            (click)="onItemClick(entry.value)" *cdkVirtualFor="let entry of entries$ | async; templateCacheSize: 0">
+    <ng-container *ngIf="records$ | async as records">
+        <button class="small" (click)="recordsVisible$.next(!recordsVisible$.value)"
+            [title]="'market.bar.history' | translate" [disabled]="!records.length">
+            <mat-icon> history_edu </mat-icon>
+        </button>
+        <div class="records" *ngIf="recordsVisible$ | async">
+            <div class="record" *ngFor="let record of records" (click)="onResetClick(record)">
+                {{record | tradeSearchText}}
+            </div>
         </div>
-    </cdk-virtual-scroll-viewport>
+    </ng-container>
+    <button (click)="onSearch()" appAnnotation="market.search">{{'market.bar.search' | translate}}</button>
+    <ng-container *ngIf="entries$ | async as entries">
+        <cdk-virtual-scroll-viewport class="filter"
+            [style.height.px]="(entries.length * 30 > 240 ? 240 : entries.length * 30)"
+            [class.shown]="filterVisible$ | async" itemSize="30" minBufferPx="200" maxBufferPx="400">
+            <div class="entry" [class.group]="entry.group" [class.item]="!entry.group" [innerHTML]="entry.text"
+                (click)="onItemClick(entry.value)" *cdkVirtualFor="let entry of entries; templateCacheSize: 0">
+            </div>
+        </cdk-virtual-scroll-viewport>
+    </ng-container>
 </div>
\ No newline at end of file
diff --git a/src/app/modules/market/component/market-item-search-bar/market-item-search-bar.component.scss b/src/app/modules/market/component/market-item-search-bar/market-item-search-bar.component.scss
index b94c9291..c17f3dfb 100644
--- a/src/app/modules/market/component/market-item-search-bar/market-item-search-bar.component.scss
+++ b/src/app/modules/market/component/market-item-search-bar/market-item-search-bar.component.scss
@@ -29,7 +29,8 @@
     left: 0;
     right: 0;
     height: 240px;
-    background: $black-transparent;
+    min-height: 30px;
+    background: $black;
     border: 1px solid $brown;
 
     &.shown {
@@ -54,3 +55,22 @@
     }
   }
 }
+
+.records {
+  position: absolute;
+  z-index: 2000;
+  top: 35px;
+  left: 0;
+  right: 0;
+  background: $black;
+  border: 1px solid $brown;
+}
+
+.record {
+  padding: $gutter $gutter * 2;
+  cursor: pointer;
+
+  &:hover {
+    background: $light-brown;
+  }
+}
diff --git a/src/app/modules/market/component/market-item-search-bar/market-item-search-bar.component.ts b/src/app/modules/market/component/market-item-search-bar/market-item-search-bar.component.ts
index 46f85719..d6a3dd3c 100644
--- a/src/app/modules/market/component/market-item-search-bar/market-item-search-bar.component.ts
+++ b/src/app/modules/market/component/market-item-search-bar/market-item-search-bar.component.ts
@@ -16,8 +16,13 @@ interface MarektItemSearchEntry {
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MarketItemSearchBarComponent implements OnInit {
+  private _request: TradeSearchRequest;
+
   public entries$: Observable<MarektItemSearchEntry[]>;
 
+  public records$ = new BehaviorSubject<TradeSearchRequest[]>([]);
+  public recordsVisible$ = new BehaviorSubject<boolean>(false);
+
   public toggle$ = new BehaviorSubject<boolean>(false);
   public inputValue$ = new BehaviorSubject<string>('');
   public filterVisible$ = new BehaviorSubject<boolean>(false);
@@ -25,8 +30,15 @@ export class MarketItemSearchBarComponent implements OnInit {
   @ViewChild('input', { static: true })
   public ref: ElementRef<HTMLInputElement>;
 
+  public get request(): TradeSearchRequest {
+    return this._request;
+  }
+
   @Input()
-  public request: TradeSearchRequest;
+  public set request(request: TradeSearchRequest) {
+    this._request = request;
+    this.update();
+  }
 
   @Output()
   public search = new EventEmitter<void>();
@@ -35,7 +47,7 @@ export class MarketItemSearchBarComponent implements OnInit {
   public toggle = new EventEmitter<boolean>();
 
   @Output()
-  public clear = new EventEmitter<void>();
+  public reset = new EventEmitter<TradeSearchRequest>();
 
   constructor(private readonly items: TradeItemsService) { }
 
@@ -44,6 +56,12 @@ export class MarketItemSearchBarComponent implements OnInit {
   }
 
   public onSearch(): void {
+    this.recordsVisible$.next(false);
+    this.records$.value.unshift(JSON.parse(JSON.stringify(this.request)));
+    if (this.records$.value.length > 10) {
+      this.records$.value.pop();
+    }
+    this.records$.next(this.records$.value);
     this.search.next();
   }
 
@@ -52,22 +70,19 @@ export class MarketItemSearchBarComponent implements OnInit {
     this.toggle.next(this.toggle$.value);
   }
 
-  public onClearClick(): void {
-    // TODO: fill value based on request
-    this.ref.nativeElement.value = '';
-    this.clear.next();
+  public onResetClick(request?: TradeSearchRequest): void {
+    this.recordsVisible$.next(false);
+    this.reset.next(request);
   }
 
   public onItemClick(item: TradeItem): void {
-    if (item) {
-      this.updateRequest(item);
-      this.ref.nativeElement.value = item.text;
-    }
+    this.filterVisible$.next(false);
+    this.updateRequest(item);
   }
 
   public onKeyup(): void {
-    this.updateRequest(null);
-    this.inputValue$.next(this.ref.nativeElement.value || '');
+    this.resetRequest();
+    this.setViewValue(this.ref.nativeElement.value || '');
   }
 
   public onFocus(): void {
@@ -76,14 +91,16 @@ export class MarketItemSearchBarComponent implements OnInit {
 
   public onBlur(event: FocusEvent): void {
     event.preventDefault();
-    this.updateRequest(null);
-    this.ref.nativeElement.value = '';
-
+    this.resetRequest();
     setTimeout(() => {
-      this.inputValue$.next(this.ref.nativeElement.value);
       this.filterVisible$.next(false);
-      this.ref.nativeElement.blur();
-    }, 200);
+      this.update();
+    }, 200)
+  }
+
+  private resetRequest(): void {
+    delete this.request.query.name;
+    delete this.request.query.type;
   }
 
   private updateRequest(item: TradeItem): void {
@@ -97,6 +114,40 @@ export class MarketItemSearchBarComponent implements OnInit {
     } else {
       delete this.request.query.name;
     }
+    this.update();
+  }
+
+  private update(): void {
+    const { type, name } = this.request.query;
+    const hasType = type?.length;
+    const hasName = name?.length;
+    if (hasType || hasName) {
+      this.items.get().subscribe(items => {
+        let found = false;
+        for (let group of items) {
+          for (let item of group.items) {
+            if ((!hasType || item.type === type) && (!hasName || item.name === name)) {
+              found = true;
+              this.setViewValue(item.text);
+              break;
+            }
+          }
+          if (found) {
+            break;
+          }
+        }
+        if (!found) {
+          this.updateRequest(null);
+        }
+      });
+    } else {
+      this.setViewValue('');
+    }
+  }
+
+  private setViewValue(value: string): void {
+    this.ref.nativeElement.value = value;
+    this.inputValue$.next(this.ref.nativeElement.value);
   }
 
   private loadEntries(): void {
diff --git a/src/app/modules/market/component/market-item-search/market-item-search.component.html b/src/app/modules/market/component/market-item-search/market-item-search.component.html
index 4ec4104a..328629eb 100644
--- a/src/app/modules/market/component/market-item-search/market-item-search.component.html
+++ b/src/app/modules/market/component/market-item-search/market-item-search.component.html
@@ -1,4 +1,5 @@
-<app-market-item-search-bar [request]="request" (search)="onSearch()" (toggle)="onToggle($event)" (clear)="onClear()">
+<app-market-item-search-bar [request]="request" (search)="onSearch()" (toggle)="onToggle($event)"
+    (reset)="onReset($event)">
 </app-market-item-search-bar>
 
 <div class="content">
@@ -13,8 +14,8 @@
                     <div class="result">
                         <app-market-infinite-scroll *ngIf="last" [root]="root" (visible)="onNext()">
                         </app-market-infinite-scroll>
-                        <div class="item">
-                            <app-item-frame [item]="entry.item | tradeFetchItem"></app-item-frame>
+                        <div class="item" *ngIf="entry.item | tradeFetchItem as item; else empty">
+                            <app-item-frame [item]="item"></app-item-frame>
                         </div>
                         <div class="listing">
                             <app-market-listing-status class="status" [status]="entry.listing.status">
diff --git a/src/app/modules/market/component/market-item-search/market-item-search.component.ts b/src/app/modules/market/component/market-item-search/market-item-search.component.ts
index e0e032f6..34d3765c 100644
--- a/src/app/modules/market/component/market-item-search/market-item-search.component.ts
+++ b/src/app/modules/market/component/market-item-search/market-item-search.component.ts
@@ -100,8 +100,8 @@ export class MarketItemSearchComponent implements OnInit, OnDestroy {
     this.page$.next(this.page$.value + 1);
   }
 
-  public onClear(): void {
-    this.request = DEFAULT_REQUEST();
+  public onReset(request?: TradeSearchRequest): void {
+    this.request = request || DEFAULT_REQUEST();
     this.initSearch();
     this.clear();
   }
diff --git a/src/app/shared/module/poe/poe.module.ts b/src/app/shared/module/poe/poe.module.ts
index cdec2ae6..35e42de9 100644
--- a/src/app/shared/module/poe/poe.module.ts
+++ b/src/app/shared/module/poe/poe.module.ts
@@ -10,8 +10,9 @@ import { BaseItemTypePipe } from './item/base-item-type';
 import { ItemFrameComponent, ItemFrameHeaderComponent, ItemFrameInfluencesComponent, ItemFrameLevelRequirementsComponent, ItemFramePropertiesComponent, ItemFrameQueryComponent, ItemFrameSeparatorComponent, ItemFrameSocketsComponent, ItemFrameStateComponent, ItemFrameStatsComponent, ItemFrameValueComponent, ItemFrameValueGroupComponent, ItemFrameValueInputComponent } from './item/frame';
 import { StatGroupPipe, StatTransformPipe } from './item/stat';
 import { WordPipe } from './item/word';
-import { TradeFetchItemPipe, TradeStatsPipe, TradeStatsTypePipe } from './trade';
-import { TradeWhisperTitle } from './trade/chat';
+import { TradeFetchItemPipe, TradeSearchTextPipe, TradeStatsPipe, TradeStatsTypePipe } from './trade';
+import { TradeWhisperTitlePipe } from './trade/chat';
+import { TradeExchangeTextPipe } from './trade/exchange';
 import { TradeStaticFrameComponent, TradeStaticPipe } from './trade/statics';
 
 const COMPONENTS = [
@@ -26,7 +27,9 @@ const PIPES = [
     TradeStatsPipe,
     TradeStatsTypePipe,
     TradeFetchItemPipe,
-    TradeWhisperTitle
+    TradeWhisperTitlePipe,
+    TradeSearchTextPipe,
+    TradeExchangeTextPipe
 ];
 
 @NgModule({
diff --git a/src/app/shared/module/poe/trade/chat/trade-chat-whisper.pipe.ts b/src/app/shared/module/poe/trade/chat/trade-chat-whisper.pipe.ts
index 958a1285..3bc892a0 100644
--- a/src/app/shared/module/poe/trade/chat/trade-chat-whisper.pipe.ts
+++ b/src/app/shared/module/poe/trade/chat/trade-chat-whisper.pipe.ts
@@ -4,7 +4,7 @@ import { TradeWhisper, TradeWhisperDirection } from './trade-chat';
 @Pipe({
     name: 'tradeWhisperTitle'
 })
-export class TradeWhisperTitle implements PipeTransform {
+export class TradeWhisperTitlePipe implements PipeTransform {
     public transform(whispers: TradeWhisper[]): string {
         return `\n${whispers.map(whisper => {
             const prefix = whisper.direction === TradeWhisperDirection.Incoming ? '@From' : '@To';
diff --git a/src/app/shared/module/poe/trade/exchange/index.ts b/src/app/shared/module/poe/trade/exchange/index.ts
index d110f372..86663992 100644
--- a/src/app/shared/module/poe/trade/exchange/index.ts
+++ b/src/app/shared/module/poe/trade/exchange/index.ts
@@ -1,2 +1,4 @@
 export * from './trade-exchange';
+export * from './trade-exchange.pipe';
 export * from './trade-exchange.service';
+
diff --git a/src/app/shared/module/poe/trade/exchange/trade-exchange.pipe.ts b/src/app/shared/module/poe/trade/exchange/trade-exchange.pipe.ts
new file mode 100644
index 00000000..3d171e96
--- /dev/null
+++ b/src/app/shared/module/poe/trade/exchange/trade-exchange.pipe.ts
@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TradeExchangeRequest } from './trade-exchange';
+
+@Pipe({
+    name: 'tradeExchangeText'
+})
+export class TradeExchangeTextPipe implements PipeTransform {
+    public transform(request: TradeExchangeRequest): string {
+        const { have, want, minimum } = request.exchange;
+        return `${have.join(', ')} <> ${want.join(', ')} (min: ${minimum ? minimum : 'any'})`;
+    }
+}
diff --git a/src/app/shared/module/poe/trade/fetch/trade-fetch-item.pipe.ts b/src/app/shared/module/poe/trade/fetch/trade-fetch-item.pipe.ts
index 0700153a..10727e3e 100644
--- a/src/app/shared/module/poe/trade/fetch/trade-fetch-item.pipe.ts
+++ b/src/app/shared/module/poe/trade/fetch/trade-fetch-item.pipe.ts
@@ -20,7 +20,11 @@ export class TradeFetchItemPipe implements PipeTransform {
                 return filter;
             }, {})
         );
-        this.processor.process(item, { normalizeQuality: true });
+        if (item) {
+            this.processor.process(item, { normalizeQuality: true });
+        } else {
+            console.warn(`Could not parse item for market. ${fetchItem.text}`);
+        }
         return item;
     }
 }
diff --git a/src/app/shared/module/poe/trade/index.ts b/src/app/shared/module/poe/trade/index.ts
index 49b58add..980c9a3d 100644
--- a/src/app/shared/module/poe/trade/index.ts
+++ b/src/app/shared/module/poe/trade/index.ts
@@ -10,6 +10,7 @@ export * from './leagues/trade-leagues.service';
 export * from './search/trade-search';
 export * from './search/trade-search-options';
 export * from './search/trade-search-request.service';
+export * from './search/trade-search.pipe';
 export * from './search/trade-search.service';
 export * from './statics/trade-statics';
 export * from './statics/trade-statics.service';
diff --git a/src/app/shared/module/poe/trade/search/trade-search.pipe.ts b/src/app/shared/module/poe/trade/search/trade-search.pipe.ts
new file mode 100644
index 00000000..4e012cb5
--- /dev/null
+++ b/src/app/shared/module/poe/trade/search/trade-search.pipe.ts
@@ -0,0 +1,103 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { RARITIES, TradeSearchRequest, TYPES as CATEGORIES } from './trade-search';
+
+@Pipe({
+    name: 'tradeSearchText'
+})
+export class TradeSearchTextPipe implements PipeTransform {
+    public transform(request: TradeSearchRequest): string {
+        const parts = [];
+        const { query } = request;
+        if (query) {
+            if (query.name?.length || query.type?.length) {
+                const text = [];
+                if (query.name?.length) {
+                    text.push(query.name);
+                }
+                if (query.type?.length) {
+                    text.push(query.type);
+                }
+                parts.push(text.join(' '));
+            } else {
+                parts.push('Any')
+            }
+
+            const { filters } = query;
+            if (filters) {
+                parts.push(' (');
+
+                const { type_filters } = filters;
+                parts.push('Type: ');
+                if (type_filters?.filters?.category || type_filters?.filters?.rarity) {
+                    const type = [];
+                    if (type_filters.filters.category?.option?.length) {
+                        type.push(CATEGORIES[type_filters.filters.category.option]);
+                    }
+                    if (type_filters.filters.rarity?.option?.length) {
+                        type.push(RARITIES[type_filters.filters.rarity.option]);
+                    }
+                    parts.push(type.join(' with '));
+                } else {
+                    parts.push('Any');
+                }
+
+                const { socket_filters } = filters;
+                parts.push(', Sockets: ');
+                if (socket_filters?.filters?.sockets) {
+                    const { sockets } = socket_filters.filters;
+                    const socket = [];
+                    if (sockets.r) {
+                        socket.push(`R${sockets.r}`)
+                    }
+                    if (sockets.g) {
+                        socket.push(`G${sockets.g}`)
+                    }
+                    if (sockets.b) {
+                        socket.push(`B${sockets.b}`)
+                    }
+                    if (sockets.w) {
+                        socket.push(`W${sockets.w}`)
+                    }
+                    if (sockets.min) {
+                        socket.push(`Min${sockets.min}`)
+                    }
+                    if (sockets.max) {
+                        socket.push(`Max${sockets.max}`)
+                    }
+                    parts.push(socket.join(' '));
+                } else {
+                    parts.push('Any');
+                }
+
+                parts.push(', Links: ');
+                if (socket_filters?.filters?.links) {
+                    const { links } = socket_filters.filters;
+                    const link = [];
+                    if (links.r) {
+                        link.push(`R${links.r}`)
+                    }
+                    if (links.g) {
+                        link.push(`G${links.g}`)
+                    }
+                    if (links.b) {
+                        link.push(`B${links.b}`)
+                    }
+                    if (links.w) {
+                        link.push(`W${links.w}`)
+                    }
+                    if (links.min) {
+                        link.push(`Min${links.min}`)
+                    }
+                    if (links.max) {
+                        link.push(`Max${links.max}`)
+                    }
+                    parts.push(link.join('-'));
+                } else {
+                    parts.push('Any');
+                }
+                parts.push(')');
+            }
+        }
+        return parts.join('');
+    }
+}
diff --git a/src/app/shared/module/poe/trade/search/trade-search.ts b/src/app/shared/module/poe/trade/search/trade-search.ts
index 1b5b80a9..5353b3c1 100644
--- a/src/app/shared/module/poe/trade/search/trade-search.ts
+++ b/src/app/shared/module/poe/trade/search/trade-search.ts
@@ -1,5 +1,70 @@
 import { Language, TradeSearchHttpRequest } from '@data/poe/schema';
 
+export const TYPES = {
+    'weapon': 'Any Weapon',
+    'weapon.one': 'One-Handed Weapon',
+    'weapon.onemelee': 'One-Handed Melee Weapon',
+    'weapon.twomelee': 'Two-Handed Melee Weapon',
+    'weapon.bow': 'Bow',
+    'weapon.claw': 'Claw',
+    'weapon.dagger': 'Any Dagger',
+    'weapon.runedagger': 'Rune Dagger',
+    'weapon.oneaxe': 'One-Handed Axe',
+    'weapon.onemac': 'One-Handed Mac',
+    'weapon.onesword': 'One-Handed Sword',
+    'weapon.sceptre': 'Sceptre',
+    'weapon.staff': 'Any Staff',
+    'weapon.warstaff': 'Warstaff',
+    'weapon.twoaxe': 'Two-Handed Axe',
+    'weapon.twomac': 'Two-Handed Mac',
+    'weapon.twosword': 'Two-Handed Sword',
+    'weapon.wand': 'Wand',
+    'weapon.rod': 'Fishing Rod',
+    'armour': 'Any Armour',
+    'armour.chest': 'Body Armour',
+    'armour.boots': 'Boots',
+    'armour.gloves': 'Gloves',
+    'armour.helmet': 'Helmet',
+    'armour.shield': 'Shield',
+    'armour.quiver': 'Quiver',
+    'accessory': 'Any Accessory',
+    'accessory.amulet': 'Amulet',
+    'accessory.belt': 'Belt',
+    'accessory.ring': 'Ring',
+    'gem': 'Any Gem',
+    'gem.activegem': 'Skill Gem',
+    'gem.supportgem': 'Support Gem',
+    'gem.supportgemplus': 'Awakened Support Gem',
+    'jewel': 'Any Jewel',
+    'jewel.base': 'Base Jewel',
+    'jewel.abyss': 'Abyss Jewel',
+    'jewel.cluster': 'Cluster Jewel',
+    'flask': 'Flask',
+    'map': 'Map',
+    'map.fragment': 'Map Fragment',
+    'map.scarab': 'Scarab',
+    'watchstone': 'Watchstone',
+    'leaguestone': 'Leaguestone',
+    'prophecy': 'Prophecy',
+    'card': 'Card',
+    'monster.beast': 'Captured Beast',
+    'monster.sample': 'Metamorph Sample',
+    'currency': 'Any Currency',
+    'currency.piece': 'Unique Fragment',
+    'currency.resonator': 'Resonator',
+    'currency.fossil': 'Fossil',
+    'currency.incubator': 'Incubator',
+}
+
+export const RARITIES = {
+    'normal': 'Normal',
+    'magic': 'Magic',
+    'rare': 'Rare',
+    'unique': 'Unique',
+    'uniquefoil': 'Unique (Relic)',
+    'nonunique': 'Any Non-Unique',
+};
+
 export interface TradeSearchResponse {
     id: string;
     url: string;
@@ -8,4 +73,4 @@ export interface TradeSearchResponse {
     total: number;
 }
 
-export type TradeSearchRequest = TradeSearchHttpRequest;
+export type TradeSearchRequest = TradeSearchHttpRequest;
\ No newline at end of file