react-icons/fa#FaPlus JavaScript Examples

CostsTable = ({ form, append, collection, emptyValue, fields }) => {
	return (
		<>
			<Summary form={form} collection={collection} fields={fields} />
			<CircularButton
				right
				size="medium"
				variant="info"
				color="white"
				name={`${collection}_add_button`}
				onClick={(event) => {
					event.preventDefault();
					append(emptyValue);
				}}
			>
				<FaPlus />
			</CircularButton>
		</>
	);
}

Presentation = props => {
  return (
    <Container fluid>
      <Row className="my-1">
        <Col>
          <h1>Categorías</h1>
        </Col>
      </Row>
      <Row className="my-1">
        <Col>
          <Button
            className="product__button"
            color="primary"
            aria-label="Agregar"
            onClick={() => props.push(props.urls.create)}
          >
            <FaPlus className="product__button-icon" />
            AGREGAR
          </Button>
        </Col>
      </Row>
      <Row className="my-3">
        <Col>
          <ReactTable
            {...props}
            data={props.data}
            pages={props.pages}
            loading={props.dataLoading}
            columns={columns}
            defaultPageSize={props.defaultPageSize}
            className="-striped -highlight"
          />
        </Col>
      </Row>
    </Container>
  );
}

CounterButton = ({ type }) => {
  const { currentValue, min, max, disabled, ref, onClickHandler } = useContext(CounterContext);

  const compareLimit = type === 'increase' ? max : min;

  return (
    <Elem
      tag="a"
      href="#"
      name="btn"
      mod={{
        type,
        disabled: currentValue === compareLimit || disabled,
      }}
      onClick={onClickHandler(type, ref)}
      onMouseDownCapture={e => e.preventDefault()}
    >
      <Oneof value={type}>
        <FaMinus case="decrease"/>
        <FaPlus case="increase"/>
      </Oneof>
    </Elem>
  );
}

GridWidthButton = injector(({ view, gridWidth, size }) => {
  const [width, setWidth] = useState(gridWidth);

  const setGridWidth = useCallback(
    (width) => {
      const newWidth = Math.max(3, Math.min(width, 10));

      setWidth(newWidth);
      view.setGridWidth(newWidth);
    },
    [view],
  );

  return view.type === "grid" ? (
    <Space style={{ fontSize: 12 }}>
      Columns: {width}
      <Button.Group>
        <Button
          size={size}
          icon={<Icon icon={FaMinus} size="12" color="#595959" />}
          onClick={() => setGridWidth(width - 1)}
          disabled={width === 3}
        />
        <Button
          size={size}
          icon={<Icon icon={FaPlus} size="12" color="#595959" />}
          onClick={() => setGridWidth(width + 1)}
          disabled={width === 10}
        />
      </Button.Group>
    </Space>
  ) : null;
})

Presentation = props => {
  return (
    <Container fluid>
      <Row className="my-1">
        <Col>
          <h1>Tiendas</h1>
        </Col>
      </Row>
      <Row>
        <Col>
          <Search
            handleFilter={props.onFilterChange}
            submitFilter={props.onFilterSubmit}
            clearFilter={props.clearFilter}
            filters={props.filters}
          />
        </Col>
      </Row>
      <Row className="my-1">
        <Col>
          <Button
            className="store__button"
            color="primary"
            onClick={() => props.push(props.urls.create)}
          >
            <FaPlus className="store__button-icon" />
            Agregar
          </Button>
        </Col>
      </Row>
      <Row className="my-3">
        <Col>
          <ReactTable
            {...props}
            className="-striped -highlight"
            data={props.data}
            loading={props.dataLoading}
            columns={columns}
            defaultPageSize={props.defaultPageSize}
          />
        </Col>
      </Row>
    </Container>
  );
}

Presentation = props => {
  return (
    <Container fluid>
      <Row className="my-1">
        <Col>
          <h1>Tipos de Producto</h1>
        </Col>
      </Row>
      <Row>
        <Col>
          <Search
            handleFilter={props.handleFilter}
            submitFilter={props.submitFilter}
            clearFilter={props.clearFilter}
            filters={props.filters}
          />
        </Col>
      </Row>
      <Row className="my-1">
        <Col>
          <Button
            className="producttype__button"
            color="primary"
            aria-label="Agregar"
            onClick={() => props.push(props.urls.create)}
          >
            <FaPlus className="producttype__button-icon" />
            AGREGAR
          </Button>
        </Col>
      </Row>
      <Row className="my-3">
        <Col>
          <ReactTable
            {...props}
            data={props.data}
            loading={props.dataLoading}
            columns={columns}
            defaultPageSize={props.defaultPageSize}
            className="-striped -highlight"
          />
        </Col>
      </Row>
    </Container>
  );
}

