Pull request #22: As/tradePage

Merge in LB/trading-post from as/tradePage to master

* commit '965e042f79a72a29478f7bcb9429f092a78e7531':
  null check on metrics
  added status icon to the trade page.

Author: qtbeee

src/components/Metric.vue

@@ -3,7 +3,7 @@ import * as Vue from "vue";
 
 interface Props {
     title: string;
-    value: string;
+    value?: string;
 }
 
 export default Vue.defineComponent({
@@ -12,7 +12,7 @@ export default Vue.defineComponent({
         return (): JSX.Element => (
             <div class="Metric-main">
                 <div class="Metric-title">{ props.title }:</div>
-                <div class="Metric-value">{ props.value }</div>
+                <div class="Metric-value">{ props.value ?? "-" }</div>
                 <div class="Metric-content">{ context.slots["default"]?.() }</div>
             </div>
         )

src/service/metrics.ts

@@ -30,22 +30,24 @@ export function userWithMostGold(): Metric {
 }
 
 // Emoji that has been requested the most times
-export function mostRequestedEmoji(): Metric {
+export function mostRequestedEmoji(): Metric | null{
     const trades = Array.from(state.network.trades.values());
     const requestedEmojis = new Map<Emoji, number>();
     for (const trade of trades) {
         Array.from(trade.requesteeEmoji)
             .map((emoji: Emoji) => requestedEmojis.set(emoji, (requestedEmojis.get(emoji) ?? 0) + 1));
     }
-
-    const emoji = Array.from(requestedEmojis.entries())
+    if (trades != null){
+        const emoji = Array.from(requestedEmojis.entries())
         .reduce((previous, current) => previous[1] > current[1] ? previous : current);
 
-    return { value: emoji[0], count: emoji[1] }
+        return { value: emoji[0], count: emoji[1] }
+    }
+    return null;
 }
 
 // Emoji that has been requested and accepted on either side of a trade the most times
-export function mostAcceptedEmoji(): Metric {
+export function mostAcceptedEmoji(): Metric | null{
     const trades = Array.from(state.network.trades.values());
     const acceptedTrades: Trade[] = trades.filter((trade) => trade.isAccepted);
     const requestedEmojis = new Map<Emoji, number>();
@@ -55,9 +57,11 @@ export function mostAcceptedEmoji(): Metric {
         const emojis = requestorEmoji.concat(requesteeEmoji);
         emojis.map((emoji: Emoji) => requestedEmojis.set(emoji, (requestedEmojis.get(emoji) ?? 0) + 1));
     }
+    if (trades != null) {
+        const emoji = Array.from(requestedEmojis.entries())
+            .reduce((previous, current) => previous[1] > current[1] ? previous : current);
 
-    const emoji = Array.from(requestedEmojis.entries())
-        .reduce((previous, current) => previous[1] > current[1] ? previous : current);
-
-    return { value: emoji[0], count: emoji[1] }
+        return { value: emoji[0], count: emoji[1] }
+    }
+    return null;
 }

src/service/mirror.ts

@@ -30,16 +30,23 @@ export function startListening(topicId: ConsensusTopicIdLike) {
             try {
                 data = JSON.parse(textDecoder.decode(response.message));
                 state.network.currentSequenceNumber = response.sequenceNumber;
-                if (state.network.currentSequenceNumber > state.network.sequenceLength) {
-                    getRunningHash(state.topicId!);
-                }
+
             } catch (err) {
                 // Event is unprocessable
                 // No worries
                 state.network.currentSequenceNumber += 1;
                 console.warn(err);
                 return;
             }
+
+            try {
+                if (state.network.currentSequenceNumber > state.network.sequenceLength) {
+                    getRunningHash(state.topicId!);
+                }
+            } catch (error) {
+                console.log(error);
+            }
+
             const event: Event = {
                 id: response.sequenceNumber,
                 timestamp: response.consensusTimestamp.asDate(),

src/views/Trade.vue

@@ -11,6 +11,7 @@ import Button from "../components/Button.vue";
 import { AllEmoji, Emoji, Gold } from "../domain/tokens";
 import * as tradeAccept from "../store/events/trade-accept";
 import { Trade } from "../domain/trade";
+import StatusIcon, { AcceptStatus } from "../components/StatusIcon.vue";
 
 export default Vue.defineComponent({
     name: "Trade",
@@ -36,6 +37,8 @@ export default Vue.defineComponent({
                 return null;
             }
 
+            const acceptStatus = trade.isAccepted ? AcceptStatus.accepted : (trade.isValid ? AcceptStatus.pending : AcceptStatus.rejected);
+
             let header;
 
             if (!trade.isAccepted && trade.isValid && trade.requestee.publicKey === getCurrentUser()!.publicKey) {
@@ -69,7 +72,10 @@ export default Vue.defineComponent({
                             onAddEmoji={()=>{}}
                             onRemoveEmoji={()=>{}}
                         />
-                        <Icon class="Trade-swapIcon" d={ mdiSwapHorizontalVariant } />
+                        <div class="Trade-middle">
+                            <StatusIcon class="TradeRow-accepted" accepted={ acceptStatus } />
+                            <Icon class="Trade-swapIcon" d={ mdiSwapHorizontalVariant } />
+                        </div>
                         <TradeWindow
                             readonly
                             user={ trade.requestee }
@@ -80,6 +86,9 @@ export default Vue.defineComponent({
                             onRemoveEmoji={()=>{}}
                         />
                     </div>
+                    <div class="Trade-back">
+                        <Button onClick={() => router.history.back()}>Go Back</Button>
+                    </div>
                 </div>
             );
         };
@@ -114,6 +123,12 @@ export default Vue.defineComponent({
     grid-template-columns: 1fr auto 1fr;
 }
 
+.Trade-middle {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
 .Trade-subTitle {
     opacity: 0.6;
     margin-block-start: 5px;
@@ -126,4 +141,10 @@ export default Vue.defineComponent({
     justify-self: center;
     align-self: center;
 }
+
+.Trade-back {
+    display: flex;
+    justify-content: flex-end;
+}
+
 </style>