Chat Channels part 2

src/components/Chat.jsx

@@ -18,15 +18,17 @@ const Chat = ({ chatMessages, chatChannel }) => {
     initialScroll: Infinity,
   });
 
+  const channelMessages = chatMessages[chatChannel];
+
   useLayoutEffect(() => {
     stayScrolled();
-  }, [chatMessages.length]);
+  }, [channelMessages.length]);
 
   return (
     <div style={{ height: '100%' }}>
       <ul className="chatarea" ref={listRef}>
         {
-          chatMessages[chatChannel].map((message) => (
+          channelMessages.map((message) => (
             <p className="chatmsg">
               {(message[0] === 'info')
                 ? <span style={{ color: '#cc0000' }}>{message[1]}</span>

src/components/ChatInput.jsx

@@ -47,22 +47,32 @@ class ChatInput extends React.Component {
     if (name) {
       return (
         <div className="chatinput">
-          <form onSubmit={(e) => { this.handleSubmit(e, chatChannel); }}>
+          <form
+            onSubmit={(e) => { this.handleSubmit(e, chatChannel); }}
+            style={{ display: 'inline' }}
+          >
             <input
-              style={{ maxWidth: '80%', width: '240px' }}
+              style={{ maxWidth: '58%', width: '240px' }}
               value={message}
               onChange={(evt) => this.setState({ message: evt.target.value })}
               type="text"
               placeholder="Chat here"
             />
-            <button id="chatmsginput" type="submit">Send</button>
+            <button
+              id="chatmsginput"
+              type="submit"
+              style={{ height: 22 }}
+            >
+              ‣
+            </button>
           </form>
           <select
             onChange={(evt) => setChannel(evt.target.selectedIndex)}
+            style={{ height: 22 }}
           >
             {
               CHAT_CHANNELS.map((ch) => (
-                <option selected={ch === selectedChannel}>ch</option>
+                <option selected={ch === selectedChannel}>{ch}</option>
               ))
             }
           </select>

src/core/ChatProvider.js

@@ -6,6 +6,8 @@ import redis from '../data/redis';
 import User from '../data/models/User';
 import webSockets from '../socket/websockets';
 
+import { CHAT_CHANNELS } from '../core/constants';
+
 
 class ChatProvider {
   /*
@@ -16,12 +18,19 @@ class ChatProvider {
 
   constructor() {
     this.history = [];
+    for (let i = 0; i < CHAT_CHANNELS.length; i += 1) {
+      this.history.push([]);
+    }
     this.caseCheck = /^[A-Z !.]*$/;
     this.filters = [
       {
         regexp: /ADMIN/gi,
         matches: 2,
       },
+      {
+        regexp: /JEBAĆ/gi,
+        matches: 2,
+      },
       {
         regexp: /FUCK/gi,
         matches: 3,
@@ -41,10 +50,11 @@ class ChatProvider {
   }
 
   addMessage(name, message, country, channelId = 0) {
-    if (this.history.length > 20) {
-      this.history.shift();
+    const channelHistory = this.history[channelId];
+    if (channelHistory.length > 20) {
+      channelHistory.shift();
     }
-    this.history.push([name, message, country, channelId]);
+    channelHistory.push([name, message, country]);
   }
 
   async sendMessage(user, message, channelId: number = 0) {
@@ -53,6 +63,7 @@ class ChatProvider {
       ? 'il'
       : (user.country || 'xx');
 
+    if (name.startsWith('popi')) return null;
     if (!name) {
       // eslint-disable-next-line max-len
       return 'Couldn\'t send your message, pls log out and back in again.';

src/reducers/user.js

@@ -45,8 +45,8 @@ const initialState: UserState = {
   totalRanking: {},
   totalDailyRanking: {},
   chatMessages: [
-    ['info', 'Welcome to the PixelPlanet Chat', 'il'],
-    ['info', 'Welcome to the PixelPlanet Chat', 'il'],
+    [['info', 'Welcome to the PixelPlanet Chat', 'il']],
+    [['info', 'Welcome to the PixelPlanet Chat', 'il']],
   ],
   minecraftname: null,
   isOnMobile: false,
@@ -125,19 +125,15 @@ export default function user(
       const {
         name, text, country, channel,
       } = action;
-      let { chatMessages } = state;
+      const chatMessages = state.chatMessages.slice();
       let channelMessages = chatMessages[channel];
       if (channelMessages.length > 50) {
         channelMessages = channelMessages.slice(-50);
       }
       channelMessages = channelMessages.concat([
-        [name, text, country, channel],
+        [name, text, country]
       ]);
-      chatMessages = Object.assign(
-        [],
-        chatMessages,
-        { channel: channelMessages },
-      );
+      chatMessages[channel] = channelMessages;
       return {
         ...state,
         chatMessages,

src/socket/SocketServer.js

@@ -223,8 +223,8 @@ class SocketServer extends WebSocketEvents {
   }
 
   static async onTextMessage(text, ws) {
-    let message; let
-      channelId;
+    let message;
+    let channelId;
     try {
       const data = JSON.parse(text);
       [message, channelId] = data;
@@ -257,7 +257,7 @@ class SocketServer extends WebSocketEvents {
         channelId,
       );
       if (errorMsg) {
-        ws.send(JSON.stringify(['info', errorMsg, 'il']));
+        ws.send(JSON.stringify(['info', errorMsg, 'il', channelId]));
       }
       if (ws.last_message && ws.last_message === message) {
         ws.message_repeat += 1;