Commit c31a1aba authored by Axel Bocciarelli's avatar Axel Bocciarelli
Browse files

Add more loading/error boundaries

parent 1d445ad6
Pipeline #32360 passed with stage
in 3 minutes and 9 seconds
import React, { Suspense } from 'react';
import { Alert } from 'react-bootstrap';
import Loader from './Loader';
import { NetworkErrorBoundary } from 'rest-hooks';
function LoadingBoundary(props) {
const { authError, children, ...loaderProps } = props;
return (
<Suspense fallback={<Loader {...loaderProps} />}>
<NetworkErrorBoundary
fallbackComponent={({ error }) => (
<Alert bsStyle="warning" style={{ marginTop: 16 }}>
{error.status === 403
? authError || 'Not allowed'
: `An error occured: ${error.message}`}
</Alert>
)}
>
{children}
</NetworkErrorBoundary>
</Suspense>
);
}
export default LoadingBoundary;
......@@ -7,6 +7,7 @@ import { useQuery } from '../../helpers/hooks';
import ShipmentResource from '../../resources/shipment';
import ShipmentSummary from './ShipmentSummary';
import ShippingForm from './ShippingForm';
import LoadingBoundary from '../LoadingBoundary';
function ShipmentSection(props) {
const {
......@@ -50,13 +51,15 @@ function ShipmentSection(props) {
</div>
{isConfiguring ? (
<ShippingForm
investigation={investigation}
shipment={shipment}
defaultShippingAddress={defaultShippingAddress}
defaultReturnAddress={defaultReturnAddress}
onSubmitAsync={handleSubmit}
/>
<LoadingBoundary message="Loading your addresses..." spacedOut>
<ShippingForm
investigation={investigation}
shipment={shipment}
defaultShippingAddress={defaultShippingAddress}
defaultReturnAddress={defaultReturnAddress}
onSubmitAsync={handleSubmit}
/>
</LoadingBoundary>
) : (
<ShipmentSummary
shipment={shipment}
......
......@@ -217,9 +217,11 @@ function ShippingForm(props) {
>
{isSubmitting ? 'Saving...' : 'Save'}
</Button>
<LinkContainer to={`/investigation/${investigation.id}/shipping`}>
<Button bsStyle="link">Cancel</Button>
</LinkContainer>
{shipment && (
<LinkContainer to={`/investigation/${investigation.id}/shipping`}>
<Button bsStyle="link">Cancel</Button>
</LinkContainer>
)}
</Col>
</Row>
</Form>
......
import React, { Suspense } from 'react';
import React from 'react';
import { useCache, useResource } from 'rest-hooks';
import AddressResource from '../../resources/address';
import ShipmentResource from '../../resources/shipment';
import { useReturnAddress } from '../Address/utils';
import ParcelsSection from './ParcelsSection';
import ShipmentSection from './ShipmentSection';
import Loader from '../Loader';
import LoadingBoundary from '../LoadingBoundary';
function ShippingPanel(props) {
const { investigation } = props;
......@@ -27,14 +27,14 @@ function ShippingPanel(props) {
defaultReturnAddress={defaultReturnAddress}
/>
{shipment && (
<Suspense fallback={<Loader message="Loading parcels..." spacedOut />}>
<LoadingBoundary message="Loading parcels..." spacedOut>
<ParcelsSection
investigation={investigation}
shipment={shipment}
defaultShippingAddress={defaultShippingAddress}
defaultReturnAddress={defaultReturnAddress}
/>
</Suspense>
</LoadingBoundary>
)}
</>
);
......
import React, { Suspense, useEffect } from 'react';
import { Alert, Col, Grid, Row } from 'react-bootstrap';
import React, { useEffect } from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import { useDispatch } from 'react-redux';
import { useParams } from 'react-router';
import { NetworkErrorBoundary } from 'rest-hooks';
import { setBreadCrumbs } from '../actions/breadcrumbs';
import Loader from '../components/Loader';
import ShippingPanel from '../components/Shipping/ShippingPanel';
import TabContainerMenu from '../components/TabContainerMenu/TabContainerMenu';
import { useInvestigation } from '../helpers/hooks';
import PageNotFound from './PageNotFound';
import LoadingBoundary from '../components/LoadingBoundary';
function ShippingPage() {
const { investigationId } = useParams();
......@@ -39,21 +39,13 @@ function ShippingPage() {
<Row>
<Col sm={12}>
<TabContainerMenu />
<Suspense
fallback={<Loader message="Loading shipping data..." spacedOut />}
<LoadingBoundary
message="Loading shipping data..."
authError="You are not allowed to manage shipping for this investigation."
spacedOut
>
<NetworkErrorBoundary
fallbackComponent={({ error }) => (
<Alert bsStyle="warning" style={{ marginTop: 16 }}>
{error.status === 403
? 'You are not allowed to manage shipping for this investigation.'
: `An error occured: ${error.message}`}
</Alert>
)}
>
<ShippingPanel investigation={investigation} />
</NetworkErrorBoundary>
</Suspense>
<ShippingPanel investigation={investigation} />
</LoadingBoundary>
</Col>
</Row>
</Grid>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment