import React, { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { Button, TextareaAutosize, Avatar, makeStyles, } from "@material-ui/core"; import { red } from "@material-ui/core/colors"; import urlJoin from "url-join"; import axios from "axios"; import { BACKEND_URL } from "../../config"; import { addComment } from "../../redux/actions/comments"; const api = axios.create({ withCredentials: true, baseURL: BACKEND_URL, }); const useStyles = makeStyles((theme) => ({ root: { display: "flex", paddingTop: theme.spacing(2), paddingBottom: theme.spacing(2), }, commentBtn: { backgroundColor: red[700], }, textArea: { flex: 1, marginLeft: theme.spacing(1), marginRight: theme.spacing(1), }, })); const CommentForm = ({ videoId, commentTo, handleReplyComment }) => { const [comment, setComment] = useState(""); const dispatch = useDispatch(); const isAuth = useSelector(({ channel }) => channel.isAuth); const userId = useSelector(({ channel }) => channel.id); const channelImg = useSelector(({ channel }) => channel.image); const classes = useStyles(); const handleChange = (e) => setComment(e.target.value); const handleSubmit = async (e) => { e.preventDefault(); if (isAuth) { const data = { videoId, content: comment, commentBy: userId, commentTo, }; setComment(""); try { const { data: { comment: newComment }, } = await api.post("/api/comments", data); handleReplyComment(); dispatch(addComment(newComment)); } catch (err) { console.log(err); } } else { window.location.assign(urlJoin(BACKEND_URL, "/api/auth/google")); } }; return ( <form className={classes.root}> <Avatar alt="Avatar" src={channelImg} /> <TextareaAutosize onChange={handleChange} value={comment} rowsMin={2} className={classes.textArea} placeholder="Add a public comment..." /> <Button disableElevation disableFocusRipple disableRipple variant="contained" color="secondary" className={classes.commentBtn} type="submit" onClick={handleSubmit} disabled={!comment} > Comment </Button> </form> ); }; export default CommentForm;