125 lines
3.6 KiB
JavaScript
125 lines
3.6 KiB
JavaScript
// @flow
|
|
import * as PAGES from 'constants/pages';
|
|
import * as ICONS from 'constants/icons';
|
|
import React, { useEffect } from 'react';
|
|
import Button from 'component/button';
|
|
import ClaimList from 'component/claimList';
|
|
import Page from 'component/page';
|
|
import Paginate from 'component/common/paginate';
|
|
import { PAGE_PARAM, PAGE_SIZE_PARAM } from 'constants/claim';
|
|
import WebUploadList from 'component/webUploadList';
|
|
import Spinner from 'component/spinner';
|
|
import Yrbl from 'component/yrbl';
|
|
|
|
type Props = {
|
|
uploadCount: number,
|
|
checkPendingPublishes: () => void,
|
|
clearPublish: () => void,
|
|
fetchClaimListMine: (number, number) => void,
|
|
fetching: boolean,
|
|
urls: Array<string>,
|
|
urlTotal: number,
|
|
history: { replace: string => void, push: string => void },
|
|
page: number,
|
|
pageSize: number,
|
|
};
|
|
|
|
function FileListPublished(props: Props) {
|
|
const {
|
|
uploadCount,
|
|
checkPendingPublishes,
|
|
clearPublish,
|
|
fetchClaimListMine,
|
|
fetching,
|
|
urls,
|
|
urlTotal,
|
|
page,
|
|
pageSize,
|
|
} = props;
|
|
|
|
const params = {};
|
|
|
|
params[PAGE_PARAM] = Number(page);
|
|
params[PAGE_SIZE_PARAM] = Number(pageSize);
|
|
|
|
const paramsString = JSON.stringify(params);
|
|
|
|
useEffect(() => {
|
|
checkPendingPublishes();
|
|
}, [checkPendingPublishes]);
|
|
|
|
useEffect(() => {
|
|
if (paramsString && fetchClaimListMine) {
|
|
const params = JSON.parse(paramsString);
|
|
fetchClaimListMine(params.page, params.page_size);
|
|
}
|
|
}, [uploadCount, paramsString, fetchClaimListMine]);
|
|
|
|
return (
|
|
<Page>
|
|
<div className="card-stack">
|
|
<WebUploadList />
|
|
{!!(urls && urls.length) && (
|
|
<>
|
|
<ClaimList
|
|
header={<h1 className="section__title">{__('Uploads')}</h1>}
|
|
headerAltControls={
|
|
<div className="card__actions--inline">
|
|
{fetching && <Spinner type="small" />}
|
|
{!fetching && (
|
|
<Button
|
|
button="alt"
|
|
label={__('Refresh')}
|
|
icon={ICONS.REFRESH}
|
|
onClick={() => fetchClaimListMine(params.page, params.page_size)}
|
|
/>
|
|
)}
|
|
<Button
|
|
icon={ICONS.PUBLISH}
|
|
button="secondary"
|
|
label={__('Upload')}
|
|
navigate={`/$/${PAGES.UPLOAD}`}
|
|
onClick={() => clearPublish()}
|
|
/>
|
|
</div>
|
|
}
|
|
loading={fetching}
|
|
persistedStorageKey="claim-list-published"
|
|
uris={urls}
|
|
/>
|
|
<Paginate totalPages={urlTotal > 0 ? Math.ceil(urlTotal / Number(pageSize)) : 1} />
|
|
</>
|
|
)}
|
|
</div>
|
|
{!(urls && urls.length) && (
|
|
<React.Fragment>
|
|
{!fetching ? (
|
|
<section className="main--empty">
|
|
<Yrbl
|
|
title={__('No uploads')}
|
|
subtitle={__("You haven't uploaded anything yet. This is where you can find them when you do!")}
|
|
actions={
|
|
<div className="section__actions">
|
|
<Button
|
|
button="primary"
|
|
navigate={`/$/${PAGES.UPLOAD}`}
|
|
label={__('Upload Something New')}
|
|
onClick={() => clearPublish()}
|
|
/>
|
|
</div>
|
|
}
|
|
/>
|
|
</section>
|
|
) : (
|
|
<section className="main--empty">
|
|
<Spinner delayed />
|
|
</section>
|
|
)}
|
|
</React.Fragment>
|
|
)}
|
|
</Page>
|
|
);
|
|
}
|
|
|
|
export default FileListPublished;
|