import { useState, useEffect } from 'react' import { StringParam, useQueryParam } from 'use-query-params' import { makeStyles } from '@mui/styles' import { Dialog, DialogTitle, DialogContent } from '@mui/material' import { Create } from '@mui/icons-material' //locals import Media from './Media' import { API_ENDPOINT } from './constants' import { myfetchjson, getCaption, DixieFile } from './util' interface Comment { timestamp: number user?: string message: string date: string } const useStyles = makeStyles(() => ({ posts: { background: '#ddd', }, post: { padding: '0.5em', }, error: { color: 'red', }, })) function CommentForm({ filename, forceRefresh, }: { filename: string forceRefresh: Function }) { const [loading, setLoading] = useState(false) const [error, setError] = useState<unknown>() const [user, setUser] = useState('') const [message, setMessage] = useState('') const [password] = useQueryParam('password', StringParam) const classes = useStyles() return ( <div> {error ? ( <div className={classes.error}>{`${error}`}</div> ) : loading ? ( <p>Loading...</p> ) : ( <p>Write a comment...</p> )} <Create /> <label htmlFor="user">name (optional)</label> <input id="user" type="text" value={user} onChange={event => setUser(event.target.value)} /> <textarea style={{ width: '90%', height: 50 }} value={message} onChange={event => setMessage(event.target.value)} /> <button disabled={loading} onClick={async () => { try { if (user || message) { setLoading(true) setError(undefined) const data = new FormData() data.append('message', message) data.append('user', user) data.append('filename', filename) data.append('password', password || '') await myfetchjson(API_ENDPOINT + '/postDixieComment', { method: 'POST', body: data, }) setUser('') setMessage('') forceRefresh() } } catch (e) { setError(e) } finally { setLoading(false) } }} > Submit </button> </div> ) } export default function PictureDialog({ onClose, file, }: { onClose: Function file?: DixieFile }) { const [comments, setComments] = useState<Comment[]>() const [loading, setLoading] = useState(false) const [error, setError] = useState<unknown>() const [counter, setCounter] = useState(0) const [password] = useQueryParam('password', StringParam) const classes = useStyles() const handleClose = () => { setLoading(false) setError(undefined) onClose() } useEffect(() => { ;(async () => { try { if (file) { const result = await myfetchjson( API_ENDPOINT + `/getDixieComments?filename=${file?.filename}`, ) setComments(result) } } catch (e) { setError(e) } })() }, [file, counter]) return ( <Dialog onClose={handleClose} open={Boolean(file)} maxWidth="lg"> <DialogTitle>{file ? file.filename : ''}</DialogTitle> <DialogContent> {file ? ( <Media file={file} style={{ width: '80%', maxHeight: '70%' }}> {getCaption(file)} </Media> ) : null} {error ? ( <div className={classes.error}>{`${error}`}</div> ) : loading ? ( 'Loading...' ) : comments ? ( <div className={classes.posts}> {comments .sort((a, b) => a.timestamp - b.timestamp) .map(comment => { const { user, timestamp, message } = comment return ( <div key={JSON.stringify(comment)} className={classes.post} style={{ background: '#ddd' }} > <div> {user ? user + ' - ' : ''} {new Date(timestamp).toLocaleString()} </div> <div>{message}</div> </div> ) })} </div> ) : null} {file && password ? ( <CommentForm filename={file.filename} forceRefresh={() => setCounter(counter + 1)} /> ) : null} </DialogContent> </Dialog> ) }