@openstax/ts-utils 1.34.0 → 1.35.0

package/packages/frontend/src/components/Pagination.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import * as UI from '@openstax/ui-components';
-import { useQuery } from 'routing/useQuery';
-import queryString from 'query-string';
-import { useRouteLinkOnClick } from 'routing/components/RouteLink';
-
-export const Pagination = (props: {
-  currentPage: number;
-  totalPages: number;
-  totalItems?: number;
-  pageSize?: number;
-}) => {
-  const query = useQuery();
-  const navigate = useRouteLinkOnClick();
-
-  return <UI.Pagination
-    {...props} showFromEnd={1} showFromCurrent={1}
-    Page={({ page, current }) => {
-      return <UI.LinkForPage
-        page={page} current={current}
-        href={"?" + queryString.stringify({ ...query, page })}
-        onClick={navigate}
-      />;
-    }}
-  />;
-};

package/packages/frontend/src/configProvider/index.ts

@@ -1,53 +0,0 @@
-/* eslint-disable import/no-webpack-loader-syntax */
-import { TRoutes as ApiRoutes } from '@project/lambdas/build/src/functions/serviceApi/core/routes';
-import type {
-  FrontendConfigProvider as LambdaFrontendConfigProvider
-} from '@project/lambdas/build/src/functions/serviceApi/versions/v0';
-import { once } from '@openstax/ts-utils';
-import { ConfigForConfigProvider } from '@openstax/ts-utils/config';
-import type { createApiGateway } from '@openstax/ts-utils/services/apiGateway';
-// @ts-ignore-next-line
-import routes from '!!val-loader!@project/lambdas/build/script/utils/routeDataLoader';
-
-export type FrontendConfig = ConfigForConfigProvider<LambdaFrontendConfigProvider>;
-
-const config = {
-  apiBase: () => '/'
-};
-
-const getApiGateway = (makeApiGateway: ReturnType<typeof createApiGateway>) => {
-  return makeApiGateway<ApiRoutes>(config, routes);
-};
-
-declare global {
-  interface Window {
-    _OX_FRONTEND_CONFIG?: FrontendConfig;
-  }
-}
-
-const loadConfig = (apiGateway: ReturnType<typeof getApiGateway>) => async() => {
-  if (window._OX_FRONTEND_CONFIG) { return window._OX_FRONTEND_CONFIG; }
-
-  // For backwards compatibility. Remove if the frontend config is removed from this API.
-  const response = await apiGateway.apiV0Info({});
-  const loadedResponse = await (await response.acceptStatus(200)).load();
-  return loadedResponse.config;
-};
-
-export const frontendConfigProvider = (makeApiGateway: ReturnType<typeof createApiGateway>) => {
-  const apiGateway = getApiGateway(makeApiGateway);
-  const getConfig = once(loadConfig(apiGateway));
-
-  const getValue = async(name: keyof FrontendConfig) => {
-    const frontendConfig = await getConfig();
-    if (name in frontendConfig) {
-      return frontendConfig[name];
-    }
-    throw new Error(`Frontend Config variable ${name} not found in in /api/v0/info`);
-  };
-
-  return { getConfig, getValue };
-};
-
-
-export type FrontendConfigProvider = ReturnType<typeof frontendConfigProvider>;

package/packages/frontend/src/configProvider/use.ts

