From 1b114cffef1230fe785c220b3070934ec1cc3b86 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Fri, 20 Oct 2023 15:38:35 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Remove=20old=20Twitter=20Message?=
 =?UTF-8?q?=20Limit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/message/MessageForm.tsx        | 21 +++++++++++---
 .../message/MessageFormCounter.test.tsx       | 29 +++++++++++++++++++
 src/components/message/MessageFormCounter.tsx | 12 ++++----
 3 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 src/components/message/MessageFormCounter.test.tsx

diff --git a/src/components/message/MessageForm.tsx b/src/components/message/MessageForm.tsx
index d7247528..280fe33a 100644
--- a/src/components/message/MessageForm.tsx
+++ b/src/components/message/MessageForm.tsx
@@ -23,8 +23,6 @@ interface FormValues {
   message: string
 }
 
-export const MESSAGE_LIMIT = 280
-
 const MessageForm: FC<Props> = ({ ticker }) => {
   const {
     formState: { isSubmitSuccessful, errors },
@@ -45,6 +43,21 @@ const MessageForm: FC<Props> = ({ ticker }) => {
   }
   const [map, setMap] = useState<FeatureCollection<Geometry, any>>(emptyMap)
 
+  /**
+   * Calculates the maximum length of a message based on the given ticker's configuration.
+   * If the ticker's Mastodon integration is active, the maximum length is 500 characters.
+   * Otherwise, the maximum length is 4096 characters (Telegram message limit).
+   * @param ticker - The ticker object to calculate the maximum message length for.
+   * @returns The maximum length of a message for the given ticker.
+   */
+  const maxLength: number = (function (ticker: Ticker) {
+    if (ticker.mastodon.active) {
+      return 500
+    }
+
+    return 4096
+  })(ticker)
+
   const onUpload = useCallback(
     (uploads: Upload[]) => {
       setAttachments(attachments.concat(uploads))
@@ -96,7 +109,7 @@ const MessageForm: FC<Props> = ({ ticker }) => {
         <TextField
           {...register('message', {
             required: true,
-            maxLength: MESSAGE_LIMIT,
+            maxLength: maxLength,
           })}
           color={errors.message ? 'error' : 'primary'}
           error={!!errors.message}
@@ -119,7 +132,7 @@ const MessageForm: FC<Props> = ({ ticker }) => {
           </IconButton>
           <MessageMapModal map={map} onChange={onMapUpdate} onClose={() => setMapDialogOpen(false)} open={mapDialogOpen} ticker={ticker} />
         </Box>
-        <MessageFormCounter letterCount={message?.length || 0} />
+        <MessageFormCounter letterCount={message?.length || 0} maxLength={maxLength} />
       </Stack>
       <Box>
         <AttachmentsPreview attachments={attachments} onDelete={onUploadDelete} />
diff --git a/src/components/message/MessageFormCounter.test.tsx b/src/components/message/MessageFormCounter.test.tsx
new file mode 100644
index 00000000..4f251650
--- /dev/null
+++ b/src/components/message/MessageFormCounter.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import MessageFormCounter from './MessageFormCounter'
+
+describe('MessageFormCounter', () => {
+  it('should render the correct letter count', () => {
+    const letterCount = 10
+    const maxLength = 100
+    render(<MessageFormCounter letterCount={letterCount} maxLength={maxLength} />)
+    const letterCountElement = screen.getByText(`${letterCount}/${maxLength}`)
+    expect(letterCountElement.parentElement).toHaveClass('MuiChip-colorSuccess')
+  })
+
+  it('should render a red chip when the letter count is over the limit', () => {
+    const letterCount = 110
+    const maxLength = 100
+    render(<MessageFormCounter letterCount={letterCount} maxLength={maxLength} />)
+    const letterCountElement = screen.getByText(`${letterCount}/${maxLength}`)
+    expect(letterCountElement.parentElement).toHaveClass('MuiChip-colorError')
+  })
+
+  it('should render a green chip when the letter count is under the limit', () => {
+    const letterCount = 90
+    const maxLength = 100
+    render(<MessageFormCounter letterCount={letterCount} maxLength={maxLength} />)
+    const letterCountElement = screen.getByText(`${letterCount}/${maxLength}`)
+    expect(letterCountElement.parentElement).toHaveClass('MuiChip-colorWarning')
+  })
+})
diff --git a/src/components/message/MessageFormCounter.tsx b/src/components/message/MessageFormCounter.tsx
index e481b78e..2249da65 100644
--- a/src/components/message/MessageFormCounter.tsx
+++ b/src/components/message/MessageFormCounter.tsx
@@ -1,29 +1,29 @@
 import { ChipPropsColorOverrides, Chip } from '@mui/material'
 import { OverridableStringUnion } from '@mui/types'
 import React, { FC, useEffect, useState } from 'react'
-import { MESSAGE_LIMIT } from './MessageForm'
 
 interface Props {
+  maxLength: number
   letterCount: number
 }
 
-const MessageFormCounter: FC<Props> = ({ letterCount }) => {
+const MessageFormCounter: FC<Props> = ({ letterCount, maxLength }) => {
   const [color, setColor] =
     useState<OverridableStringUnion<'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', ChipPropsColorOverrides>>('default')
 
   useEffect(() => {
-    if (letterCount > MESSAGE_LIMIT) {
+    if (letterCount > maxLength) {
       setColor('error')
-    } else if (letterCount >= 240) {
+    } else if (letterCount >= maxLength * 0.9) {
       setColor('warning')
     } else if (letterCount === 0) {
       setColor('default')
     } else {
       setColor('success')
     }
-  }, [letterCount])
+  }, [letterCount, maxLength])
 
-  return <Chip color={color} label={`${letterCount}/${MESSAGE_LIMIT}`} size="small" variant="outlined" />
+  return <Chip color={color} label={`${letterCount}/${maxLength}`} size="small" variant="outlined" />
 }
 
 export default MessageFormCounter