All files / src/apps/organisations/components AddMemberForm.tsx

28.57% Statements 4/14
0% Branches 0/6
0% Functions 0/5
30.77% Lines 4/13

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                                                1x       1x       1x                                                                                                                                                           1x          
import React, { useRef, useEffect } from "react";
import {
  Button,
  ButtonGroup,
  DialogActions,
  DialogContent,
  DialogTitle,
  Typography
} from "@mui/material";
import { Field, Form, Formik, FormikProps, FormikValues } from "formik";
import * as Yup from "yup";
import { TextField } from "formik-mui";
import { OrgMember } from "../types";
import { AppState } from "../../../redux";
import { addOrgMemberLoadingSelector } from "../redux";
import { connect } from "react-redux";
interface Props {
  onSubmit?: Function;
  orgUrl: string;
  loading?: boolean;
  error?: {};
  handleClose: () => void;
}
 
const AddMemberSchema = Yup.object().shape<OrgMember>({
  username: Yup.string().required("Username is Required")
});
 
const initialValues: OrgMember = {
  username: ""
};
 
const AddMemberForm: React.FC<Props> = ({
  onSubmit,
  loading,
  error,
  handleClose
}) => {
  const formikRef = useRef<FormikProps<FormikValues & OrgMember>>(null);
 
  useEffect(() => {
    const { current: currentRef } = formikRef;
    if (currentRef) {
      currentRef.setSubmitting(!!loading);
    }
  }, [loading]);
 
  return (
    <>
      <DialogTitle>Add new member</DialogTitle>
      <Formik
        innerRef={formikRef}
        initialValues={initialValues}
        validationSchema={AddMemberSchema}
        validateOnChange={false}
        onSubmit={(values: OrgMember) => {
          if (onSubmit) {
            onSubmit(values);
          }
        }}
      >
        {({ isSubmitting }) => (
          <>
            <Form>
              <DialogContent>
                <Field
                  variant="standard"
                  fullWidth
                  autoComplete="off"
                  id="username"
                  name="username"
                  label="Username"
                  component={TextField}
                />
                <br />
                <br />
              </DialogContent>
              {!error ? (
                <br />
              ) : (
                <Typography
                  align="center"
                  color="error"
                  variant="caption"
                  component="div"
                >
                  {error}
                </Typography>
              )}
              <DialogActions>
                <ButtonGroup
                  fullWidth
                  color="primary"
                  variant="text"
                  size="medium"
                >
                  <Button onClick={handleClose}>Cancel</Button>
                  <Button type="submit" disabled={isSubmitting}>
                    Submit
                  </Button>
                </ButtonGroup>
              </DialogActions>
            </Form>
          </>
        )}
      </Formik>
    </>
  );
};
 
const mapStateToProps = (state: AppState) => ({
  loading: addOrgMemberLoadingSelector(state)
});
 
export default connect(mapStateToProps)(AddMemberForm);