render() {
    return (
      <div style={styles.homeContainer}>
        {this.state.showNewSongWindow && (
          <NewSongWindow
            hide={() => {
              this.setState({ showNewSongWindow: false });
            }}
            onCreate={() => {
              this.props.history.push("/tabcreator");
            }}
          />
        )}
        <div style={styles.body}>
          {/* SONG LIST */}
          <div style={styles.songList}>
            <h1>Your Songs</h1>
            <div style={styles.linebreak} />
            <div style={{ display: "flex", flexDirection: "row" }}>
              {/* NEW SONG BUTTON */}
              <div
                style={styles.newSongButton}
                onClick={() => {
                  this.setState({ showNewSongWindow: true });
                }}
              >
                <FaPlus size={70} color="black" />
              </div>
              {this.state.yourSongs.map((songTitle) => (
                <SongItem
                  title={songTitle}
                  onClick={() => {
                    this.openSong(songTitle);
                  }}
                  onDeleteClicked={() => {
                    this.deleteSong(songTitle);
                  }}
                />
              ))}
            </div>
            <h1>Example Songs</h1>
            <div style={styles.linebreak} />
            <div style={{ display: "flex", flexDirection: "row" }}>
              {exampleSongs.map((song) => (
                <SongItem
                  title={song.songTitle}
                  onClick={() => {
                    this.props.openSong(song);
                    this.props.history.push("/tabcreator");
                  }}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

render() {
    return (
      <div style={styles.mainContainer}>
        <div style={styles.actionContainer}>
          <FaPlus
            onClick={() => {
              this.props.addRow(this.props.noteBarNoteIndex);
            }}
          />
        </div>
        <div style={styles.actionContainer}>
          <FaMinus
            onClick={() => {
              this.props.removeRow(this.props.noteBarNoteIndex);
            }}
          />
        </div>
        <div style={styles.actionContainer}>
          <FaPaste
            onClick={() => {
              this.props.pasteSelection(this.props.noteBarNoteIndex);
              this.props.hideNoteBar();
            }}
          />
        </div>
        <div style={styles.actionContainer}>
          <FaStopwatch
            onClick={() => {
              this.props.noteTempoChange();
              this.props.hideNoteBar();
            }}
          />
        </div>
        <div style={styles.actionContainer}>
          <FaPlay
            onClick={() => {
              this.props.playFromNote(this.props.noteBarNoteIndex);
              this.props.hideNoteBar();
            }}
            color="blue"
          />
        </div>
        <div style={styles.actionContainer}>
          <FaTimes
            onClick={() => {
              this.props.hideNoteBar();
            }}
          />
        </div>
      </div>
    );
  }

render() {
    return (
      <div style={styles.container}>
        <div style={styles.tineContainer}>
          <div style={{ marginRight: 3 }}>
            <input
              onChange={(e) => {
                this.setState({ newNoteLeft: e.target.value });
              }}
              value={this.state.newNoteLeft}
              style={{ width: 40, height: 40 }}
            />
            <div
              onClick={() => {
                this.props.addNote(this.state.newNoteLeft, true);
              }}
            >
              <FaPlus style={{ cursor: "pointer" }} />
            </div>
          </div>
          {this.props.notes.map((note, index) => (
            <div
              style={{
                ...styles.tine,
                flex: this.props.notes.length,
                height:
                  150 +
                  Math.ceil(this.props.notes.length / 2) -
                  1 -
                  Math.abs(Math.ceil(this.props.notes.length / 2) - 1 - index) *
                    10,
              }}
            >
              <div style={{ flex: 1 }}>
                <FaTimes
                  style={{ cursor: "pointer" }}
                  onClick={() => {
                    this.props.removeNote(note);
                  }}
                  color="black"
                />
              </div>
              <div style={{ height: 10, marginBottom: 20 }}>{note}</div>
            </div>
          ))}
          <div style={{ marginLeft: 3 }}>
            <input
              onChange={(e) => {
                this.setState({ newNoteRight: e.target.value });
              }}
              value={this.state.newNoteRight}
              style={{ width: 40, height: 40 }}
            />
            <div
              onClick={() => {
                this.props.addNote(this.state.newNoteRight, false);
              }}
            >
              <FaPlus style={{ cursor: "pointer" }} />
            </div>
          </div>
        </div>
      </div>
    );
  }

Presentation = (props) => {
  return (
    <Container fluid>
      <Row className="my-1">
        <Col>
          <h1>Tipo Producto</h1>
        </Col>
      </Row>
      <Row>
        <Col>
          <Search
            handleFilter={props.handleFilter}
            submitFilter={props.submitFilter}
            clearFilter={props.clearFilter}
            filters={props.filters}
          />
        </Col>
      </Row>
      <Row className="my-1">
        <Col>
          <Button
            className="provider__button"
            color="primary"
            aria-label="Agregar"
            onClick={() => props.push(props.urls.create)}
          >
            <FaPlus className="provider__button-icon" />
            AGREGAR
          </Button>
        </Col>
      </Row>
      <Row className="my-3">
        <Col>
          <ReactTable
            {...props}
            data={props.data}
            loading={props.dataLoading}
            columns={columns}
            defaultPageSize={props.defaultPageSize}
            className="-striped -highlight"
          />
        </Col>
      </Row>
    </Container>
  );
}

Presentation = props => {
  return (
    <Container fluid>
      <Row className="my-1">
        <Col>
          <h1>Productos</h1>
        </Col>
      </Row>
      <Row>
        <Col>
          <Search
            handleFilter={props.handleFilter}
            submitFilter={props.submitFilter}
            clearFilter={props.clearFilter}
            filters={props.filters}
          />
        </Col>
      </Row>
      <Row className="my-1">
        <Col>
          <Button
            className="product__button"
            color="primary"
            aria-label="Agregar"
            onClick={() => props.push(props.urls.create)}
          >
            <FaPlus className="product__button-icon" />
            AGREGAR
          </Button>
        </Col>
      </Row>
      <Row className="my-3">
        <Col>
          <ReactTable
            {...props}
            data={props.data}
            pages={props.pages}
            loading={props.dataLoading}
            columns={columns}
            defaultPageSize={props.defaultPageSize}
            className="-striped -highlight"
          />
        </Col>
      </Row>
    </Container>
  );
}

render() {
    const fetchRooms = () => {
      // If there are rooms render roomslist if not... show a message
      if (
        typeof this.state.rooms === "object" &&
        Object.keys(this.state.rooms.data).length > 0
      ) {
        return (
          <RoomsList
            rooms={this.state.rooms}
            isLoggedIn={this.props.isLoggedIn}
            email={this.props.email}
            username={this.props.username}
            img={this.props.img}
            users={this.props.users}
            onUpdate={this.getRooms}
          />
        );
      } else {
        return (
          <p className="text-center">No rooms available, please create one!</p>
        );
      }
    };
    return (
      <section>
        <Container>
          <div className="chatRooms">
            <h1 className="display-4">Chat Rooms</h1>
            <p className="lead">
              Here you can Join or Create a Room. Just setup the language and
              the limit of participants you want to allow in you conversation.
              Rembember not to share banned content{" "}
              <a href="#Sdsd">more details</a>
            </p>
            <Button variant="primary" onClick={this.createRoom}>
              Create a Room <FaPlus />
            </Button>
            <CreateRoomModal
              show={this.state.showCreateRoomModal}
              handleClose={this.createRoom}
              email={this.props.email}
              username={this.props.username}
              img={this.props.img}
              onUpdate={this.getRooms}
            />
          </div>
          {fetchRooms()}
        </Container>
      </section>
    );
  }

Filters = injector(({ views, currentView, filters }) => {
  const { sidebarEnabled } = views;

  const fields = React.useMemo(
    () =>
      currentView.availableFilters.reduce((res, filter) => {
        const target = filter.field.target;
        const groupTitle = target
          .split("_")
          .map((s) =>
            s
              .split("")
              .map((c, i) => (i === 0 ? c.toUpperCase() : c))
              .join(""),
          )
          .join(" ");

        const group = res[target] ?? {
          id: target,
          title: groupTitle,
          options: [],
        };

        group.options.push({
          value: filter.id,
          title: filter.field.title,
          original: filter,
        });

        return { ...res, [target]: group };
      }, {}),
    [currentView.availableFilters],
  );

  return (
    <Block name="filters" mod={{ sidebar: sidebarEnabled }}>
      <Elem name="list" mod={{ withFilters: !!filters.length }}>
        {filters.length ? (
          filters.map((filter, i) => (
            <FilterLine
              index={i}
              filter={filter}
              view={currentView}
              sidebar={sidebarEnabled}
              value={filter.currentValue}
              key={`${filter.filter.id}-${i}`}
              availableFilters={Object.values(fields)}
              dropdownClassName={cn("filters").elem("selector")}
            />
          ))
        ) : (
          <Elem name="empty">No filters applied</Elem>
        )}
      </Elem>
      <Elem name="actions">
        <Button
          type="primary"
          size="small"
          onClick={() => currentView.createFilter()}
          icon={<FaPlus />}
        >
          Add {filters.length ? "Another Filter" : "Filter"}
        </Button>

        {!sidebarEnabled ? (
          <Tooltip title="Pin to sidebar">
            <Button
              type="link"
              size="small"
              about="Pin to sidebar"
              onClick={() => views.expandFilters()}
              style={{ display: "inline-flex", alignItems: "center" }}
              icon={<Icon icon={FaCaretSquareRight} size={18} />}
            />
          </Tooltip>
        ) : null}
      </Elem>
    </Block>
  );
})

// import usePodia from './usePodia'

export default function Bundle() {
  // usePodia()

  return (
    <div className="bg-green-50 text-green-800 px-6 py-32">
      <div className="container mx-auto">
        {/* header */}
        <h2 className="russo text-2xl lg:text-4xl mb-10 text-center">
          Purchase Multiple Courses and Save
        </h2>

        <div className="grid lg:grid-cols-11 gap-4 text-lg text-gray-600 leading-none relative z-10 text-center bg-green-300 p-8 rounded-lg">
          {/* part 1 */}
          <div className="col-span-3 bg-blue-100 rounded-lg">
            <img
              src="https://scotch-res.cloudinary.com/image/upload/q_auto/v1594571945/d2e337a4f6900f8d0798c596eb0607a8e0c2fbddb6a7ab7afcd60009c119d4c7_evfnlk.png"
              alt="10 React Apps"
              className="rounded-t-lg"
            />
            <h2 className="arial text-blue-600 text-xl p-4">
              10 React Apps
              <span className="ml-2">$47</span>
            </h2>
          </div>

          {/* + */}
          <div className="col-span-3 lg:col-span-1 flex items-center justify-center">
            <FaPlus />
          </div>

          {/* part 2 */}
          <div className="col-span-3 bg-purple-100 rounded-lg">
            <img
              src="https://scotch-res.cloudinary.com/image/upload/q_auto/v1594571945/d2e337a4f6900f8d0798c596eb0607a8e0c2fbddb6a7ab7afcd60009c119d4c7_1_nq11gx.png"
              alt="10 React Apps Part 2"
              className="rounded-t-lg"
            />
            <h2 className="arial text-purple-600 text-xl p-4">
              10 React Apps <span className="ml-2 font-bold">Part 2</span>{' '}
              <span className="ml-2">$47</span>
            </h2>
          </div>

          {/* = */}
          <div className="col-span-3 lg:col-span-1 flex items-center justify-center">
            <FaEquals />
          </div>

          {/* bundle */}
          <a
            href="https://learn.better.dev/make-react-apps-bundle-a-and-b/buy"
            className="col-span-3 flex flex-col items-center justify-center h-full text-3xl lg:text-4xl border-2 border-yellow-300 bg-yellow-300 text-yellow-800 rounded-lg px-6 py-6 cursor-pointer hover:bg-yellow-200 w-full transition-colors duration-150"
          >
            <strong className="block text-lg mb-3 text-yellow-700">
              Buy the Bundle
            </strong>
            <span>
              <strong className="line-through opacity-25 mr-2">$99</strong>
              <span className="text-blue-900">$79</span>
            </span>
          </a>
        </div>
      </div>
    </div>
  )
}

render() {
    var center = [this.state.lat, this.state.lng];

    const basemapsDict = {
      dark: "	https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png",
      osm: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      hot: "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",

    }

    return (
      <Map zoom={this.state.zoom} center={center}>
        <div className="leaflet-bottom leaflet-right buttons-container">
          <Container>
            <Fab
              color="primary"
              aria-label="edit"
              tooltip="Add a new story!"
              onClick={this.showModal}>
              <FaPlus />
            </Fab>
          </Container>
        </div>
        {
          <Modal position={[this.state.lat, this.state.lng]} show={this.state.showModal} onHide={this.closeModal.bind(this)}>

            <form onSubmit={this.handleSubmit}>
              <h3> Add your Story. </h3>
              <label>
                <br />
                      Title:
                      <br />
                <input name="storyTitle" type="text" defaultValue={this.state.storyTitle} onChange={this.handleChange} />
                <br />
              </label>
              <label>
                <br />
                      Body:<br />
                <textarea name="storyBody" defaultValue={this.state.storyBody} onChange={this.handleChange} />
                <br />
              </label>
              <label>
                <br />
                      Add a photo: (optional) <br />
                <input type="file" style={{ marginRight: "-95px" }} ref={this.fileInput} />

                <br />
              </label>
              <br />
              <br />
              <input type="submit" value="Submit" />
            </form>
          </Modal>}


        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url={basemapsDict[this.state.basemap]}
        />
        <Basemap basemap={this.state.basemap} onChange={this.onBMChange} />


        <GeojsonLayer lat={center[0]} lng={center[1]} maxDist={5000} cluster={true} />

        <GeoWikipediaLayer lat={center[0]} lng={center[1]} maxDist={5000} cluster={true} />



        <Marker position={center} icon={MyLocationIcon}>
          <Popup>
            <div>Your Location - latitude: {Number(this.state.lat).toFixed(4)} - longitude: {Number(this.state.lng).toFixed(4)}</div>
          </Popup>
        </Marker>
      </Map>
    );
  }

function Cards(props) {
    console.log(props.certification)
    return (
                <>
                   <div className="card2 magin-top" >
                        <div className="card-body profile_width pop">
                          <div ><img src={props.image} className="profile_img"></img></div>
                          <div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
                            <div className="details"><p className=" card-body card-text  fsize"><strong>Email : <br/> </strong> {props.email}</p>
                            <p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
                            <p className="card-body card-text  fsize"><strong>College : </strong> <br/>{props.college}</p>
                            <p className="card-body card-text  fsize"><strong>Description : </strong> <br/> {props.description}</p>
                            <p className="card-body card-text  fsize"><strong>Education : </strong><br/>
                            {props.education.map((user,i) => {
                            return (<>
                            <div className="card2" key={i}>
                                <strong>Course: </strong>{props.education[i].course}<br/>
                                <strong>Institute: </strong>{props.education[i].institute}<br/>
                                <strong>Marks: </strong>{props.education[i].marks}<br/>
                            </div>
                            <br/>
                                </>
                            );
                            })}
                           <p ><a href="\addedu"><FaPlus></FaPlus></a>   <a href="/deledu"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
                            </p>
                            <p className="card-body card-text  fsize"><strong>Work experience :</strong> <br/>
                            {props.work.map((user,i) => {
                            return (<>
                                <div className="card2" key={i}>
                                <strong>Job Title: </strong>{props.work[i].names}<br/>
                                <strong>Company: </strong>{props.work[i].companys}<br/>
                                <strong>Duration:</strong>{props.work[i].duration}<br/>
                                <strong>Description: </strong>{props.work[i].description}<br/>
                                <strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
                                </div>
                                <br/>
                                </>      
                            );
                            })}
                            <p ><a href="\addexp"><FaPlus></FaPlus></a>   <a href="\delexp"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
                            </p>           
                            <p className="card-body card-text  fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
                            return (<>
                                <div className="card2" key={i}>
                                <strong>Course: </strong>{props.certification[i].courses}<br/>
                                <strong>Institutes: </strong>{props.certification[i].institutes}<br/>
                                <strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
                                <strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
                                </div>
                                <br/>
                                </>
                            );
                            })}
                            <p ><a href="\addcer"><FaPlus></FaPlus></a>   <a href="\delcer"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
                            </p>
                            <p className="card-text  fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a>  <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
                            </div>
                            </div> 
                        </div>
                    </div>
                    </>
    )
                    }

Presentation = props => {
  return (
    <Container fluid>
      <Row className="my-1">
        <Col>
          <h1>Proveedores</h1>
        </Col>
      </Row>
      <Row>
        <Col>
          <Search
            handleFilter={props.handleFilter}
            submitFilter={props.submitFilter}
            clearFilter={props.clearFilter}
            filters={props.filters}
          />
        </Col>
      </Row>
      <Row className="my-1">
        <Col>
          <Button
            className="provider__button"
            color="primary"
            aria-label="Agregar"
            onClick={() => props.push(props.urls.create)}
          >
            <FaPlus className="provider__button-icon" />
            AGREGAR
          </Button>
        </Col>
      </Row>
      <Row className="my-3">
        <Col>
          <ReactTable
            {...props}
            data={props.data}
            loading={props.dataLoading}
            columns={columns}
            defaultPageSize={props.defaultPageSize}
            className="-striped -highlight"
          />
        </Col>
      </Row>
    </Container>
  );
}

export function MainMenu({
  mainMenuIsOpen,
  usersMenuIsOpen,
  ChannelsModalIsOpen,
  joinMenuIsOpen,
  localeMenuIsOpen,
  onOpenMainMenu,
  onCloseMainMenu,
  onOpenUsersModal,
  onCloseUsersModal,
  onOpenChannelsModal,
  onCloseChannelsModal,
  onOpenJoinMenu,
  onCloseJoinMenu,
  onOpenLocaleMenu,
  onCloseLocaleMenu,
  history,
  intl,
}) {
  useInjectReducer({ key: 'mainMenu', reducer });

  const usersBtnToolTip = intl.formatMessage(messages.usersBtnToolTip);
  const channelsBtnToolTip = intl.formatMessage(messages.channelsBtnToolTip);
  const joinBtnToolTip = intl.formatMessage(messages.joinBtnToolTip);
  const languageBtnToolTip = intl.formatMessage(messages.languageBtnToolTip);

  const mainIcon = mainMenuIsOpen ? <MdClose /> : <MdMenu />;
  const menuBtnText = intl.formatMessage(messages.menuBtnToolTip);
  const settingsBtnText = intl.formatMessage(messages.settingsBtnToolTip);

  return (
    <div>
      <Collapse className="fixed-bottom" isOpen={mainMenuIsOpen}>
        <Container fluid>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  if (ChannelsModalIsOpen) {
                    onCloseUsersModal();
                  } else {
                    onOpenUsersModal();
                  }
                }}
                toolTip={usersBtnToolTip}
              >
                <MdPeople />
              </MenuButton>
              <UsersModal open={usersMenuIsOpen} />
            </Col>
          </Row>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  if (ChannelsModalIsOpen) {
                    onCloseChannelsModal();
                  } else {
                    onOpenChannelsModal();
                  }
                }}
                toolTip={channelsBtnToolTip}
              >
                <MdForum />
              </MenuButton>
              <ChannelsModal open={ChannelsModalIsOpen} />
            </Col>
          </Row>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  if (joinMenuIsOpen) {
                    onCloseJoinMenu();
                  } else {
                    onOpenJoinMenu();
                  }
                }}
                toolTip={joinBtnToolTip}
              >
                <FaPlus />
              </MenuButton>
              <JoinModal open={joinMenuIsOpen} />
            </Col>
          </Row>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  if (localeMenuIsOpen) {
                    onCloseLocaleMenu();
                  } else {
                    onOpenLocaleMenu();
                  }
                }}
                toolTip={languageBtnToolTip}
              >
                <MdLanguage />
              </MenuButton>
              <LocaleModal open={localeMenuIsOpen} />
            </Col>
          </Row>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  history.push('/settings');
                }}
                toolTip={settingsBtnText}
              >
                <MdSettings />
              </MenuButton>
            </Col>
          </Row>
          <Row>
            <Col>
              <Spacer />
            </Col>
          </Row>
        </Container>
      </Collapse>

      <MenuButton
        isMain
        className="fixed-bottom"
        onClick={() => {
          if (mainMenuIsOpen) {
            onCloseMainMenu();
          } else {
            onOpenMainMenu();
          }
        }}
        toolTip={menuBtnText}
      >
        {mainIcon}
      </MenuButton>
    </div>
  );
}

