@digigov/ui 2.0.0-2445d5cb → 2.0.0-298cfc51

package/src/api/APIProvider.tsx

@@ -1,31 +0,0 @@
-import React, { createContext, useContext, useMemo } from 'react';
-export interface APIConfig {
-  baseURL: string;
-}
-export interface APIContextData {
-  config: APIConfig;
-  token: string | null | undefined;
-}
-export interface APIProviderProps {
-  token: string | null | undefined;
-  children: React.ReactNode;
-  config: APIConfig;
-}
-export const APIContext = createContext<APIContextData>({
-  config: {
-    baseURL: '',
-  },
-  token: null,
-});
-export const APIProvider: React.FC<APIProviderProps> = ({
-  token = null,
-  config = { baseURL: '' },
-  children,
-}) => {
-  const data = useMemo(() => ({ token, config }), [token, config]);
-  return <APIContext.Provider value={data}>{children}</APIContext.Provider>;
-};
-
-export const useAPI = (): APIContextData => {
-  return useContext(APIContext);
-};

package/src/api/fetchAPI.ts

@@ -1,43 +0,0 @@
-import { APIContextData } from '@digigov/ui/api/APIProvider';
-import {
-  ProcessedResponse,
-  getArgs,
-  processResponse,
-} from '@digigov/ui/api/utils';
-
-export interface FetchAPIProps {
-  resource: string;
-  options?: {
-    query?: Record<string, any>;
-    path?: string;
-    method?: string;
-    body?: any;
-  };
-  getAPI?: (...args) => APIContextData;
-}
-
-export async function fetchAPI(
-  resource: string,
-  { query = {}, path = '', method = 'GET', body = null }: any,
-  apiConfig: any
-): Promise<ProcessedResponse> {
-  const {
-    config: { baseURL },
-    token,
-  } = apiConfig;
-  const [url, options] = getArgs(
-    resource,
-    path,
-    query,
-    body,
-    null,
-    method,
-    baseURL,
-    token
-  );
-  const response = await window.fetch(url, options);
-  const { data, error, status } = await processResponse(response);
-  return { data, error, status };
-}
-
-export default fetchAPI;

package/src/api/index.spec.tsx

