Merge pull request #617 from systemli/dependabot/npm_and_yarn/react-q…

…uery-e49fe88e2b

Bump the react-query group with 2 updates

package.json

@@ -21,8 +21,8 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.15.2",
     "@mui/material": "^5.14.11",
-    "@tanstack/react-query": "^4.10.3",
-    "@tanstack/react-query-devtools": "^4.11.0",
+    "@tanstack/react-query": "^5.32.0",
+    "@tanstack/react-query-devtools": "^5.32.0",
     "emoji-mart": "^5.6.0",
     "@types/react": "^18.3.0",
     "dayjs": "^1.11.10",

src/components/ProtectedRoute.tsx

@@ -17,9 +17,9 @@ const ProtectedRoute: FC<Props> = ({ role, outlet }) => {
   if (!user.roles.includes(role)) {
     //TODO: ErrorView
     return (
-      <React.Fragment>
+      <>
         <h1>Permission denied</h1>
-      </React.Fragment>
+      </>
     )
   }
 

src/components/common/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react'
+import { FC, ReactNode } from 'react'
 import { Breakpoint, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Stack, SxProps } from '@mui/material'
 import { Close } from '@mui/icons-material'
 

src/components/message/Message.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import { FC, useState } from 'react'
 import { Message as MessageType } from '../../api/Message'
 import MessageModalDelete from './MessageModalDelete'
 import MessageMap from './MessageMap'

src/components/message/MessageAttachments.tsx

@@ -1,5 +1,5 @@
 import { ImageList, ImageListItem } from '@mui/material'
-import React, { FC, useCallback, useState } from 'react'
+import { FC, useCallback, useState } from 'react'
 import Lightbox from 'react-image-lightbox'
 import { Message } from '../../api/Message'
 import 'react-image-lightbox/style.css'

src/components/message/MessageForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import { useMessageApi } from '../../api/Message'
 import { Ticker } from '../../api/Ticker'
 import { SubmitHandler, useForm } from 'react-hook-form'
@@ -40,10 +40,12 @@ const MessageForm: FC<Props> = ({ ticker }) => {
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false)
   const [attachments, setAttachments] = useState<Upload[]>([])
   const [mapDialogOpen, setMapDialogOpen] = useState<boolean>(false)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const emptyMap: FeatureCollection<Geometry, any> = {
     type: 'FeatureCollection',
     features: [],
   }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [map, setMap] = useState<FeatureCollection<Geometry, any>>(emptyMap)
 
   /**
@@ -85,6 +87,7 @@ const MessageForm: FC<Props> = ({ ticker }) => {
     setValue('message', message.toString() + emoji.native + ' ')
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onMapUpdate = useCallback((featureGroups: FeatureCollection<Geometry, any>) => {
     setMap(featureGroups)
   }, [])
@@ -96,7 +99,7 @@ const MessageForm: FC<Props> = ({ ticker }) => {
     })
 
     postMessage(ticker.id.toString(), data.message, map, uploads).finally(() => {
-      queryClient.invalidateQueries(['messages', ticker.id])
+      queryClient.invalidateQueries({ queryKey: ['messages', ticker.id] })
       setAttachments([])
       setIsSubmitting(false)
     })

src/components/message/MessageFormCounter.tsx

@@ -1,6 +1,6 @@
+import { FC, useEffect, useState } from 'react'
 import { ChipPropsColorOverrides, Chip } from '@mui/material'
 import { OverridableStringUnion } from '@mui/types'
-import React, { FC, useEffect, useState } from 'react'
 
 interface Props {
   maxLength: number

src/components/message/MessageList.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react'
+import { FC, useEffect } from 'react'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { Ticker } from '../../api/Ticker'
 import { useMessageApi } from '../../api/Message'
@@ -20,7 +20,10 @@ const MessageList: FC<Props> = ({ ticker }) => {
     return getMessages(ticker.id, pageParam)
   }
 
-  const { data, fetchNextPage, isFetchingNextPage, hasNextPage, status } = useInfiniteQuery(['messages', ticker.id], fetchMessages, {
+  const { data, fetchNextPage, isFetchingNextPage, hasNextPage, status } = useInfiniteQuery({
+    queryKey: ['messages', ticker.id],
+    queryFn: fetchMessages,
+    initialPageParam: 0,
     getNextPageParam: lastPage => {
       return lastPage.data.messages.length === 10 ? lastPage.data.messages.slice(-1).pop()?.id : undefined
     },
@@ -50,7 +53,7 @@ const MessageList: FC<Props> = ({ ticker }) => {
     }
   }, [fetchNextPage, hasNextPage])
 
-  if (status === 'loading') {
+  if (status === 'pending') {
     return <Loader />
   }
 

src/components/message/MessageMapModal.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import { FC, useState } from 'react'
 import L, { FeatureGroup as FG, latLng } from 'leaflet'
 import { FeatureGroup, GeoJSON, MapContainer, TileLayer } from 'react-leaflet'
 import { EditControl } from 'react-leaflet-draw'
@@ -10,7 +10,9 @@ import Modal from '../common/Modal'
 interface Props {
   open: boolean
   onClose: () => void
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onChange: (features: FeatureCollection<Geometry, any>) => void
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   map: FeatureCollection<Geometry, any>
   ticker: Ticker
 }
@@ -29,7 +31,7 @@ const MessageMapModal: FC<Props> = ({ open, onChange, onClose, map, ticker }) =>
   const handleChange = () => {
     const geoJSON = new L.GeoJSON(map)
     geoJSON.eachLayer(layer => featureGroup.addLayer(layer))
-    // @ts-ignore
+    // @ts-expect-error - toGeoJSON() is not part of the type definition
     onChange(featureGroup.toGeoJSON())
     onClose()
   }

src/components/message/MessageModalDelete.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react'
+import { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { Message, useMessageApi } from '../../api/Message'
 import useAuth from '../useAuth'
@@ -16,7 +16,7 @@ const MessageModalDelete: FC<Props> = ({ message, onClose, open }) => {
 
   const handleDelete = useCallback(() => {
     deleteMessage(message).then(() => {
-      queryClient.invalidateQueries(['messages', message.ticker])
+      queryClient.invalidateQueries({ queryKey: ['messages', message.ticker] })
       onClose()
     })
   }, [deleteMessage, message, onClose, queryClient])

src/components/message/UploadButton.tsx

@@ -1,4 +1,4 @@
-import React, { createRef, FC, useCallback } from 'react'
+import { createRef, FC, useCallback } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconButton } from '@mui/material'
 import { Ticker } from '../../api/Ticker'
@@ -23,11 +23,11 @@ const UploadButton: FC<Props> = ({ onUpload, ticker }) => {
 
   const handleUpload = (e: React.FormEvent<HTMLInputElement>) => {
     e.preventDefault()
-    // @ts-ignore
+    // @ts-expect-error files is not a property of Event
     const files = e.target.files as Array<FileList>
     const formData = new FormData()
     for (let i = 0; i < files.length; i++) {
-      // @ts-ignore
+      // @ts-expect-error files is not a property of Event
       formData.append('files', files[i])
     }
     formData.append('ticker', ticker.id.toString())
@@ -38,12 +38,12 @@ const UploadButton: FC<Props> = ({ onUpload, ticker }) => {
   }
 
   return (
-    <React.Fragment>
+    <>
       <IconButton onClick={refClick} sx={{ mr: 1 }}>
         <FontAwesomeIcon color={palette.primary['main']} icon={faImages} size="xs" />
       </IconButton>
       <input ref={ref} hidden multiple onChange={handleUpload} type="file" />
-    </React.Fragment>
+    </>
   )
 }
 

src/components/settings/InactiveSettingsCard.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import { FC, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useSettingsApi } from '../../api/Settings'
 import ErrorView from '../../views/ErrorView'
@@ -14,7 +14,7 @@ const InactiveSettingsCard: FC = () => {
   const [formOpen, setFormOpen] = useState<boolean>(false)
   const { token } = useAuth()
   const { getInactiveSettings } = useSettingsApi(token)
-  const { isLoading, error, data } = useQuery(['inactive_settings'], getInactiveSettings)
+  const { isLoading, error, data } = useQuery({ queryKey: ['inactive_settings'], queryFn: getInactiveSettings })
 
   const handleFormOpen = () => {
     setFormOpen(true)

src/components/settings/InactiveSettingsForm.tsx

@@ -39,7 +39,7 @@ const InactiveSettingsForm: FC<Props> = ({ name, setting, callback }) => {
 
   const onSubmit: SubmitHandler<FormValues> = data => {
     putInactiveSettings(data)
-      .then(() => queryClient.invalidateQueries(['inactive_settings']))
+      .then(() => queryClient.invalidateQueries({ queryKey: ['inactive_settings'] }))
       .finally(() => callback())
   }
 

src/components/settings/RefreshIntervalCard.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import { FC, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useSettingsApi } from '../../api/Settings'
 import ErrorView from '../../views/ErrorView'
@@ -13,7 +13,7 @@ const RefreshIntervalCard: FC = () => {
   const [formOpen, setFormOpen] = useState<boolean>(false)
   const { token } = useAuth()
   const { getRefreshInterval } = useSettingsApi(token)
-  const { isLoading, error, data } = useQuery(['refresh_interval_setting'], getRefreshInterval)
+  const { isLoading, error, data } = useQuery({ queryKey: ['refresh_interval_setting'], queryFn: getRefreshInterval })
 
   const handleFormOpen = () => {
     setFormOpen(true)

src/components/settings/RefreshIntervalForm.tsx

@@ -27,7 +27,7 @@ const RefreshIntervalForm: FC<Props> = ({ name, setting, callback }) => {
 
   const onSubmit: SubmitHandler<FormValues> = data => {
     putRefreshInterval(data.refreshInterval)
-      .then(() => queryClient.invalidateQueries(['refresh_interval_setting']))
+      .then(() => queryClient.invalidateQueries({ queryKey: ['refresh_interval_setting'] }))
       .finally(() => callback())
   }
 

src/components/ticker/MastodonCard.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from 'react'
+import { FC, useCallback, useState } from 'react'
 import { faMastodon } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useQueryClient } from '@tanstack/react-query'
@@ -23,13 +23,13 @@ const MastodonCard: FC<Props> = ({ ticker }) => {
 
   const handleDisconnect = useCallback(() => {
     deleteTickerMastodon(ticker).finally(() => {
-      queryClient.invalidateQueries(['ticker', ticker.id])
+      queryClient.invalidateQueries({ queryKey: ['ticker', ticker.id] })
     })
   }, [deleteTickerMastodon, queryClient, ticker])
 
   const handleToggle = useCallback(() => {
     putTickerMastodon({ active: !mastodon.active }, ticker).finally(() => {
-      queryClient.invalidateQueries(['ticker', ticker.id])
+      queryClient.invalidateQueries({ queryKey: ['ticker', ticker.id] })
     })
   }, [mastodon.active, putTickerMastodon, queryClient, ticker])
 

src/components/ticker/MastodonForm.tsx

@@ -24,7 +24,7 @@ const MastodonForm: FC<Props> = ({ callback, ticker }) => {
 
   const onSubmit: SubmitHandler<TickerMastodonFormData> = data => {
     putTickerMastodon(data, ticker).finally(() => {
-      queryClient.invalidateQueries(['ticker', ticker.id])
+      queryClient.invalidateQueries({ queryKey: ['ticker', ticker.id] })
       callback()
     })
   }

src/components/ticker/TelegramCard.tsx

@@ -1,9 +1,9 @@
+import { FC, useCallback, useState } from 'react'
 import { faTelegram } from '@fortawesome/free-brands-svg-icons'
 import { faBan, faGear, faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Box, Button, Card, CardActions, CardContent, Divider, Link, Stack, Typography } from '@mui/material'
 import { useQueryClient } from '@tanstack/react-query'
-import React, { FC, useCallback, useState } from 'react'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
 import TelegramModalForm from './TelegramModalForm'
@@ -21,12 +21,12 @@ const TelegramCard: FC<Props> = ({ ticker }) => {
   const telegram = ticker.telegram
 
   const handleToggle = useCallback(() => {
-    putTickerTelegram({ active: !telegram.active }, ticker).finally(() => queryClient.invalidateQueries(['ticker', ticker.id]))
+    putTickerTelegram({ active: !telegram.active }, ticker).finally(() => queryClient.invalidateQueries({ queryKey: ['ticker', ticker.id] }))
   }, [putTickerTelegram, queryClient, telegram.active, ticker])
 
   const handleDisconnect = useCallback(() => {
     deleteTickerTelegram(ticker).finally(() => {
-      queryClient.invalidateQueries(['ticker', ticker.id])
+      queryClient.invalidateQueries({ queryKey: ['ticker', ticker.id] })
     })
   }, [deleteTickerTelegram, queryClient, ticker])
 

src/components/ticker/TelegramForm.tsx

@@ -29,7 +29,7 @@ const TelegramForm: FC<Props> = ({ callback, ticker }) => {
 
   const onSubmit: SubmitHandler<FormValues> = data => {
     putTickerTelegram(data, ticker).finally(() => {
-      queryClient.invalidateQueries(['ticker', ticker.id])
+      queryClient.invalidateQueries({ queryKey: ['ticker', ticker.id] })
       callback()
     })
   }

src/components/ticker/Ticker.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import { FC, useState } from 'react'
 import { Ticker as Model } from '../../api/Ticker'
 import MessageForm from '../message/MessageForm'
 import TickerCard from './TickerCard'

src/components/ticker/TickerDangerZoneCard.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import { FC, useState } from 'react'
 import { Box, Button, Card, CardContent, Typography } from '@mui/material'
 import { Ticker } from '../../api/Ticker'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

src/components/ticker/TickerForm.tsx

@@ -85,13 +85,13 @@ const TickerForm: FC<Props> = ({ callback, id, ticker }) => {
   const onSubmit: SubmitHandler<FormValues> = data => {
     if (ticker) {
       putTicker(data, ticker.id).finally(() => {
-        queryClient.invalidateQueries(['tickers'])
-        queryClient.invalidateQueries(['ticker', ticker.id])
+        queryClient.invalidateQueries({ queryKey: ['tickers'] })
+        queryClient.invalidateQueries({ queryKey: ['ticker', ticker.id] })
         callback()
       })
     } else {
       postTicker(data).finally(() => {
-        queryClient.invalidateQueries(['tickers'])
+        queryClient.invalidateQueries({ queryKey: ['tickers'] })
         callback()
       })
     }

src/components/ticker/TickerList.tsx

@@ -11,7 +11,7 @@ import { Card, CardContent, Table, TableCell, TableContainer, TableHead, TableRo
 const TickerList: FC = () => {
   const { token, user } = useAuth()
   const { getTickers } = useTickerApi(token)
-  const { isLoading, error, data } = useQuery(['tickers'], getTickers)
+  const { isLoading, error, data } = useQuery({ queryKey: ['tickers'], queryFn: getTickers })
 
   if (isLoading) {
     return <Loader />

src/components/ticker/TickerModalDelete.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react'
+import { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
@@ -17,7 +17,7 @@ const TickerModalDelete: FC<Props> = ({ open, onClose, ticker }) => {
 
   const handleDelete = useCallback(() => {
     deleteTicker(ticker).finally(() => {
-      queryClient.invalidateQueries(['tickers'])
+      queryClient.invalidateQueries({ queryKey: ['tickers'] })
     })
   }, [deleteTicker, ticker, queryClient])
 

src/components/ticker/TickerResetModal.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react'
+import { FC, useCallback } from 'react'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
 import { useQueryClient } from '@tanstack/react-query'
@@ -18,9 +18,9 @@ const TickerResetModal: FC<Props> = ({ onClose, open, ticker }) => {
   const handleReset = useCallback(() => {
     putTickerReset(ticker)
       .then(() => {
-        queryClient.invalidateQueries(['messages', ticker.id])
-        queryClient.invalidateQueries(['tickerUsers', ticker.id])
-        queryClient.invalidateQueries(['ticker', ticker.id])
+        queryClient.invalidateQueries({ queryKey: ['messages', ticker.id] })
+        queryClient.invalidateQueries({ queryKey: ['tickerUsers', ticker.id] })
+        queryClient.invalidateQueries({ queryKey: ['ticker', ticker.id] })
       })
       .finally(() => {
         onClose()

src/components/ticker/TickerUserListItem.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import { FC, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconButton, ListItem, ListItemIcon, ListItemText } from '@mui/material'
 import { Ticker } from '../../api/Ticker'

src/components/ticker/TickerUserModalDelete.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react'
+import { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import { User } from '../../api/User'
@@ -19,7 +19,7 @@ const TickerUserModalDelete: FC<Props> = ({ open, onClose, ticker, user }) => {
 
   const handleDelete = useCallback(() => {
     deleteTickerUser(ticker, user).finally(() => {
-      queryClient.invalidateQueries(['tickerUsers', ticker.id])
+      queryClient.invalidateQueries({ queryKey: ['tickerUsers', ticker.id] })
       onClose()
     })
   }, [deleteTickerUser, ticker, user, queryClient, onClose])