Merge pull request #633 from systemli/Fix-Ticker-View-API-Call

🐛 Fix Ticker View API Call

src/api/Ticker.ts

@@ -134,6 +134,10 @@ export function useTickerApi(token: string) {
     return fetch(`${ApiUrl}/admin/tickers?${query}`, { headers: headers }).then(response => response.json())
   }
 
+  const getTicker = (id: number): Promise<Response<TickerResponseData>> => {
+    return fetch(`${ApiUrl}/admin/tickers/${id}`, { headers: headers }).then(response => response.json())
+  }
+
   const postTicker = (data: Ticker): Promise<Response<TickerResponseData>> => {
     return fetch(`${ApiUrl}/admin/tickers`, {
       headers: headers,
@@ -214,6 +218,7 @@ export function useTickerApi(token: string) {
     deleteTicker,
     deleteTickerUser,
     getTickers,
+    getTicker,
     getTickerUsers,
     postTicker,
     putTicker,

src/components/ticker/TickerListItems.tsx

@@ -1,7 +1,7 @@
 import { CircularProgress, Stack, TableBody, TableCell, TableRow, Typography } from '@mui/material'
 import { FC } from 'react'
 import { GetTickersQueryParams } from '../../api/Ticker'
-import useTickersQuery from '../../queries/tickers'
+import useTickersQuery from '../../queries/useTickersQuery'
 import TickerListItem from './TickerListItem'
 
 interface Props {

src/queries/useTickerQuery.tsx

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query'
+import { useTickerApi } from '../api/Ticker'
+
+interface Props {
+  id: number
+  token: string
+}
+
+const useTickerQuery = ({ id, token }: Props) => {
+  const { getTicker } = useTickerApi(token)
+
+  return useQuery({
+    queryKey: ['ticker', id],
+    queryFn: () => getTicker(id),
+  })
+}
+
+export default useTickerQuery

src/views/HomeView.tsx

@@ -3,7 +3,7 @@ import { Navigate } from 'react-router'
 import { useSearchParams } from 'react-router-dom'
 import Loader from '../components/Loader'
 import useAuth from '../contexts/useAuth'
-import useTickersQuery from '../queries/tickers'
+import useTickersQuery from '../queries/useTickersQuery'
 import ErrorView from './ErrorView'
 import Layout from './Layout'
 import TickerListView from './TickerListView'

src/views/TickerView.test.tsx

@@ -57,25 +57,23 @@ describe('TickerView', function () {
 
   it('should render the ticker', async function () {
     fetchMock.doMockOnceIf(
-      /v1\/admin\/tickers/,
+      /v1\/admin\/tickers\/1/,
       JSON.stringify({
         data: {
-          tickers: [
-            {
-              id: 1,
-              createdAt: new Date(),
-              domain: 'localhost',
-              title: 'Ticker Title',
-              description: 'Description',
-              active: true,
-              information: {},
-              mastodon: {},
-              twitter: {},
-              telegram: {},
-              bluesky: {},
-              location: {},
-            },
-          ],
+          ticker: {
+            id: 1,
+            createdAt: new Date(),
+            domain: 'localhost',
+            title: 'Ticker Title',
+            description: 'Description',
+            active: true,
+            information: {},
+            mastodon: {},
+            twitter: {},
+            telegram: {},
+            bluesky: {},
+            location: {},
+          },
         },
         status: 'success',
       })

src/views/TickerView.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { useParams } from 'react-router-dom'
 import Ticker from '../components/ticker/Ticker'
 import useAuth from '../contexts/useAuth'
-import useTickersQuery from '../queries/tickers'
+import useTickerQuery from '../queries/useTickerQuery'
 import ErrorView from './ErrorView'
 import Layout from './Layout'
 
@@ -14,20 +14,19 @@ const TickerView: FC = () => {
   const { tickerId } = useParams<keyof TickerViewParams>() as TickerViewParams
   const tickerIdNum = parseInt(tickerId)
   const { token } = useAuth()
-  const { data, isLoading, error } = useTickersQuery({ token: token, params: {} })
+  const { data, isLoading, error } = useTickerQuery({ id: tickerIdNum, token })
 
   if (error !== null || data?.status === 'error') {
     return (
       <Layout>
-        <ErrorView queryKey={['tickers']}>
+        <ErrorView queryKey={['ticker']}>
           <p>Ticker not found.</p>
         </ErrorView>
       </Layout>
     )
   }
 
-  const tickers = data?.data.tickers || []
-  const ticker = tickers.find(ticker => ticker.id === tickerIdNum)
+  const ticker = data?.data.ticker
 
   return (
     <Layout>