Merge branch 'develop' into 2892_Edit_templates_in_admin_pages

serge-web · Aug 12, 2024 · 4753e4f · 4753e4f
2 parents 42216b9 + d6bcccd
commit 4753e4f
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 15 deletions.
diff --git a/client/src/Components/local/molecules/chat-message/styles.module.scss b/client/src/Components/local/molecules/chat-message/styles.module.scss
@@ -30,7 +30,7 @@
   font-size: 12px;
   font-weight: normal;
   line-height: 14px;
-  color: #00a3de;
+  color: #c0d7e0;
 
   &__owner {
     margin-left: 10px;

diff --git a/client/src/Components/local/organisms/chat-messages-list/__snapshots__/index.spec.tsx.snap b/client/src/Components/local/organisms/chat-messages-list/__snapshots__/index.spec.tsx.snap
@@ -57,18 +57,73 @@ exports[`ChatMessagesList renders correctly renders component correctly 1`] = `
     </div>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-3 messages-list"
+    className="MuiFormGroup-root"
+  >
+    <label
+      className="MuiFormControlLabel-root"
+    >
+      <span
+        className="MuiSwitch-root"
+      >
+        <span
+          aria-disabled={false}
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-3 MuiSwitch-switchBase PrivateSwitchBase-checked-4 Mui-checked"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onDragLeave={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          tabIndex={null}
+        >
+          <span
+            className="MuiIconButton-label"
+          >
+            <input
+              checked={true}
+              className="PrivateSwitchBase-input-6 MuiSwitch-input"
+              id="trim-mgs"
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <span
+              className="MuiSwitch-thumb"
+            />
+          </span>
+          <span
+            className="MuiTouchRipple-root"
+          />
+        </span>
+        <span
+          className="MuiSwitch-track"
+        />
+      </span>
+      <span
+        className="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+      >
+        Trim to last 50 messaages
+      </span>
+    </label>
+  </div>
+  <div
+    className="MuiBox-root MuiBox-root-7 messages-list"
     style={
       Object {
         "height": "calc(100% - 280px)",
       }
     }
   >
     <div
-      className="MuiBox-root MuiBox-root-4"
+      className="MuiBox-root MuiBox-root-8"
     >
       <div
-        className="MuiBox-root MuiBox-root-5"
+        className="MuiBox-root MuiBox-root-9"
         style={
           Object {
             "float": "right",
@@ -101,7 +156,7 @@ exports[`ChatMessagesList renders correctly renders component correctly 1`] = `
             Content of message
           </div>
           <div
-            className="MuiBox-root MuiBox-root-6"
+            className="MuiBox-root MuiBox-root-10"
           >
             <span>
               <span
@@ -118,15 +173,15 @@ exports[`ChatMessagesList renders correctly renders component correctly 1`] = `
               </span>
             </span>
             <div
-              className="MuiBox-root MuiBox-root-7"
+              className="MuiBox-root MuiBox-root-11"
             >
               <div
-                className="MuiChip-root makeStyles-root-8 makeStyles-root-11 MuiChip-sizeSmall makeStyles-sizeSmall-9"
+                className="MuiChip-root makeStyles-root-12 makeStyles-root-15 MuiChip-sizeSmall makeStyles-sizeSmall-13"
                 onKeyDown={[Function]}
                 onKeyUp={[Function]}
               >
                 <span
-                  className="MuiChip-label makeStyles-label-10 makeStyles-label-12 MuiChip-labelSmall"
+                  className="MuiChip-label makeStyles-label-14 makeStyles-label-16 MuiChip-labelSmall"
                 >
                   Game Control
                 </span>
@@ -139,7 +194,7 @@ exports[`ChatMessagesList renders correctly renders component correctly 1`] = `
             </div>
           </div>
           <div
-            className="MuiBox-root MuiBox-root-13 private"
+            className="MuiBox-root MuiBox-root-17 private"
           >
             <div
               className="paragraph"

diff --git a/client/src/Components/local/organisms/chat-messages-list/index.tsx b/client/src/Components/local/organisms/chat-messages-list/index.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import { Box } from '@material-ui/core'
+import React, { useEffect, useState } from 'react'
+import { Box, FormControlLabel, FormGroup, Switch } from '@material-ui/core'
 /* Import Types */
 import PropTypes from './types/props'
 import { INFO_MESSAGE_CLIPPED } from 'src/config'
@@ -15,9 +15,21 @@ export const ChatMessagesList: React.FC<PropTypes> = ({
   messages, icons, colors, names, onMarkAllAsRead, isUmpire,
   playerRole, playerForce, chatContainerHeight, turnPresentation, observing, markUnread, hideForcesInChannel, hideAuthor
 }: PropTypes) => {
-  // cast messages, for type-checking
-  const rMessages = messages as Array<ChatMessageType | MessageInfoTypeClipped>
-  const cMessages = [...rMessages].reverse() // note we have to clone it first, since reverse is destructive
+  const [revMessages, setRevMessages] = useState<Array<ChatMessageType | MessageInfoTypeClipped>>([])
+  const [trimMessages, setTrimMessages] = useState<boolean>(true)
+
+  const trimmedLen = 50
+
+  useEffect(() => {
+    // cast messages, for type-checking
+    const chatMessages = messages as Array<ChatMessageType | MessageInfoTypeClipped>
+    // trim messages, if necessary
+    const rMessages = trimMessages ? chatMessages.slice(-trimmedLen) : chatMessages
+    // note we have to clone it first, since reverse is destructive
+    const cMessages = [...rMessages].reverse()
+    setRevMessages(cMessages)
+  }, [messages, trimMessages])
+
   const height = chatContainerHeight || 280
   return (
     <Box sx={{ height: '100%' }}>
@@ -27,9 +39,12 @@ export const ChatMessagesList: React.FC<PropTypes> = ({
           <ForcesInChannel messages={messages as MessageChannel[]} colors={colors} icons={icons} names={names} onMarkAllAsRead={onMarkAllAsRead} />
         </Box>
       }
+      <FormGroup>
+        <FormControlLabel control={<Switch id='trim-mgs' color="default" onClick={() => setTrimMessages(!trimMessages)} checked={trimMessages} />} label={'Trim to last ' + trimmedLen + ' messaages'} />
+      </FormGroup>
       <Box ml={2} className={styles['messages-list']} style={{ height: observing ? 'unset' : `calc(100% - ${height}px)` }} flexDirection="column-reverse" display="flex">
         {
-          cMessages.map((message, key) => {
+          revMessages.map((message, key) => {
             if (message.messageType === INFO_MESSAGE_CLIPPED) {
               return (
                 <Box mr={2} key={`${message.gameTurn}-turnmarker-${key}`}>