@digigov/ui 0.11.0 → 0.12.2

package/{esm/api/index.js → src/api/index.tsx}

@@ -1,13 +1,16 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { useContext } from 'react';
-import { APIContext } from '@digigov/ui/api/APIProvider';
+import { APIContextData, APIContext } from '@digigov/ui/api/APIProvider';
+
 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';
-export var useAPI = function useAPI() {
+
+export const useAPI = (): APIContextData => {
   return useContext(APIContext);
 };
-export default useAPI;
+
+export default useAPI;

package/src/api/useResource.tsx

@@ -0,0 +1,96 @@
+import { getQueryKey, processResponse } from '@digigov/ui/api/utils';
+import { useQuery, queryCache } from 'react-query';
+import { useAPI } from '@digigov/ui/api';
+import { useState } from 'react';
+
+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

@@ -0,0 +1,80 @@
+import { useState, useEffect } from 'react';
+import { RequestResponse } from '@digigov/ui/api/useResource';
+import { getQueryKey, processResponse } from '@digigov/ui/api/utils';
+import { useMutation } from 'react-query';
+import { useAPI } from '@digigov/ui/api';
+
+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,
+  };
+}

package/src/api/useResourceQuery.tsx

@@ -0,0 +1,177 @@
+import { useEffect, useMemo, useState, useCallback } from 'react';
+import { getQueryKey, processResponse } from '@digigov/ui/api/utils';
+import { usePaginatedQuery, QueryFunction, queryCache } from 'react-query';
+import { useAPI } from '@digigov/ui/api';
+
+const DEFAULT_PAGINATION_LIMIT = 30;
+const DEFAULT_LIMIT_OPTIONS = [10, 30, 60, 100];
+
+export function useResourceManyBase(
+  resource: string,
+  query?: Record<string, any> | null | ((...args: any) => any),
+  options?: RequestInit | null
+): any {
+  const {
+    config: { baseURL },
+    token,
+  } = useAPI();
+  const [{ url, dataSet }, setFetchOpts] = useState({
+    url: '',
+    dataSet: false,
+  });
+  const customFetcher: QueryFunction<any> = useCallback(
+    async (fetchUrl, options) => {
+      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 queryKey = getQueryKey(
+    resource,
+    null,
+    query,
+    null,
+    options,
+    'GET',
+    baseURL,
+    token
+  );
+  let enabled = true;
+  let resolvedQueryKey;
+  if (typeof queryKey === 'function') {
+    try {
+      resolvedQueryKey = queryKey();
+    } catch (err) {
+      enabled = false;
+    }
+  }
+
+  const {
+    resolvedData,
+    latestData: data,
+    error,
+    isFetching,
+    refetch,
+  } = usePaginatedQuery({
+    queryKey: resolvedQueryKey || queryKey,
+    queryFn: customFetcher,
+    config: {
+      enabled,
+      suspense: true,
+      cacheTime: 30000,
+      refetchOnMount: false,
+    },
+  });
+
+  return {
+    data: data || resolvedData,
+    loading: isFetching,
+    loaded: !!data || !!error,
+    error,
+    invalidate: (): void => {
+      queryCache.invalidateQueries(resolvedQueryKey || queryKey);
+    },
+    fetch: refetch,
+    dataSet,
+    url,
+  };
+}
+
+export type UseResourceManyResponse = {
+  data?: any;
+  meta?: {
+    total?: number;
+    count?: number;
+  };
+  page: number;
+  limit: number;
+  totalPages: number;
+  total: number;
+  limitOptions: number[];
+  setPage: (page: number) => void;
+  setLimit: (limit: number) => void;
+  hasNext: boolean;
+  hasPrevious: boolean;
+};
+export function useResourceMany(
+  resource: string,
+  query?: Record<string, any> | null,
+  options?: RequestInit | null
+): UseResourceManyResponse {
+  // allow developer to set a custom limit, fallback to a common value
+  const [limit, setLimit] = useState(
+    (query && query.limit) || DEFAULT_PAGINATION_LIMIT
+  );
+  const [pageParams, setPageParams] = useState({
+    offset: (query && query.offset) || 0,
+    limit,
+  });
+  // update options when limit is changed
+  useEffect(() => {
+    if (pageParams.limit !== limit) {
+      setPageParams({ ...pageParams, limit: limit });
+    }
+  }, [limit]);
+  // update user provided query with pagination params
+  const queryKey = JSON.stringify(query);
+  const pageParamsKey = JSON.stringify(pageParams);
+  const q = useMemo(() => {
+    return { ...pageParams, ...query };
+  }, [queryKey, pageParamsKey]);
+  const { data, ...rest } = useResourceManyBase(resource, q, options);
+  // extract data/metadata from response
+  const resp = data ? data.data : data;
+  const meta = data ? data.meta : data;
+  const totalPages = useMemo(
+    () => (data && data.meta && data.meta.total) || 1,
+    [data]
+  );
+  const total = useMemo(() => (data && data.meta && data.meta.count) || 0, [
+    data,
+  ]);
+  const limitOptions = useMemo(() => DEFAULT_LIMIT_OPTIONS, []);
+  const page = useMemo(() => {
+    const offset = parseInt(pageParams.offset) || 0;
+    const _limit = parseInt(`${pageParams.limit}`) || parseInt(`${limit}`);
+    return offset / _limit;
+  }, [pageParams]);
+  // set params to specific page
+  const setPage = useCallback(
+    (page) => {
+      if (page > totalPages) {
+        page = totalPages;
+      }
+      if (page <= 0) {
+        page = 0;
+      }
+      const _limit = limit || DEFAULT_PAGINATION_LIMIT;
+      const offset = _limit * page;
+      setPageParams({ offset, limit });
+    },
+    [setPageParams]
+  );
+  const hasNext = page < totalPages - 1;
+  const hasPrevious = page > 0;
+  return {
+    data: resp,
+    meta,
+    page,
+    limit,
+    totalPages,
+    total,
+    limitOptions,
+    setPage,
+    setLimit,
+    hasNext,
+    hasPrevious,
+    ...rest,
+  };
+}

package/src/api/utils.tsx

@@ -0,0 +1,156 @@
+import { APIError } from '@digigov/ui/api/APIErrors';
+import { ProcessedResponse } from '@digigov/ui/api/fetchAPI';
+import { ArrayQueryKey } from 'react-query/types';
+
+export async function parseErrors(response: Response): Promise<string[]> {
+  const errors: string[] = [];
+  const error = {
+    message: response.statusText,
+    code: response.status,
+    meta: {},
+  };
+  // do our best to resolve as more specific details for the error
+  try {
+    const json: Record<string, string> = await response.json();
+    error.meta = json;
+    // this is the way synnefo reports errors
+    try {
+      const apiErrors = Object.keys(json);
+      apiErrors.forEach((key) => json[key] && errors.push(json[key]));
+    } catch (err) {
+      console.error('Cannot parse json error', json);
+    }
+  } catch (err) {
+    try {
+      const text = await response.text();
+      error.message = text;
+      // error.meta.statusText = response.statusText; // keep reference to statusText
+    } catch (err) {}
+  }
+  return errors;
+}
+
+export async function processResponse(
+  response,
+  raiseError = false
+): Promise<ProcessedResponse> {
+  const status = response.status;
+  try {
+    if (!response.ok) {
+      const errors = await parseErrors(response);
+      if (raiseError) {
+        throw new APIError(errors, status);
+      }
+      return {
+        error: errors[0],
+        status,
+      };
+    }
+    const contentType = response.headers.get('content-type');
+    if (contentType && contentType.indexOf('application/json') !== -1) {
+      const data = await response.json();
+      return {
+        data,
+        status,
+      };
+    } else {
+      const data = await response.text();
+      return {
+        data,
+        status,
+      };
+    }
+  } catch (error) {
+    if (raiseError) {
+      throw new APIError([error], status);
+    }
+    return {
+      status,
+      error,
+    };
+  }
+}
+
+export function getArgs(
+  resource: any,
+  id: any,
+  query: any,
+  data: any,
+  options,
+  method,
+  baseURL,
+  token
+) {
+  let body, params;
+  if (typeof query === 'function') {
+    params = new URLSearchParams(query()).toString();
+  } else if (query) {
+    params = new URLSearchParams(query).toString();
+  }
+  if (typeof data === 'function') {
+    body = JSON.stringify(data());
+  } else if (data) {
+    body = JSON.stringify(data);
+  }
+  if (typeof id === 'function') {
+    id = id();
+  }
+  if (!options) {
+    options = {};
+  }
+  const url = `${baseURL}/${resource}${id ? `/${id}/` : ''}${
+    params ? `?${params}` : ''
+  }`;
+  const _options = {
+    headers: {
+      'content-type': 'application/json',
+    },
+    body,
+    method,
+    ...options,
+  };
+  if (token) {
+    _options.headers.Authorization = `Token ${token}`;
+  }
+  return [url, _options];
+}
+
+export function getQueryKey(
+  resource: string,
+  id: string | number | null | undefined | ((...args: any) => void),
+  query: Record<string, any> | null | undefined | ((...args: any) => void),
+  data: Record<string, any> | null | undefined | ((...args: any) => void),
+  options: RequestInit | null | undefined,
+  method: string | null | undefined,
+  baseURL: string,
+  token: string | null | undefined
+): ArrayQueryKey | ((...args: any) => ArrayQueryKey) {
+  let queryKey;
+
+  if ([id, query, data].some((param) => typeof param === 'function')) {
+    queryKey = () => {
+      return getArgs(
+        resource,
+        id,
+        query,
+        data,
+        options,
+        method,
+        baseURL,
+        token
+      );
+    };
+  } else {
+    queryKey = getArgs(
+      resource,
+      id,
+      query,
+      data,
+      options,
+      method,
+      baseURL,
+      token
+    );
+  }
+  return queryKey;
+}

package/src/app/App.tsx

@@ -0,0 +1,33 @@
+import React, { Suspense } from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
+import { ThemeProvider, Theme, makeStyles } from '@material-ui/core/styles';
+
+export const useAppStyles = makeStyles({
+  root: {},
+});
+
+export interface AppProps {
+  theme: Theme;
+  children?: React.ReactNode;
+  classes?: { root: BaseCSSProperties };
+}
+
+const App: React.FC<AppProps> = ({ theme, children }) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <Suspense fallback={'loading...'}>{children}</Suspense>
+    </ThemeProvider>
+  );
+};
+
+export const StaticApp: React.FC<AppProps> = ({ theme, children }) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+};
+
+export default App;