@@ -1,41 +0,0 @@
-import React from 'react';
-import { fetchError, FetchStateType, fetchSuccess, fetchLoading, FetchState } from '@openstax/ts-utils/fetch';
-import { useSetAppError } from '@openstax/ui-components';
-import { FrontendConfig } from '.';
-import { useServices } from '../core/context/services';
-
-export const useFrontendConfig = () => {
-  const frontendConfigProvider = useServices().configProvider;
-  const [frontendConfig, setFrontendConfig] = React.useState<FetchState<FrontendConfig, string>>(fetchLoading());
-  const setAppError = useSetAppError();
-
-  React.useEffect(() => {
-    frontendConfigProvider.getConfig()
-      .then((ee) => setFrontendConfig(fetchSuccess(ee)))
-      .catch(setAppError);
-  }, [frontendConfigProvider, setAppError]);
-
-  return frontendConfig;
-};
-
-export const useFrontendConfigValue = (name: keyof FrontendConfig) => {
-  const [frontendConfigValue, setFrontendConfigValue] = React.useState<
-    FetchState<string, string>
-  >(fetchLoading());
-  const frontendConfig = useFrontendConfig();
-
-  React.useEffect(() => {
-    if (frontendConfig.type === FetchStateType.SUCCESS) {
-      const data = frontendConfig.data[name];
-      setFrontendConfigValue(previous => data
-        ? fetchSuccess(data)
-        : fetchError('configuration missing', previous)
-      );
-    } else if (frontendConfig.type === FetchStateType.ERROR) {
-      setFrontendConfigValue(previous => fetchError('error loading config', previous));
-    }
-  }, [frontendConfig, name]);
-
-
-  return frontendConfigValue;
-};

package/packages/frontend/src/core/context/services.spec.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ServiceContext, serviceProviderMiddleware } from "./services";
-import { AppServices } from "../types";
-
-afterEach(() => {
-  jest.resetAllMocks();
-});
-
-describe('ServicesContext', () => {
-  it('throws without a provider', () => {
-    jest.spyOn(console, 'error').mockReturnValue(undefined);
-
-    const Test = () => {
-      React.useContext(ServiceContext)();
-
-      return <div />;
-    };
-
-    expect(() => render(<Test />)).toThrow();
-  });
-});
-
-describe('serviceProviderMiddleware', () => {
-  it('provides services', () => {
-    const services = {text: 'cool text'} as any as AppServices;
-
-    const InnerTest = () => {
-      const services = React.useContext(ServiceContext)();
-      return <span>{(services as any).text}</span>;
-    };
-    const Test = () => <>{serviceProviderMiddleware(services)(<InnerTest />)}</>;
-
-    render(<Test />);
-
-    const textElement = screen.getByText(/cool text/i);
-    expect(textElement).toBeInTheDocument();
-  });
-});

package/packages/frontend/src/core/context/services.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { AppServices } from "../types";
-
-export const ServiceContext = React.createContext<() => AppServices>(
-  () => { throw new Error('context not provided'); }
-);
-
-export const serviceProviderMiddleware = (services: AppServices) => (route: React.ReactNode) =>
-  <ServiceContext.Provider value={() => services}>
-    {route}
-  </ServiceContext.Provider>
-;
-
-export const useServices = () => {
-  return React.useContext(ServiceContext)();
-};

package/packages/frontend/src/core/index.spec.ts

@@ -1,7 +0,0 @@
-import { routes } from ".";
-
-describe('gets routes', () => {
-  it('doesn\'t error', () => {
-    expect(routes).not.toThrow();
-  });
-});

package/packages/frontend/src/core/index.ts

@@ -1,20 +0,0 @@
-import {ReactNode} from 'react';
-import { makeRenderRouteUrl } from '@openstax/ts-utils/routing';
-import { getKeyValue } from '@openstax/ts-utils';
-import { exampleRoutes } from "../example/screens";
-import { makeGetRequestResponder } from '@openstax/ts-utils/routing';
-import { AppServices } from './types';
-import { Location } from "history";
-
-export const routes = () => ([
-  ...exampleRoutes(),
-]);
-
-export type TRoutes = (ReturnType<typeof routes>)[number];
-
-export const renderRouteUrl = makeRenderRouteUrl<TRoutes>();
-
-export const getRequestResponder = makeGetRequestResponder<AppServices, TRoutes, Location, ReactNode>()({
-  routes,
-  pathExtractor: getKeyValue('pathname'),
-});

package/packages/frontend/src/core/services.tsx