@@ -1,417 +0,0 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { FunctionComponent, Suspense, useEffect } from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import fetchMock from 'fetch-mock';
-import fetchAPI from '@digigov/ui/api/fetchAPI';
-import {
-  APIProvider,
-  useResource,
-  useResourceAction,
-  useResourceMany,
-  APIContextData,
-  APIErrors,
-} from '@digigov/ui/api/index';
-import delay from '@digigov/ui/test-utils/delay';
-import 'whatwg-fetch';
-
-const HandleError = ({ error }) => {
-  if (error.name === 'APIError') {
-    error = error.error;
-    if (error.status === 404) {
-      return <>Not found</>;
-    }
-  }
-  // TODO: render the <SomethingWentWrong /> page here
-  return <span>something went wrong</span>;
-};
-
-const makeWrapper =
-  ({ config, token }: APIContextData): FunctionComponent =>
-  ({ children }: { children: React.ReactNode }): any => (
-    <Suspense fallback={'Loading'}>
-      <APIErrors fallback={HandleError}>
-        <APIProvider config={config} token={token}>
-          {children}
-        </APIProvider>
-      </APIErrors>
-    </Suspense>
-  );
-const BASE_URL = 'http://test/api';
-const TOKEN = 'mytoken';
-const DELAY = 100;
-const buildMockOptions = ({
-  resource,
-  method = 'GET',
-  authenticated = true,
-  query = {},
-  response,
-  delay = DELAY / 2,
-}): [any, any, any] => {
-  const headers: any = {
-    'content-type': 'application/json',
-  };
-  const options = { delay };
-  if (authenticated) {
-    headers.Authorization = `Token ${TOKEN}`;
-  }
-  const params = new URLSearchParams(query).toString();
-  return [
-    `${BASE_URL}/${resource}${params && `?${params}`}`,
-    response,
-    {
-      headers,
-      method,
-      ...options,
-    },
-  ];
-};
-
-const getAPI = () => {
-  return {
-    config: {
-      baseURL: BASE_URL,
-    },
-    token: TOKEN,
-  };
-};
-
-const wrapper = makeWrapper(getAPI());
-
-describe('fetchAPI', () => {
-  fetchMock.config.overwriteRoutes = true;
-  afterAll(() => {
-    fetchMock.restore();
-  });
-  beforeEach(fetchMock.resetBehavior);
-  beforeEach(fetchMock.resetHistory);
-  it('fetchAPI gets', async () => {
-    const resource = 'resource';
-    const path = 'some_id';
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource: `${resource}/${path}/`,
-        response: { value: 'SWR' },
-      })
-    );
-    const { data } = await fetchAPI(resource, { path }, getAPI());
-    expect(data.value).toBe('SWR');
-    expect(fetchMock.calls()).toHaveLength(1);
-  });
-});
-
-describe('useResource', () => {
-  fetchMock.config.overwriteRoutes = true;
-  afterAll(() => {
-    fetchMock.restore();
-  });
-  beforeEach(fetchMock.resetBehavior);
-  beforeEach(fetchMock.resetHistory);
-  it('useResource should return data', async () => {
-    const resource = 'resource';
-    function Page() {
-      const { data } = useResource(resource);
-      return <div>hello, {data?.value}</div>;
-    }
-    fetchMock.mock(
-      ...buildMockOptions({ resource, response: { value: 'SWR' } })
-    );
-    const { container } = render(<Page />, {
-      wrapper,
-    });
-
-    expect(container.firstChild).not.toBe(null);
-
-    if (container.firstChild) {
-      expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-        `"hello, "`
-      );
-      await delay(DELAY);
-      expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-        `"hello, SWR"`
-      );
-    }
-
-    expect(fetchMock.calls()).toHaveLength(1);
-  });
-
-  it('should run duplicate request once', async () => {
-    const resource = 'dupliresource';
-    function Page() {
-      useResource(resource);
-      const { data: duplData } = useResource(resource);
-      return <div>hello, {duplData?.value}</div>;
-    }
-
-    fetchMock.mock(
-      ...buildMockOptions({ resource, response: { value: 'myvalue' } })
-    );
-    const { container } = render(<Page />, {
-      wrapper,
-    });
-    expect(container.firstChild).not.toBe(null);
-
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, "`
-    );
-    await delay(DELAY);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, myvalue"`
-    );
-
-    expect(fetchMock.calls()).toHaveLength(1);
-  });
-});
-
-describe('useResourceAction', () => {
-  fetchMock.config.overwriteRoutes = true;
-  afterAll(() => {
-    fetchMock.restore();
-  });
-  beforeEach(fetchMock.resetBehavior);
-  beforeEach(fetchMock.resetHistory);
-
-  it('useResourceAction should return result ', async () => {
-    const resource = 'resourceaction';
-    function Page() {
-      const { data, fetch } = useResourceAction(
-        resource,
-        undefined,
-        'POST',
-        {
-          some: 'data',
-        },
-        undefined
-      );
-      useEffect(() => {
-        fetch();
-      }, []);
-      return <div>hello, {data && data.value}</div>;
-    }
-
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource,
-        response: { value: 'myvalue' },
-        method: 'POST',
-      })
-    );
-
-    const { container } = render(<Page />, {
-      wrapper,
-    });
-    expect(container.firstChild).not.toBe(null);
-
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, "`
-    );
-    await delay(DELAY * 2);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, myvalue"`
-    );
-
-    expect(fetchMock.calls()).toHaveLength(1);
-  });
-
-  it('useResourceAction should be invalidated and run twice', async () => {
-    const resource = 'resourceactiondouble';
-    function Page() {
-      const { data, fetch, invalidate } = useResourceAction(
-        resource,
-        undefined,
-        'POST',
-        {
-          some: 'data',
-        },
-        undefined
-      );
-      useEffect(() => {
-        fetch();
-      }, []);
-      useEffect(() => {
-        setTimeout(() => {
-          invalidate();
-        }, DELAY * 2);
-        setTimeout(() => {
-          fetch();
-        }, DELAY * 3);
-      }, []);
-      return <div>hello, {data && data.value}</div>;
-    }
-
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource,
-        response: { value: 'myvalue' },
-        method: 'POST',
-      })
-    );
-    const { container } = render(<Page />, {
-      wrapper,
-    });
-    expect(container.firstChild).not.toBe(null);
-
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, "`
-    );
-    await delay(DELAY);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, myvalue"`
-    );
-    await delay(DELAY);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, "`
-    );
-    await delay(DELAY * 2);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, myvalue"`
-    );
-
-    expect(fetchMock.calls()).toHaveLength(2);
-  });
-});
-
-describe('useResourceMany', () => {
-  fetchMock.config.overwriteRoutes = true;
-  afterAll(() => {
-    fetchMock.restore();
-  });
-  beforeEach(fetchMock.resetBehavior);
-  beforeEach(fetchMock.resetHistory);
-
-  //check this test again (loading/hello)
-
-  it('useResourceMany should return data', async () => {
-    const resource = 'resourceMany';
-    function Page() {
-      const { data } = useResourceMany(resource);
-      return <div>hello, {data && data.join('')}</div>;
-    }
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource,
-        query: { offset: 0, limit: 30 },
-        response: {
-          data: ['S', 'W', 'R'],
-          meta: {
-            total: 1,
-            count: 3,
-          },
-        },
-      })
-    );
-    const { container } = render(<Page />, {
-      wrapper,
-    });
-
-    expect(container.firstChild).not.toBe(null);
-
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"Loading"`
-    );
-    await delay(DELAY * 2);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, SWR"`
-    );
-    expect(fetchMock.calls()).toHaveLength(1);
-  });
-
-  it('useResourceMany should handle hasNext, hasPrevious', async () => {
-    const resource = 'resourceManyhasNext';
-    function Page() {
-      const { hasNext, hasPrevious } = useResourceMany(resource);
-      return (
-        <div>
-          {hasNext ? '' : 'no'} next,{hasPrevious ? '' : 'no'} previous
-        </div>
-      );
-    }
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource,
-        query: { offset: 0, limit: 30 },
-        response: {
-          data: ['S', 'W', 'R'],
-          meta: {
-            total: 1,
-            count: 3,
-          },
-        },
-      })
-    );
-    const { container } = render(<Page />, {
-      wrapper,
-    });
-
-    expect(container.firstChild).not.toBe(null);
-
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"Loading"`
-    );
-    await delay(DELAY);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"no next,no previous"`
-    );
-    expect(fetchMock.calls()).toHaveLength(1);
-  });
-
-  it('useResourceMany should handle setPage with custom limit option', async () => {
-    const resource = 'resourceManysetpage';
-    function Page() {
-      const { data, setPage, page } = useResourceMany(resource, { limit: 10 });
-      const nextPage = () => {
-        setPage(page + 1);
-      };
-      return (
-        <div>
-          hello, {data.join('')}
-          <button onClick={nextPage}>next</button>
-        </div>
-      );
-    }
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource,
-        query: { offset: 0, limit: 10 },
-        response: {
-          data: ['S', 'W', 'R'],
-          meta: {
-            total: 3,
-            count: 100,
-          },
-        },
-      })
-    );
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource,
-        query: { offset: 10, limit: 10 },
-        response: {
-          data: ['R', 'W', 'S'],
-          meta: {
-            total: 3,
-            count: 100,
-          },
-        },
-      })
-    );
-    const { container, getByText } = render(<Page />, {
-      wrapper,
-    });
-
-    expect(container.firstChild).not.toBe(null);
-
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"Loading"`
-    );
-    await delay(DELAY);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, SWRnext"`
-    );
-    fireEvent.click(getByText('next'));
-    await delay(DELAY * 2);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, RWSnext"`
-    );
-    expect(fetchMock.calls()).toHaveLength(2);
-  });
-});

