path: root/packages/frontend/src/InstanceRoutes.tsx

/*
 This file is part of GNU Taler
 (C) 2021 Taler Systems S.A.

 GNU Taler is free software; you can redistribute it and/or modify it under the
 terms of the GNU General Public License as published by the Free Software
 Foundation; either version 3, or (at your option) any later version.

 GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

/**
*
* @author Sebastian Javier Marchano (sebasjm)
*/

import { createHashHistory } from 'history';
import { Fragment, FunctionComponent, h, VNode } from 'preact';
import { Route, route, Router } from 'preact-router';
import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
import { Loading } from './components/exception/loading';
import { NotificationCard } from './components/menu';
import { useBackendContext } from './context/backend';
import { InstanceContextProvider } from './context/instance';
import { useBackendDefaultToken, useBackendInstanceToken } from './hooks';
import { HttpError } from "./hooks/backend";
import { useTranslator } from './i18n';
import InstanceCreatePage from "./paths/admin/create";
import InstanceListPage from './paths/admin/list';
import OrderCreatePage from './paths/instance/orders/create';
import OrderDetailsPage from './paths/instance/orders/details';
import OrderListPage from './paths/instance/orders/list';
import ProductCreatePage from './paths/instance/products/create';
import ProductListPage from './paths/instance/products/list';
import ProductUpdatePage from './paths/instance/products/update';
import TransferListPage from './paths/instance/transfers/list';
import TransferCreatePage from './paths/instance/transfers/create';
import ReservesCreatePage from './paths/instance/reserves/create';
import ReservesDetailsPage from './paths/instance/reserves/details';
import ReservesListPage from './paths/instance/reserves/list';
import InstanceUpdatePage, { Props as InstanceUpdatePageProps } from "./paths/instance/update";
import LoginPage from './paths/login';
import NotFoundPage from './paths/notfound';
import { Notification } from './utils/types';

export enum InstancePaths {
  // details = '/',
  error = '/error',
  update = '/update',

  product_list = '/products',
  product_update = '/product/:pid/update',
  product_new = '/product/new',

  order_list = '/orders',
  order_new = '/order/new',
  order_details = '/order/:oid/details',

  reserves_list = '/reserves',
  reserves_details = '/reserves/:rid/details',
  reserves_new = '/reserves/new',

  transfers_list = '/transfers',
  transfers_new = '/transfer/new',
}

// eslint-disable-next-line @typescript-eslint/no-empty-function
const noop = () => { }

export enum AdminPaths {
  list_instances = '/instances',
  new_instance = '/instance/new',
  update_instance = '/instance/:id/update',
}

export interface Props {
  id: string;
  admin?: boolean;
}

