Glad Chinda gladchinda

Software engineering @Adyen

gladchinda / realtime-chat-next.config.js

Created April 25, 2018 12:55

	const webpack = require('webpack');
	require('dotenv').config();

	module.exports = {
	webpack: config => {
	const env = Object.keys(process.env).reduce((acc, curr) => {
	acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
	return acc;
	}, {});

gladchinda / realtime-chat-server-1.js

Created April 25, 2018 12:57

	const cors = require('cors');
	const next = require('next');
	const Pusher = require('pusher');
	const express = require('express');
	const bodyParser = require('body-parser');
	const dotenv = require('dotenv').config();
	const sentiment = require('sentiment');

	const dev = process.env.NODE_ENV !== 'production';
	const port = process.env.PORT \|\| 3000;

gladchinda / realtime-chat-npm-scripts.json

Created April 25, 2018 12:58

	"scripts": {
	"dev": "node server.js",
	"build": "next build",
	"start": "NODE_ENV=production node server.js"
	}

gladchinda / realtime-chat-Layout.jsx

Created April 25, 2018 12:59

	import React, { Fragment } from 'react';
	import Head from 'next/head';

	const Layout = props => (
	<Fragment>
	<Head>
	<meta charSet="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossOrigin="anonymous" />
	<title>{props.pageTitle \|\| 'Realtime Chat'}</title>

gladchinda / realtime-chat-index-1.jsx

Created April 25, 2018 13:01

	import React, { Component } from 'react';
	import Layout from '../components/Layout';

	class IndexPage extends Component {

	state = { user: null }

	handleKeyUp = evt => {
	if (evt.keyCode === 13) {
	const user = evt.target.value;

gladchinda / realtime-chat-Chat-1.jsx

Created April 25, 2018 13:03

	import React, { Component, Fragment } from 'react';
	import axios from 'axios';
	import Pusher from 'pusher-js';

	class Chat extends Component {

	state = { chats: [] }

	componentDidMount() {
	this.pusher = new Pusher(process.env.PUSHER_APP_KEY, {

gladchinda / realtime-chat-index-2.diff

Created April 25, 2018 13:05

	- import Layout from '../components/Layout';
	+ import Chat from '../components/Chat';
	+ import Layout from '../components/Layout';

	- <section className="col-md-4 position-relative d-flex flex-wrap h-100 align-items-start align-content-between bg-white px-0"></section>
	+ <section className="col-md-4 position-relative d-flex flex-wrap h-100 align-items-start align-content-between bg-white px-0">
	+ { user && <Chat activeUser={user} /> }
	+ </section>

gladchinda / realtime-chat-server-2.js

Created April 25, 2018 13:06

	// server.get('*') is here ...

	const chatHistory = { messages: [] };

	server.post('/message', (req, res, next) => {
	const { user = null, message = '', timestamp = +new Date } = req.body;
	const sentimentScore = sentiment(message).score;

	const chat = { user, message, timestamp, sentiment: sentimentScore };

gladchinda / realtime-chat-ChatMessage.jsx

Created April 25, 2018 13:08

	import React, { Component } from 'react';

	class ChatMessage extends Component {

	render() {
	const { position = 'left', message } = this.props;
	const isRight = position.toLowerCase() === 'right';

	const align = isRight ? 'text-right' : 'text-left';
	const justify = isRight ? 'justify-content-end' : 'justify-content-start';

gladchinda / realtime-chat-Chat-2.js

Created April 25, 2018 13:10

	// Module imports here ...
	import ChatMessage from './ChatMessage';

	const SAD_EMOJI = [55357, 56864];
	const HAPPY_EMOJI = [55357, 56832];
	const NEUTRAL_EMOJI = [55357, 56848];

	// Chat component class here ...