Fix typing and update tests

Author: johnhunter

src/App/components/Loading/Loading.test.tsx

@@ -19,9 +19,9 @@ describe('Loading', () => {
   });
 
   test('Displays given error', () => {
-    const message = 'given error';
+    const statusText = 'given error';
     render(
-      <Loading status="error" error={{ message }}>
+      <Loading status="error" error={{ statusText, status: 0 }}>
         {children}
       </Loading>,
     );

src/App/components/Loading/Loading.tsx

@@ -1,10 +1,10 @@
 import { FC, ReactNode } from 'react';
 import Info from '../Info';
-import type { Status, Error } from '@/types';
+import type { Status, HttpError } from '@/types';
 
 interface LoadingProps {
   status: Status;
-  error: Error | null;
+  error: HttpError | null;
   children: ReactNode;
 }
 
@@ -19,7 +19,7 @@ const Loading: FC<LoadingProps> = ({ status, error, children }) => {
     default: {
       return (
         <Info error>
-          Error: {error?.message || 'an unknown error occurred'}
+          Error: {error?.statusText || 'an unknown error occurred'}
         </Info>
       );
     }

src/App/components/Post/useData.ts

@@ -1,12 +1,12 @@
 import { useQuery } from '@tanstack/react-query';
 import { getJson } from '@/api';
-import type { PostData } from '@/types';
+import type { PostData, HttpError } from '@/types';
 
 const fetchPostById = async (id: number) =>
   await getJson<PostData>(`posts/${id}`);
 
 const useData = (postId: number) =>
-  useQuery<PostData, Error>(['post', postId], () => fetchPostById(postId), {
+  useQuery<PostData, HttpError>(['post', postId], () => fetchPostById(postId), {
     enabled: !!postId,
   });
 

src/App/components/Posts/Posts.tsx

@@ -5,6 +5,7 @@ import css from './Posts.module.css';
 import Info from '../Info';
 import Loading from '../Loading';
 import useData from './useData';
+import { PostData } from '@/types';
 
 interface PostsProps {
   setPostId: (id: number | null) => void;
@@ -25,7 +26,7 @@ const Posts: FC<PostsProps> = ({ setPostId }) => {
             Background Updating
           </Info>
           <ul className={css.list}>
-            {data.map(({ id, title }) => (
+            {data.map(({ id, title }: PostData) => (
               <li key={id}>
                 <a
                   href="#"

src/App/components/Posts/useData.ts

@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 import type { PostData } from '@/types';
-import { getJson } from '@/api';
+import { getJson, HttpError } from '@/api';
 
 const useData = () =>
-  useQuery<PostData[], Error>(['posts'], async () =>
+  useQuery<PostData[], HttpError, PostData[]>(['posts'], async () =>
     getJson<PostData[]>('posts'),
   );
 

src/api/api.ts

@@ -1,4 +1,6 @@
 export const API_ROOT = 'https://jsonplaceholder.typicode.com/';
+
+// TODO: should HttpError be a subclass of Error? (so we can throw an Error)
 export type HttpError = Partial<Response> & {
   status: number;
   statusText: string;
@@ -12,7 +14,7 @@ type FetchArgs = Parameters<typeof globalThis.fetch>;
 export const fetch = async <RData = unknown>(
   input: FetchArgs[0],
   init: FetchArgs[1] = {},
-) => {
+): Promise<RData> => {
   const initWithDefaults = {
     ...init,
 
@@ -29,15 +31,15 @@ export const fetch = async <RData = unknown>(
     const status = 0;
     const statusText: string =
       (err as Error)?.message || 'Failed to fetch (unknown error)';
-    return Promise.reject<HttpError>({ status, statusText });
+    throw { status, statusText } as HttpError;
   }
 
   if (res.ok) {
     return resJson;
   } else {
-    return Promise.reject<HttpError>(res);
+    throw res as HttpError;
   }
 };
 
-export const getJson = <RData = unknown>(path: string) =>
+export const getJson = <RData = unknown>(path: string): Promise<RData> =>
   fetch<RData>(`${API_ROOT}${path}`);

src/types.ts

@@ -1,4 +1,5 @@
 import { UseQueryResult } from '@tanstack/react-query';
+export type { HttpError } from '@/api';
 
 export type Status = UseQueryResult['status'];
 
@@ -7,7 +8,3 @@ export interface PostData {
   title: string;
   body: string;
 }
-
-export type Error = {
-  message: string;
-};