denshobato_chat_panel 0.0.1

data/lib/react/components/Messages.jsx

@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import store from '../store/Store';
+import { actions } from '../actions/Index';
+import Message from './Message';
+import { reset } from 'redux-form';
+import MessageForm from './MessageForm';
+import ChatUtils from '../utils/ChatUtils';
+
+const room = document.getElementById('denshobato-message-panel');
+
+export default class Messages extends Component {
+  static propTypes = {
+    conversation: React.PropTypes.shape({
+      senderId: React.PropTypes.number,
+      conversationId: React.PropTypes.number,
+      senderClass: React.PropTypes.string,
+    }),
+    showAll: React.PropTypes.bool.isRequired,
+    messages: React.PropTypes.arrayOf(React.PropTypes.object),
+  };
+
+  constructor(props) {
+    super(props);
+  };
+
+  componentDidMount() {
+    store.dispatch(actions.conversation.conversation(room.dataset.room, room.dataset.currentUserId, room.dataset.currentUserClass));
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.messages.length != this.props.messages.length) {
+      this.refreshChat();
+    }
+  }
+
+  handleSubmit = (e) => {
+    const { conversation } = this.props;
+    this.refreshChat();
+    store.dispatch(actions.messages.create(e.body, conversation.senderId, conversation.conversationId, conversation.senderClass));
+    store.dispatch(reset('message-form'));
+  };
+
+  refreshChat = () => {
+    store.dispatch(actions.messages.fetch(room.dataset.room));
+  };
+
+  showAll = () => {
+    store.dispatch(actions.messages.showAll());
+  };
+
+  render() {
+    const { messages, conversation, showAll } = this.props;
+
+    return (
+      <div>
+        <div className="top_menu">
+          <div className="buttons">
+            <div className="button close-button" onClick={ChatUtils.closeChat}></div>
+            <div className="button minimize"></div>
+            <div className="button maximize"></div>
+          </div>
+          <div className="title">
+            <div className="chat-header">
+              <div className="header-description">
+                <p>
+                  {`Chat with ${conversation.recipient}`}
+                </p>
+              </div>
+            </div>
+          </div>
+          <button className="refresh-button btn" onClick={this.refreshChat}>Refresh</button>
+        </div>
+        <div className='chat-wrapper'>
+          <div className='chat-message padding'>
+            { do {
+              if (messages.length >= 50 && !showAll) {
+                <div className='text-center'>
+                  <button className='load-messages' onClick={this.showAll}>Load previous messages</button>
+                </div>;
+              }
+            } }
+
+            {/* TODO: Refactoring this condition. */}
+            { do {
+              if (messages.length >= 50 && !showAll) {
+                messages.slice(Math.max(messages.length - 50, 1)).map((message, index) => {
+                  return (
+                    <div key={index}>
+                      <Message message={message} sender={conversation}/>
+                    </div>
+                  );
+                });
+              } else {
+                messages.map((message, index) => {
+                  return (
+                    <div key={index}>
+                      <Message message={message} sender={conversation}/>
+                    </div>
+                  );
+                });
+              }
+            }
+            }
+            <MessageForm onSubmit={this.handleSubmit}/>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

data/lib/react/containers/MessagesContainer.jsx

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import store from '../store/Store';
+import { connect } from 'react-redux';
+import { actions } from '../actions/Index';
+import Messages from '../components/Messages';
+import ChatUtils from '../utils/ChatUtils';
+
+@connect((state) => {
+  return {
+    messages: state.messages,
+    conversation: state.conversation,
+  }
+})
+
+export default class MessagesContainer extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    let room = document.getElementById('denshobato-message-panel');
+    store.dispatch(actions.messages.fetch(room.dataset.room));
+  };
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.messages.length != this.props.messages.messages.length) {
+      ChatUtils.scrollChat();
+    }
+  }
+
+  render() {
+    const { messages, conversation } = this.props;
+    return (
+      <div>
+        {do {
+          if (!messages.loaded) {
+            <div className="loading">
+              <p>LOADING MESSAGES...</p>
+            </div>;
+          } else {
+            <Messages messages={messages.messages} conversation={conversation} showAll={messages.showAll}/>;
+          }
+        }}
+      </div>
+    );
+  }
+}

data/lib/react/denshobato.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider, connect } from 'react-redux';
+import MessagesContainer from './containers/MessagesContainer';
+import store from './store/Store';
+
+window.onload = (() => {
+  const domNode  = document.getElementById('denshobato-message-panel');
+
+  if (domNode !=  null) {
+    render(
+      <Provider store={store}>
+        <MessagesContainer/>
+      </Provider>,
+      domNode
+    );
+  }
+});

data/lib/react/reducers/Conversation.jsx

@@ -0,0 +1,20 @@
+import { CONVERSATION } from '../actions/Conversation';
+
+const conversationState = {
+  author: null,
+  conversationId: null,
+  senderId: null,
+  senderClass: null,
+  recipient: null,
+  recipientClass: null,
+};
+
+export function conversation(state = conversationState, action) {
+  switch (action.type) {
+  case CONVERSATION:
+    let data = action.response;
+    return { ...state, conversationId: data.conversation_id, author: data.author, senderId: data.sender_id, senderClass: data.sender_class, recipient: data.recipient, recipientClass: data.recipient_class };
+  default:
+    return state;
+  }
+}