export function InstanceRoutes({ id, admin }: Props): VNode {
  const [_, updateDefaultToken] = useBackendDefaultToken()
  const [token, updateToken] = useBackendInstanceToken(id);
  const { changeBackend, addTokenCleaner } = useBackendContext();
  const cleaner = useCallback(() => { updateToken(undefined); }, [id]);
  const i18n = useTranslator();
  const [globalNotification, setGlobalNotification] = useState<Notification & { to: string } | undefined>(undefined)

  useEffect(() => {
    addTokenCleaner(cleaner);
  }, [addTokenCleaner, cleaner]);

  const changeToken = (token?:string) => {
    if (admin) {
      updateToken(token);
    } else {
      updateDefaultToken(token)
    }
  }
  const updateLoginStatus = (url: string, token?: string) => {
    changeBackend(url);
    if (!token) return
    changeToken(token)
  };

  const value = useMemo(() => ({ id, token, admin, changeToken }), [id, token, admin])

  const ServerErrorRedirectTo = (to: InstancePaths | AdminPaths) => (error: HttpError) => {
    setGlobalNotification({
      message: i18n`The backend reported a problem: HTTP status #${error.status}`,
      description: i18n`Diagnostic from ${error.info?.url} is "${error.message}"`,
      type: 'ERROR',
      to
    })
    return <Redirect to={to} />
  }

  const LoginPageAccessDenied = () => <Fragment>
    <NotificationCard notification={{ message: i18n`Access denied`, description: i18n`The access token provided is invalid.`, type: 'ERROR', }} />
    <LoginPage onConfirm={updateLoginStatus} />
  </Fragment>

  function IfAdminCreateDefaultOr<T>(Next: FunctionComponent<any>) {
    return function IfAdminCreateDefaultOrImpl(props?: T) {
      if (admin && id === 'default') {
        return <Fragment>
          <NotificationCard notification={{
            message: i18n`No 'default' instance configured yet.`,
            description: i18n`Create a 'default' instance to begin using the merchant backoffice.`,
            type: 'INFO'
          }} />
          <InstanceCreatePage forceId="default" onConfirm={() => {
            route(AdminPaths.list_instances)
          }} />
        </Fragment>
      }
      if (props) {
        return <Next {...props} />
      }
      return <Next />

    }
  }

  return <InstanceContextProvider value={value}>

    <NotificationCard notification={globalNotification} />

    <Router  onChange={(e) => {
      const movingOutFromNotification = globalNotification && e.url !== globalNotification.to
      if (movingOutFromNotification) {
        setGlobalNotification(undefined)
      }
    }} >

      <Route path="/" component={Redirect} to={InstancePaths.order_list} />

      {/**
       * Admin pages
       */}
      {admin &&
        <Route path={AdminPaths.list_instances} component={InstanceListPage}
          onCreate={() => { route(AdminPaths.new_instance) }}
          onUpdate={(id: string): void => { route(`/instance/${id}/update`); }}
          onUnauthorized={LoginPageAccessDenied}
          onLoadError={ServerErrorRedirectTo(InstancePaths.error)}
        />
      }

      {admin &&
        <Route path={AdminPaths.new_instance} component={InstanceCreatePage}
          onBack={() => route(AdminPaths.list_instances)}
          onConfirm={() => { route(AdminPaths.list_instances); }}
        />
      }

      {admin &&
        <Route path={AdminPaths.update_instance} component={AdminInstanceUpdatePage}
          onBack={() => route(AdminPaths.list_instances)}
          onConfirm={() => { route(AdminPaths.list_instances); }}
          onUpdateError={ServerErrorRedirectTo(AdminPaths.list_instances)}
          onLoadError={ServerErrorRedirectTo(AdminPaths.list_instances)}
          onNotFound={NotFoundPage}
        />
      }

      {/**
       * Update instance page
       */}
      <Route path={InstancePaths.update} component={InstanceUpdatePage}
        onBack={() => { route(`/`); }}
        onConfirm={() => { route(`/`); }}
        onUpdateError={noop}
        onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
        onUnauthorized={LoginPageAccessDenied}
        onLoadError={ServerErrorRedirectTo(InstancePaths.error)}
      />

      {/**
       * Product pages
       */}
      <Route path={InstancePaths.product_list} component={ProductListPage}
        onUnauthorized={LoginPageAccessDenied}
        onLoadError={ServerErrorRedirectTo(InstancePaths.update)}
        onCreate={() => { route(InstancePaths.product_new) }}
        onSelect={(id: string) => { route(InstancePaths.product_update.replace(':pid', id)) }}
        onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
      />
      <Route path={InstancePaths.product_update} component={ProductUpdatePage}
        onUnauthorized={LoginPageAccessDenied}
        onLoadError={ServerErrorRedirectTo(InstancePaths.product_list)}
        onConfirm={() => { route(InstancePaths.product_list); }}
        onBack={() => { route(InstancePaths.product_list); }}
        onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
      />
      <Route path={InstancePaths.product_new}
        component={ProductCreatePage}
        onConfirm={() => { route(InstancePaths.product_list); }}
        onBack={() => { route(InstancePaths.product_list); }}
      />

      {/**
       * Order pages
       */}
      <Route path={InstancePaths.order_list} component={OrderListPage}
        onCreate={() => { route(InstancePaths.order_new) }}
        onSelect={(id: string) => { route(InstancePaths.order_details.replace(':oid', id)) }}
        onUnauthorized={LoginPageAccessDenied}
        onLoadError={ServerErrorRedirectTo(InstancePaths.update)}
        onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
      />
      <Route path={InstancePaths.order_details} component={OrderDetailsPage}
        onUnauthorized={LoginPageAccessDenied}
        onLoadError={ServerErrorRedirectTo(InstancePaths.order_list)}
        onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
        onBack={() => { route(InstancePaths.order_list) }}
      />
      <Route path={InstancePaths.order_new} component={OrderCreatePage}
        onConfirm={() => { route(InstancePaths.order_list) }}
        onBack={() => { route(InstancePaths.order_list) }}
      />

      {/**
       * Transfer pages
       */}
      <Route path={InstancePaths.transfers_list} component={TransferListPage}
        onUnauthorized={LoginPageAccessDenied}
        onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
        onLoadError={ServerErrorRedirectTo(InstancePaths.update)}
        onCreate={() => { route(InstancePaths.transfers_new) }}
      />

      <Route path={InstancePaths.transfers_new} component={TransferCreatePage}
        onConfirm={() => { route(InstancePaths.transfers_list) }}
        onBack={() => { route(InstancePaths.transfers_list) }}
      />

      {/**
       * reserves pages
       */}
      <Route path={InstancePaths.reserves_list} component={ReservesListPage}
        onUnauthorized={LoginPageAccessDenied}
        onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
        onLoadError={ServerErrorRedirectTo(InstancePaths.update)}
        onSelect={(id: string) => { route(InstancePaths.reserves_details.replace(':rid', id)) }}
        onCreate={() => { route(InstancePaths.reserves_new) }}
      />

      <Route path={InstancePaths.reserves_details} component={ReservesDetailsPage}
        onUnauthorized={LoginPageAccessDenied}
        onLoadError={ServerErrorRedirectTo(InstancePaths.reserves_list)}
        onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
        onBack={() => { route(InstancePaths.reserves_list) }}
      />

      <Route path={InstancePaths.reserves_new} component={ReservesCreatePage}
        onConfirm={() => { route(InstancePaths.reserves_list) }}
        onBack={() => { route(InstancePaths.reserves_list) }}
      />
      {/**
       * Example pages
       */}
      <Route path="/loading" component={Loading} />
      <Route default component={NotFoundPage} />
    </Router>
  </InstanceContextProvider>;

}

