Code Sample of React

react_example.tsx

import React, { useEffect, useState } from "react";
import { TextFieldFormik } from "../../input/TextFieldFormik";
import { Formik } from "formik";
import * as yup from "yup";
import { SelectFormik } from "../../input/SelectFormik";
import { IFormValue } from "../Sidebar";
import { connect } from "react-redux";
import {
  addParticipant,
  editParticipant,
  removeParticipant,
} from "../../../actions/participant";
import { CheckBoxFormik } from "../../input/CheckBoxFromik";
import { IStoreState } from "../../../reducers";

interface IProps {
  removeParticipant(): void; //remove from local array
  addParticipant(payload: any): void;
  editParticipant(payload: any): void;
  removeParticipantStore(payload: any): void; //remove from redux store
  index: number;
  keys: string[];
}

const color_classes = {
  0: "bg-blue",
  1: "bg-skin",
  2: "bg-light_green",
  3: "bg-light_yellow",
};

const getBackgroud = (ind: number): string => {
  const index = ind % 4;
  return (color_classes as any)[index];
};

const schema = yup.object().shape({
  fullname: yup.string().required(),
  signing_order: yup.string().required(),
  email: yup.string().required(),
  text_number: yup.string().required(),
  notification_type: yup.string().required(),
  auth_code: yup.string(),
  force_signer: yup.boolean(),
  signer_as: yup.string().when("force_signer", {
    is: true,
    then: yup.string().required(),
  }),
  id_check: yup.string(),
  allow_delegation: yup.string(),
});