@@ -1,14 +0,0 @@
-import React, {ReactNode} from 'react';
-import { makeCreateRoute } from '@openstax/ts-utils/routing';
-import { makeComposeMiddleware } from '@openstax/ts-utils/middleware';
-import { AppServices } from './types';
-import { Location } from "history";
-
-export const composeRequestServiceMiddleware = makeComposeMiddleware<AppServices, {request: Location}>();
-export const composeResponseServiceMiddleware = makeComposeMiddleware<AppServices, ReactNode>();
-
-export const createRoute = makeCreateRoute<AppServices, Location>();
-
-export const makeScreen = <P,>(Screen: React.ComponentType<P>) => (params: {} extends P ? undefined : P) => {
-  return <Screen {...params as any} />;
-};

package/packages/frontend/src/core/types.ts

@@ -1,3 +0,0 @@
-import { BrowserServices } from "..";
-
-export type AppServices = BrowserServices;

package/packages/frontend/src/example/api.ts

@@ -1,28 +0,0 @@
-/* eslint-disable import/no-webpack-loader-syntax */
-import {TRoutes as ApiRoutes} from '@project/lambdas/build/src/functions/serviceApi/core/routes';
-// @ts-ignore-next-line
-import routes from '!!val-loader!@project/lambdas/build/script/utils/routeDataLoader';
-import { AppServices } from "../core/types";
-import { useServices } from "../core/context/services";
-import {assertDefined} from "@openstax/ts-utils/assertions";
-import React from 'react';
-
-// TODO - figure out how to wire the envConfig into the CRA build
-const config = {
-  apiBase: () => process.env.NODE_ENV === 'production'
-    ? assertDefined(process.env.REACT_APP_API_BASE_URL, 'REACT_APP_API_BASE_URL must be provided in production')
-    : '/'
-};
-
-export const createApiClient = (app: AppServices) => {
-  return app.createApiGateway<ApiRoutes>(config, routes, app);
-};
-
-export const useApiClient = () => {
-  const services = useServices();
-  const apiClientRef = React.useRef(createApiClient(services));
-  return apiClientRef.current;
-};
-
-
-export type ApiClient = ReturnType<typeof createApiClient>;

package/packages/frontend/src/example/components/Layout.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { BodyPortal, BodyPortalSlotsContext } from '@openstax/ui-components';
-import { thingListScreen } from '../screens/ThingList';
-import { homeScreen } from '../screens/Home';
-import { RouteLink } from '../../routing/components/RouteLink';
-
-interface Props {
-  title: string;
-}
-
-export const Layout = (props: React.PropsWithChildren<Props>) => {
-
-  return <BodyPortalSlotsContext.Provider value={['nav', 'root']}>
-    <BodyPortal slot='nav' tagName='nav'>
-      <ol>
-        <li><RouteLink route={homeScreen}>Home</RouteLink></li>
-        <li><RouteLink route={thingListScreen}>Thing List</RouteLink></li>
-      </ol>
-    </BodyPortal>
-    <h1>{props.title}</h1>
-    {props.children}
-  </BodyPortalSlotsContext.Provider>;
-};

