You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.7 KiB
66 lines
1.7 KiB
import { useState } from 'react'; |
|
import { Box, IconButton } from '@mui/material'; |
|
import AddIcon from '@mui/icons-material/Add'; |
|
import { styled } from '@mui/material/styles'; |
|
|
|
import ICON_BUTTON_STYLE from '../../lib/consts/ICON_BUTTON_STYLE'; |
|
|
|
import { Panel } from '../Panels'; |
|
import PeriodicFetch from '../../lib/fetchers/periodicFetch'; |
|
import Spinner from '../Spinner'; |
|
import { HeaderText } from '../Text'; |
|
import FileInfo from './FileInfo'; |
|
import FileList from './FileList'; |
|
|
|
const PREFIX = 'Files'; |
|
|
|
const classes = { |
|
addFileButton: `${PREFIX}-addFileButton`, |
|
addFileInput: `${PREFIX}-addFileInput`, |
|
}; |
|
|
|
const StyledDiv = styled('div')(() => ({ |
|
[`& .${classes.addFileButton}`]: ICON_BUTTON_STYLE, |
|
|
|
[`& .${classes.addFileInput}`]: { |
|
display: 'none', |
|
}, |
|
})); |
|
|
|
const Files = (): JSX.Element => { |
|
const [isShowUploadForm, setIsShowUploadForm] = useState<boolean>(false); |
|
|
|
const { data: fileList, isLoading } = PeriodicFetch( |
|
`${process.env.NEXT_PUBLIC_API_URL?.replace('/cgi-bin', '/api')}/files`, |
|
); |
|
|
|
const onAddFileButtonClick = () => { |
|
setIsShowUploadForm(!isShowUploadForm); |
|
}; |
|
|
|
return ( |
|
<Panel> |
|
<StyledDiv> |
|
<Box style={{ display: 'flex', width: '100%' }}> |
|
<Box style={{ flexGrow: 1 }}> |
|
<HeaderText text="Files" /> |
|
</Box> |
|
<Box> |
|
<IconButton |
|
className={classes.addFileButton} |
|
onClick={onAddFileButtonClick} |
|
> |
|
<AddIcon /> |
|
</IconButton> |
|
</Box> |
|
</Box> |
|
{isShowUploadForm && ( |
|
<FileInfo anvilList={[]} isShowSelectFileOnStart /> |
|
)} |
|
{isLoading ? <Spinner /> : <FileList list={fileList} />} |
|
</StyledDiv> |
|
</Panel> |
|
); |
|
}; |
|
|
|
export default Files;
|
|
|