import React, { useState, useRef } from 'react'; import Button from '@material-ui/core/Button'; import Paper from '@material-ui/core/Paper'; import Tab from '@material-ui/core/Tab'; import Tabs from '@material-ui/core/Tabs'; import TextField from '@material-ui/core/TextField'; import { makeStyles, Theme } from '@material-ui/core/styles'; import Content from 'src/components/Content'; import { useAddCommentMutation } from './CommentForm.generated'; import { TimelineDocument } from './TimelineQuery.generated'; type StyleProps = { loading: boolean }; const useStyles = makeStyles((theme) => ({ container: { margin: theme.spacing(2, 0), padding: theme.spacing(0, 2, 2, 2), }, textarea: {}, tabContent: { margin: theme.spacing(2, 0), }, preview: { borderBottom: `solid 3px ${theme.palette.grey['200']}`, minHeight: '5rem', }, actions: { display: 'flex', justifyContent: 'flex-end', }, })); type TabPanelProps = { children: React.ReactNode; value: number; index: number; } & React.HTMLProps; function TabPanel({ children, value, index, ...props }: TabPanelProps) { return ( ); } const a11yProps = (index: number) => ({ id: `editor-tab-${index}`, 'aria-controls': `editor-tabpanel-${index}`, }); type Props = { bugId: string; }; function CommentForm({ bugId }: Props) { const [addComment, { loading }] = useAddCommentMutation(); const [input, setInput] = useState(''); const [tab, setTab] = useState(0); const classes = useStyles({ loading }); const form = useRef(null); const submit = () => { addComment({ variables: { input: { prefix: bugId, message: input, }, }, refetchQueries: [ // TODO: update the cache instead of refetching { query: TimelineDocument, variables: { id: bugId, first: 100, }, }, ], awaitRefetchQueries: true, }).then(() => setInput('')); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); submit(); }; const handleKeyDown = (e: React.KeyboardEvent) => { // Submit on cmd/ctrl+enter if ((e.metaKey || e.altKey) && e.keyCode === 13) { submit(); } }; return (
setTab(t)}>
setInput(e.target.value)} disabled={loading} />
); } export default CommentForm;