package/src/api/index.tsx

@@ -1,9 +0,0 @@
-export * from '@digigov/ui/api/APIErrors';
-export * from '@digigov/ui/api/APIProvider';
-export * from '@digigov/ui/api/useResource';
-export * from '@digigov/ui/api/useResourceAction';
-export * from '@digigov/ui/api/useResourceQuery';
-export * from '@digigov/ui/api/fetchAPI';
-
-import { useAPI } from '@digigov/ui/api/APIProvider';
-export default useAPI;

package/src/api/introduction.md

@@ -1,6 +0,0 @@
----
-title: DigiGOV API client
-order: 0
----
-
-# DigiGOV API client

package/src/api/useResource.tsx

@@ -1,96 +0,0 @@
-import { useState } from 'react';
-import { useQuery, queryCache } from 'react-query';
-import { useAPI } from '@digigov/ui/api/APIProvider';
-import { getQueryKey, processResponse } from '@digigov/ui/api/utils';
-
-export type RequestResponse = {
-  data?: Record<string, any>;
-  loading?: boolean;
-  loaded?: boolean;
-  error?: Error | string | null | unknown;
-  invalidate: () => void;
-  fetch: () => void;
-  dataSet?: boolean | null;
-  url: string;
-};
-
-export function useResource(
-  resource: string,
-  id?: string | number | ((...args) => void),
-  query?: Record<string, any> | null | ((...args) => void),
-  options?: RequestInit | null,
-  suspense?: boolean
-): RequestResponse {
-  const {
-    config: { baseURL },
-    token,
-  } = useAPI();
-  const [{ url, dataSet }, setFetchOpts] = useState({
-    url: '',
-    dataSet: false,
-  });
-
-  async function customFetcher(fetchUrl, options) {
-    setFetchOpts({ url: fetchUrl, dataSet: false });
-    const response = await fetch(fetchUrl, options);
-    try {
-      const { data, error } = await processResponse(response);
-      if (error) {
-        return Promise.reject(error);
-      }
-      if (data) {
-        return Promise.resolve(data);
-      }
-    } catch (error) {
-      return Promise.reject(error.error);
-    }
-  }
-
-  const queryKey = getQueryKey(
-    resource,
-    id,
-    query,
-    null,
-    options,
-    'GET',
-    baseURL,
-    token
-  );
-  let enabled = true;
-  let resolvedQueryKey;
-  if (typeof queryKey === 'function') {
-    try {
-      resolvedQueryKey = queryKey();
-    } catch (err) {
-      enabled = false;
-    }
-  }
-
-  const { status, data, error, isFetching, refetch } = useQuery(
-    resolvedQueryKey || queryKey,
-    customFetcher,
-    {
-      enabled,
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      suspense: suspense || false,
-      cacheTime: 300000,
-      staleTime: 20000,
-      retry: false,
-      useErrorBoundary: false, // falls back to suspense
-    }
-  );
-
-  return {
-    data,
-    loading: isFetching,
-    loaded: ['error', 'success'].includes(status),
-    error,
-    invalidate: (): void => {
-      queryCache.invalidateQueries(resolvedQueryKey || queryKey);
-    },
-    fetch: refetch,
-    dataSet,
-    url,
-  };
-}

