import { useState } from 'react' import { useDispatch } from 'react-redux' import { Link as RouterLink } from 'react-router-dom' import PropTypes from 'prop-types' import { Button, Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Snackbar, Tooltip, Typography } from '@material-ui/core' import { makeStyles } from '@material-ui/core/styles' import DeleteIcon from '@material-ui/icons/Delete' import ShareIcon from '@material-ui/icons/Share' import MuiAlert from '@material-ui/lab/Alert' import { deleteSchematic } from '../../redux/dashboardSlice' import { getDate } from '../../utils/GalleryUtils' const useStyles = makeStyles((theme) => ({ media: { height: 0, paddingTop: '56.25%' // 16:9 }, rating: { marginTop: theme.spacing(1), marginLeft: 'auto' } })) function Alert (props) { return } // Schematic delete snackbar function SimpleSnackbar ({ open, close, sch }) { const dispatch = useDispatch() return ( } > {'Delete ' + sch.name + ' ?'} ) } SimpleSnackbar.propTypes = { open: PropTypes.bool, close: PropTypes.func, sch: PropTypes.object } // Display schematic updated status (e.g : updated 2 hours ago...) function timeSince (jsonDate) { const json = jsonDate const date = new Date(json) const seconds = Math.floor((new Date() - date) / 1000) let interval = Math.floor(seconds / 31536000) if (interval > 1) { return interval + ' years' } interval = Math.floor(seconds / 2592000) if (interval > 1) { return interval + ' months' } interval = Math.floor(seconds / 86400) if (interval > 1) { return interval + ' days' } interval = Math.floor(seconds / 3600) if (interval > 1) { return interval + ' hours' } interval = Math.floor(seconds / 60) if (interval > 1) { return interval + ' minutes' } return Math.floor(seconds) + ' seconds' } // Card displaying overview of onCloud saved schematic. export default function SchematicCard ({ sch }) { const classes = useStyles() // To handle delete schematic snackbar const [snacOpen, setSnacOpen] = useState(false) const handleSnacClick = () => { setSnacOpen(true) } const handleSnacClose = (event, reason) => { if (reason === 'clickaway') { return } setSnacOpen(false) } return ( <> {/* User saved Schematic Overview Card */} {sch.description} {/* Display updated status */} Updated {timeSince(sch.save_time)} ago... {/* Display delete option */} { handleSnacClick() }} /> {/* Display share status */} ) } SchematicCard.propTypes = { sch: PropTypes.object }