add button for chat channel settings

src/components/Chat.jsx

@@ -16,6 +16,7 @@ import { MAX_CHAT_MESSAGES } from '../core/constants';
 
 import {
   showUserAreaModal,
+  showChatModal,
   setChatChannel,
   fetchChatMessages,
   setChatInputMessage,
@@ -29,6 +30,7 @@ function escapeRegExp(string) {
 }
 
 const Chat = ({
+  showExpand,
   channels,
   messages,
   chatChannel,
@@ -40,11 +42,14 @@ const Chat = ({
   fetchMessages,
   fetching,
   blocked,
+  triggerModal,
 }) => {
   const listRef = useRef();
+  const targetRef = useRef();
   const [selection, setSelection] = useState(null);
   const [nameRegExp, setNameRegExp] = useState(null);
   const [blockedIds, setBlockedIds] = useState([]);
+  const [btnSize, setBtnSize] = useState(20);
 
   const { stayScrolled } = useStayScrolled(listRef, {
     initialScroll: Infinity,
@@ -77,6 +82,13 @@ const Chat = ({
     setNameRegExp(regExp);
   }, [ownName]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      const fontSize = Math.round(targetRef.current.offsetHeight / 10);
+      setBtnSize(Math.min(28, fontSize));
+    }, 330);
+  }, [targetRef]);
+
   useEffect(() => {
     const bl = [];
     for (let i = 0; i < blocked.length; i += 1) {
@@ -112,74 +124,101 @@ const Chat = ({
   }
 
   return (
-    <div style={{ display: 'relative', width: '100%', height: '100%' }}>
+    <div
-      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      ref={targetRef}
-        <ul
+      style={{
-          className="chatarea"
+        display: 'flex',
-          ref={listRef}
+        position: 'relative',
-          style={{ flexGrow: 1 }}
+        width: '100%',
-          onMouseUp={() => { setSelection(saveSelection); }}
+        height: '100%',
-          role="presentation"
+        flexDirection: 'column',
-        >
+        height: '100%',
-          {
+      }}
-            (!channelMessages.length)
+    >
-            && (
+      <div
-            <ChatMessage
+        className="chatlink"
-              name="info"
+        style={{
-              msgArray={splitChatMessage('Start chatting here', nameRegExp)}
+          fontSize: btnSize,
-              country="xx"
+        }}
-              uid={0}
+      >
-            />
+        <span
-            )
+          role="button"
-            }
+          tabIndex={-1}
-          {
+        >⚙</span>
-            channelMessages.map((message) => ((blockedIds.includes(message[3]))
+        &nbsp;
-              ? null : (
+        {(showExpand) &&
-                <ChatMessage
+          <span
-                  name={message[0]}
+            onClick={triggerModal}
-                  msgArray={splitChatMessage(message[1], nameRegExp)}
-                  country={message[2]}
-                  uid={message[3]}
-                />
-              )))
-          }
-        </ul>
-        {(ownName) ? (
-          <div classNam="chatinput">
-            <form
-              onSubmit={(e) => handleSubmit(e)}
-              style={{ display: 'flex', flexDirection: 'row' }}
-            >
-              <input
-                style={{ flexGrow: 1, minWidth: 40 }}
-                value={inputMessage}
-                onChange={(e) => setInputMessage(e.target.value)}
-                id="chatmsginput"
-                maxLength="200"
-                type="text"
-                placeholder="Chat here"
-              />
-              <button
-                style={{ flexGrow: 0 }}
-                type="submit"
-              >
-                ‣
-              </button>
-              <ChannelDropDown />
-            </form>
-          </div>
-        ) : (
-          <div
-            className="modallink"
-            onClick={open}
-            style={{ textAlign: 'center', fontSize: 13 }}
             role="button"
-            tabIndex={0}
+            tabIndex={-1}
-          >
+          >↷</span>
-            You must be logged in to chat
+        }
-          </div>
-        )}
       </div>
+      <ul
+        className="chatarea"
+        ref={listRef}
+        style={{ flexGrow: 1 }}
+        onMouseUp={() => { setSelection(saveSelection); }}
+        role="presentation"
+      >
+        {
+          (!channelMessages.length)
+          && (
+          <ChatMessage
+            name="info"
+            msgArray={splitChatMessage('Start chatting here', nameRegExp)}
+            country="xx"
+            uid={0}
+          />
+          )
+          }
+        {
+          channelMessages.map((message) => ((blockedIds.includes(message[3]))
+            ? null : (
+              <ChatMessage
+                name={message[0]}
+                msgArray={splitChatMessage(message[1], nameRegExp)}
+                country={message[2]}
+                uid={message[3]}
+              />
+            )))
+        }
+      </ul>
+      {(ownName) ? (
+        <div classNam="chatinput">
+          <form
+            onSubmit={(e) => handleSubmit(e)}
+            style={{ display: 'flex', flexDirection: 'row' }}
+          >
+            <input
+              style={{ flexGrow: 1, minWidth: 40 }}
+              value={inputMessage}
+              onChange={(e) => setInputMessage(e.target.value)}
+              id="chatmsginput"
+              maxLength="200"
+              type="text"
+              placeholder="Chat here"
+            />
+            <button
+              style={{ flexGrow: 0 }}
+              type="submit"
+            >
+              ‣
+            </button>
+            <ChannelDropDown />
+          </form>
+        </div>
+      ) : (
+        <div
+          className="modallink"
+          onClick={open}
+          style={{ textAlign: 'center', fontSize: 13 }}
+          role="button"
+          tabIndex={0}
+        >
+          You must be logged in to chat
+        </div>
+      )}
     </div>
   );
 };
@@ -212,6 +251,9 @@ function mapDispatchToProps(dispatch) {
     open() {
       dispatch(showUserAreaModal());
     },
+    triggerModal() {
+      dispatch(showChatModal(true));
+    },
     setChannel(channelId) {
       dispatch(setChatChannel(channelId));
     },

src/components/ChatBox.jsx

@@ -40,13 +40,7 @@ function ChatBox({
         className={(chatOpen && render) ? 'chatbox show' : 'chatbox'}
         onTransitionEnd={onTransitionEnd}
       >
-        <div
+        <Chat showExpand={true} />
-          id="chatlink"
-          onClick={triggerModal}
-          role="button"
-          tabIndex={-1}
-        >↷</div>
-        <Chat />
       </div>
     )
   );

src/routes/api/startdm.js

@@ -60,7 +60,7 @@ async function startDm(req: Request, res: Response) {
     });
     return;
   }
-  if (blockDm) {
+  if (targetUser.blockDm) {
     res.status(401);
     res.json({
       errors: ['Target user doesn\'t allo DMs'],

src/styles/dark-round.css

@@ -102,7 +102,7 @@ tr:nth-child(even) {
   color: #94ff94;
 }
 
-#chatlink {
+.chatlink {
   color: #f9edde;
 }
 

src/styles/dark.css

@@ -99,7 +99,7 @@ tr:nth-child(even) {
   color: #94ff94;
 }
 
-#chatlink {
+.chatlink {
   color: #f9edde;
 }
 

src/styles/default.css

@@ -473,13 +473,15 @@ tr:nth-child(even) {
   margin-left: 5px;
   margin-right: 5px;
 }
-#chatlink {
+.chatlink {
   position: absolute;
-  font-weight: bold;
-  font-size: 20px;
-  right: 17px;
   top: 5px;
+  right: 17px;
+  font-weight: bold;
   color: #4a4a49; 
+  transition: font-size 0.2s;
+}
+.chatlink > span {
   cursor: pointer;
 }