package/src/api/useResourceAction.tsx

@@ -1,80 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useMutation } from 'react-query';
-import { useAPI } from '@digigov/ui/api/APIProvider';
-import { RequestResponse } from '@digigov/ui/api/useResource';
-import { getQueryKey, processResponse } from '@digigov/ui/api/utils';
-
-export function useResourceAction(
-  resource: string,
-  id?: (string | null | undefined) | number | ((...args: any) => void),
-  method = 'POST',
-  data?: Record<string, any> | null | ((...args: any) => void),
-  query?: Record<string, any> | null | ((...args: any) => void),
-  options?: RequestInit | null
-): RequestResponse {
-  const {
-    config: { baseURL },
-    token,
-  } = useAPI();
-  const [{ url, dataSet }, setFetchOpts] = useState({
-    url: '',
-    dataSet: false,
-  });
-  const [consume, setConsume] = useState(false);
-  async function customFetcher(...args) {
-    const [fetchUrl, options] = args[0];
-    if (options.body) {
-      setFetchOpts({ url: fetchUrl, dataSet: true });
-    } else {
-      setFetchOpts({ url: fetchUrl, dataSet: false });
-    }
-    const response = await fetch(fetchUrl, options);
-    try {
-      const { data } = await processResponse(response, true);
-      if (data) {
-        return Promise.resolve(data);
-      }
-    } catch (error) {
-      return Promise.reject(error.error);
-    }
-  }
-
-  const [mutate, { status, data: _data, error, reset }] = useMutation(
-    customFetcher,
-    {}
-  );
-  useEffect(() => {
-    if (consume) {
-      const queryKey = getQueryKey(
-        resource,
-        id,
-        query,
-        data,
-        options,
-        method,
-        baseURL,
-        token
-      );
-      if (typeof queryKey === 'function') {
-        mutate(queryKey());
-      } else {
-        mutate(queryKey);
-      }
-      setConsume(false);
-    }
-  }, [consume]);
-  return {
-    data: _data,
-    loading: status === 'loading',
-    loaded: ['success', 'error'].includes(status),
-    error,
-    invalidate: (): void => {
-      reset();
-    },
-    fetch() {
-      setConsume(true);
-    },
-    dataSet,
-    url,
-  };
-}