Navbar = (props) => {
  const [searchText, setSearchText] = useState("");
  const [open, setOpen] = useState(false);
  const [openProfile, setOpenProfile] = useState(false);

  return (
    <>
      <nav className={classes.Navbar}>
        <div className={classes.NavContent}>
          <Title title="Devagram" />
          <div className={classes.Search}>
            <input
              type="text"
              value={searchText}
              onChange={setSearchText}
              name="search"
              required
              placeholder="Search"
              aria-labelledby="label-search"
            />
            <Link to="#">
              <FaSearch size="1.2em" style={{ color: "#aaa" }} />
            </Link>
          </div>
          <div className={classes.Options}>
            <div className={classes.Option}>
              <Link to="#">
                <FaInbox style={{ color: "black" }} />
              </Link>
            </div>
            <div className={classes.Option}>
              <Link to="/feeds">
                <FaCompass style={{ color: "black" }} />
              </Link>
            </div>
            <div className={classes.Option}>
              <Link to="/connect">
                <FaUsers style={{ color: "black" }} />
              </Link>
            </div>
            <div className={classes.Option}>
              <Link to="/jobsAndHack">
                <AiFillCode style={{ color: "black" }} />
              </Link>
            </div>
            <div
              className={classes.Option}
              onClick={() => setOpenProfile(!openProfile)}
            >
              <CgProfile style={{ color: "black", cursor: "pointer" }} />
            </div>
            <div
              className={(classes.Option, classes.Burger)}
              onClick={() => setOpen(!open)}
            >
              <FaHamburger style={{ color: "black", cursor: "pointer" }} />
            </div>
          </div>
        </div>
        <div
          className={[
            classes.ProfileOptions,
            openProfile ? classes.Open : "",
          ].join(" ")}
        >
          <div className={classes.ProfileOption}>
            <NavLink to="/dashboard" activeClassName={classes.selected}>
              <FaHome />
              <span>Home</span>
            </NavLink>
          </div>
          <div className={classes.ProfileOption}>
            <NavLink to="#" activeClassName={classes.selected}>
              <FaSearch />
              <span>Search</span>
            </NavLink>
          </div>
          <div className={classes.ProfileOption}>
            <NavLink to="#" activeClassName={classes.selected}>
              <FaPlus />
              <span>Create Post</span>
            </NavLink>
          </div>
          <div className={classes.ProfileOption}>
            <NavLink to="/profile" activeClassName={classes.selected}>
              <FaUser />
              <span>Profile</span>
            </NavLink>
          </div>
        </div>
        <div
          className={[classes.SmallScreen, open ? classes.Open : ""].join(" ")}
        >
          <div className={classes.SmallOption}>
            <Link to="/dashboard">
              <FaHome style={{ color: "black" }} />
              <span>Home</span>
            </Link>
          </div>
          <div className={classes.SmallOption}>
            <Link to="#">
              <FaInbox style={{ color: "black" }} />
              <span>Inbox</span>
            </Link>
          </div>
          <div className={classes.SmallOption}>
            <Link to="/feeds">
              <FaCompass style={{ color: "black" }} />
              <span>Explore-feeds</span>
            </Link>
          </div>
          <div className={classes.SmallOption}>
            <Link to="/connect">
              <FaUsers style={{ color: "black" }} />
              <span>Connect</span>
            </Link>
          </div>
          <div className={classes.SmallOption}>
            <Link to="/jobsAndHack">
              <AiFillCode style={{ color: "black" }} />
              <span>jobs-hackathons</span>
            </Link>
          </div>
        </div>
      </nav>
    </>
  );
}

