From 8070f24a84d8cc1dc7f2cacfa4e1ee39e61259c5 Mon Sep 17 00:00:00 2001
From: Rowan Seymour <rowanseymour@gmail.com>
Date: Mon, 29 Oct 2018 17:00:24 -0500
Subject: [PATCH] Remove bootstrap, add event specific rendering

---
 package-lock.json                |  5 --
 package.json                     |  1 -
 src/components/App.tsx           |  4 +-
 src/components/Timeline.tsx      |  2 +-
 src/components/TimelineEvent.tsx | 78 ++++++++++++++++++++++++--------
 src/index.tsx                    |  1 -
 6 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1e446c4..1f41d4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1370,11 +1370,6 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
-    "bootstrap": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.3.tgz",
-      "integrity": "sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w=="
-    },
     "boxen": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
diff --git a/package.json b/package.json
index e7d5bae..73cdab7 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "bootstrap": "^4.1.3",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "react-scripts-ts": "3.1.0"
diff --git a/src/components/App.tsx b/src/components/App.tsx
index f1736c5..adcf0fe 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -27,8 +27,8 @@ class App extends React.Component<Props, State> {
     return (
       <div className="App container">
         <div className="App-header"><h1>GoFlow Session Explain</h1></div>
-        <textarea id="source" className="App-source form-control" value={this.state.source} onChange={this.handleChange} />
-        <button onClick={this.explain} className="btn btn-primary">Explain</button>
+        <textarea id="source" className="App-source" value={this.state.source} onChange={this.handleChange} />
+        <button onClick={this.explain}>Explain</button>
         <div id="problems"></div>
         {this.state.explain != null &&
           <div id="explain">
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index ec5e58a..c3c0b6a 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -16,7 +16,7 @@ export class Timeline extends React.Component<Props> {
 
     public render() {
         const items = this.props.events.map((event, i) =>
-            <TimelineEvent event={event} index={i} />
+            <TimelineEvent event={event} key={i} />
         );
 
         return (
diff --git a/src/components/TimelineEvent.tsx b/src/components/TimelineEvent.tsx
index 900cc93..ae894ae 100644
--- a/src/components/TimelineEvent.tsx
+++ b/src/components/TimelineEvent.tsx
@@ -4,7 +4,6 @@ import { ExplainEvent } from 'src/utils/Explain';
 
 interface Props {
     event: ExplainEvent;
-    index: number;
 }
 
 export class TimelineEvent extends React.Component<Props> {
@@ -14,28 +13,69 @@ export class TimelineEvent extends React.Component<Props> {
     }
 
     render() {
-        var typeName = this.props.event.type;
-        var emoji: string;
-        var summary: string;
-        switch (typeName) {
-            case "msg_created":
-                emoji = "💬"
-                summary = "....."
-                break
-            default:
-                emoji = "❓"
-                summary = this.props.event.type
-        }
+        const eventObj: any = this.props.event.event;
+        var [emoji, summary] = this.renderType(this.props.event.type, eventObj);
 
         var body = JSON.stringify(this.props.event.event);
         return (
-            <li key={this.props.index}>
-                {emoji}
-                <span className="Event-time">{this.props.event.time.toISOString()}</span>
-                &nbsp;
-                <span className="Event-summary">{summary}</span>
+            <li>
+                <div>
+                    {emoji}
+                    &nbsp;
+                    <span className="Event-time">{this.props.event.time.toISOString()}</span>
+                    &nbsp;
+                    <span className="Event-summary">{summary}</span>
+                </div>
                 <div className="Event-body">{body}</div>
             </li>
-        )
+        );
+    }
+
+    // helper to return an emoji and a summary for each different event type
+    renderType(typeName: string, event: any): [string, string] {
+        switch (typeName) {
+            case "contact_field_changed":
+                return ["✏️", `field '${event.field.key}' changed to '${event.value.text}'`];
+            case "contact_groups_changed":
+                var msgs: string[] = [];
+                if (event.groups_added) {
+                    msgs.push(`added to ${extractNames(event.groups_added)}`);
+                }
+                if (event.groups_removed) {
+                    msgs.push(`removed from ${extractNames(event.groups_removed)}`);
+                }
+                return ["👪", msgs.join(", ")];
+            case "contact_name_changed":
+                return ["📛", `name changed to "${event.name}"`];
+            case "contact_language_changed":
+                return ["🌐", `language changed to '${event.language}'`];
+            case "contact_timezone_changed":
+                return ["🕑", `timezone changed to '${event.timezone}'`];
+            case "contact_urns_changed":
+                return ["☎️", `URNs changed to ${event.urns.join(", ")}`];
+            case "error":
+                return ["⚠️", event.text];
+            case "flow_triggered":
+                return ["↪️", `triggered flow '${event.flow.name}'`]
+            case "input_labels_added":
+                return ["🏷️", `labeled with ${extractNames(event.labels)}`]
+            case "msg_created":
+                return ["💬", `"${event.msg.text}"`];
+            case "msg_received":
+                return ["📥", `received message "${event.msg.text}"`];
+            case "msg_wait":
+                return ["⏳", "waiting for message..."];
+            case "run_result_changed":
+                return ["📈", `run result '${event.name}' changed to '${event.value}'`];
+            case "session_triggered":
+                return ["🌱", `triggered session ...`];
+            case "webhook_called":
+                return ["☁️", `called '${event.url}'`];
+        }
+        return ["❓", typeName];
     }
+}
+
+function extractNames(items: any[]): string {
+    return items.map((i) => `'${i.name}'`).join(", ")
 }
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 4247f37..a783f33 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,3 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import App from './components/App';