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.
69 lines
1.8 KiB
69 lines
1.8 KiB
import { useRef } from 'react'; |
|
import { Box, IconButton, Input, InputLabel } from '@material-ui/core'; |
|
import AddIcon from '@material-ui/icons/Add'; |
|
import { makeStyles } from '@material-ui/core/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'; |
|
|
|
const useStyles = makeStyles(() => ({ |
|
addFileButton: ICON_BUTTON_STYLE, |
|
addFileInput: { |
|
display: 'none', |
|
}, |
|
})); |
|
|
|
const Files = (): JSX.Element => { |
|
const classes = useStyles(); |
|
const addFileInputRef = useRef<HTMLInputElement>(); |
|
|
|
const { data, isLoading } = PeriodicFetch( |
|
`${process.env.NEXT_PUBLIC_API_URL?.replace('/cgi-bin', '/api')}/files`, |
|
); |
|
|
|
// Let the icon button trigger the invisible input element. |
|
const onAddFileButtonClick = () => { |
|
addFileInputRef.current?.click(); |
|
}; |
|
|
|
return ( |
|
<Panel> |
|
<Box style={{ display: 'flex', width: '100%' }}> |
|
<Box style={{ flexGrow: 1 }}> |
|
<HeaderText text="Files" /> |
|
</Box> |
|
<Box> |
|
<form encType="multipart/form-data"> |
|
<InputLabel htmlFor="add-file-input"> |
|
<Input |
|
className={classes.addFileInput} |
|
id="add-file-input" |
|
ref={addFileInputRef} |
|
type="file" |
|
/> |
|
<IconButton |
|
className={classes.addFileButton} |
|
onClick={onAddFileButtonClick} |
|
> |
|
<AddIcon /> |
|
</IconButton> |
|
</InputLabel> |
|
</form> |
|
</Box> |
|
</Box> |
|
{isLoading ? ( |
|
<Spinner /> |
|
) : ( |
|
<Box> |
|
<span>{data}</span> |
|
</Box> |
|
)} |
|
</Panel> |
|
); |
|
}; |
|
|
|
export default Files;
|
|
|