react-icons/io#IoMdArrowRoundBack JavaScript Examples

export default function Treatment({ match }) {
  document.title = 'AAMed - Seus atendimentos';
  const history = useHistory();
  const [atendimentos, setAtendimentos] = useState([]);

  useEffect(() => {
    async function loadTreatments() {
      const response = await api.get(`/solicitations/${match.params.id}`);
      setAtendimentos(response.data);
    }
    loadTreatments();
  }, [match.params.id]);

  return (
    <div>
      <div className="menu-profile">
        <div className="back">
          <button onClick={() => history.goBack()}>
            <IoMdArrowRoundBack size={25} />
            Voltar
          </button>
        </div>
        <div className="title-profile">
          {/* <h2>Olá {}</h2> */}
        </div>
      </div>
      <div className="content-support">
        <div>
          <h2>Aqui você encontra todos seus atendimentos!</h2>
          <span>
            Tais como hora e data da aceitação, o paciente junto com sua
            descrição.
          </span>
        </div>
        <div>
          <img
            src={require('../../assets/profile.png')}
            alt="Gerenciamento de hospitais por perto"
            title="Encontre hospitais por perto"
          />
        </div>
      </div>
      {atendimentos.map(treat => {
        return (
          <TreatmentModal
            key={treat._id}
            name={treat.user.name}
            cpf={treat.user.cpf}
            email={treat.user.email}
            bio={treat.user.bio}
            description={treat.description}
            date={new Date(treat.createdAt).toLocaleDateString('pt-br', {
              day: 'numeric',
              month: 'long',
              year: 'numeric',
              weekday: 'long',
              timeZoneName: 'short',
              hour: 'numeric',
              minute: 'numeric',
            })}
          />
        );
      })}
    </div>
  );
}

export default function ChangePass({ history, match }) {
  document.title = 'AAMed - Trocar de senha';

  const [oldPassword, setOldPassword] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [name, setName] = useState('');

  useEffect(() => {
    async function loadHospital() {
      const hospital = await api.get('/hospital/home', {
        withCredentials: true,
      });

      const { name } = hospital.data.hospital;
      setName(name);
    }
    loadHospital();
  }, []);

  async function handleSubmit(e) {
    e.preventDefault();
    await api
      .put(`/change/${match.params.id}`, {
        password,
        oldPassword,
      })
      .then(response => {
        history.push(`/home/${match.params.id}`);
      })
      .catch(err => {
        setError(err.response.data.error);
      });
  }

  return (
    <>
      <div className="menu-profile">
        <div className="back">
          <button onClick={() => history.goBack()}>
            <IoMdArrowRoundBack size={25} />
            Voltar
          </button>
        </div>
        <div className="title-profile">
          <h2>Olá, {name}</h2>
        </div>
      </div>
      <div className="content-support">
        <div>
          <h2>Atualize sua senha e fique mais seguro!</h2>
          <span>Confirme sua senha antiga e crie uma nova.</span>
        </div>
        <div>
          <img
            src={require('../../assets/profile.png')}
            alt="Suporte do 1° Socorros"
            title="Suporte do 1° Socorros"
          />
        </div>
      </div>
      <form onSubmit={handleSubmit} className="update-form">
        <h2>Atualize sua senha!</h2>
        {error && (
          <div className="modal-error">
            <div>{error}</div>
          </div>
        )}
        <div>
          <label htmlFor="password">Sua senha antiga</label>
          <input
            type="password"
            name="old-password"
            id="old-password"
            onChange={e => setOldPassword(e.target.value)}
            value={oldPassword}
          />
        </div>
        <div>
          <label htmlFor="password">Sua senha nova</label>
          <input
            type="password"
            name="password"
            id="password"
            onChange={e => setPassword(e.target.value)}
            value={password}
          />
        </div>
        <div>
          <button type="submit">Atualizar</button>
        </div>
      </form>
    </>
  );
}