const Participant: React.FC<IProps> = (props) => {
  const [hideForm, setHideForm] = useState(false);
  const [showAdvanced, setShowAdvanced] = useState(false);
  const [key, setKey] = useState("");
  useEffect(() => {
    const _key = new Date().getTime() + "_" + Math.floor(Math.random() * 100);
    setKey(_key);
  }, []);
  const initialValues: IFormValue = {
    fullname: "",
    signing_order: "",
    email: "",
    text_number: "",
    notification_type: "",
    auth_code: "",
    force_signer: false,
    signer_as: "",
    id_check: "",
    allow_delegation: "",
  };
  const isAdded = props.keys.find((k) => k === key) ? true : false;

  const toggleForm = () => {
    setHideForm(!hideForm);
  };

  const toggleAdvancedOptions = () => {
    setShowAdvanced(!showAdvanced);
  };

  const handleRemove = () => {
    props.removeParticipant();
    if (isAdded) {
      props.removeParticipantStore({ index: key });
    }
  };
  const backgroundClass = getBackgroud(props.index);
  const classes = "participant_item " + backgroundClass;
  return (
    <div className={classes}>
      <p className="participant_username">
        <span
          title="toggle form"
          className="participant_username_heading"
          onClick={toggleForm}
        >
          User {props.index + 1}
        </span>
        <span onClick={handleRemove}>
          <i className="participant_delete_icon fa-solid fa-trash-can"></i>
        </span>
      </p>

      <div style={hideForm ? { display: "none" } : undefined}>
        <Formik
          initialValues={initialValues}
          validationSchema={schema}
          onSubmit={(values: IFormValue) => {
            isAdded
              ? props.editParticipant({ index: key, value: values })
              : props.addParticipant({ index: key, value: values });
            toggleForm();
          }}
        >
          {({
            values,
            errors,
            touched,
            handleChange,
            handleBlur,
            handleSubmit,
            setFieldTouched,
            setFieldValue,
            //  isSubmitting,
            /* and other goodies */
          }) => {
            return (
              <form onSubmit={handleSubmit}>
                <div className="row mt-2">
                  <div className="col-7 pe-0">
                    <TextFieldFormik
                      warpperClassName="form-floating form_input_text h-100"
                      className="form-control participant_input"
                      name="fullname"
                      id="fullname"
                      placeholder="Full Name"
                      labelClassName="participant_input_label"
                      label="Full Name"
                      handleChange={handleChange}
                      handleBlur={handleBlur}
                      values={values}
                      touched={touched}
                      errors={errors}
                    />
                  </div>
                  <div className="col-5">
                    <SelectFormik
                      warpperClassName="form-floating"
                      className="form-select"
                      name="signing_order"
                      id="signing_order"
                      options={[
                      
                      ]}
                      labelClassName="participant_input_label"
                      label="Signing Order"
                      handleChange={handleChange}
                      handleBlur={handleBlur}
                      values={values}
                      touched={touched}
                      errors={errors}
                    />
                  </div>
                </div>

                <div className="row mt-2">
                  <div className="col">
                    <TextFieldFormik
                      warpperClassName="form-floating form_input_text"
                      className="form-control participant_input"
                      name="email"
                      id="email"
                      type="email"
                      placeholder="Email"
                      labelClassName="participant_input_label"
                      label="Email"
                      handleChange={handleChange}
                      handleBlur={handleBlur}
                      values={values}
                      touched={touched}
                      errors={errors}
                    />
                  </div>
                </div>
                <div className="row mt-2">
                  <div className="col">
                    <TextFieldFormik
                      warpperClassName="form-floating form_input_text"
                      className="form-control participant_input"
                      name="text_number"
                      id="text_number"
                      type="number"
                      placeholder="Text Number"
                      labelClassName="participant_input_label"
                      label="Text Number"
                      handleChange={handleChange}
                      handleBlur={handleBlur}
                      values={values}
                      touched={touched}
                      errors={errors}
                    />
                  </div>
                </div>
                <div className="row mt-2">
                  <div className="col">
                    <SelectFormik
                      warpperClassName="form-floating"
                      className="form-select"
                      name="notification_type"
                      id="notification_type"
                      options={[
                      
                      ]}
                      labelClassName="participant_input_label"
                      label="Notification Type"
                      handleChange={handleChange}
                      handleBlur={handleBlur}
                      values={values}
                      touched={touched}
                      errors={errors}
                    />
                  </div>
                </div>

                <div
                  className="d-flex align-items-center cursor_pointer mt-2 advanced_feature_container"
                  onClick={toggleAdvancedOptions}
                >
                  <span style={showAdvanced ? { display: "none" } : undefined}>
                    <i className="fa-solid fa-caret-down"></i>
                  </span>
                  <span style={!showAdvanced ? { display: "none" } : undefined}>
                    <i className="fa-solid fa-caret-up"></i>
                  </span>

                  <p>Advanced Feature</p>
                </div>
                <div style={!showAdvanced ? { display: "none" } : undefined}>
                  <div className="row mt-2">
                    <div className="col-7">
                      <TextFieldFormik
                        warpperClassName="form-floating form_input_text"
                        className="form-control participant_input"
                        name="auth_code"
                        id="auth_code"
                        type="number"
                        placeholder="Auth Code"
                        labelClassName="participant_input_label"
                        label="Auth Code"
                        handleChange={handleChange}
                        handleBlur={handleBlur}
                        values={values}
                        touched={touched}
                        errors={errors}
                      />
                    </div>
                    <div className="col-3 text-center text-white form_icon">
                      <i className="fa-thin fa-message-lines" />
                    </div>
                    <div className="col-2 text-white form_icon">
                      <i className="fa-solid fa-dollar-sign"></i>
                    </div>
                  </div>
                  <div className="custom_row mt-2">
                    <div>
                      <CheckBoxFormik
                        warpperClassName="form-check form-custom-checkbox"
                        className="form-check-input"
                        name="force_signer"
                        disabled={false}
                        setFieldTouched={setFieldTouched}
                        setFieldValue={setFieldValue}
                        values={values}
                      />
                    </div>
                    <div>
                      <TextFieldFormik
                        warpperClassName="form-floating form_input_text"
                        className="form-control participant_input"
                        name="signer_as"
                        id="signer_as"
                        placeholder="Force Signer to Sign As"
                        labelClassName="participant_input_label"
                        label="Force Signer to Sign As"
                        handleChange={handleChange}
                        handleBlur={handleBlur}
                        values={values}
                        touched={touched}
                        errors={errors}
                      />
                    </div>
                  </div>
                  <div className="row mt-2">
                    <div className="col-6">
                      <SelectFormik
                        warpperClassName="form-floating"
                        className="form-select"
                        name="id_check"
                        id="id_check"
                        options={[
                        
                        ]}
                        labelClassName="participant_input_label"
                        label="ID Check"
                        handleChange={handleChange}
                        handleBlur={handleBlur}
                        values={values}
                        touched={touched}
                        errors={errors}
                      />
                    </div>
                    <div className="col-6">
                      <SelectFormik
                        warpperClassName="form-floating"
                        className="form-select"
                        name="allow_delegation"
                        id="allow_delegation"
                        options={[
                       
                        ]}
                        labelClassName="participant_input_label"
                        label="Allow Delegation"
                        handleChange={handleChange}
                        handleBlur={handleBlur}
                        values={values}
                        touched={touched}
                        errors={errors}
                      />
                    </div>
                  </div>
                </div>

                <div className="row mt-2 text-center">
                  <div className="col">
                    <button
                      type="submit"
                      id="LoginBtn"
                      className={`btn btn-success w-100 ${backgroundClass}`}
                    >
                      {isAdded ? "Update" : "Save"}
                    </button>
                  </div>
                </div>
              </form>
            );
          }}
        </Formik>
      </div>
    </div>
  );
};

const mapStateToProps = (store: IStoreState) => {
  const { participant } = store;
  const { participant: allParticipants } = participant;
  const keys = Object.keys(allParticipants);
  return { keys };
};
export default connect(mapStateToProps, {
  addParticipant,
  editParticipant,
  removeParticipantStore: removeParticipant,
})(Participant);