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 = ({ ticker }) => { const { formState: { isSubmitSuccessful, errors }, @@ -45,6 +43,21 @@ const MessageForm: FC = ({ ticker }) => { } const [map, setMap] = useState>(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 = ({ ticker }) => { = ({ ticker }) => { setMapDialogOpen(false)} open={mapDialogOpen} ticker={ticker} /> - + 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() + 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() + 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() + 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 = ({ letterCount }) => { +const MessageFormCounter: FC = ({ letterCount, maxLength }) => { const [color, setColor] = useState>('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 + return } export default MessageFormCounter