package/{es/app/Header/HeaderLogo.js → src/app/Header/HeaderLogo.tsx}

@@ -1,17 +1,19 @@
 import CoreHeaderLogo from '@digigov/react-core/HeaderLogo';
 import withDeprecation from '@digigov/ui/utils/withDeprecation';
-export var HeaderLogo = withDeprecation(CoreHeaderLogo, {
+
+export const HeaderLogo = withDeprecation(CoreHeaderLogo, {
   name: 'HeaderLogo',
   props: {
     height: {
-      warning: true
+      warning: true,
     },
     linkprops: {
-      warning: true
+      warning: true,
     },
     label: {
-      warning: true
-    }
-  }
+      warning: true,
+    },
+  },
 });
-export default HeaderLogo;
+
+export default HeaderLogo;

package/src/app/Header/HeaderSection.tsx

@@ -0,0 +1,13 @@
+import CoreHeaderSection, {
+  HeaderSectionProps as CoreHeaderSectionProps,
+} from '@digigov/react-core/HeaderSection';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export type HeaderSectionProps = CoreHeaderSectionProps;
+
+export const HeaderSection = withDeprecation(CoreHeaderSection, {
+  name: 'HeaderSection',
+  rename: 'HeaderSection',
+});
+
+export default HeaderSection;

