Redone UI, add leave and delete logic

src/Thread.js

@@ -1,13 +1,49 @@
 import React from 'react';
-import { Typography } from 'antd';
+import { Typography } from '@material-ui/core';
 import './Thread.css';
+import firebase from 'firebase/app';
+import 'firebase/auth';
 
-const Thread = props => 
-  props.messages.map(m => {
-    console.log(m);
+const Thread = (props) =>
+  props.messages.map((m, midx) => {
     if (m.uid === '<system>') {
-      return <Typography.Text className="thread-item system-message" key={m.id} disabled>{m.text}</Typography.Text>
+      return (
+        <Typography variant="body2" className="thread-item system-message" key={m.id} disabled>
+          {m.text}
+        </Typography>
+      );
+    } else if (m.uid === firebase.auth().currentUser.uid) {
+      return (
+        <div
+          className={`thread-item ${
+            midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? '' : 'no-space') : ''
+          }`}
+          key={m.id}
+        >
+          <Typography variant="body1" className="my-message">
+            {m.text}
+          </Typography>
+          <span className="time">{new Date(m.time).toLocaleTimeString()}</span>
+        </div>
+      );
+    } else {
+      return (
+        <div
+          className={`thread-item ${
+            midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? '' : 'no-space') : ''
+          }`}
+          key={m.id}
+        >
+          <Typography variant="caption" className="name">
+            {midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? m.name : '') : m.name}
+          </Typography>
+          <Typography variant="body1" className="party-message">
+            {m.text}
+          </Typography>
+          <span className="time">{new Date(m.time).toLocaleTimeString()}</span>
+        </div>
+      );
     }
   });
 
-  export default Thread;
+export default Thread;