652 | )
653 | }
654 | }
655 |
656 | ChatUIContainer.propTypes = {
657 | username: PropTypes.string,
658 | id: PropTypes.string,
659 | loginError: PropTypes.array,
660 | registrationError: PropTypes.array,
661 | formsShown: PropTypes.bool,
662 | formsMethod: PropTypes.string,
663 | chatsShown: PropTypes.bool,
664 | composedMessage: PropTypes.string,
665 | currentChannel: PropTypes.string,
666 | conversations: PropTypes.array,
667 | channelConversations: PropTypes.array,
668 | guestSignup: PropTypes.string,
669 | guestUsername: PropTypes.string,
670 | socketConversations: PropTypes.array,
671 | usersChannels: PropTypes.array,
672 | createInput: PropTypes.string,
673 | startDmInput: PropTypes.string,
674 | usersDirectMessages:PropTypes.array,
675 | directMessageErrorLog: PropTypes.array,
676 | currentPrivateRecipient: PropTypes.object,
677 | token:PropTypes.string
678 | }
679 |
680 | export default withCookies(ChatUIContainer);
--------------------------------------------------------------------------------
/src/components/container/PrivateMessageContainer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types'
3 | import PrivateMessaging from '../PrivateMessaging';
4 | import axios from 'axios';
5 | import io from 'socket.io-client';
6 |
7 | const SOCKET_URL = "http://localhost:3000";
8 | const socket = io(SOCKET_URL);
9 | const API_URL = 'http://localhost:3000/api';
10 |
11 | export default class PrivateMessagingContainer extends Component {
12 | constructor(props) {
13 | super(props);
14 |
15 | this.state = {
16 | privateMessageInput: "",
17 | privateMessageLog: [],
18 | conversationId: "",
19 | socketPMs: [],
20 | currentPrivateRecipient: this.props.currentPrivateRecipient,
21 | showTyping: false,
22 | activeUserTyping: ""
23 | }
24 | }
25 |
26 | handlePrivateInput = (event) => {
27 | this.setState({
28 | [event.target.name]: event.target.value
29 | });
30 | }
31 |
32 | handlePrivateSubmit = (e) => {
33 | e.preventDefault();
34 |
35 | this.sendPrivateMessage();
36 | }
37 |
38 | // Makes a POST call with a private message and a recipient id to save a message.
39 | // On success, it emits to the server sockets, a socketMsg object containing what is sent to mongodb, so it can
40 | // send that information to the recipient if they are connected.
41 | sendPrivateMessage = () => {
42 | const privateMessageInput = this.state.privateMessageInput;
43 | const recipientId = this.props.currentPrivateRecipient._id;
44 |
45 | axios.post(`${API_URL}/chat/reply`, { privateMessageInput, recipientId }, {
46 | headers: { Authorization: this.props.token }
47 | })
48 | .then(res => {
49 | const socketMsg = {
50 | body: privateMessageInput,
51 | conversationId: this.state.conversationId,
52 | author:[{
53 | item:{
54 | username: this.props.username
55 | }
56 | }]
57 | }
58 | socket.emit('new privateMessage', socketMsg);
59 |
60 | this.setState({
61 | privateMessageInput: ""
62 | })
63 | })
64 | .catch(err => {
65 | console.log(err);
66 | })
67 | }
68 |
69 | // Takes the current private recipient and makes a POST call taking the recipient id.
70 | // On success, it joins the user into a socket room with the conversation id returned as the room name.
71 | // Takes the response from the backend and sets the state with the conversation logs.
72 | getPrivateMessages = () => {
73 | const currentPrivateRecipient = this.props.currentPrivateRecipient;
74 |
75 | axios.get(`${API_URL}/chat/privatemessages/${currentPrivateRecipient._id}`, {
76 | headers: { Authorization: this.props.token }
77 | })
78 | .then(res => {
79 | socket.emit('enter privateMessage', res.data.conversationId)
80 | this.setState({
81 | privateMessageLog: res.data.conversation || [],
82 | conversationId: res.data.conversationId
83 | })
84 | })
85 | .catch(err => {
86 | console.log(err)
87 | })
88 | }
89 |
90 | // Tells the socket when a user is current typing.
91 | // Sends the conversation id and username to display who is typing.
92 | userTyping = (isTyping) => {
93 | const conversationId = this.state.conversationId;
94 | const username = this.props.username;
95 | const data = {
96 | isTyping,
97 | conversationId,
98 | username
99 | }
100 | socket.emit('user typing', data)
101 | }
102 |
103 | // On different recipients, it will get new private messages.
104 | componentWillReceiveProps(nextProps) {
105 | this.setState({
106 | currentPrivateRecipient: nextProps.currentPrivateRecipient
107 | }, () => {
108 | this.getPrivateMessages()
109 | })
110 | }
111 |
112 | // On mount, it gets private messages, and adds socket listeners for new private messages.
113 | componentDidMount() {
114 | this.getPrivateMessages();
115 |
116 | socket.on('refresh privateMessages', (data) => {
117 | const updatedSocketPMs = Array.from(this.state.socketPMs);
118 |
119 | updatedSocketPMs.push(data);
120 |
121 | this.setState({
122 | socketPMs: updatedSocketPMs
123 | })
124 | });
125 |
126 | socket.on('typing', (data) => {
127 |
128 | this.setState({
129 | showTyping: data.isTyping,
130 | activeUserTyping: data.username
131 | });
132 | })
133 |
134 | }
135 |
136 | // Removes socket listeners and tells sever sockets the user has left that private room.
137 | componentWillUnmount() {
138 | socket.emit('leave privateMessage', this.state.conversationId);
139 | socket.off('refresh privateMessages');
140 | socket.off('typing');
141 | }
142 |
143 | render() {
144 | const { closePM } = this.props;
145 | return (
146 |
{closePM(e)}}>
147 |
154 |
155 | )
156 | }
157 | }
158 |
159 | PrivateMessagingContainer.propTypes = {
160 | privateMessageInput: PropTypes.string,
161 | privateMessageLog: PropTypes.array,
162 | conversationId: PropTypes.string,
163 | socketPMs: PropTypes.array,
164 | currentPrivateRecipient: PropTypes.object,
165 | showTyping: PropTypes.bool,
166 | activeUserTyping: PropTypes.string
167 | }
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import registerServiceWorker from './registerServiceWorker';
6 |
7 | ReactDOM.render(, document.getElementById('root'));
8 | registerServiceWorker();
9 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // In production, we register a service worker to serve assets from local cache.
2 |
3 | // This lets the app load faster on subsequent visits in production, and gives
4 | // it offline capabilities. However, it also means that developers (and users)
5 | // will only see deployed updates on the "N+1" visit to a page, since previously
6 | // cached resources are updated in the background.
7 |
8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 | // This link also includes instructions on opting out of this behavior.
10 |
11 | const isLocalhost = Boolean(
12 | window.location.hostname === 'localhost' ||
13 | // [::1] is the IPv6 localhost address.
14 | window.location.hostname === '[::1]' ||
15 | // 127.0.0.1/8 is considered localhost for IPv4.
16 | window.location.hostname.match(
17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
18 | )
19 | );
20 |
21 | export default function register() {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
29 | return;
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 |
35 | if (!isLocalhost) {
36 | // Is not local host. Just register service worker
37 | registerValidSW(swUrl);
38 | } else {
39 | // This is running on localhost. Lets check if a service worker still exists or not.
40 | checkValidServiceWorker(swUrl);
41 | }
42 | });
43 | }
44 | }
45 |
46 | function registerValidSW(swUrl) {
47 | navigator.serviceWorker
48 | .register(swUrl)
49 | .then(registration => {
50 | registration.onupdatefound = () => {
51 | const installingWorker = registration.installing;
52 | installingWorker.onstatechange = () => {
53 | if (installingWorker.state === 'installed') {
54 | if (navigator.serviceWorker.controller) {
55 | // At this point, the old content will have been purged and
56 | // the fresh content will have been added to the cache.
57 | // It's the perfect time to display a "New content is
58 | // available; please refresh." message in your web app.
59 | console.log('New content is available; please refresh.');
60 | } else {
61 | // At this point, everything has been precached.
62 | // It's the perfect time to display a
63 | // "Content is cached for offline use." message.
64 | console.log('Content is cached for offline use.');
65 | }
66 | }
67 | };
68 | };
69 | })
70 | .catch(error => {
71 | console.error('Error during service worker registration:', error);
72 | });
73 | }
74 |
75 | function checkValidServiceWorker(swUrl) {
76 | // Check if the service worker can be found. If it can't reload the page.
77 | fetch(swUrl)
78 | .then(response => {
79 | // Ensure service worker exists, and that we really are getting a JS file.
80 | if (
81 | response.status === 404 ||
82 | response.headers.get('content-type').indexOf('javascript') === -1
83 | ) {
84 | // No service worker found. Probably a different app. Reload the page.
85 | navigator.serviceWorker.ready.then(registration => {
86 | registration.unregister().then(() => {
87 | window.location.reload();
88 | });
89 | });
90 | } else {
91 | // Service worker found. Proceed as normal.
92 | registerValidSW(swUrl);
93 | }
94 | })
95 | .catch(() => {
96 | console.log(
97 | 'No internet connection found. App is running in offline mode.'
98 | );
99 | });
100 | }
101 |
102 | export function unregister() {
103 | if ('serviceWorker' in navigator) {
104 | navigator.serviceWorker.ready.then(registration => {
105 | registration.unregister();
106 | });
107 | }
108 | }
109 |
--------------------------------------------------------------------------------