Add front style using previous frontend code

jpenna · Jan 18, 2017 · f4f9481 · f4f9481
1 parent efe7981
commit f4f9481
Show file tree

Hide file tree

Showing 110 changed files with 39,121 additions and 5 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 /node_modules
+/old
diff --git a/package.json b/package.json
@@ -7,27 +7,35 @@
     "node": "6.9.2"
   },
   "scripts": {
-    "start": "node server/server.js",
+    "build": "webpack --config webpack.config.js",
     "test": "export NODE_ENV=test || SET \"NODE_ENV=test\" && mocha */tests/**.tests.js",
     "test-watch": "nodemon --exec 'npm test'"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "babel-core": "^6.21.0",
+    "babel-loader": "^6.2.10",
+    "babel-preset-env": "^1.1.8",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
     "eslint": "^3.13.1",
     "eslint-config-airbnb": "^14.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^3.0.2",
     "eslint-plugin-react": "^6.9.0",
     "expect": "^1.20.2",
-    "mocha": "^3.2.0"
+    "mocha": "^3.2.0",
+    "webpack": "^1.14.0"
   },
   "dependencies": {
     "botgram": "^2.0.0-beta2",
     "express": "^4.14.0",
     "lodash": "^4.17.4",
     "moment": "^2.17.1",
     "mongoose": "^4.7.7",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
     "socket.io": "^1.7.2"
   }
 }
