From efdd7638d4ac631f55c225625e5717fc93587c59 Mon Sep 17 00:00:00 2001
From: John Hunter <john@johnhunter.info>
Date: Wed, 27 Sep 2023 17:30:04 +0100
Subject: [PATCH] Fix typing and update tests

---
 src/App/components/Loading/Loading.test.tsx |  4 ++--
 src/App/components/Loading/Loading.tsx      |  6 +++---
 src/App/components/Post/useData.ts          |  4 ++--
 src/App/components/Posts/Posts.tsx          |  3 ++-
 src/App/components/Posts/useData.ts         |  4 ++--
 src/api/api.ts                              | 10 ++++++----
 src/types.ts                                |  5 +----
 7 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/App/components/Loading/Loading.test.tsx b/src/App/components/Loading/Loading.test.tsx
index 61f55db..4807b58 100644
--- a/src/App/components/Loading/Loading.test.tsx
+++ b/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>,
     );
diff --git a/src/App/components/Loading/Loading.tsx b/src/App/components/Loading/Loading.tsx
index 82e3169..b3533aa 100644
--- a/src/App/components/Loading/Loading.tsx
+++ b/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>
       );
     }
diff --git a/src/App/components/Post/useData.ts b/src/App/components/Post/useData.ts
index c162482..4a3faeb 100644
--- a/src/App/components/Post/useData.ts
+++ b/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,
   });
 
diff --git a/src/App/components/Posts/Posts.tsx b/src/App/components/Posts/Posts.tsx
index 4271745..d1174b3 100644
--- a/src/App/components/Posts/Posts.tsx
+++ b/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="#"
diff --git a/src/App/components/Posts/useData.ts b/src/App/components/Posts/useData.ts
index ffb608c..bc4a108 100644
--- a/src/App/components/Posts/useData.ts
+++ b/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'),
   );
 
diff --git a/src/api/api.ts b/src/api/api.ts
index 772c0df..a7c6a47 100644
--- a/src/api/api.ts
+++ b/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}`);
diff --git a/src/types.ts b/src/types.ts
index 5eba5b1..2696d47 100644
--- a/src/types.ts
+++ b/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;
-};