package/packages/frontend/src/example/screens/Home.spec.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import { homeScreen } from "./Home";
-import { TestServiceProvider, testApiGateway } from "../../tests/testServices";
-import { ApiUser, stubAuthProvider } from "@openstax/ts-utils/services/authProvider";
-import { UpdatableUserFields } from "@openstax/ts-utils/services/authProvider/browser";
-
-beforeEach(() => {
-  testApiGateway.apiV0Info = jest.fn().mockReturnValue(Promise.resolve({
-    acceptStatus: (...num: number[]) => Promise.resolve({load: () => ({message: 'message'})}),
-  }));
-});
-
-afterEach(() => {
-  delete testApiGateway.apiV0Info;
-  jest.clearAllMocks();
-});
-
-describe('Home', () => {
-  it('renders logged out', async() => {
-    const services = {
-      configProvider: {
-        getConfig: async() => ({
-          roleApplication: 'test',
-          exampleMessage: 'hello from /api/v0/info',
-        }),
-      } as any,
-    };
-    render(<TestServiceProvider {...services}>{homeScreen.handler(undefined, {} as any)}</TestServiceProvider>);
-
-    await waitFor(() => {
-      const linkElement = screen.getByText(/login/i);
-      expect(linkElement).toBeInTheDocument();
-    });
-  });
-
-  it('renders logged in', async() => {
-    const token = '';
-    const user = {} as ApiUser;
-    const services = {
-      authProvider: {
-        ...stubAuthProvider(user),
-        getAuthToken: () => Promise.resolve(token),
-        getAuthorizedUrl: (url: string) => url,
-        getAuthorizedLinkUrl: (url: string) => url,
-        getAuthorizedEmbedUrl: (url: string) => url,
-        updateUser: (_updates: UpdatableUserFields) => Promise.resolve({user, token}),
-      },
-      configProvider: {
-        getConfig: async() => ({
-          roleApplication: 'test',
-          exampleMessage: 'hello from /api/v0/info',
-        }),
-      } as any,
-    };
-    render(<TestServiceProvider {...services}>{homeScreen.handler(undefined, {} as any)}</TestServiceProvider>);
-
-    await waitFor(() => {
-      const messageElement = screen.getByText('hello from /api/v0/info');
-      expect(messageElement).toBeInTheDocument();
-    });
-
-    await waitFor(() => {
-      const linkElement = screen.getByText(/logout/i);
-      expect(linkElement).toBeInTheDocument();
-    });
-  });
-});

package/packages/frontend/src/example/screens/Home.tsx

@@ -1,78 +0,0 @@
-import { FetchStateType, stateHasData, stateHasError } from "@openstax/ts-utils/fetch";
-import React from 'react';
-import { useApiClient } from "../api";
-import { Layout } from "../components/Layout";
-import { useAccountsBase, useAuth, useUserRoles } from "../../auth/useAuth";
-import { useFrontendConfigValue } from "../../configProvider/use";
-import { createRoute, makeScreen } from "../../core/services";
-
-export const Home = () => {
-  const [message, setMessage] = React.useState<string>();
-  const accountsBaseUrl = useAccountsBase();
-  const user = useAuth();
-  const apiClient = useApiClient();
-  const configExampleMessage = useFrontendConfigValue('exampleMessage');
-  const roles = useUserRoles();
-
-  React.useEffect(() => {
-    apiClient.apiV0Info({fetchConfig: {credentials: 'include'}})
-      .then(response => response.acceptStatus(200))
-      .then(response => response.load())
-      .then(response => setMessage(response.message))
-    ;
-    /* example edit/create
-     *
-    apiClient.apiV0WriteTestDoc({
-      params: {foobar: 'idString'},
-      payload: {name: 'cool name', description: 'cool description'},
-      fetchConfig: {credentials: 'include'}
-    })
-      .then(response => response.acceptStatus(201))
-      .then(response => response.load())
-      .then(response => console.log(response))
-    ;
-    */
-  }, [apiClient]);
-
-  return (
-    <Layout title="Home">
-      <p>
-        {stateHasData(roles) && roles.data.includes('admin') ? 'whoa we got an admin here folks' : null}
-      </p>
-      <p>
-        {message}
-      </p>
-      {stateHasData(configExampleMessage) && <p>
-        {configExampleMessage.data}
-      </p>}
-      {!!stateHasData(user) && user.data && <>
-        <a
-          href={`${accountsBaseUrl}accounts/logout?r=${window.location.pathname}`}
-          rel="noopener noreferrer"
-        >
-          logout
-        </a>
-      </>}
-      {stateHasData(user) && !user.data && <>
-        <a
-          href={`${accountsBaseUrl}accounts/login?r=${window.location.pathname}`}
-          rel="noopener noreferrer"
-        >
-          login
-        </a>
-        <a
-          href={`${accountsBaseUrl}accounts/signup?r=${window.location.pathname}`}
-          rel="noopener noreferrer"
-        >
-          signup
-        </a>
-      </>}
-      {stateHasError(user) && <strong>error loading user</strong>}
-      {user.type === FetchStateType.LOADING ? <em>establishing user state</em> : null}
-    </Layout>
-  );
-};
-
-export const homeScreen = createRoute({name: 'HomeScreen', path: '/',
-  handler: makeScreen(Home)
-});