SelectAnioMes = ({auditoriaId, getLibrosMensuales}) => {
    const [datosNewLibroMes, setDatosNewLibroMes] = useState({})
    const mesesCrudo = [
        'Enero',
        'Febrero',
        'Marzo',
        'Abril',
        'Mayo',
        'Junio',
        'Julio',
        'Agosto',
        'Septiembre',
        'Octubre',
        'Noviembre',
        'Diciembre'
    ];

    const handlerDatosLibroMes = (e) => {
        const {name} = e.target
        setDatosNewLibroMes((datos) => {
            return {
                ...datos,
                [name]: e.target.value
            }
        })
    }


    const crearLibroMes = async () => {

        const mesIndex = datosNewLibroMes.mesIndex;
        const mes = mesesCrudo[mesIndex];
        const anio = datosNewLibroMes.anio;
        const fecha = parseInt(`${anio}${mesIndex}`);

        const tokeep = {
            mesIndex,
            anio,
            mes,
            fecha,
            createdAt: new Date(),
            diezmos: 0,
            ofrendas: 0,
            especiales: 0,
            auditoriaId
        }
        setDatosNewLibroMes((estado) => tokeep)
        await firestoreDB.collection('lib_mensuales').doc().set(tokeep)
        getLibrosMensuales()
        toast.success('Agregado.')
    }

    return (
        <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', marginBottom: '10px' }}>
            <CSelect onChange={
                    (e) => handlerDatosLibroMes(e)
                }
                name="anio"
                multiple
                className="col-sm">
                <option value={2021}>2021</option>
                <option value={2022}>2022</option>
                <option value={2023}>2023</option>
                <option value={2024}>2024</option>
            </CSelect>

            <CSelect onChange={
                    (e) => handlerDatosLibroMes(e)
                }
                name="mesIndex"
                multiple
                className="col-sm"
            >
                {
                mesesCrudo.map((mes, index) => (
                    <option key={mes}
                        value={index}>
                        {mes}</option>
                ))
            } </CSelect>


            <CTooltip content="Agregar libro mes">
                <button className="btn btn-primary"
                    onClick={
                        () => crearLibroMes()
                }>
                    <FaPlus/>
                </button>
            </CTooltip>

        </div>
    )
}

