Remove bootstrap, add event specific rendering

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"

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">

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 (

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(", ")
 }

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';