Rename useFetch to useResponse

docs/get-response-key.md

@@ -0,0 +1,17 @@
+---
+title: getResponseKey
+---
+
+Get the key used by [useResponse](use-response.md) to cache a particular response.
+
+```typescript
+function getResponseKey(
+  url: string,
+  options: RequestOptions
+): string
+```
+
+`url`: the URL of the request.
+
+`options`: the [request options](request-options.md).
+

docs/get-response-storage.md

@@ -0,0 +1,9 @@
+---
+title: getResponseStorage
+---
+
+Get the default [storage](storage.md) used by [useResponse](use-response.md).
+
+```typescript
+function getResponseStorage(): Storage
+```

docs/fetch-options.md → docs/request-options.md

@@ -1,9 +1,9 @@
 ---
-title: FetchOptions
+title: RequestOptions
 ---
 
 ```typescript
-type FetchOptions = {
+type RequestOptions = {
   method: 'GET' | 'POST' | 'PUT' | 'DELETE'
   headers: {[key: string]: string}
   body: string | URLSearchParams | FormData | Blob | ArrayBuffer | DataView

docs/set-response-storage.md

@@ -0,0 +1,9 @@
+---
+title: setResponseStorage
+---
+
+Set the default [storage](storage.md) used by [useResponse](use-response.md).
+
+```typescript
+function setResponseStorage(storage: Storage): void
+```

docs/use-fetch.md → docs/use-response.md

@@ -1,23 +1,23 @@
 ---
-title: useFetch
+title: useResponse
 ---
 
 Make an HTTP request from a component and wait for the result before rendering that component. The component using this hook should be rendered inside a `React.Suspense` in order to properly render the fallback while waiting for the response.
 
 ```typescript
-function useFetch<T>(
+function useResponse<T>(
   url: string,
-  options: FetchOptions,
-  storage: Storage = getFetchStorage()
+  options: RequestOptions,
+  storage: Storage = getresponseStorage()
 ): {status: number, headers: Headers, body: T, reload: function}
 ```
 
 ## Parameters
 
 `url`: the URL of the request.
 
-`options`: the [fetch options](fetch-options.md).
+`options`: the [request options](request-options.md).
 
-`storage` _(optional)_: a [`Storage`](storage.md) where to cache the results. The default storage is [a memory storage](create-memory-storage.md) which you can get using [getFetchStorage](get-fetch-storage.md) and override using [setFetchStorage](set-fetch-storage.md).
+`storage` _(optional)_: a [`Storage`](storage.md) where to cache the results. The default storage is [a memory storage](create-memory-storage.md) which you can get using [getResponseStorage](get-response-storage.md) and override using [setResponseStorage](set-response-storage.md).
 
-__Note__: `useFetch` assumes that the response content is a json string and will throw an error if this is not the case.
+__Note__: `useResponse` assumes that the response content is a valid JSON string and will throw an error if this is not the case.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tidy",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-beta.1",
   "main": "dist/index.js",
   "module": "dist/react-tidy.esm.js",
   "typings": "dist/index.d.ts",

src/index.tsx

@@ -3,4 +3,4 @@ export * from './storages'
 
 export * from './useStorage'
 export * from './useAsync'
-export * from './useFetch'
+export * from './useResponse'

src/storages.ts

@@ -2,9 +2,9 @@ import { createMemoryStorage } from './createMemoryStorage'
 import { Storage } from './types'
 
 const storages = {
-  default: createMemoryStorage(),
   async: createMemoryStorage(),
-  fetch: createMemoryStorage(),
+  default: createMemoryStorage(),
+  response: createMemoryStorage(),
 }
 
 export const getDefaultStorage = () => storages.default
@@ -17,7 +17,7 @@ export const setAsyncStorage = (storage: Storage) => {
   storages.async = storage
 }
 
-export const getFetchStorage = () => storages.fetch
-export const setFetchStorage = (storage: Storage) => {
-  storages.fetch = storage
+export const getResponseStorage = () => storages.response
+export const setResponseStorage = (storage: Storage) => {
+  storages.response = storage
 }

src/types.d.ts

@@ -5,11 +5,11 @@ export interface Storage {
   clear: () => void
 }
 
-export type FetchOptions = {
-  method: 'GET' | 'POST' | 'PUT' | 'DELETE'
-  headers: { [key: string]: string }
-  body: string | URLSearchParams | FormData | Blob | ArrayBuffer | DataView
-  credentials: 'omit' | 'same-origin' | 'include'
+export type RequestOptions = {
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
+  headers?: { [key: string]: string }
+  body?: string | URLSearchParams | FormData | Blob | ArrayBuffer | DataView
+  credentials?: 'omit' | 'same-origin' | 'include'
 }
 
 export type Fn<T> = () => T

src/useResponse.ts

@@ -0,0 +1,28 @@
+import { Storage, RequestOptions } from './types'
+import { getResponseStorage } from './storages'
+import { useAsync } from './useAsync'
+
+export function useResponse<T>(
+  url: string,
+  options: RequestOptions = {},
+  storage: Storage = getResponseStorage()
+) {
+  const key = getResponseKey(url, options)
+  const fn = () => request<T>(url, options)
+  const [result, reload] = useAsync(key, fn, storage)
+  return { ...result, reload }
+}
+
+export const getResponseKey = (url: string, options: RequestOptions = {}) => {
+  return JSON.stringify({ url, options })
+}
+
+async function request<T>(url: string, options: RequestOptions) {
+  const res = await fetch(url, options)
+  const body = (await res.json()) as T
+  return {
+    status: res.status,
+    headers: res.headers,
+    body,
+  }
+}

test/useResponse.test.ts

@@ -0,0 +1,19 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { createMemoryStorage, getResponseKey, useResponse } from '../src'
+
+describe('useResponse', () => {
+  beforeAll(() => {
+    ;(global as any).Headers = function() {}
+  })
+  it('reads the response from storage', () => {
+    const storage = createMemoryStorage()
+    const res = {
+      status: 200,
+      headers: new Headers(),
+      body: { success: true },
+    }
+    storage.setItem(getResponseKey('/foo'), JSON.stringify(res))
+    const { result } = renderHook(() => useResponse('/foo', {}, storage))
+    expect(result.current).toMatchObject(res)
+  })
+})

website/sidebars.json

@@ -7,7 +7,7 @@
     "Custom Hooks": [
       "use-storage",
       "use-async",
-      "use-fetch"
+      "use-response"
     ],
     "Functions": [
       "create-memory-storage",
@@ -16,8 +16,8 @@
       "get-async-storage",
       "set-async-storage",
       "get-fetch-key",
-      "get-fetch-storage",
-      "set-fetch-storage"
+      "get-response-storage",
+      "set-response-storage"
     ],
     "Interfaces": [
       "storage"