data/lib/react/reducers/Index.jsx

@@ -0,0 +1,8 @@
+import { messages } from './Messages';
+import { conversation } from './Conversation';
+import { combineReducers } from 'redux';
+import { reducer as formReducer } from 'redux-form';
+
+const Reducer = combineReducers({ messages: messages, conversation: conversation, form: formReducer });
+
+export default Reducer;

data/lib/react/reducers/Messages.jsx

@@ -0,0 +1,21 @@
+import { FETCH, CREATE, DELETE, SHOW_ALL } from '../actions/Messages';
+
+const messagesState = { messages: [], loaded: false, showAll: false };
+
+export function messages(state = messagesState, action) {
+  switch (action.type) {
+  case FETCH:
+    return { ...state, messages: action.data, loaded: true };
+  case CREATE:
+    let newState = state.messages.concat([action.message]);
+    return { ...state, messages: newState };
+  case DELETE:
+    let index = state.messages.map((x) => x.id).indexOf(action.id);
+    state.messages.splice(index, 1);
+    return { ...state, messages: state.messages };
+  case SHOW_ALL:
+    return { ...state, showAll: action.data };
+  default:
+    return state;
+  }
+}

data/lib/react/store/Store.jsx

@@ -0,0 +1,8 @@
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import Reducer from '../reducers/Index';
+
+const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
+const store = createStoreWithMiddleware(Reducer);
+
+export default store;

data/lib/react/utils/ChatUtils.js

@@ -0,0 +1,12 @@
+export default class ChatUtils {
+  static scrollChat() {
+    let messages = document.getElementsByClassName('chat-wrapper')[0];
+    if (messages != null) {
+      $(messages).animate({ scrollTop: messages.scrollWidth * 999 });
+    };
+  };
+
+  static closeChat () {
+    $('.chat-message').slideToggle();
+  };
+};

data/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "Denshobato",
+  "version": "0.1.0",
+  "description": "Denshobato messaging panel",
+  "main": "denshobato.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Eugene Domosedov (ID25)",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^0.8.1",
+    "react": "^0.14.3",
+    "react-dom": "0.14.0",
+    "react-redux": "^4.0.6",
+    "redux": "^3.0.4",
+    "redux-form": "^4.1.1",
+    "redux-thunk": "^0.1.0"
+  },
+  "devDependencies": {
+    "babel-core": "latest",
+    "babel-loader": "latest",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-es2015": "latest",
+    "babel-preset-react": "latest",
+    "babel-preset-stage-0": "latest",
+    "babel-preset-stage-1": "latest",
+    "babel-preset-stage-2": "latest",
+    "babel-preset-stage-3": "latest",
+    "redux-devtools": "^3.0.1",
+    "redux-devtools-dock-monitor": "^1.0.1",
+    "redux-devtools-log-monitor": "^1.0.1",
+    "webpack": "^1.12.9"
+  }
+}

data/webpack.config.js

@@ -0,0 +1,21 @@
+var path    = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  entry: './lib/react/denshobato.js',
+  output: { path: __dirname + '/app/assets/javascripts/', filename: 'denshobato.js' },
+  resolve: { extensions: ['', '.js', '.jsx'] },
+  module: {
+    loaders: [
+      {
+        test: /.jsx?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        query: {
+          plugins: ['transform-decorators-legacy'],
+          presets: ['es2015', 'react', 'stage-0', 'stage-1', 'stage-2', 'stage-3'],
+        },
+      },
+    ],
+  },
+};

metadata

@@ -0,0 +1,163 @@
+--- !ruby/object:Gem::Specification
+name: denshobato_chat_panel
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- ID25
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-03-11 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: grape
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.11'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.11'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: activerecord
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Chat Panel for Denshobato messaging.
+email:
+- xid25x@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rspec"
+- ".travis.yml"
+- Gemfile
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- denshobato_chat_panel.gemspec
+- lib/api/conversation_api.rb
+- lib/api/denshobato_api.rb
+- lib/api/message_api.rb
+- lib/denshobato_chat_panel.rb
+- lib/denshobato_chat_panel/engine.rb
+- lib/denshobato_chat_panel/react_helper.rb
+- lib/denshobato_chat_panel/version.rb
+- lib/generators/denshobato_chat_panel/assets/javascripts/denshobato.js
+- lib/generators/denshobato_chat_panel/assets/stylesheets/denshobato.scss
+- lib/generators/denshobato_chat_panel/install_generator.rb
+- lib/react/actions/Conversation.jsx
+- lib/react/actions/Index.jsx
+- lib/react/actions/Messages.jsx
+- lib/react/api/Api.jsx
+- lib/react/components/Message.jsx
+- lib/react/components/MessageForm.jsx
+- lib/react/components/Messages.jsx
+- lib/react/containers/MessagesContainer.jsx
+- lib/react/denshobato.js
+- lib/react/reducers/Conversation.jsx
+- lib/react/reducers/Index.jsx
+- lib/react/reducers/Messages.jsx
+- lib/react/store/Store.jsx
+- lib/react/utils/ChatUtils.js
+- package.json
+- webpack.config.js
+homepage: https://github.com/ID25/denshobato_chat_panel
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.0
+signing_key: 
+specification_version: 4
+summary: Chat Panel for Denshobato messaging.
+test_files: []