All files / components/Commons ManageCowsModal.js

100% Statements 20/20
100% Branches 8/8
100% Functions 4/4
100% Lines 20/20

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          3x 132x 5x 2x   5x     132x 7x 7x 2x     5x 2x     3x   5x 5x       132x 2x 2x     132x 114x     18x                                                                
import React from 'react';
import {Modal, Button, Form} from 'react-bootstrap'
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
 
const ManageCowsModal = ({number, setNumber, isOpen, onClose, message, userCommons, onBuy, onSell }) => {
    const handleInputChange = (e) => {
        if(e.target.value < 0){
          toast.warn(`Warning: You cannot ${message} a negative number of cows!`);
        }
        setNumber(e.target.value);
    };
 
    const handleSubmit = (e) => {
      e.preventDefault();
      if(number < 0){
        window.alert(`You cannot ${message} a negative number of cows! Please enter a non-negative number.`);
 
      } else {
      if (message.includes('buy')) {
          onBuy(userCommons, number)
      }
      else {
          onSell(userCommons, number)
      }
      setNumber(1);
      onClose(); // Close the modal
    }
    };
 
    const handleClose = () => {
      setNumber(1);
      onClose();
    }
 
    if (!isOpen) {
        return null;
    }
 
  return (
    <Modal data-testid={"buy-sell-cow-modal"} show={isOpen} onHide={handleClose}>
      <Modal.Body>
        <Form onSubmit={handleSubmit}>
        <Form.Group data-testid={"buy-sell-cow-modal-closeGroup"} style={{display: 'flex', justifyContent: 'right'}}>
            <Button data-testid={"buy-sell-cow-modal-close"} style={{color: '#000', borderColor: '#fff', backgroundColor: '#fff'}} type="button" className="close" aria-label="Close" onClick={handleClose}>
                <span aria-hidden="true">&times;</span>
            </Button>
        </Form.Group>
        <Form.Group>
            <Form.Label>Please specify the number of cows you'd like to {message} below.</Form.Label>
        </Form.Group>
          <Form.Group>
            <Form.Control
              data-testid={"buy-sell-cow-modal-input"}
              style={{width: '20%'}} 
              type="number" 
              value={number} 
              onChange={handleInputChange} 
              min="1" />
          </Form.Group>
        </Form>
      </Modal.Body>
      <Modal.Footer data-testid={"buy-sell-cow-modal-footer"} style={{borderTop: '0px'}}>
        <Button data-testid={"buy-sell-cow-modal-cancel"} variant="secondary" onClick={handleClose}>Cancel</Button>
        <Button data-testid={"buy-sell-cow-modal-submit"} variant="primary" onClick={handleSubmit}>{message}</Button>
      </Modal.Footer>
    </Modal>
  );
};
 
export default ManageCowsModal;