package/packages/frontend/src/example/screens/ThingList.spec.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import { TestServiceProvider } from "../../tests/testServices";
-import * as api from "../api";
-import { thingListScreen } from "./ThingList";
-
-afterEach(() => {
-  jest.clearAllMocks();
-});
-
-describe('ThingList', () => {
-  let apiV0SearchExampleDocSpy: jest.SpyInstance;
-
-  beforeEach(() => {
-    apiV0SearchExampleDocSpy = jest.fn();
-
-    jest.spyOn(api, 'useApiClient').mockReturnValue({
-      apiV0SearchExampleDoc: apiV0SearchExampleDocSpy
-    } as any);
-  });
-
-  it('shows results', async() => {
-    apiV0SearchExampleDocSpy.mockReturnValue(Promise.resolve({
-      acceptStatus: () => Promise.resolve(
-        {status: 200, load: () => ({meta: {}, items: [{id: 'some id', name: 'some name'}]})}
-      ),
-    }));
-
-    render(<TestServiceProvider>{thingListScreen.handler(undefined, undefined)}</TestServiceProvider>);
-
-    await waitFor(() => {
-      const dataElement = screen.getByText(/some name/i);
-      expect(dataElement).toBeInTheDocument();
-    });
-  });
-
-  it('renders error on unexpected status', async() => {
-    apiV0SearchExampleDocSpy.mockReturnValue(Promise.resolve({
-      acceptStatus: () => Promise.reject(new Error()),
-    }));
-
-    render(<TestServiceProvider>{thingListScreen.handler(undefined, undefined)}</TestServiceProvider>);
-
-    await waitFor(() => {
-      const dataElement = screen.getByText(/connection failed/i);
-      expect(dataElement).toBeInTheDocument();
-    });
-  });
-
-  it('renders fetch failed', async() => {
-    apiV0SearchExampleDocSpy.mockReturnValue(Promise.reject({ }));
-
-    render(<TestServiceProvider>{thingListScreen.handler(undefined, undefined)}</TestServiceProvider>);
-
-    await waitFor(() => {
-      const dataElement = screen.getByText(/connection failed/i);
-      expect(dataElement).toBeInTheDocument();
-    });
-  });
-});

package/packages/frontend/src/example/screens/ThingList.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import { createRoute, makeScreen } from "core/services";
-import { Layout } from "../components/Layout";
-import { UnwrapPromise } from "@openstax/ts-utils/types";
-import { useQuery } from "routing/useQuery";
-import { thingViewScreen } from "./ThingView";
-import { RouteLink } from "routing/components/RouteLink";
-import { Pagination } from "components/Pagination";
-import { fetchLoading,
-  FetchState,
-  fetchSuccess,
-  fetchError,
-  stateHasData,
-  stateHasError
-} from "@openstax/ts-utils/fetch";
-import { ApiClient, useApiClient } from "../api";
-
-// query params are not strongly typed... yet
-type SearchOptions = {
-  page?: string;
-};
-
-/*
- * this execute function is sometimes unnecessary, but in this case its
- * kinda nice to use it to extract the SearchData return type for the data.
- *
- * if there is a convenient type in the api that represents the return type
- * like a model or something you could also use that directly
- * */
-const executeSearch = (apiClient: ApiClient, options: SearchOptions) => {
-  return apiClient.apiV0SearchExampleDoc({query: options})
-    .then(response => response.acceptStatus(200))
-    .then(response => response.load());
-};
-type SearchData = UnwrapPromise<ReturnType<typeof executeSearch>>;
-
-const useSearch = (options: SearchOptions) => {
-  const apiClient = useApiClient();
-  const [pageData, setPageData] = React.useState<FetchState<SearchData, string>>(fetchLoading());
-
-  React.useEffect(() => {
-    executeSearch(apiClient, options)
-      .then(data => setPageData(fetchSuccess(data)))
-      .catch(() => setPageData(previous => fetchError('connection failed', previous)))
-    ;
-  }, [apiClient, options]);
-
-  return pageData;
-};
-
-const SearchResults = ({searchData, options}: {searchData: SearchData; options: SearchOptions}) => {
-  return <div>
-    <ol>
-      {searchData.items.map(item => <li key={item.id}>
-        <RouteLink route={thingViewScreen} params={{id: item.id}}>{item.name}</RouteLink>
-      </li>)}
-    </ol>
-    <Pagination {...searchData.meta} />
-  </div>;
-
-};
-
-export const ThingList = () => {
-  const options = useQuery();
-  const searchState = useSearch(options);
-
-  return <Layout title="Thing List">
-    {stateHasError(searchState) ? searchState.error : null}
-    {stateHasData(searchState) ? <SearchResults searchData={searchState.data} options={options} /> : null}
-  </Layout>;
-};
-
-export const thingListScreen = createRoute({name: 'ThingList', path: '/thing-list',
-  handler: makeScreen(ThingList),
-});