export default function Delete({ history }) {
  document.title = 'AAMed - Excluir conta';

  const [id, setId] = useState('');
  const [pass, setPass] = useState('');
  const [error, setError] = useState('');
  const [name, setName] = useState('');

  useEffect(() => {
    async function loadHospital() {
      const hospital = await api.get('/hospital/home', {
        withCredentials: true,
      });

      const { _id, name } = hospital.data.hospital;
      setId(_id);
      setName(name);
    }
    loadHospital();
  }, []);

  async function handleSubmitDelete(e) {
    e.preventDefault();
    await api
      .delete(`/hospital/${id}`, {
        withCredentials: true,
        data: {
          password: pass,
        },
      })
      .then(response => {
        localStorage.clear();
        history.push('/');
        window.location.reload();
      })
      .catch(err => {
        setError(err.response.data.error);
      });
  }

  return (
    <>
      <div className="menu-profile">
        <div className="back">
          <button onClick={() => history.goBack()}>
            <IoMdArrowRoundBack size={25} />
            Voltar
          </button>
        </div>
        <div className="title-profile">
          <h2>Olá, {name}</h2>
        </div>
      </div>
      <div className="content-support">
        <div>
          <h2>Não utiliza mais essa conta? Não tem problema!</h2>
          <span>Confirme sua senha abaixo e exclua agora mesmo.</span>
        </div>
        <div>
          <img
            src={require('../../assets/profile.png')}
            alt="Suporte do 1° Socorros"
            title="Suporte do 1° Socorros"
          />
        </div>
      </div>
      <form onSubmit={handleSubmitDelete} className="update-form">
        <h2>Excluir conta!</h2>
        {error && (
          <div className="modal-error">
            <div>{error}</div>
          </div>
        )}
        <div>
          <label htmlFor="password">Confirmar senha</label>
          <input
            type="password"
            name="password"
            id="password"
            onChange={e => setPass(e.target.value)}
            value={pass}
            placeholder="Confirme sua senha"
          />
        </div>
        <div>
          <button type="submit">Deletar</button>
        </div>
      </form>
    </>
  );
}

