PLT-946 Add status icon to the left of the username in DM channel (#3258)

Add a StatusIcon component to be able to display a status icon from anywhere

1 files changed, 37 insertions, 0 deletions

diff --git a/webapp/components/status_icon.jsx b/webapp/components/status_icon.jsx
new file mode 100644
index 000000000..a4242fb60
--- /dev/null
+++ b/webapp/components/status_icon.jsx
@@ -0,0 +1,37 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import Constants from 'utils/constants.jsx';
+
+import React from 'react';
+
+export default class StatusIcon extends React.Component {
+    render() {
+        const status = this.props.status;
+
+        if (!status) {
+            return null;
+        }
+
+        let statusIcon = '';
+        if (status === 'online') {
+            statusIcon = Constants.ONLINE_ICON_SVG;
+        } else if (status === 'away') {
+            statusIcon = Constants.AWAY_ICON_SVG;
+        } else {
+            statusIcon = Constants.OFFLINE_ICON_SVG;
+        }
+
+        return (
+            <span
+                className='status'
+                dangerouslySetInnerHTML={{__html: statusIcon}}
+            />
+        );
+    }
+
+}
+
+StatusIcon.propTypes = {
+    status: React.PropTypes.string.isRequired
+};
\ No newline at end of file