All files CommentBox.tsx

100% Statements 25/25
93.33% Branches 28/30
100% Functions 4/4
100% Lines 25/25

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 1321x 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;