react-icons/md#MdEmail JavaScript Examples
The following examples show how to use
react-icons/md#MdEmail.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From plataforma-sabia with MIT License | 6 votes |
|
StepOne = ({ activeStep, setNextStep }) => {
return (
<Form>
<StepTitle>{activeStep.title}</StepTitle>
<StepSubtitle>{activeStep.subtitle}</StepSubtitle>
<S.RegisterTypeTitle>
Como você quer
<p>realizar o cadastro?</p>
</S.RegisterTypeTitle>
<RectangularButton variant="round" colorVariant="green" onClick={setNextStep} fullWidth>
<MdEmail fontSize="2rem" />
Utilizando o e-mail
</RectangularButton>
</Form>
);
}
Example #2
| Source File: Login.jsx From Next.js-Mongodb-Authentication-App with MIT License | 5 votes |
|
export default function Login() {
const router = useRouter();
const [errorMsg, setErrorMsg] = useState("");
const [user, { mutate }] = useUser();
const [loading, isLoading] = useState(false);
useEffect(() => {
// redirect to home if user is authenticated
if (user) router.replace("/");
}, [user]);
async function onSubmit(e) {
isLoading(true);
e.preventDefault();
const body = {
email: e.currentTarget.email.value,
password: e.currentTarget.password.value
};
const res = await fetch("/api/auth", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body)
});
if (res.status === 200) {
const userObj = await res.json();
mutate(userObj);
} else {
isLoading(false);
setErrorMsg("Incorrect username or password. Try again!");
}
}
return (
<>
<div className="card-form d-flex justify-content-center">
<form onSubmit={onSubmit}>
<div className="mb-3">
{errorMsg ? <p style={{ color: "red" }}>{errorMsg}</p> : null}
</div>
<div class="mb-3">
<label for="email" class="form-label"><MdEmail /> Email address</label>
<input type="email" class="form-control" id="email" required/>
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="password" class="form-label"><RiLockPasswordFill /> Password</label>
<input type="password" class="form-control" id="password" required/>
</div>
<div className="mb-3">
<p>New here? <Link href="/signup">Sign up</Link></p>
</div>
<button type="submit" class="btn btn-primary w-100">{loading ? <div class="spinner-border" role="status" style={{width:'1.5rem',height:'1.5rem'}}>
<span class="visually-hidden">Loading...</span>
</div> : <>Login</>}</button>
</form>
</div>
</>
);
}
Example #3
| Source File: Signup.jsx From Next.js-Mongodb-Authentication-App with MIT License | 5 votes |
|
export default function Login() {
const [user, { mutate }] = useUser();
const [errorMsg, setErrorMsg] = useState("");
const [loading, isLoading] = useState(false);
useEffect(() => {
// redirect to home if user is authenticated
if (user) Router.replace("/");
}, [user]);
const handleSubmit = async (e) => {
e.preventDefault();
if (e.currentTarget.password.value !== e.currentTarget.cpassword.value) {
setErrorMsg("Passwords does not match")
} else {
isLoading(true);
const body = {
email: e.currentTarget.email.value,
name: e.currentTarget.name.value,
password: e.currentTarget.password.value
};
const res = await fetch("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body)
});
if (res.status === 201) {
const userObj = await res.json();
// writing our user object to the state
mutate(userObj);
} else {
isLoading(false);
setErrorMsg(await res.text());
}
}
};
return (
<>
<div className="card-form d-flex justify-content-center">
<form onSubmit={handleSubmit}>
<div className="mb-3">
{errorMsg ? <p style={{ color: "red" }}>{errorMsg}</p> : null}
</div>
<div class="mb-3">
<label for="Name" class="form-label"><FaUserCircle /> Name</label>
<input type="text" class="form-control" id="name" required />
</div>
<div class="mb-3">
<label for="email" class="form-label"><MdEmail /> Email address</label>
<input type="email" class="form-control" id="email" required />
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="password" class="form-label"><RiLockPasswordFill /> Password</label>
<input type="password" class="form-control" id="password" required />
</div>
<div class="mb-3">
<label for="cpassword" class="form-label"><RiLockPasswordFill /> Confirm Password</label>
<input type="password" class="form-control" id="cpassword" required />
</div>
<div className="mb-3">
<p>Already registered ? <Link href="/login">Login</Link></p>
</div>
<button type="submit" class="btn btn-primary w-100 mb-3">{loading ? <div class="spinner-border" role="status" style={{ width: '1.5rem', height: '1.5rem' }}>
<span class="visually-hidden">Loading...</span>
</div> : <>Sign up</>}</button>
</form>
</div>
</>
);
}
Example #4
| Source File: Profile.js From react-portal with MIT License | 4 votes |
|
Profile = () => {
const [showSkeleton, setShowSkeleton] = useState(false);
const Creds = getRole();
const [user, setUser] = useState(null);
const [profileDrawer, setProfileDrawer] = useState(false);
const [passwordDrawer, setPasswordDrawer] = useState(false);
const [refresh, setRefresh] = useState(false);
const Image = styled.img`
width: 120px;
height: 120px;
border-radius: 50%;
padding: 4px;
border: 2px solid #d5d5d5;
transition: 0.2s all ease-out;
&:hover {
transition: 0.2s all ease-in;
border: 4px solid #4285f4;
}
`;
const LogoStyle = styled.span`
font-size: 28px;
color: #595959;
&:hover {
transition: 0.2s all ease-in;
color: #4285f4;
}
`;
const handleUpdateUser = () => {
setProfileDrawer(false);
};
const Refresh = () => {
setRefresh(!refresh);
};
const handleUpdatePassword = () => {
setPasswordDrawer(false);
};
useEffect(() => {
(async () => {
setShowSkeleton(true);
try {
if (true) {
const res = await getUserService(Creds.id);
if (res.message === "success") {
setUser(res.data);
setShowSkeleton(false);
} else {
_notification("warning", "Error", res.message);
}
}
} catch (err) {
_notification("error", "Error", err.message);
setShowSkeleton(false);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [refresh]);
return (
<>
<PageTitle title="Profile" bgColor="#DB4437" />
<Skeleton loading={showSkeleton} active>
<>
<Row gutter={16}>
<Col xs={0} sm={0} md={4} lg={6}></Col>
<Col
xs={24}
sm={24}
md={8}
lg={6}
className="profile-image-container"
>
<Image
src={
user && user.image
? user.image
: "https://avatars.dicebear.com/v2/identicon/16042.svg"
}
alt="Profilepic"
/>
</Col>
<Col xs={24} sm={24} md={9} lg={6}>
<Row className="name center-align-row">
{user && user.name
? user.name
: "Not Available"}
</Row>
<Row className="center-align-row tag">
<Tag
color={
user && user.role === "lead"
? "red"
: user && user.role === "core"
? "geekblue"
: "orange"
}
style={{
textTransform: "capitalize",
fontSize: "14px",
textAlign: "center"
}}
>
{user && user.role ? user.role : "member"}
</Tag>
</Row>
<Row className="branch center-align-row">
<Col xs={0} sm={3} md={0}></Col>
<Col
xs={3}
sm={2}
md={4}
lg={3}
className="icon"
>
<FaUserGraduate />
</Col>
<Col
xs={5}
sm={3}
md={6}
lg={6}
className="text"
>
{user && user.branch ? user.branch : "N/A"}
</Col>
<Col
xs={3}
sm={2}
md={4}
lg={3}
className="icon"
>
<AiFillCalendar />
</Col>
<Col
xs={5}
sm={5}
md={6}
lg={6}
className="text"
>
{user && user.year ? user.year : "N/A"}
</Col>
<Col xs={0} sm={0}></Col>
</Row>
</Col>
<Col xs={0} sm={0} md={3} lg={6}></Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Personal Information
</Divider>
<Row>
<Col xs={0} sm={0} md={2} lg={6}></Col>
<Col xs={24} sm={12} md={10} lg={6}>
<Row
style={{ justifyContent: "center" }}
className="contact-container"
>
<Col
xs={6}
sm={6}
md={6}
lg={8}
className="logos"
>
<AiFillPhone style={{ fontSize: "26px" }} />
</Col>
<Col
xs={10}
sm={10}
md={12}
lg={16}
className="info"
>
{user && user.contact
? user.contact
: "Not Provided"}
</Col>
</Row>
</Col>
<Col xs={24} sm={12} md={10} lg={6}>
<Row
style={{
justifyContent: "center"
}}
className="dob-container"
>
<Col xs={6} sm={6} lg={8} className="logos">
<FaBirthdayCake
style={{ fontSize: "24px" }}
/>
</Col>
<Col xs={10} sm={12} lg={12} className="info">
{user && user.dob
? user.dob.split("T")[0]
: "Not Provided"}
</Col>
</Row>
</Col>
<Col xs={0} sm={0} md={2} lg={6}></Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Contact Information
</Divider>
<Row className="social-links-container">
{user ? (
<>
{user.linkedin ? (
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={user.linkedin}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<AiFillLinkedin />
</LogoStyle>
</a>
</Col>
) : null}
{user.twitter ? (
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={user.twitter}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaTwitterSquare />
</LogoStyle>
</a>
</Col>
) : null}
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={`mailto:${user.email}`}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<MdEmail />
</LogoStyle>
</a>
</Col>
{user.portfolio ? (
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={user.portfolio}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FiLink />
</LogoStyle>
</a>
</Col>
) : null}
{user.github ? (
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={user.github}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaGithubSquare />
</LogoStyle>
</a>
</Col>
) : null}
</>
) : null}
</Row>
<Divider
style={{
color: "rgba(0,0,0,.25)"
}}
>
Bio
</Divider>
<Row
style={{
justifyContent: "center",
textAlign: "center"
}}
>
<Col sm={0} md={4} lg={6}></Col>
<Col sm={24} md={16} lg={12}>
{user && user.bio ? user.bio : "No Bio Available"}
</Col>
<Col sm={0} md={4} lg={6}></Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Update Details
</Divider>
<Row>
<Col sm={0} md={4} lg={6}></Col>
<Col
xs={24}
sm={12}
md={8}
lg={6}
className="button-container"
>
<Button
type="primary"
className="login-form-button"
onClick={() => {
setProfileDrawer(true);
}}
>
Update Details
</Button>
</Col>
<Col
xs={24}
sm={12}
md={8}
lg={6}
className="button-container"
>
<Button
type="primary"
className="login-form-button"
onClick={() => {
setPasswordDrawer(true);
}}
>
Change Password
</Button>
</Col>
<Col sm={0} md={4} lg={6}></Col>
</Row>
</>
<UpdateOptions
profileDrawer={profileDrawer}
setProfileDrawer={setProfileDrawer}
userData={Creds}
handleUpdateUser={handleUpdateUser}
Refresh={Refresh}
/>
<UpdateOptions
passwordDrawer={passwordDrawer}
setPasswordDrawer={setPasswordDrawer}
userData={Creds}
handleUpdatePassword={handleUpdatePassword}
/>
</Skeleton>
</>
);
}
Example #5
| Source File: UserProfile.js From react-portal with MIT License | 4 votes |
|
UserProfile = ({ visible, openProfile, uid }) => {
const [user, setUser] = useState(null);
const [showSkeleton, setShowSkeleton] = useState(false);
useEffect(() => {
(async () => {
setShowSkeleton(true);
try {
if (uid) {
const res = await getUserService(uid);
if (res.message === "success") {
setUser(res.data);
setShowSkeleton(false);
} else {
_notification("warning", "Error", res.message);
}
}
} catch (err) {
_notification("error", "Error", err.message);
}
})();
}, [uid]);
return (
<div>
<Modal
visible={visible}
footer={null}
closable={false}
onCancel={() => openProfile(false)}
style={{ top: "20px" }}
>
<IoIosArrowRoundBack
onClick={() => openProfile(false)}
style={{ fontSize: "28px", cursor: "pointer" }}
/>
<Skeleton loading={showSkeleton} active>
{user ? (
<Wrapper>
<Row gutter={16}>
<Col span={10}>
<Avatar
size={120}
src={
<Image
src={user.image}
alt="Profilepic"
/>
}
/>
</Col>
<Col span={14}>
<NameContainer>
<Name>
{user.name} <br />
<Row style={{ paddingTop: "10px" }}>
<Col span={12}>
<Tag
color={
user.role === "lead"
? "red"
: user.role ===
"core"
? "geekblue"
: "orange"
}
style={{
marginBottom: "5px",
textTransform:
"capitalize",
fontSize: "14px",
width: "75%",
textAlign: "center"
}}
>
{user.role}
</Tag>
</Col>
<Designation span="12">
{user.designation}
</Designation>
</Row>
</Name>
<Branch>
<Row gutter={12}>
<Col
span={2}
style={{
paddingTop: "2px"
}}
>
<FaUserGraduate />
</Col>
<Col span={6}>
{user.branch
? user.branch
: "N/A"}
</Col>
<Col
span={3}
style={{
marginTop: "2px"
}}
>
<AiFillCalendar />
</Col>
<Col>
{user.year
? user.year
: "N/A"}
</Col>
</Row>
</Branch>
</NameContainer>
</Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Personal Information
</Divider>
<Row>
<Col span={12}>
<Row>
<Col span={6}>
<Logo>
<AiFillPhone
style={{ fontSize: "26px" }}
/>
</Logo>
</Col>
<Col span={218}>
<Info>
{user.contact
? user.contact
: "Not Provided"}
</Info>
</Col>
</Row>
</Col>
<Col span={12}>
<Row>
<Col span={6}>
<Logo>
<FaBirthdayCake
style={{ fontSize: "24px" }}
/>
</Logo>
</Col>
<Col span={18}>
<Info>
{user.dob
? user.dob.split("T")[0]
: "Not Provided"}
</Info>
</Col>
</Row>
</Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Bio
</Divider>
<Row
style={{
textAlign: "center",
marginRight: "auto !important",
marginLeft: "auto !important",
justifyContent: "center",
display: "flex"
}}
>
<Col span={24}>
{user.bio ? user.bio : "No Bio Available"}
</Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Contact Me
</Divider>
<Row
style={{
textAlign: "center",
marginRight: "auto !important",
marginLeft: "auto !important",
justifyContent: "center",
display: "flex"
}}
>
<Col span={2}></Col>
{user.linkedin ? (
<Col span={4}>
<a
href={user.linkedin}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<AiFillLinkedin />
</LogoStyle>
</a>
</Col>
) : null}
{user.twitter ? (
<Col span={4}>
<a
href={user.twitter}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaTwitterSquare />
</LogoStyle>
</a>
</Col>
) : null}
<Col span={4}>
<a
href={`mailto:${user.email}`}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<MdEmail />
</LogoStyle>
</a>
</Col>
{user.portfolio ? (
<Col span={4}>
<a
href={user.portfolio}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FiLink />
</LogoStyle>
</a>
</Col>
) : null}
{user.github ? (
<Col span={4}>
<a
href={user.github}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaGithubSquare />
</LogoStyle>
</a>
</Col>
) : null}
<Col span={2}></Col>
</Row>
<Row
style={{
float: "right",
paddingBottom: "10px"
}}
>
<span style={{ paddingRight: "10px" }}>
Last active
</span>
<Tag color="green">
{user.lastActiveAt
? moment(user.lastActiveAt).format(
"DD MMM YYYY hh:mm"
)
: "never"}
</Tag>
</Row>
</Wrapper>
) : null}
</Skeleton>
</Modal>
</div>
);
}
Example #6
| Source File: Badge.jsx From konsta with MIT License | 4 votes |
|
export default function BadgePage() {
const isPreview = document.location.href.includes('examplePreview');
return (
<Page>
<Navbar
title="Badge"
left={!isPreview && <NavbarBackLink onClick={() => history.back()} />}
right={
<Link navbar iconOnly>
<Icon
ios={<PersonCircleFill className="w-7 h-7" />}
material={<MdPerson className="w-6 h-6" />}
badge="5"
badgeColors={{ bg: 'bg-red-500' }}
/>
</Link>
}
/>
<Tabbar labels className="left-0 bottom-0 fixed">
<TabbarLink
active
icon={
<Icon
ios={<EnvelopeFill className="w-7 h-7" />}
material={<MdEmail className="w-6 h-6" />}
badge="5"
badgeColors={{ bg: 'bg-green-500' }}
/>
}
label="Inbox"
/>
<TabbarLink
icon={
<Icon
ios={<Calendar className="w-7 h-7" />}
material={<MdToday className="w-6 h-6" />}
badge="7"
badgeColors={{ bg: 'bg-red-500' }}
/>
}
label="Calendar"
/>
<TabbarLink
icon={
<Icon
ios={<CloudUploadFill className="w-7 h-7" />}
material={<MdFileUpload className="w-6 h-6" />}
badge="1"
badgeColors={{ bg: 'bg-red-500' }}
/>
}
label="Upload"
/>
</Tabbar>
<List>
<ListItem
media={<DemoIcon />}
title="Foo Bar"
after={<Badge colors={{ bg: 'bg-gray-500' }}>0</Badge>}
/>
<ListItem
media={<DemoIcon />}
title="Ivan Petrov"
after={<Badge>CEO</Badge>}
/>
<ListItem
media={<DemoIcon />}
title="John Doe"
after={<Badge colors={{ bg: 'bg-green-500' }}>5</Badge>}
/>
<ListItem
media={<DemoIcon />}
title="Jane Doe"
after={<Badge colors={{ bg: 'bg-yellow-500' }}>NEW</Badge>}
/>
</List>
</Page>
);
}
Example #7
| Source File: Tabbar.jsx From konsta with MIT License | 4 votes |
|
export default function TabbarPage() {
const isPreview = document.location.href.includes('examplePreview');
const [activeTab, setActiveTab] = useState('tab-1');
const [isTabbarLabels, setIsTabbarLabels] = useState(false);
return (
<Page>
<Navbar
title="Tabbar"
left={!isPreview && <NavbarBackLink onClick={() => history.back()} />}
/>
<Tabbar labels={isTabbarLabels} className="left-0 bottom-0 fixed">
<TabbarLink
active={activeTab === 'tab-1'}
onClick={() => setActiveTab('tab-1')}
icon={
isTabbarLabels && (
<Icon
ios={<EnvelopeFill className="w-7 h-7" />}
material={<MdEmail className="w-6 h-6" />}
/>
)
}
label="Tab 1"
/>
<TabbarLink
active={activeTab === 'tab-2'}
onClick={() => setActiveTab('tab-2')}
icon={
isTabbarLabels && (
<Icon
ios={<Calendar className="w-7 h-7" />}
material={<MdToday className="w-6 h-6" />}
/>
)
}
label="Tab 2"
/>
<TabbarLink
active={activeTab === 'tab-3'}
onClick={() => setActiveTab('tab-3')}
icon={
isTabbarLabels && (
<Icon
ios={<CloudUploadFill className="w-7 h-7" />}
material={<MdFileUpload className="w-6 h-6" />}
/>
)
}
label="Tab 3"
/>
</Tabbar>
<List>
<ListItem
title="Tabbar Labels"
after={
<Toggle
checked={isTabbarLabels}
onChange={() => setIsTabbarLabels(!isTabbarLabels)}
/>
}
/>
</List>
{activeTab === 'tab-1' && (
<Block strong className="space-y-4">
<p>
<b>Tab 1</b>
</p>
<p>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
accusantium necessitatibus, nihil quas praesentium at quibusdam
cupiditate possimus et repudiandae dolorum delectus quo, similique
voluptatem magni explicabo adipisci magnam ratione!
</span>
<span>
Quod praesentium consequatur autem veritatis, magni alias
consectetur ut quo, voluptatum earum in repellat! Id, autem! Minus
suscipit, ad possimus non voluptatem aliquam praesentium earum
corrupti optio velit tenetur numquam?
</span>
<span>
Illo id ipsa natus quidem dignissimos odio dolore veniam,
accusamus vel assumenda nulla aliquam amet distinctio! Debitis
deserunt, et, cum voluptate similique culpa assumenda inventore,
facilis eveniet iure optio velit.
</span>
<span>
Maiores minus laborum placeat harum impedit, saepe veniam iusto
voluptates delectus omnis consectetur tenetur ex ipsa error
debitis aspernatur amet et alias! Sit odit cum voluptas quae? Est,
omnis eos?
</span>
</p>
</Block>
)}
{activeTab === 'tab-2' && (
<Block strong className="space-y-4">
<p>
<b>Tab 2</b>
</p>
<p>
<span>
Dicta beatae repudiandae ab pariatur mollitia praesentium fuga
ipsum adipisci, quia nam expedita, est dolore eveniet, dolorum
obcaecati? Veniam repellendus mollitia sapiente minus saepe
voluptatibus necessitatibus laboriosam incidunt nihil autem.
</span>
<span>
Officia pariatur qui, deleniti eum, et minus nisi aliquam nobis
hic provident quisquam quidem voluptatem eveniet ducimus. Commodi
ea dolorem, impedit eaque dolor, sint blanditiis magni accusantium
natus reprehenderit minima?
</span>
<span>
Dicta reiciendis ut vitae laborum aut repellendus quasi beatae
nulla sapiente et. Quod distinctio velit, modi ipsam
exercitationem iste quia eaque blanditiis neque rerum optio, nulla
tenetur pariatur ex officiis.
</span>
<span>
Consectetur accusamus delectus sit voluptatem at esse! Aperiam
unde maxime est nemo dicta minus autem esse nobis quibusdam iusto,
reprehenderit harum, perferendis quae. Ipsum sit fugit similique
recusandae quas inventore?
</span>
</p>
</Block>
)}
{activeTab === 'tab-3' && (
<Block strong className="space-y-4">
<p>
<b>Tab 3</b>
</p>
<p>
<span>
Vero esse ab natus neque commodi aut quidem nobis. Unde, quam
asperiores. A labore quod commodi autem explicabo distinctio saepe
ex amet iste recusandae porro consectetur, sed dolorum sapiente
voluptatibus?
</span>
<span>
Commodi ipsum, voluptatem obcaecati voluptatibus illum hic aliquam
veritatis modi natus unde, assumenda expedita, esse eum fugit?
Saepe aliquam ipsam illum nihil facilis, laborum quia, eius ea
dolores molestias dicta.
</span>
<span>
Consequatur quam laudantium, magnam facere ducimus tempora
temporibus omnis cupiditate obcaecati tempore? Odit qui a,
voluptas eveniet similique, doloribus eum dolorum ad, enim ea
itaque voluptates porro minima. Omnis, magnam.
</span>
<span>
Debitis, delectus! Eligendi excepturi rem veritatis, ad
exercitationem tempore eveniet voluptates aut labore harum dolorem
nemo repellendus accusantium quibusdam neque? Itaque iusto
quisquam reprehenderit aperiam maiores dicta iure necessitatibus
est.
</span>
</p>
</Block>
)}
</Page>
);
}
Example #8
| Source File: App.js From trainee-roadmap with MIT License | 4 votes |
|
function App() {
const [name, setName] = useState('');
const [email,setEmail] = useState('');
const [phone, setPhone] = useState('');
const [cep, setCep] = useState('');
const [address, setAddress] = useState('');
const [neighborhood, setNeighborhood] = useState('');
const [ufs, setUfs] = useState([]);
const [cities, setCities] = useState([]);
const [selectedUf, setSelectedUf] = useState('0');
const [selectedCity, setSelectedCity] = useState('0');
const [disableInput, setDisableInput] = useState(false);
//carregar ufs do ibge
useEffect(()=>{
async function loadUfs(){
const {data} = await axios.get('https://servicodados.ibge.gov.br/api/v1/localidades/estados/');
const ufInitials = data.map(uf => uf.sigla);
setUfs(ufInitials);
}
loadUfs();
}, [])
//carregar cidades por UF
useEffect(()=>{
if(selectedUf === ''){
return;
}
async function loadCities(){
const {data} = await axios.get(`https://servicodados.ibge.gov.br/api/v1/localidades/estados/${selectedUf}/municipios`);
const cityNames = data.map(city=>city.nome);
setCities(cityNames);
}
loadCities();
}, [selectedUf]);
//carregar informações do cep
useEffect(()=>{
//não realizar a consulta caso o cep não esteja completo
if(cep.length < 8){
setDisableInput(false);
return;
}
async function loadAddress(){
try{
//consultar cep
const {data} = await axios.get(`https://viacep.com.br/ws/${cep}/json/`);
setSelectedUf(data.uf);
setSelectedCity(data.localidade);
setAddress(data.logradouro);
setNeighborhood(data.bairro);
setDisableInput(true);
} catch(err){
console.log("Houve um erro ao tentar consultar o CEP. " + err);
}
}
loadAddress();
}, [cep]);
function handleSelectedUf(event){
const uf = event.target.value;
setSelectedUf(uf);
}
function handleSelectedCity(event){
const city = event.target.value;
setSelectedCity(city);
}
async function handleSubmit(event){
event.preventDefault();
const userData = {
name,
email,
phone,
cep,
uf: selectedUf,
city: selectedCity,
address,
neighborhood,
}
try{
await axios.post('http://localhost:3333/users/', userData, {
'content-type': 'application/json'
});
return Modal.fire(<h1>Usuário inserido com sucesso</h1>);
} catch(err){
console.log("Houve um erro ao tentar criar o usuário. " + err);
}
}
return (
<Container>
<h1>Formulário legal</h1>
<Form onSubmit={handleSubmit}>
<Input placeholder={'nome'} icon={MdPerson} type={'text'} setState={setName}/>
<Input placeholder={'email'} icon={MdEmail} type={'email'} setState={setEmail}/>
<Input placeholder={'telefone'} icon={MdSmartphone} type={'tel'} setState={setPhone}/>
<Input placeholder={'CEP'} icon={MdHome} type={'text'} setState={setCep}/>
<CitySelect>
<select
name="uf"
id="uf"
onChange={handleSelectedUf}
disabled={disableInput}
required
>
<option value="0" hidden>{selectedUf !== '0' ? selectedUf : 'UF'}</option>
{ufs.map(uf => (
<option key={uf} value={uf}>{uf}</option>
))}
</select>
<select
name="city"
id="city"
onChange={handleSelectedCity}
disabled={disableInput}
>
<option value="0" hidden>{selectedCity !== '0' ? selectedCity : 'Selecione uma cidade'}</option>
{cities.map(city=>(
<option key={city} value={city}>{city}</option>
))}
</select>
</CitySelect>
<Input
placeholder={'endereço'}
type={'text'}
icon={MdPlace}
setState={setAddress}
state={address}
disable={disableInput}
/>
<Input
placeholder={'bairro'}
type={'text'}
icon={FaMapSigns}
setState={setNeighborhood}
state={neighborhood}
disable={disableInput}
/>
<button type="submit">
<p>Enviar</p>
<MdKeyboardTab />
</button>
</Form>
</Container>
);
}