Auditorias = ({history}) => {

    const refFire = useFirestore();
    const [auditorias, setAuditorias] = useState([])

    useEffect(() =>{
        const traerDatos = async () => {
            const temporales = []
            const snapshot = await refFire.collection('auditorias').get()
            snapshot.docs.forEach((doc)=>{
                const elem = {
                    id: doc.id,
                    ...doc.data()
                }
                temporales.push(elem)
            })
            setAuditorias(temporales)
        } 

        traerDatos()
    }, [refFire])
    
    const eliminar = async (id) => {
        const respuesta = window.confirm('Seguro que quiere eliminar?');
        if (respuesta) {
            await refFire.collection('auditorias').doc(id).delete();
            toast('Eliminado')
            const temp = auditorias.filter((auditorias)=> {
                console.log(auditorias, id)
                return auditorias.id !== id
            })
            setAuditorias(temp)
            
        }
    }

    const setActual = async(id) => {
        let batch = refFire.batch();
        auditorias.forEach( (audit) => {
            let elem = refFire.collection('auditorias').doc(audit.id)
            const actual = audit.id === id ? true : false;
            batch.update(elem, { actual})
        })
        await batch.commit();
        // await refFire.collection('auditorias').doc(id).update({actual: true})
        toast('Actualizado')
    }

    return (
        <div className="card">
            <div className="card-body">
                <h2 className="card-title">Auditoria </h2>
                <Link className="btn btn-primary" to="/auditorias/add">
                    <FaPlus style={{ marginRight: '5px', marginTop: '-3px' }} />
                    Crear
                </Link>

                    <table className="table table-striped table-sm">
                        <thead>
                            <tr>
                                <th>Nro</th>
                                <th>Fecha</th>
                                <th>Iglesia</th>
                                <th>Actual</th>
                                <th>Activo</th>
                                <th>Editar</th>
                            </tr>
                        </thead>

                        <tbody>
                            {
                                auditorias.map((audit, index) => (
                                    <tr key ={audit.id}>
                                        <td>{index + 1}</td>
                                        <td>{audit.fecha}</td>
                                        <td>{}</td>
                                        <td>
                                            {audit.actual 
                                            ?
                                                'Actual'
                                            :
                                            <button onClick={()=> setActual(audit.id)} className="btn  btn-primary btn-xm" >
                                                Poner como actual
                                            </button>
                                            }
                                        </td>
                                        <td>{audit.activo ? 'Si' : 'No'}</td>
                                        <td>
                                            <button onClick={ () => {
                                                history.push(`/auditorias/edit/${audit.id}`)
                                            }} 
                                            className="btn btn-success btn-sm">
                                                <FaPen />
                                            </button>
                                            <button onClick={() => eliminar(audit.id)} className="btn btn-danger btn-sm"> 
                                                <FaTrash />
                                            </button>
                                        </td>
                                    </tr>

                                ))
                            }
                        </tbody>
                    </table>
            </div>
        </div>
    )
}

