Merge pull request #719 from systemli/Add-Reload-Button-for-Messages

✨ Add Reload Button for Messages

src/components/message/MessageListReload.test.tsx

@@ -0,0 +1,22 @@
+import { screen } from '@testing-library/dom'
+import userEvent from '@testing-library/user-event'
+import { Ticker } from '../../api/Ticker'
+import { queryClient, setup } from '../../tests/utils'
+import MessageListReload from './MessageListReload'
+
+describe('MessageListReload', () => {
+  const ticker = { id: 1 } as Ticker
+
+  it('should render', async () => {
+    setup(queryClient, <MessageListReload ticker={ticker} />)
+
+    vi.spyOn(queryClient, 'invalidateQueries')
+
+    expect(screen.getByRole('button', { name: 'reload' })).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('button', { name: 'reload' }))
+
+    expect(queryClient.invalidateQueries).toHaveBeenCalledTimes(1)
+    expect(queryClient.invalidateQueries).toHaveBeenCalledWith({ queryKey: ['messages', ticker.id] })
+  })
+})

src/components/message/MessageListReload.tsx

@@ -0,0 +1,30 @@
+import { Refresh } from '@mui/icons-material'
+import { Box, Button } from '@mui/material'
+import { useQueryClient } from '@tanstack/react-query'
+import { FC, useState } from 'react'
+import { Ticker } from '../../api/Ticker'
+
+interface Props {
+  ticker: Ticker
+}
+
+const MessageListReload: FC<Props> = ({ ticker }) => {
+  const [loading, setLoading] = useState<boolean>(false)
+  const queryClient = useQueryClient()
+
+  const handleClick = async () => {
+    setLoading(true)
+    await queryClient.invalidateQueries({ queryKey: ['messages', ticker.id] })
+    setLoading(false)
+  }
+
+  return (
+    <Box sx={{ textAlign: 'right' }}>
+      <Button aria-label="reload" onClick={handleClick} size="small" startIcon={<Refresh />} loading={loading} loadingPosition="start">
+        Reload Messages
+      </Button>
+    </Box>
+  )
+}
+
+export default MessageListReload

src/components/ticker/Ticker.tsx

@@ -8,6 +8,7 @@ import useAuth from '../../contexts/useAuth'
 import Loader from '../Loader'
 import MessageForm from '../message/MessageForm'
 import MessageList from '../message/MessageList'
+import MessageListReload from '../message/MessageListReload'
 import TickerCard from './TickerCard'
 import TickerDangerZoneCard from './TickerDangerZoneCard'
 import TickerModalForm from './TickerModalForm'
@@ -86,6 +87,9 @@ const Ticker: FC<Props> = ({ ticker, isLoading }) => {
             </CardContent>
           </Card>
         </Grid>
+        <Grid size={{ xs: 12 }}>
+          <MessageListReload ticker={ticker} />
+        </Grid>
         <Grid size={{ xs: 12 }}>
           <MessageList ticker={ticker} />
         </Grid>