package/packages/frontend/src/example/screens/ThingView.spec.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import { TestServiceProvider } from "../../tests/testServices";
-import * as api from "../api";
-import { thingViewScreen } from "./ThingView";
-
-
-afterEach(() => {
-  jest.clearAllMocks();
-});
-
-describe('ThingView', () => {
-  let apiV0GetExampleDocSpy: jest.SpyInstance;
-
-  beforeEach(() => {
-    apiV0GetExampleDocSpy = jest.fn();
-
-    jest.spyOn(api, 'useApiClient').mockReturnValue({
-      apiV0GetExampleDoc: apiV0GetExampleDocSpy
-    } as any);
-  });
-
-  it('queries given document', async() => {
-    apiV0GetExampleDocSpy.mockReturnValue(Promise.resolve({
-      acceptStatus: () => Promise.resolve({status: 200, load: () => ({theData: 'this is the data'})}),
-    }));
-
-    render(<TestServiceProvider>{thingViewScreen.handler({id: 'some id'}, undefined)}</TestServiceProvider>);
-
-    await waitFor(() => {
-      expect(apiV0GetExampleDocSpy).toHaveBeenCalledWith({params: {key: 'some id'}});
-    });
-  });
-
-  it('renders data', async() => {
-    apiV0GetExampleDocSpy.mockReturnValue(Promise.resolve({
-      acceptStatus: () => Promise.resolve({status: 200, load: () => ({theData: 'this is the data'})}),
-    }));
-
-    render(<TestServiceProvider>{thingViewScreen.handler({id: 'some id'}, undefined)}</TestServiceProvider>);
-
-    await waitFor(() => {
-      const dataElement = screen.getByText(/this is the data/i);
-      expect(dataElement).toBeInTheDocument();
-    });
-  });
-
-  it('renders not found', async() => {
-    apiV0GetExampleDocSpy.mockReturnValue(Promise.resolve({
-      acceptStatus: () => Promise.resolve({status: 404, load: () => ({theData: 'this is the data'})}),
-    }));
-
-    render(<TestServiceProvider>{thingViewScreen.handler({id: 'some id'}, undefined)}</TestServiceProvider>);
-
-    await waitFor(() => {
-      const dataElement = screen.getByText(/item not found/i);
-      expect(dataElement).toBeInTheDocument();
-    });
-  });
-
-  it('renders fetch failed', async() => {
-    apiV0GetExampleDocSpy.mockReturnValue(Promise.reject({ }));
-
-    render(<TestServiceProvider>{thingViewScreen.handler({id: 'some id'}, undefined)}</TestServiceProvider>);
-
-    await waitFor(() => {
-      const dataElement = screen.getByText(/connection failed/i);
-      expect(dataElement).toBeInTheDocument();
-    });
-  });
-});