render() {
    return (
      <div
        style={styles.tabCreatorContainer}
        onClick={() => {
          this.setState({ showPlayContextMenu: false });
        }}
      >
        {this.state.exporting && (
          <ScreenWideModal>
            <div style={styles.exportModal}>
              <div>Exporting Song...</div>
              <div style={{ margin: 10 }}>
                <ClipLoader />
              </div>
              <div>Don't resize the window for best results.</div>
            </div>
          </ScreenWideModal>
        )}
        {this.state.showNewSongWindow && (
          <NewSongWindow
            hide={() => {
              this.setState({ showNewSongWindow: false });
            }}
            onCreate={() => {
              //ask if they want to save this song

              this.setState({ showNewSongWindow: false });

              let kalimba = document.getElementById("kalimbaContainer");
              kalimba.scrollTop = kalimba.scrollHeight;
            }}
          />
        )}
        {/* TOOLBAR */}
        <div style={styles.controlPanelContainer}>
          {/* SONG CONTROL */}
          <div style={styles.songControlContainer}>
            {/* HOME BUTTON */}
            <ToolBarButton
              onClick={async () => {
                this.stopSong();
                await delay(1);
                this.props.history.push("/");
              }}
              name="Home"
            >
              <FaHome size={30} />
            </ToolBarButton>
            {/* NEW SONG */}
            <ToolBarButton
              onClick={() => {
                this.setState({ showNewSongWindow: true });
              }}
              name="New"
            >
              <FaFile size={25} />
            </ToolBarButton>
            {/* OPEN */}
            <ToolBarButton
              onClick={() => {
                this.openSong();
              }}
              name="Open"
            >
              <FaFolderOpen size={30} />
            </ToolBarButton>
            {/* SAVE */}
            <ToolBarButton
              onClick={() => {
                this.saveSong();
              }}
              name="Save"
            >
              <FaSave size={30} />
            </ToolBarButton>
            {/* EXPORT */}
            <ToolBarButton
              onClick={() => {
                this.exportToPDF();
              }}
              disabled={this.state.exporting || this.state.playing}
              selected={this.state.exporting}
              name="Export"
            >
              {this.state.exporting ? (
                <ClipLoader size={30} color="blue" />
              ) : (
                <FaFileExport size={30} />
              )}
            </ToolBarButton>
            {/* PLAY BUTTON */}
            <div style={{ position: "relative" }}>
              <ToolBarButton
                selected={this.state.playing}
                onClick={() => {
                  this.state.playing ? this.stopSong() : this.playSong(false);
                }}
                onContextMenu={() => {
                  this.setState({ showPlayContextMenu: true });
                }}
                name={this.state.playing ? "Stop" : "Play"}
              >
                {this.state.playing ? (
                  <FaStop color="red" size={30} />
                ) : (
                  <FaPlay color="blue" size={30} />
                )}
              </ToolBarButton>
              {this.state.showPlayContextMenu && (
                <PlayContextMenu
                  play={(fromMiddle) => {
                    this.state.playing
                      ? this.stopSong()
                      : this.playSong(fromMiddle);
                    this.setState({ showPlayContextMenu: false });
                  }}
                  isPlaying={this.state.playing}
                  stop={() => {
                    this.stopSong();
                  }}
                />
              )}
            </div>
          </div>
          {/* TITLE INPUT */}
          <div style={styles.titleContainer} id="titleandtempo">
            {!this.state.editTitle ? (
              <div
                onClick={() => {
                  this.setState({ editTitle: true });
                }}
                style={styles.songTitle}
              >
                {this.props.songTitle}
              </div>
            ) : (
              <input
                placeholder={this.props.songTitle}
                onKeyPress={(event) => {
                  if (event.key === "Enter") {
                    this.setState({ editTitle: false });
                  }
                }}
                style={styles.titleInput}
                onChange={(e) => {
                  this.props.changeTitle(e.target.value);
                }}
              />
            )}
            {!this.state.editTempo ? (
              <div
                onClick={() => {
                  this.setState({ editTempo: true });
                }}
                style={{ margin: 5 }}
              >
                {this.props.tempo}
              </div>
            ) : (
              <input
                onKeyPress={(event) => {
                  if (event.key === "Enter") {
                    this.setState({ editTempo: false });
                    this.props.changeTempo(this.state.enteredTempo);
                  }
                }}
                placeholder={this.props.tempo}
                style={styles.tempoInput}
                type="number"
                min="0"
                max="500"
                onChange={(e) => {
                  // this.props.changeTempo(e.target.value);
                  this.setState({ enteredTempo: e.target.value });
                }}
              />
            )}
          </div>
          {/* NOTE TOOLBAR */}
          <div style={styles.noteToolbarContainer}>
            {/* SELECTION MODE BUTTON */}
            <ToolBarButton
              selected={this.props.selectionMode}
              onClick={() => {
                this.props.toggleSelectionMode();
              }}
              name="Selection Mode"
            >
              <FaHandPointer />
            </ToolBarButton>
            <div style={styles.noteToolbarDivider} />
            {/* EXTEND SONG BUTTON */}
            <ToolBarButton
              onClick={() => {
                this.props.extendSong();
              }}
              name="Extend Song"
            >
              <FaPlus />
            </ToolBarButton>
            <div style={styles.noteToolbarDivider} />
            <NoteButton value={1} />
            <NoteButton value={2} />
            <NoteButton value={4} />
            <NoteButton value={8} />
            <NoteButton value={16} />
            <div style={styles.noteToolbarDivider} />
            <AccidentalButton value="♯" />
            <AccidentalButton value="♭" />
            <AccidentalButton value="♮" />
            <div style={styles.noteToolbarDivider} />
            {/* DOTTED BUTTON */}
            <ToolBarButton
              selected={this.props.dotted}
              onClick={() => {
                this.props.toggleDotted();
              }}
            >
              <div
                style={{
                  width: 10,
                  height: 10,
                  borderRadius: 5,
                  backgroundColor: this.props.dotted ? "blue" : "black",
                }}
              />
            </ToolBarButton>
            {/* REST BUTTON */}
            <ToolBarButton
              selected={this.props.rest}
              onClick={() => {
                this.props.toggleRest();
              }}
            >
              <img
                src={QuarterRest}
                style={{ width: 15, height: "auto" }}
                alt={"resticon"}
              />
            </ToolBarButton>
            {/* TRIPLET BUTTON */}
            <ToolBarButton
              selected={this.props.tripletMode}
              onClick={() => {
                this.props.toggleTriplet();
              }}
              name="Triplet"
            >
              -3-
            </ToolBarButton>
          </div>
        </div>
        {/* EVERYTHING BELOW TOOLBAR */}
        <div style={styles.lowerHalf}>
          <div style={{ flex: 1 }}></div>
          <div
            id="kalimbaContainer"
            style={{
              ...styles.kalimbaContainer,
              height: this.state.height - 90,
            }}
          >
            {this.state.kalimba !== null ? (
              <Kalimba
                kalimba={this.state.kalimba}
                currentNote={this.state.currentNoteIndex}
                playing={this.state.playing}
                visibleHeight={this.state.height}
                playFromNote={(index) => {
                  this.playSong(false, index);
                }}
                scrollBack={() => {
                  let kalimbaContainer = document.getElementById(
                    "kalimbaContainer"
                  );
                  kalimbaContainer.scrollTop += 50 * 25;
                }}
              />
            ) : (
              <div style={{ alignSelf: "center" }}>
                <ScaleLoader />
              </div>
            )}
          </div>
          <div style={{ flex: 1 }}></div>
        </div>
      </div>
    );
  }

