better message grouping

components/chat.js

@@ -10,26 +10,40 @@ let chat = create({
     let tmpEvents = [
       {sender: "Foks", content: "Hello"},
       {sender: "Foks", content: "This is Neo v4"},
-      {sender: "Foks", content: "Here are a bunch of test messages\nWithout Multiple\nLines\n:("},
+      {sender: "Foks", content: "Here is one test event\nWith\n Multiple\nLines\n:)"},
       {sender: "Different Foks", content: "Look at these nice colors"},
       {sender: "Different Foks", content: "And the font"},
+      {sender: "Lain", content: "A single message"},
       {sender: "Different Foks", content: "And the avatars"},
       {sender: "Foks", content: "Every line has it's own message"},
       {sender: "Foks", content: "But if the sender is the same, we don't repeat the name+image"},
       {sender: "Foks", content: "Isn't message grouping great?"}
     ]
-    let lastSender = ""
-    let groupCount = 0
+    let messageGroups = {
+      current: [],
+      groups: [],
+      sender: ""
+    }
+
+    // if the sender is the same, add it to the 'current' messageGroup, if not,
+    // push the old one to 'groups' and start with a new array.
 
-    let events = tmpEvents.map((event, id) => {
-      if (event.sender == lastSender) {
-        groupCount++
-      } else {
-        groupCount = 0
-        lastSender = event.sender;
+    tmpEvents.forEach((event, id) => {
+      if (event.sender != messageGroups.sender) {
+        messageGroups.sender = event.sender
+        if (messageGroups.current.length != 0) {
+          messageGroups.groups.push(messageGroups.current)
+        }
+        messageGroups.current = []
       }
-      return <Event event={event} key={id} groupCount={groupCount}/>
+      messageGroups.current.push(event)
     })
+    messageGroups.groups.push(messageGroups.current)
+
+    let events = messageGroups.groups.map((events, id) => {
+      return <EventGroup events={events} key={id}/>
+    })
+
     //TODO: replace with something that only renders events in view
     return <div className="chat">
       <div className="events">
@@ -39,37 +53,41 @@ let chat = create({
   }
 })
 
-let Event = create({
-  displayName: "Event",
+let EventGroup = create({
+  displayName: "EventGroup",
 
   getInitialState: function() {
     let color = ["red", "green", "yellow", "blue", "purple", "cyan"][Math.floor(Math.random()*6)]
-    //TODO: HTML Sanitize
-    // needs an unsafe html content set
-    let parsedBody = this.props.event.content.replace(/\n/g, "<br>")
     return {
-      color: color,
-      parsedBody: parsedBody
+      color: color
     }
   },
 
   render: function() {
-    let className = "event"
-    if (this.props.groupCount > 0) {
-      className += " grouped"
-      if (this.props.groupCount == 1) {
-        className += " first"
-      }
-    }
-    return <div className={className}>
-      {this.props.groupCount == false &&
-        <svg id="avatar" data-jdenticon-value={this.props.event.sender}></svg>
-      }
+    let events = this.props.events.map((event, id) => {
+      return <Event event={event} key={id}/>
+    })
+    return <div className="eventGroup">
+      <svg id="avatar" data-jdenticon-value={this.props.events[0].sender}></svg>
+      <div className="col">
+        <div id="name" className={`fg-palet-${this.state.color}`}>{this.props.events[0].sender}</div>
+        {events}
+      </div>
+    </div>
+  }
+})
+
+let Event = create({
+  displayName: "Event",
+
+  render: function() {
+    //TODO: HTML Sanitize
+    let parsedBody = this.props.event.content.split("\n").map((line, id) => {
+      return <span key={id}>{line}<br/></span>
+    })
+    return <div className="event">
       <div className="body">
-        {this.props.groupCount == false &&
-          <div id="name" className={`fg-palet-${this.state.color}`}>{this.props.event.sender}</div>
-        }
-        <div id="content">{this.state.parsedBody}</div>
+        {parsedBody}
       </div>
     </div>
   }

package.json

@@ -22,6 +22,7 @@
     "gulp-concat": "^2.6.1",
     "gulp-sass": "^4.0.2",
     "gulp-util": "^3.0.8",
+    "jdenticon": "^2.1.1",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "webpack": "^4.27.1"

public/scss/style.scss

@@ -115,6 +115,7 @@ body {
 
     #avatar {
       border: 3px solid $amber;
+      transform: rotate(-5deg);
     }
 
     #name {
@@ -160,47 +161,50 @@ body {
     flex-direction: column;
     justify-content: flex-end;
     min-height: 100%;
-  }
-
-  .event {
-    flex: 0 0 auto;
-    display: flex;
 
-    .body {
-      padding: $spacing;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    #name {
-      font-weight: bold;
-      font-family: "Roboto Bold";
-      margin-bottom: 0.3 * $spacing;
-    }
-
-    #avatar {
-      height: 3rem;
-      width: 3rem;
-      object-fit: cover;
-
-      box-sizing: border-box;
-      object-fit: cover;
-      border: 3px solid lighten($bg0, 10);
-      margin-bottom: $spacing;
+    .eventGroup {
+      padding-top: $spacing;
+      display: grid;
+      grid-template-columns: 3rem auto;
+      grid-template-areas: "avatar content";
+      margin-bottom: $spacing/2;
+
+      #name {
+        font-weight: bold;
+        font-family: "Roboto Bold";
+        margin-bottom: 0.3 * $spacing;
+      }
+
+      #avatar {
+        height: 3rem;
+        width: 3rem;
+        object-fit: cover;
+
+        box-sizing: border-box;
+        object-fit: cover;
+        border: 3px solid lighten($bg0, 10);
+      }
+
+      .col {
+        grid-area: content;
+        padding-left: $spacing * 1.2;
+
+        .body {
+          /* debug */
+          //border: 1px solid $red;
+          padding: $spacing/4;
+        }
+
+        .body:hover {
+          border-radius: 0.5rem;
+          background-color: hsla(0, 100%, 100%, 0.05);
+          transition: 0.1s;
+        }
+      }
     }
   }
 }
 
-.event.grouped .body {
-  padding-bottom: $spacing;
-  margin-left: 3rem;
-}
-
-.event.grouped.first .body {
-  margin-top: -1.2 * $spacing;
-  padding-bottom: 0.3*$spacing;
-}
-
 .input {
   background: $bg1;
   display: flex;