import {useUpdateImage} from "../api/useUpdateImage"; import {useDeleteImage} from "../api/useDeleteImage"; import {useEffect, useMemo, useState} from "react"; import {parseMetadata} from "../metadata/ImageMetadata"; import { Button, CircularProgress, Grid, LinearProgress, List, ListItem, ListItemIcon, ListItemText, TextField } from "@material-ui/core"; import {Delete, Event, Info, Save} from "@material-ui/icons"; import {File, Tag} from "mdi-material-ui"; import ImageMetadataView from "../components/ImageMetadataView"; import {useGetImage} from "../api/useGetImage"; import {useParams} from "react-router"; import {ErrorPortal} from "../components/ErrorContext"; import {ErrorAlert} from "../components/ErrorAlert"; export interface ImageDetailPageParams { imageId: string } export default function ImageDetailPage() { const {imageId} = useParams<ImageDetailPageParams>(); const {data: image, error: imageError, isLoading: imageLoading} = useGetImage(imageId); const {mutate: update, error: updateError, isLoading: updateLoading} = useUpdateImage(); const {mutate: remove, error: removeError, isLoading: removeLoading} = useDeleteImage(); const [title, setTitle] = useState<string>(image?.title || ""); const [description, setDescription] = useState<string>(image?.description || ""); useEffect(() => setTitle(image?.title || ""), [image?.title]); useEffect(() => setDescription(image?.description || ""), [image?.description]); const metadata = useMemo(() => parseMetadata(image?.metadata), [image]); if (image === undefined || metadata === undefined) { return ( <div>Error: 404</div> ); } return ( <div> {imageLoading && ( <LinearProgress/> )} <ErrorPortal> <ErrorAlert severity="error" error={imageError}/> <ErrorAlert severity="error" error={updateError}/> <ErrorAlert severity="error" error={removeError}/> </ErrorPortal> <Grid container> <Grid item xs={12} md={6}> <img src={image.url + "l"} alt={image.title} style={{width: "100%"}}/> <List dense> <ListItem dense> <ListItemIcon><Info/></ListItemIcon> <ListItemText primary="Id" secondary={image.id}/> </ListItem> <ListItem dense> <ListItemText inset primary="Owner" secondary={image.owner}/> </ListItem> <ListItem dense> <ListItemText inset primary="State" secondary={image.state}/> </ListItem> <ListItem dense> <ListItemIcon><Tag/></ListItemIcon> {/* TODO: Fix this ugly nesting */} <ListItemText primary="Title" secondary={<TextField fullWidth value={title} onChange={({target: {value}}) => setTitle(value)} />} /> </ListItem> <ListItem dense> {/* TODO: Fix this ugly nesting */} <ListItemText inset primary="Description" secondary={<TextField fullWidth value={description} onChange={({target: {value}}) => setDescription(value)} />} /> </ListItem> </List> <Button variant="contained" color="primary" disabled={updateLoading} startIcon={updateLoading ? <CircularProgress style={{color: "#fff"}} size="1em"/> : <Save/>} onClick={() => update({ ...image, title, description, })} >Save</Button> <Button variant="contained" color="secondary" disabled={removeLoading} startIcon={removeLoading ? <CircularProgress style={{color: "#fff"}} size="1em"/> : <Delete/>} onClick={() => remove(image)} >Delete</Button> </Grid> <Grid item xs={12} md={6}> <List dense> <ListItem dense> <ListItemIcon><File/></ListItemIcon> <ListItemText primary="Filename" secondary={image.original_name}/> </ListItem> <ListItem dense> <ListItemText inset primary="MIME Type" secondary={image.mime_type}/> </ListItem> <ListItem dense> <ListItemIcon><Event/></ListItemIcon> <ListItemText primary="Uploaded At" secondary={image.created_at}/> </ListItem> <ListItem dense> <ListItemText inset primary="Modified At" secondary={image.updated_at}/> </ListItem> <ImageMetadataView metadata={metadata}/> </List> </Grid> </Grid> </div> ) }