Responsible = ({ form }) => {
	const emptyValue = {
		full_name: '',
		email: '',
		phone_number: '',
	};
	const { user } = useAuth();
	const dataName = 'technologyResponsibles';
	const owner = `${dataName}.owner`;
	const users = `${dataName}.users`;

	return (
		<Wrapper>
			<Row align="center">
				<h3>Responsáveis Pela Tecnologia</h3>
				<Help
					id={owner}
					label="Responsáveis Pela Tecnologia"
					HelpComponent={<p>Adicione o nome dos responsáveis pelas tecnologias.</p>}
				/>
			</Row>
			<Row data-testid="row">
				<InputField
					form={form}
					name={`${owner}.user_id`}
					defaultValue={user.id}
					type="hidden"
				/>
				<Cell col={5}>
					<InputField
						form={form}
						name={`${owner}.full_name`}
						label="Nome Completo"
						disabled
						defaultValue={user.full_name}
					/>
				</Cell>
				<Cell col={3}>
					<InputField
						form={form}
						name={`${owner}.email`}
						label="Email"
						disabled
						defaultValue={user.email}
					/>
				</Cell>
				<Cell col={2}>
					<InputField
						form={form}
						name={`${owner}.phone_number`}
						label="Telefone"
						disabled
						defaultValue={user.phone_number}
					/>
				</Cell>
				<Cell maxWidth={0.5} />
			</Row>
			<Repeater
				form={form}
				name={users}
				noInitialRow
				emptyValue={emptyValue}
				childsComponent={({ item, index, remove }) => {
					return (
						<>
							<Row key={item.fieldArrayId} align="center" data-testid="row">
								<Cell col={5}>
									<InputField
										form={form}
										name={`${users}.${index}.full_name`}
										label="Nome Completo"
										placeholder="Nome do responsável"
										validation={{ required: true }}
									/>
								</Cell>
								<Cell col={3}>
									<InputField
										form={form}
										name={`${users}.${index}.email`}
										label="Email"
										placeholder="Ex.: [email protected]"
										validation={{ required: true }}
									/>
								</Cell>
								<Cell col={2}>
									<MaskedInputField
										form={form}
										name={`${users}.${index}.phone_number`}
										defaultValue={replaceWithMask(
											form.getValues(`${users}.${index}.phone_number`),
											'phoneNumber',
										)}
										alwaysShowMask={false}
										label="Telefone"
										placeholder="(xx) xxxxxxxxx"
										validation={{ required: true }}
										mask={maskPatterns.phoneNumber.stringMask}
										pattern={maskPatterns.phoneNumber.pattern}
										formatChars={maskPatterns.phoneNumber.formatChars}
									/>
								</Cell>
								<Cell maxWidth={0.5}>
									<CircularButton
										size="small"
										variant="remove"
										shortPadding
										onClick={(event) => {
											event.preventDefault();
											remove(index);
										}}
									>
										<FaMinus />
									</CircularButton>
								</Cell>
							</Row>
						</>
					);
				}}
				// eslint-disable-next-line no-shadow
				endComponent={({ append, emptyValue }) => {
					return (
						<CircularButton
							right
							variant="info"
							size="medium"
							color="white"
							name="technologyResponsibles.users_add_button"
							onClick={(event) => {
								event.preventDefault();
								append(emptyValue);
							}}
						>
							<FaPlus />
						</CircularButton>
					);
				}}
			/>
		</Wrapper>
	);
}