export function Redirect({ to }: { to: string }): null {
  useEffect(() => {
    route(to, true)
  })
  return null
}

function AdminInstanceUpdatePage({ id, ...rest }: { id: string } & InstanceUpdatePageProps) {
  const [token, changeToken] = useBackendInstanceToken(id);
  const { changeBackend } = useBackendContext();
  const updateLoginStatus = (url: string, token?: string) => {
    changeBackend(url);
    if (token)
    changeToken(token);
  };
  const value = useMemo(() => ({ id, token, admin: true, changeToken }), [id, token])
  const i18n = useTranslator();
  return <InstanceContextProvider value={value}>
    <InstanceUpdatePage {...rest}
      onLoadError={(error: HttpError) => {
        return <Fragment>
          <NotificationCard notification={{
            message: i18n`The backend reported a problem: HTTP status #${error.status}`,
            description: i18n`Diagnostic from ${error.info?.url} is "${error.message}"`,
            type: 'ERROR'
          }} />
          <LoginPage onConfirm={updateLoginStatus} />
        </Fragment>
      }}

      onUnauthorized={() => {
        return <Fragment>
          <NotificationCard notification={{
            message: i18n`Access denied`,
            description: i18n`The access token provided is invalid`,
            type: 'ERROR',
          }} />
          <LoginPage onConfirm={updateLoginStatus} />
        </Fragment>
      }}

    />
  </InstanceContextProvider>
}