Merge pull request #711 from systemli/Disable-Message-Form-when-Ticke…

…r-is-not-active 💄 Disable Message Form when Ticker is not active
systemli · Feb 2, 2025 · 59c52d0 · 59c52d0
2 parents 93c1228 + 0526a88
commit 59c52d0
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 44 deletions.
diff --git a/src/components/message/EmojiPicker.tsx b/src/components/message/EmojiPicker.tsx
@@ -1,17 +1,19 @@
-import React, { FC } from 'react'
 import data from '@emoji-mart/data'
 import Picker from '@emoji-mart/react'
-import { Emoji } from './Emoji'
-import { Box, IconButton, Popper } from '@mui/material'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSmile } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Box, IconButton, Popper } from '@mui/material'
+import React, { FC } from 'react'
 import palette from '../../theme/palette'
+import { Emoji } from './Emoji'
 
 interface Props {
+  color?: string
+  disabled: boolean
   onChange: (emoji: Emoji) => void
 }
 
-const EmojiPicker: FC<Props> = ({ onChange }) => {
+const EmojiPicker: FC<Props> = ({ color, disabled, onChange }) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
 
   const handleChange = (emoji: Emoji) => {
@@ -25,12 +27,13 @@ const EmojiPicker: FC<Props> = ({ onChange }) => {
   }
 
   const open = Boolean(anchorEl)
+  color = color ?? palette.primary['main']
   const id = open ? 'simple-popper' : undefined
 
   return (
     <Box>
-      <IconButton component="span" onClick={handleClick} style={{ marginRight: '8px' }}>
-        <FontAwesomeIcon color={palette.primary['main']} icon={faSmile} size="xs" />
+      <IconButton component="span" onClick={handleClick} style={{ marginRight: '8px' }} disabled={disabled}>
+        <FontAwesomeIcon color={color} icon={faSmile} size="xs" />
       </IconButton>
       <Popper anchorEl={anchorEl} id={id} open={open}>
         <Picker data={data} onClickOutside={() => setAnchorEl(null)} onEmojiSelect={handleChange} theme="light" />

diff --git a/src/components/message/MessageForm.test.tsx b/src/components/message/MessageForm.test.tsx
@@ -36,6 +36,7 @@ describe('MessageForm', () => {
     setup({
       id: 1,
       title: 'ticker',
+      active: true,
       bluesky: { active: false },
       mastodon: { active: false },
       telegram: { active: false },
@@ -54,4 +55,19 @@ describe('MessageForm', () => {
     expect(api.postMessageApi).toHaveBeenCalledTimes(1)
     expect(api.postMessageApi).toHaveBeenCalledWith('', '1', 'Hello, World!', { features: [], type: 'FeatureCollection' }, [])
   })
+
+  it('should render the component when ticker is inactive', async () => {
+    setup({
+      id: 1,
+      title: 'ticker',
+      active: false,
+      bluesky: { active: false },
+      mastodon: { active: false },
+      telegram: { active: false },
+      location: { lat: 0, lon: 0 },
+    } as Ticker)
+
+    expect(screen.getByRole('textbox')).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled()
+  })
 })
diff --git a/src/components/message/MessageForm.tsx b/src/components/message/MessageForm.tsx
@@ -115,43 +115,49 @@ const MessageForm: FC<Props> = ({ ticker }) => {
   }, [isSubmitSuccessful, reset])
 
   const message = watch('message')
+  const disabled = !ticker.active || isSubmitting
+  const color = disabled ? palette.action.disabled : palette.primary['main']
+  const placeholder = ticker.active ? 'Write a message' : "You can't post messages to inactive tickers."
 
   return (
-    <form id="sendMessage" onSubmit={handleSubmit(onSubmit)}>
-      <FormGroup sx={{ mb: 1 }}>
-        <TextField
-          {...register('message', {
-            required: true,
-            maxLength: maxLength,
-          })}
-          color={errors.message ? 'error' : 'primary'}
-          error={!!errors.message}
-          helperText={
-            errors.message?.type === 'maxLength' ? 'The message is too long.' : errors.message?.type === 'required' ? 'The message is required.' : null
-          }
-          multiline
-          placeholder="Write a message"
-          rows="3"
-        />
-      </FormGroup>
-      <Stack alignItems="center" direction="row" justifyContent="space-between">
-        <Box display="flex">
-          <Button disabled={isSubmitting} startIcon={<FontAwesomeIcon icon={faPaperPlane} />} sx={{ mr: 1 }} type="submit" variant="outlined">
-            Send
-          </Button>
-          <EmojiPicker onChange={onSelectEmoji} />
-          <UploadButton onUpload={onUpload} ticker={ticker} />
-          <IconButton component="span" onClick={() => setMapDialogOpen(true)}>
-            <FontAwesomeIcon color={palette.primary['main']} icon={faMapLocationDot} size="xs" />
-          </IconButton>
-          <MessageMapModal map={map} onChange={onMapUpdate} onClose={() => setMapDialogOpen(false)} open={mapDialogOpen} ticker={ticker} />
+    <Box>
+      <form id="sendMessage" onSubmit={handleSubmit(onSubmit)}>
+        <FormGroup sx={{ mb: 1 }}>
+          <TextField
+            {...register('message', {
+              required: true,
+              maxLength: maxLength,
+            })}
+            color={errors.message ? 'error' : 'primary'}
+            error={!!errors.message}
+            helperText={
+              errors.message?.type === 'maxLength' ? 'The message is too long.' : errors.message?.type === 'required' ? 'The message is required.' : null
+            }
+            multiline
+            placeholder={placeholder}
+            rows="3"
+            disabled={!ticker.active}
+          />
+        </FormGroup>
+        <Stack alignItems="center" direction="row" justifyContent="space-between">
+          <Box display="flex">
+            <Button disabled={disabled} startIcon={<FontAwesomeIcon icon={faPaperPlane} />} sx={{ mr: 1 }} type="submit" variant="outlined">
+              Send
+            </Button>
+            <EmojiPicker color={color} disabled={disabled} onChange={onSelectEmoji} />
+            <UploadButton color={color} disabled={disabled} onUpload={onUpload} ticker={ticker} />
+            <IconButton disabled={disabled} component="span" onClick={() => setMapDialogOpen(true)}>
+              <FontAwesomeIcon color={color} icon={faMapLocationDot} size="xs" />
+            </IconButton>
+            <MessageMapModal map={map} onChange={onMapUpdate} onClose={() => setMapDialogOpen(false)} open={mapDialogOpen} ticker={ticker} />
+          </Box>
+          <MessageFormCounter letterCount={message?.length || 0} maxLength={maxLength} />
+        </Stack>
+        <Box>
+          <AttachmentsPreview attachments={attachments} onDelete={onUploadDelete} />
         </Box>
-        <MessageFormCounter letterCount={message?.length || 0} maxLength={maxLength} />
-      </Stack>
-      <Box>
-        <AttachmentsPreview attachments={attachments} onDelete={onUploadDelete} />
-      </Box>
-    </form>
+      </form>
+    </Box>
   )
 }
 

diff --git a/src/components/message/UploadButton.tsx b/src/components/message/UploadButton.tsx
@@ -8,11 +8,13 @@ import useAuth from '../../contexts/useAuth'
 import palette from '../../theme/palette'
 
 interface Props {
+  color?: string
+  disabled: boolean
   ticker: Ticker
   onUpload: (uploads: Upload[]) => void
 }
 
-const UploadButton: FC<Props> = ({ onUpload, ticker }) => {
+const UploadButton: FC<Props> = ({ color, disabled, onUpload, ticker }) => {
   const ref = createRef<HTMLInputElement>()
   const { token } = useAuth()
 
@@ -39,10 +41,12 @@ const UploadButton: FC<Props> = ({ onUpload, ticker }) => {
     })
   }
 
+  color = color ?? palette.primary['main']
+
   return (
     <>
-      <IconButton onClick={refClick} sx={{ mr: 1 }}>
-        <FontAwesomeIcon color={palette.primary['main']} icon={faImages} size="xs" />
+      <IconButton onClick={refClick} sx={{ mr: 1 }} disabled={disabled}>
+        <FontAwesomeIcon color={color} icon={faImages} size="xs" />
       </IconButton>
       <input ref={ref} hidden multiple onChange={handleUpload} type="file" />
     </>