From 36b4d7e87662d0b6b4718f6e62d53aa1e6578a6f Mon Sep 17 00:00:00 2001 From: louis Date: Sun, 12 May 2024 21:35:45 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20Ticker=20View=20API=20Call?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/Ticker.ts | 5 +++ src/components/ticker/TickerListItems.tsx | 2 +- src/queries/useTickerQuery.tsx | 18 +++++++++++ .../{tickers.tsx => useTickersQuery.tsx} | 0 src/views/HomeView.tsx | 2 +- src/views/TickerView.test.tsx | 32 +++++++++---------- src/views/TickerView.tsx | 9 +++--- 7 files changed, 44 insertions(+), 24 deletions(-) create mode 100644 src/queries/useTickerQuery.tsx rename src/queries/{tickers.tsx => useTickersQuery.tsx} (100%) diff --git a/src/api/Ticker.ts b/src/api/Ticker.ts index d878d4b..f7baca4 100644 --- a/src/api/Ticker.ts +++ b/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> => { + return fetch(`${ApiUrl}/admin/tickers/${id}`, { headers: headers }).then(response => response.json()) + } + const postTicker = (data: Ticker): Promise> => { return fetch(`${ApiUrl}/admin/tickers`, { headers: headers, @@ -214,6 +218,7 @@ export function useTickerApi(token: string) { deleteTicker, deleteTickerUser, getTickers, + getTicker, getTickerUsers, postTicker, putTicker, diff --git a/src/components/ticker/TickerListItems.tsx b/src/components/ticker/TickerListItems.tsx index 47cd159..bf46b0c 100644 --- a/src/components/ticker/TickerListItems.tsx +++ b/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 { diff --git a/src/queries/useTickerQuery.tsx b/src/queries/useTickerQuery.tsx new file mode 100644 index 0000000..4e9da30 --- /dev/null +++ b/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 diff --git a/src/queries/tickers.tsx b/src/queries/useTickersQuery.tsx similarity index 100% rename from src/queries/tickers.tsx rename to src/queries/useTickersQuery.tsx diff --git a/src/views/HomeView.tsx b/src/views/HomeView.tsx index 70b7c48..b1733fc 100644 --- a/src/views/HomeView.tsx +++ b/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' diff --git a/src/views/TickerView.test.tsx b/src/views/TickerView.test.tsx index b613cf1..b6be09d 100644 --- a/src/views/TickerView.test.tsx +++ b/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', }) diff --git a/src/views/TickerView.tsx b/src/views/TickerView.tsx index 1a901d5..21ae7f6 100644 --- a/src/views/TickerView.tsx +++ b/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() 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 ( - +

Ticker not found.

 ) } - const tickers = data?.data.tickers || [] - const ticker = tickers.find(ticker => ticker.id === tickerIdNum) + const ticker = data?.data.ticker return (