105 lines
2.0 KiB
TypeScript
105 lines
2.0 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import {
|
|
Button,
|
|
__experimentalItem as Item,
|
|
__experimentalItemGroup as ItemGroup,
|
|
Card,
|
|
CardBody,
|
|
CardHeader,
|
|
CardFooter,
|
|
Spinner,
|
|
} from '@wordpress/components';
|
|
import { useState } from 'react';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { useManifests } from '../data/useManifests';
|
|
import { isURL } from '../util/url';
|
|
|
|
export const ManifestList = () => {
|
|
const { manifests, isLoading, error, createManifest, deleteManifest } =
|
|
useManifests();
|
|
const [ newManifest, setNewManifest ] = useState< string >( '' );
|
|
|
|
if ( isLoading ) {
|
|
return (
|
|
<Card elevation={ 3 }>
|
|
<CardHeader>
|
|
<h2>Manifests</h2>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<Spinner />
|
|
</CardBody>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if ( error ) {
|
|
return (
|
|
<Card elevation={ 3 }>
|
|
<CardHeader>
|
|
<h2>Manifests</h2>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<p>{ error }</p>
|
|
</CardBody>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card elevation={ 3 }>
|
|
<CardHeader>
|
|
<h2>Manifests</h2>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<ItemGroup>
|
|
{ ! manifests.length && ! isLoading && (
|
|
<p>No manifests found.</p>
|
|
) }
|
|
{ manifests.map( ( [ manifestUrl ] ) => (
|
|
<Item key={ manifestUrl }>
|
|
{ manifestUrl }
|
|
<Button
|
|
variant="tertiary"
|
|
onClick={ () => {
|
|
deleteManifest( manifestUrl );
|
|
} }
|
|
>
|
|
Remove this manifest
|
|
</Button>
|
|
</Item>
|
|
) ) }
|
|
</ItemGroup>
|
|
</CardBody>
|
|
<CardFooter>
|
|
<input
|
|
type="text"
|
|
value={ newManifest }
|
|
onChange={ ( e ) => setNewManifest( e.target.value ) }
|
|
/>
|
|
{ !! newManifest.length && ! isURL( newManifest ) && (
|
|
<p>Invalid URL</p>
|
|
) }
|
|
<Button
|
|
variant="primary"
|
|
disabled={
|
|
! newManifest &&
|
|
! newManifest.length &&
|
|
! isURL( newManifest )
|
|
}
|
|
onClick={ () => {
|
|
createManifest( newManifest );
|
|
setNewManifest( '' );
|
|
} }
|
|
>
|
|
Add manifest URL
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
};
|