diff --git a/public/chatRoom/chatRoom.html b/public/chatRoom/chatRoom.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+
+  <title>Telebot App 2</title>
+
+  <!-- <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon/favicon-32x32.png"> -->
+  <link rel="stylesheet" href="/style/bulma/css/bulma.css">
+  <link rel="stylesheet" href="/style/font-awesome-4.7.0/css/font-awesome.css">
+  <link rel="stylesheet" href="/style/css/chatRoom.css">
+
+  <script src="/socket.io/socket.io.js"></script>
+  <script> const socket = io.connect(); </script>
+  <script src="/script/socketMethods.js"></script>
+</head>
+<body>
+
+  <div id="container"></div>
+
+  <script src="/script/bundle.js"></script>
+</body>
diff --git a/public/chatRoom/components/chatRoom.react.js b/public/chatRoom/components/chatRoom.react.js
@@ -0,0 +1,147 @@
+/* eslint-disable */
+const React = require('react');
+const ReactDOM = require('react-dom');
+const ChatList = require('./chatsList/ChatList.react');
+const MessagesPanel = require('./messagesPanel/MessagesPanel.react');
+
+class ChatRoom extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    // this.socket = socket;
+
+    this.state = {
+      chats: props.chats.chats,
+      activeId: props.chats.activeId,
+    }
+
+    this.changeActive = this.changeActive.bind(this);
+    this.newMessage = this.newMessage.bind(this);
+    this.insertNewMessage = this.insertNewMessage.bind(this);
+    this.insertNewClient = this.insertNewClient.bind(this);
+  }
+
+  insertNewMessage(chatId, author, type, text, sentAt) {
+    const chatMessage = {
+      author: author,
+      type: type,
+      message: text,
+      sentAt: sentAt
+    }
+
+    const newChat = this.state.chats;
+    newChat[chatId].messages.push(chatMessage);
+
+    this.setState({chats: newChat})
+  }
+
+  insertNewClient(clientData) {
+
+    const client = {
+      chat_id: clientData.chatId,
+      firstname: clientData.firstname,
+      lastname: clientData.lastname,
+      avatar: clientData.avatar,
+      messages: []
+    }
+
+    const chats = this.state.chats;
+    chats[clientData.chatId] = client;
+
+    this.setState({chats: chats});
+
+  }
+
+  componentWillMount() {
+    window.newUser = (data) => {
+
+      const client = {
+        chatId: data.chat_id,
+        firstname: data.firstname,
+        lastname: data.lastname,
+        avatar: data.avatar,
+        messages: []
+      }
+
+      this.insertNewClient(client)
+
+    }
+
+    window.newMessage = (data) => {
+
+      const chatId = data.chatId;
+      const author = data.author;
+      const type = data.type;
+      const text = data.text;
+      const sentAt = data.sentAt;
+
+      this.insertNewMessage(chatId, author, type, text, sentAt)
+
+    };
+
+
+  }
+
+  componentDidMount() {
+    this.scrollBottom();
+  }
+
+  componentDidUpdate() {
+    this.scrollBottom();
+  }
+
+  changeActive(id) {
+    this.setState({activeId: id}, this.scrollBottom())
+  }
+
+  //  TODO take it out of here
+  newMessage(message) {
+
+    const activeChat = this.state.activeId;
+    const author = 'Telebot';
+    const type = 'user';
+    const text = message.message;
+    const sentAt = message.sentAt;
+
+    socket.emit('sendTelegram', {chat_id: activeChat, type: type, message: text});
+
+    this.insertNewMessage(activeChat, author, type, text, sentAt);
+
+  }
+
+  scrollBottom() {
+    var messageArea = document.getElementsByClassName("messages-container");
+    messageArea[0].scrollTop = messageArea[0].scrollHeight;
+  }
+
+  render() {
+    return (
+      <div className="box columns column is-10 is-offset-1 telebot-app">
+        <ChatList chats={this.state.chats} activeId={this.state.activeId} changeActive={this.changeActive}/>
+        <MessagesPanel chats={this.state.chats} activeId={this.state.activeId} name={this.state.name}
+          newMessage={this.newMessage}/>
+      </div>
+    )
+  }
+}
+
+socket.emit('getChats');
+socket.on('populateChats', (data) => {
+
+  const chats = {};
+
+  data.chats.forEach((chat, key) => {
+    chats[chat.chat_id] = chat;
+  });
+
+  const initialState = {
+    activeId: data.chats[0].chat_id,
+    chats
+  };
+
+  ReactDOM.render(
+    <ChatRoom chats={initialState} />,
+    document.getElementById('container')
+  );
+});
diff --git a/public/chatRoom/components/chatsList/ChatBox.react.js b/public/chatRoom/components/chatsList/ChatBox.react.js
@@ -0,0 +1,89 @@
+/* eslint-disable */
+
+
+const React = require('react');
+
+class ChatBox extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      active: false,
+      buttonClass: null,
+    };
+
+    this.changeActive = this.changeActive.bind(this);
+
+  }
+
+  changeActive(id) {
+    this.props.changeActive(id);
+  }
+
+  changeClass() {
+    const isThisActive = this.props.activeId === this.props.id;
+
+    let buttonClass = 'panel-block no-button preview-button';
+    isThisActive ? buttonClass += ' active-chat' : '';
+
+    this.state.buttonClass = buttonClass;
+  }
+
+  render() {
+    this.changeClass();
+
+    let sentAt;
+
+    const today = new Date().setHours(0, 0, 0, 0);
+    const sendDate = new Date(this.props.sentAt).setHours(0, 0, 0, 0);
+
+    if (today == sendDate) {
+      sentAt = new Date(this.props.sentAt).toLocaleString("pt-BR", {
+        hour: 'numeric',
+        minute: 'numeric',
+      });
+    } else if (today - sendDate < 86401000) {
+      sentAt = "Ontem";
+    } else if (today - sendDate < 7*86401000) {
+      sentAt = new Date(this.props.sentAt).toLocaleString("pt-BR", {
+        weekday: 'short',
+      });
+
+      sentAt = sentAt.charAt(0).toUpperCase() + sentAt.slice(1);
+
+    } else {
+      sentAt = new Date(this.props.sentAt).toLocaleString("pt-BR", {
+        day: 'numeric',
+        month: 'numeric',
+      });
+    }
+
+    return (
+      <button className={this.state.buttonClass}
+        onClick={() => this.changeActive(this.props.id)}>
+        <div className="media">
+          <figure className="media-left">
+            <p className="image is-64x64 is-50x50">
+              <img className="avatar-image" src="/img/avatar-placeholder.png"/>
+            </p>
+          </figure>
+          <div className="media-content">
+            <div className="content">
+              <div className="level">
+                <div className="level-left">
+                  <p className="level-item preview-name">{this.props.name}</p>
+                </div>
+                <div className="level-right">
+                  <small className="level-item preview-time">{sentAt}</small>
+                </div>
+              </div>
+              <p className="preview-text">{this.props.lastMessage}</p>
+            </div>
+          </div>
+        </div>
+      </button>
+    )
+  }
+}
+
+module.exports = ChatBox;
diff --git a/public/chatRoom/components/chatsList/ChatList.react.js b/public/chatRoom/components/chatsList/ChatList.react.js
@@ -0,0 +1,44 @@
+/* eslint-disable */
+
+const React = require('react');
+const ChatBox = require('./ChatBox.react');
+
+class ChatList extends React.Component {
+
+  render() {
+
+    const list = [];
+    const chatList = this.props.chats;
+
+    for (let key in chatList) {
+      let chat = chatList[key];
+      let lastKey = chat.messages.length - 1;
+
+      if (chat.messages[lastKey] != undefined) {
+        list.push(
+          <ChatBox key={key}
+            id={+key}
+            name={chat.firstname}
+            sentAt={chat.messages[lastKey].sentAt}
+            lastMessage={chat.messages[lastKey].message}
+            activeId={this.props.activeId}
+            changeActive={this.props.changeActive}/>
+          )
+        }
+      }
+
+
+      return (
+        <div className="panel column is-3 chat-list is-hidden-mobile">
+          <p className="panel-heading chat-list-heading">
+            Contacts
+          </p>
+          <div className="chat-list-overflow">
+            {list}
+          </div>
+        </div>
+      )
+    }
+  }
+
+  module.exports = ChatList
diff --git a/public/chatRoom/components/messagesPanel/HeaderContainer.react.js b/public/chatRoom/components/messagesPanel/HeaderContainer.react.js
@@ -0,0 +1,14 @@
+const React = require('react');
+
+class HeaderContainer extends React.Component {
+
+  render() {
+    return (
+      <div className="header-container">
+        <p className="title is-4 chat-name">{this.props.firstname} {this.props.lastname}</p>
+      </div>
+    )
+  }
+}
+
+module.exports = HeaderContainer;