export default function Hospitals(props) {
  document.title = 'AAMed - Hospitais por perto';
  const [hospitals, setHospitals] = useState([]);
  const [nameLogged, setNamelogged] = useState('');
  const [modal, setModal] = useState(null);
  const [idClick, setIdclick] = useState(null);

  useEffect(() => {
    async function getHospitals10() {
      const hospitalLogged = await api.get('/hospital/home', {
        withCredentials: true,
      });
      const { location, _id, name } = hospitalLogged.data.hospital;
      console.log(location);
      setNamelogged(name);
      const longitude = location.coordinates[0];
      const latitude = location.coordinates[1];

      const response = await api.get('/search', {
        headers: {
          hospital: _id,
        },
        params: {
          latitude,
          longitude,
        },
      });
      setHospitals(response.data.hospitais);
    }
    getHospitals10();
  }, []);

  return (
    <>
      <div className="menu-hospitals">
        <div className="back">
          <button onClick={() => props.history.goBack()}>
            <IoMdArrowRoundBack size={25} />
            Voltar
          </button>
        </div>
        <div className="title-profile">
          <h2>Olá, {nameLogged}</h2>
        </div>
      </div>
      <div className="content-support">
        <div>
          <h2>Veja abaixo os hospitais perto de você!</h2>
          <span>Aqui está os hospitais mais próximos!.</span>
        </div>
        <div>
          <img
            src={require('../../assets/profile.png')}
            alt="Gerenciamento de hospitais por perto"
            title="Encontre hospitais por perto"
          />
        </div>
      </div>
      <div className="container-hospitals">
        {hospitals.length ? (
          hospitals.map((hospital, index) => (
            <div key={hospital._id} className="box">
              <h2>{hospital.name}</h2>
              <button
                className="btnOpen"
                onClick={() => {
                  setIdclick(hospital._id);
                  setModal(true);
                }}
              >
                Clique para saber mais
              </button>
            </div>
          ))
        ) : (
          <div className="notFound">
            <h2>Parece que não há hospitais perto de você! :(</h2>
          </div>
        )}
        {modal ? (
          <>
            <HospitalModal id={idClick} />
            <button className="btnClose" onClick={() => setModal(false)}>
              Fechar
            </button>
          </>
        ) : (
          ''
        )}
      </div>
    </>
  );
}

export default function Profile(props) {
  document.title = 'AAMed - Perfil';

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [cnpj, setCnpj] = useState('');
  const [cnes, setCnes] = useState('');
  const [city, setCity] = useState('');
  const [state, setState] = useState('');
  const [street, setStreet] = useState('');
  const [neighborhood, setNeighborhood] = useState('');
  const [cep, setCep] = useState('');

  useEffect(() => {
    async function handleInformations() {
      const response = await api.get('/hospital/home', {
        withCredentials: true,
      });
      const {
        cnes,
        cnpj,
        name,
        email,
        phone,
        address,
      } = response.data.hospital;
      setName(name);
      setEmail(email);
      setPhone(phone);
      setCnes(cnes);
      setCnpj(cnpj);
      setCity(address.city);
      setState(address.state);
      setStreet(address.street);
      setNeighborhood(address.neighborhood);
      setCep(address.cep);
    }
    handleInformations();
  }, []);

  return (
    <>
      <div className="menu-profile">
        <div className="back">
          <button onClick={() => props.history.goBack()}>
            <IoMdArrowRoundBack size={25} />
            Voltar
          </button>
        </div>
        <div className="title-profile">
          <h2>Olá, {name}</h2>
        </div>
      </div>
      <div className="content-support">
        <div>
          <h2>Veja seu perfil rápido e fácil!</h2>
          <span>Verificando se tudo está correto? Está fazendo certo.</span>
        </div>
        <div>
          <img
            src={require('../../assets/profile.png')}
            alt="Suporte do 1° Socorros"
            title="Suporte do 1° Socorros"
          />
        </div>
      </div>
      <div className="profile">
        <div className="container-profile">
          <div className="container-top">
            <div className="container-img">
              <img src={require('../../assets/icon.png')} alt="" />
            </div>
            <div>
              <span>
                <MdLocationOn size={20} />
                <p>
                  {city}, {state}
                </p>
              </span>
            </div>
          </div>
          <div className="container-bottom">
            <h2>Veja abaixo suas informações :)</h2>
            <div className="content-bottom">
              <div>
                <h2>Nome: </h2>
                <h2>Bairro: </h2>
                <h2>Rua: </h2>
                <h2>Cidade: </h2>
                <h2>Estado: </h2>
                <h2>CEP: </h2>
                <h2>E-mail: </h2>
                <h2>CNES: </h2>
                <h2>Cnpj: </h2>
                <h2>Telefone: </h2>
              </div>
              <div>
                <h2>{name}</h2>
                <h2>{neighborhood}</h2>
                <h2>{street}</h2>
                <h2>{city}</h2>
                <h2>{state}</h2>
                <h2>{cep}</h2>
                <h2>{email}</h2>
                <h2>{cnes}</h2>
                <h2>{cnpj}</h2>
                <h2>{phone}</h2>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default function Update({ history }) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [id, setId] = useState('');

  useEffect(() => {
    async function loadHospital() {
      const user = await api.get('/hospital/home', {
        withCredentials: true,
      });

      const { _id, name, email, phone } = user.data.hospital;
      setName(name);
      setEmail(email);
      setPhone(phone);
      setId(_id);
    }
    loadHospital();
  }, []);

  async function handleSubmit(e) {
    e.preventDefault();
    await api.put(
      `/hospital/${id}`,
      {
        name,
        email,
        phone,
      },
      { withCredentials: true }
    );
    history.push('/');
  }

  return (
    <>
      <div className="menu-profile">
        <div className="back">
          <button onClick={() => history.goBack()}>
            <IoMdArrowRoundBack size={25} />
            Voltar
          </button>
        </div>
        <div className="title-profile">
          <h2>Olá, nome</h2>
        </div>
      </div>
      <div className="content-support">
        <div>
          <h2>Atualize suas informações de maneira fácil e rápida!</h2>
          <span>Veja abaixo o que você pode editar e atualizar.</span>
        </div>
        <div>
          <img
            src={require('../../assets/profile.png')}
            alt="Suporte do 1° Socorros"
            title="Suporte do 1° Socorros"
          />
        </div>
      </div>
      <form onSubmit={handleSubmit} className="update-form">
        <h2>Atualize seus dados!</h2>
        <div>
          <label htmlFor="name">Nome do hospital</label>
          <input
            type="text"
            name="name"
            id="name"
            defaultValue={name}
            onChange={e => setName(e.target.value)}
            value={name}
          />
        </div>
        <div>
          <label htmlFor="phone">Telefone do hospital</label>
          <InputMask
            mask="(99)9999-9999"
            type="text"
            name="phone"
            id="phone"
            defaultValue={phone}
            onChange={e => setPhone(e.target.value)}
            value={phone}
          />
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            name="email"
            id="email"
            defaultValue={email}
            onChange={e => setEmail(e.target.value)}
            value={email}
          />
        </div>
        <div>
          <button type="submit">Atualizar</button>
        </div>
      </form>
    </>
  );
}