CommonDataForm = ({ form, user, message, loading }) => {
	const { setValue, register, watch } = form;
	const { t } = useTranslation(['account']);
	const { openModal } = useModal();
	const [isResearcher, setIsResearcher] = useState(Boolean(user.researcher));
	const [userAreas, setUserAreas] = useState(user?.areas || []);
	const [hasAreasLoading, setHasAreasLoading] = useState([true]);
	const areaKeys = ['great_area_id', 'area_id', 'sub_area_id', 'speciality_id'];
	const maxAreaNumber = 4;
	const emptyArea = {
		great_area_id: null,
		area_id: null,
		sub_area_id: null,
		speciality_id: null,
	};
	const brazilStateId = watch('state_id');

	const { data: { data: institutions } = {} } = useSWR(
		'get-institutions',
		() => getInstitutions({ perPage: 10, order: 'desc' }),
		{
			revalidateOnFocus: false,
		},
	);

	const { data: brazilStates = [] } = useSWR('get-brazil-states', () => getStates(), {
		revalidateOnFocus: false,
	});

	const { data: brazilStateCities = [] } = useSWR(
		brazilStateId ? `get-brazil-state-city-${brazilStateId.value || brazilStateId}` : null,
		() => getStateCities(brazilStateId.value || brazilStateId, { perPage: 10 }),
		{
			revalidateOnFocus: false,
		},
	);

	const handleFetchInstitutions = debounce((value, callback) => {
		getInstitutions({ filterBy: 'name', filter: value, order: 'desc' }).then((response) => {
			const mappedOptions = mapInstitutionsOptions(response.data);
			callback(mappedOptions);
		});
	}, 300);

	/**
	 * Returns default institutions for use in async select
	 * Do not concat user institution with institutions array if already exists
	 *
	 * @returns {Array} Institutions options
	 */
	const getDefaultInstitutionsOptions = () => {
		const userInstitution = institutions?.find(
			(institution) => institution.id === user.institution_id,
		);

		return [
			...mapInstitutionsOptions(institutions),
			...(!userInstitution ? mapInstitutionsOptions([user.institution]) : []),
		];
	};

	useEffect(() => {
		register('researcher');
		setValue('researcher', isResearcher);
		let newAreaValue;

		if (isResearcher) {
			newAreaValue = userAreas.length ? [...userAreas] : [emptyArea];
		} else {
			newAreaValue = [];
		}

		setUserAreas(newAreaValue);
		setValue('areas', newAreaValue);
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [isResearcher]);

	return (
		<>
			<h3>Dados pessoais</h3>
			<Row>
				<Cell col={4}>
					<InputField
						form={form}
						name="full_name"
						label={t('account:labels.fullName')}
						validation={{ required: true }}
						variant="gray"
					/>
				</Cell>
				<Cell col={3}>
					<Row>
						<InputField
							form={form}
							name="email"
							label={t('account:labels.mainEmail')}
							type="email"
							disabled="disabled"
							variant="gray"
							wrapperCss={S.inputEmailWrapperCss}
						/>
						<S.ButtonChangeEmail
							type="button"
							onClick={() => openModal('updateEmail', {}, { customModal: true })}
							aria-label="Change e-mail"
						>
							<FiEdit3 /> Alterar
						</S.ButtonChangeEmail>
					</Row>
				</Cell>
			</Row>
			<Row>
				<Cell col={4}>
					<MaskedInputField
						form={form}
						name="cpf"
						label={t('account:labels.cpf')}
						validation={{ required: true }}
						variant="gray"
						pattern={maskPatterns.cpf.pattern}
						mask={maskPatterns.cpf.stringMask}
					/>
				</Cell>
				<Cell col={4}>
					<MaskedInputField
						form={form}
						name="birth_date"
						label={t('account:labels.birthDate')}
						validation={{ required: true }}
						variant="gray"
						pattern={maskPatterns.brazilianDate.pattern}
						mask={maskPatterns.brazilianDate.stringMask}
					/>
				</Cell>
				<Cell col={4}>
					<MaskedInputField
						form={form}
						name="phone_number"
						alwaysShowMask={false}
						label={t('account:labels.phoneNumber')}
						validation={{ required: true }}
						variant="gray"
						maskChar={null}
						mask={maskPatterns.phoneNumber.stringMask}
						pattern={maskPatterns.phoneNumber.pattern}
						formatChars={maskPatterns.phoneNumber.formatChars}
					/>
				</Cell>
			</Row>
			<Row>
				<Cell col={4}>
					<MaskedInputField
						form={form}
						name="zipcode"
						validation={{ required: true }}
						label={t('account:labels.zipCode')}
						variant="gray"
						mask={maskPatterns.zipCode.stringMask}
						pattern={maskPatterns.zipCode.pattern}
					/>
				</Cell>
				<Cell col={4}>
					<InputField
						form={form}
						name="address"
						validation={{ required: true }}
						label={t('account:labels.address')}
						variant="gray"
					/>
				</Cell>
				<Cell col={4}>
					<InputField
						form={form}
						name="address2"
						validation={{ required: true }}
						label={t('account:labels.address2')}
						variant="gray"
					/>
				</Cell>
			</Row>
			<Row>
				<Cell col={3}>
					<InputField
						form={form}
						name="district"
						validation={{ required: true }}
						label={t('account:labels.district')}
						variant="gray"
					/>
				</Cell>
				<Cell col={3}>
					<SelectField
						form={form}
						name="state_id"
						label={t('account:labels.state')}
						validation={{ required: true }}
						variant="gray"
						options={mapArrayOfObjectToSelect(brazilStates, 'initials', 'id')}
						instanceId="select-state-my-account"
						placeholder="Selecione o estado..."
						callback={() => {
							setValue('city_id', null);
						}}
					/>
				</Cell>
				<Cell col={3}>
					<SelectField
						form={form}
						name="city_id"
						label={t('account:labels.city')}
						placeholder={
							!brazilStateId
								? 'Selecione o estado primeiro...'
								: 'Selecione a cidade...'
						}
						variant="gray"
						options={mapArrayOfObjectToSelect(brazilStateCities, 'name', 'id')}
						noOptionsMessage={() => 'Nenhuma cidade encontrada...'}
						instanceId="select-city-my-account"
						validation={{ required: true }}
					/>
				</Cell>
				<Cell col={3}>
					<InputField
						form={form}
						name="country"
						validation={{ required: true }}
						label={t('account:labels.country')}
						variant="gray"
					/>
				</Cell>
			</Row>

			<h3>Dados Organizacionais e Acadêmicos</h3>
			<Row>
				<Cell col={9}>
					<Row align="center">
						<Cell col="auto">
							<SelectField
								form={form}
								name="institution_id"
								label={t('account:labels.institution')}
								placeholder="Pesquise sua instituição"
								variant="gray"
								isAsync
								cacheOptions
								defaultOptions={getDefaultInstitutionsOptions()}
								loadOptions={handleFetchInstitutions}
								loadingMessage={() => 'Carregando...'}
								noOptionsMessage={() => 'Nenhuma insitutição encontrada...'}
								instanceId="select-institutions-my-account"
							/>
						</Cell>
						<S.Button
							type="button"
							variant="outlined"
							wrapperCss={S.buttonInstitutionsWrapperCss}
							onClick={() =>
								openModal('createInstitutions', null, { overlayClick: false })
							}
						>
							<FaPlus /> Nova Organização
						</S.Button>
					</Row>
				</Cell>
				<Cell col={3}>
					<InputField
						form={form}
						name="lattes_id"
						type="number"
						label={t('account:labels.lattesId')}
						variant="gray"
						help={
							<>
								<p>
									O ID Lattes poderá ser obtido na{' '}
									<a
										href="http://lattes.cnpq.br/"
										target="_blank"
										rel="noreferrer"
									>
										Plataforma Lattes
									</a>{' '}
									nessa parte do currículo:
								</p>
								<img
									src="/lattes.jpg"
									alt="Currículo Lattes com ID Lattes destacado"
								/>
							</>
						}
					/>
				</Cell>
			</Row>

			<h3>Áreas do conhecimento</h3>
			<Row align="center">
				<CheckBoxField
					name="researcher"
					value={isResearcher}
					label={t('account:labels.researcher')}
					onChange={setIsResearcher}
				/>
			</Row>
			<Row align="flex-start" justify="center">
				{!!isResearcher && userAreas.length <= maxAreaNumber && (
					<Loading
						loading={hasAreasLoading.some((item) => item !== false)}
						alwaysRenderChildren
					>
						{userAreas.map((area, index) => {
							const key = areaKeys
								.map((field) => area[field])
								.filter(Boolean)
								.concat(index)
								.join('-');

							return (
								<Cell key={key} col={userAreas.length}>
									<UserSpecialities
										form={form}
										selected={area}
										index={index}
										onFinishInitialLoading={() => {
											const newValue = [...hasAreasLoading];
											newValue[index] = false;
											setHasAreasLoading(newValue);
										}}
									/>
								</Cell>
							);
						})}

						{userAreas.length < maxAreaNumber && (
							<S.Button
								type="button"
								variant="contained"
								wrapperCss={S.buttonAddAreasWrapperCss}
								alignSelf="flex-start"
								onClick={() => {
									const newUserAreaValues = [...userAreas, emptyArea];
									setUserAreas(newUserAreaValues);
									setValue('areas', newUserAreaValues);
								}}
							>
								+
							</S.Button>
						)}
					</Loading>
				)}
			</Row>

			<Row>
				<Cell align="center">
					<p>{message}</p>
				</Cell>
			</Row>

			<Actions center>
				<S.Button type="submit" disabled={loading}>
					{loading ? t('account:labels.updatingUser') : t('account:labels.updateUser')}
				</S.Button>
			</Actions>
		</>
	);
}