VolunteerRate

gistfile1.txt

import React, { useState, useEffect } from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import TextField from "@material-ui/core/TextField";
import CancelIcon from "@material-ui/icons/Cancel";

import VolunteerRateList from '../VolunteerRateList';
import CenterLoader from "../../../Loaders/centerLoader";

import API from "../../../../constants/Api";


const useStyles = makeStyles(theme => ({
  VolunteerRate: {},
  title: {
    fontFamily: "Montserrat",
    fontSize: "16px",
    fontWeight: 500,
    lineHeight: 1.19,
    letterSpacing: "0.21px",
    color: "#000000",
    paddingLeft: "47px",
    paddingTop: "41px",
    paddingBottom: 0
  },
  content: {
    padding: "22px 99px 46px 47px"
  },
  cadCurrency: {
    maxWidth: "217px",
    marginBottom: "40px",
    "& input": {
      fontFamily: "Montserrat",
      fontSize: "50px",
      fontWeight: 500,
      color: "#000"
    }
  },
  cadCurrencyLabel: {
    fontFamily: "Montserrat",
    fontSize: "50px",
    fontWeight: 500,
    lineHeight: 1.22,
    letterSpacing: "0.64px",
    textAlign: "left",
    color: "#db2828",
    margin: 0
  },
  usCurrency: {
    maxWidth: "217px",
    "& input": {
      fontFamily: "Montserrat",
      fontSize: "50px",
      fontWeight: 500,
      color: "#000"
    }
  },
  usCurrencyLabel: {
    fontFamily: "Montserrat",
    fontSize: "50px",
    fontWeight: 500,
    lineHeight: 1.22,
    letterSpacing: "0.64px",
    textAlign: "left",
    color: "#4b95e9",
    margin: 0
  },
  modalActions: {
    display: "flex",
    justifyContent: "flex-start",
    paddingLeft: "43px",
    paddingTop: "38px",
    paddingBottom: "48px",
    borderBottom: "1px solid #c1c1c1",
  },
  save: {
    width: "242px",
    height: "32px",
    borderRadius: "16px",
    backgroundColor: "#4bb181",
    fontFamily: "Montserrat",
    fontSize: "16px",
    fontWeight: 500,
    lineHeight: 1.23,
    letterSpacing: "0.21px",
    textAlign: "center",
    color: "#FFFFFF"
  },
  cancel: {
    position: "absolute",
    right: "10px",
    top: "10px",
    cursor: "pointer"
  }
}));

const VolunteerRate = ({ token, open, handleClose }) => {
  const classes = useStyles();
  const [cadRate, setCadRate] = useState('');
  const [usdRate, setUsdRate] = useState('');
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [volunteerRate, setVolunteerRate] = useState([]);

  let headers = {
    "Content-Type": "application/json",
    Authorization: `Bearer ${token}`,
  };

  const handleFormSubmit = () => {
    // CALL API TO ADD VOLUNTEER RATE
    setIsLoading(true);
    API.post(`/vome-admin/volunteering-rate/`, { cad_rate: cadRate, usd_rate: usdRate },{headers: headers})
      .then(resp => {
        setCadRate('')
        setUsdRate('');
        fetchVolunteerRate();
      })
      .catch(err => {
        setError(err);
        setIsLoading(false);
      });
  };
  const fetchVolunteerRate = () => {
    setIsLoading(true);
    API.get(`/vome-admin/volunteering-rate/`, {
      headers: headers
    })
      .then(resp => {
        setVolunteerRate(resp.data);
        setIsLoading(false);
      })
      .catch(err => {
        setError(err);
        setIsLoading(false);
      });
  }

  useEffect(() => {
    fetchVolunteerRate()
  }, []);

  
  return (
    <div className={classes.VolunteerRate}>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <CancelIcon onClick={handleClose} className={classes.cancel} />
        <DialogTitle id="alert-dialog-title" className={classes.title}>
          Volunteer rate
        </DialogTitle>
        <DialogContent className={classes.content}>
          {isLoading && <CenterLoader />}
          <form className={classes.root} noValidate autoComplete="off">
            <div className={classes.cadCurrency}>
              <TextField
                id="standard-basic"
                placeholder={cadRate || "00.00"}
                onChange={(e) => setCadRate(e.target.value)}
                type="number"
                value={cadRate}
              />
              <p className={classes.cadCurrencyLabel}>CAD</p>
            </div>
            <div className={classes.usCurrency}>
              <TextField
                id="standard-basic"
                placeholder={usdRate || "00.00"}
                onChange={(e) => setUsdRate(e.target.value)}
                type="number"
                value={usdRate}
              />
              <p className={classes.usCurrencyLabel}>USD</p>
            </div>
            <div className={classes.modalActions}>
              <Button
                disabled={!cadRate || !usdRate}
                onClick={() => handleFormSubmit()}
                className={classes.save}
              >
                Save
              </Button>
            </div>
          </form>
          {volunteerRate &&
            volunteerRate.map((rate) => (
              <VolunteerRateList key={rate.id} rate={rate} />
            ))}
        </DialogContent>
      </Dialog>
    </div>
  );
};


export default VolunteerRate;