package/src/app/Header/HeaderTitle.tsx

@@ -0,0 +1,24 @@
+import CoreHeaderTitle, {
+  HeaderTitleProps as CoreHeaderTitleProps,
+} from '@digigov/react-core/HeaderTitle';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export type HeaderTitleProps = CoreHeaderTitleProps;
+
+export const HeaderTitle = withDeprecation(CoreHeaderTitle, {
+  name: 'Header',
+  props: {
+    xs: {
+      error: true,
+    },
+    linkProps: {
+      error:
+        'The `linkProps` property is deprecated. You can use native anchor link props instead.',
+    },
+    linkComponent: {
+      error: 'The `linkComponent` property is deprecated.',
+    },
+  },
+});
+
+export default HeaderTitle;

package/src/app/Header/index.spec.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import mountWithTheme from '@digigov/ui/test-utils/mountWithTheme';
+
+import logo from '../../govgr/Logo/govgr-logo.svg';
+import Header, {
+  HeaderTitle,
+  HeaderSubtitle,
+  HeaderLogo,
+} from '@digigov/ui/app/Header';
+
+it('renders the header with logo, title and subtitle ', () => {
+  expect(
+    mountWithTheme(
+      <Header>
+        <HeaderLogo src={logo} href="https://gov.gr" />
+        <HeaderTitle href="/some-url">A title</HeaderTitle>
+        <HeaderSubtitle>A subtitle</HeaderSubtitle>
+      </Header>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the HeaderTitle component', () => {
+  expect(mount(<HeaderTitle>A title</HeaderTitle>)).toMatchSnapshot();
+});
+
+it('renders the HeaderTitle component with custom href', () => {
+  expect(
+    mount(<HeaderTitle href={'/somelink'}>A title</HeaderTitle>)
+  ).toMatchSnapshot();
+});

package/{esm/app/Header/index.js → src/app/Header/index.tsx}

@@ -1,13 +1,19 @@
-import CoreHeader from '@digigov/react-core/Header';
+import CoreHeader, {
+  HeaderProps as CoreHeaderProps,
+} from '@digigov/react-core/Header';
 import withDeprecation from '@digigov/ui/utils/withDeprecation';
-export var Header = withDeprecation(CoreHeader, {
+
+export type HeaderProps = CoreHeaderProps;
+
+export const Header = withDeprecation(CoreHeader, {
   name: 'Header',
-  props: {}
+  props: {},
 });
+
 export * from '@digigov/ui/app/Header/HeaderTitle';
 export * from '@digigov/ui/app/Header/HeaderLogo';
 export * from '@digigov/ui/app/Header/HeaderSection';
 export * from '@digigov/react-core/HeaderContent';
 export * from '@digigov/react-core/HeaderSecondaryLogo';
 export * from '@digigov/react-core/HeaderSubtitle';
-export default Header;
+export default Header;