Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 14x 14x 14x 14x 14x 14x 1x 1x 1x 1x 1x 1x 2x 2x 1x | import React, { useState, Fragment } from "react";
import TextField from "@material-ui/core/TextField";
import GifIcon from "@material-ui/icons/Gif";
import TextFieldsIcon from "@material-ui/icons/TextFields";
import OurButton from "./styled/MainButton";
import Grid from "@material-ui/core/Grid";
import GifSection from "./GifSection";
import AttachFileIcon from "@material-ui/icons/AttachFile";
import Dropbox from "./Dropbox/DropBox";
type CommentType = {
type: "gif-comment" | "post";
content?: string;
commentChange: (data: any) => void;
gifChange: any;
gifUrl: string;
apiKey: string;
onSubmit: (e: any) => void;
style?: object;
buttonStyle?: object;
haveAttachment: boolean;
files?: any;
setFiles?: (data: object) => void;
};
const CommentBox: React.FC<CommentType> = (props) => {
const [isGifSelected, setGifSelected] = useState<Boolean>(false);
const [isAttachSelected, setAttachSelected] = useState<Boolean>(false);
const { files, setFiles } = props;
const {
type,
content,
style,
haveAttachment,
onSubmit,
commentChange,
gifUrl,
gifChange,
apiKey,
} = props;
const disableIfNoFile = Object.entries(files).length === 0;
return (
<Fragment>
<form data-testid="comment-box" onSubmit={onSubmit}>
{(type === "gif-comment" && isGifSelected === true) ||
isAttachSelected === true ? (
<Fragment>
{isAttachSelected && <Dropbox files={files} setFiles={setFiles} />}
{isGifSelected && <GifSection apiKey={apiKey} select={gifChange} />}
</Fragment>
) : (
<Fragment>
<TextField
className="commentInput"
data-testid="comment_input"
type="text"
style={style}
id="outlined-multiline-static"
label="Write A Comment"
multiline={true}
size={"medium"}
name="comment_body"
value={content}
rows={content!.length > 35 ? 3 : 1}
error={content!.length > 200 ? true : false}
fullWidth={true}
margin="normal"
variant="outlined"
onChange={commentChange}
/>
</Fragment>
)}
<Fragment>
<Grid style={{ margin: "10px 0px" }} item={true} sm={2} lg={1}>
<GifIcon
data-testid="gif-icon"
onClick={() => {
setAttachSelected(false);
setGifSelected(true);
setFiles([]);
}}
style={{ cursor: "pointer", margin: "0px 0px" }}
/>
<TextFieldsIcon
data-testid="text-icon"
style={{ cursor: "pointer", margin: "0px 15px" }}
onClick={() => {
setAttachSelected(false);
setGifSelected(false);
setFiles([]);
}}
/>
{haveAttachment === true && (
<AttachFileIcon
data-testid="attach-icon"
onClick={() => {
setAttachSelected(true);
setGifSelected(false);
}}
style={{ cursor: "pointer", margin: "0px 0px" }}
/>
)}
</Grid>
{isAttachSelected === true && (
<OurButton disabled={disableIfNoFile ? true : false}>
Post Attachment
</OurButton>
)}
{isGifSelected === false && isAttachSelected === false && (
<OurButton
disabled={
content.length > 6 && content.length <= 200 ? false : true
}
>
Post A Comment
</OurButton>
)}
{isGifSelected === true && (
<Grid item={true} sm={2} lg={3}>
<OurButton disabled={gifUrl !== "" ? false : true}>
Post GIPHY
</OurButton>
</Grid>
)}
</Fragment>
</form>
</Fragment>
);
};
export default CommentBox;
|