react-icons/fi#FiCamera TypeScript Examples
The following examples show how to use
react-icons/fi#FiCamera.
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.tsx From gobarber-web with MIT License | 4 votes |
|
Profile: React.FC = () => {
const formRef = useRef<FormHandles>(null);
const { addToast } = useToast();
const history = useHistory();
const { user, updateUser } = useAuth();
const handleSubmit = useCallback(
async (data: ProfileFormData) => {
try {
formRef.current?.setErrors({});
const schema = Yup.object().shape({
name: Yup.string().required('Nome é obrigatório'),
email: Yup.string()
.required('E-mail é obrigatório')
.email('Digite um e-mail válido'),
old_password: Yup.string(),
password: Yup.string().when('old_password', {
is: val => !!val.length,
then: Yup.string()
.min(6, 'No mínimo 6 dígitos')
.required('Campo obrigatório'),
otherwise: Yup.string(),
}),
password_confirmation: Yup.string()
.when('old_password', {
is: val => !!val.length,
then: Yup.string().required('Campo obrigatório'),
otherwise: Yup.string(),
})
.oneOf([Yup.ref('password'), null], 'Confirmação incorreta'),
});
await schema.validate(data, { abortEarly: false });
const {
name,
email,
old_password,
password,
password_confirmation,
} = data;
const formData = {
name,
email,
...(old_password
? {
old_password,
password,
password_confirmation,
}
: {}),
};
const response = await api.put('/profile', formData);
updateUser(response.data);
history.push('/dashboard');
addToast({
type: 'success',
title: 'Perfil atualizado!',
description:
'Suas informações do perfil foram atualizadas com sucesso!',
});
} catch (err) {
if (err instanceof Yup.ValidationError) {
const errors = getValidationErrors(err);
formRef.current?.setErrors(errors);
return;
}
addToast({
type: 'error',
title: 'Erro na atualização',
description:
'Ocorreu um error ao atualizar o perfil, tente novamente.',
});
}
},
[addToast, history, updateUser],
);
const handleAvatarChange = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
const data = new FormData();
data.append('avatar', e.target.files[0]);
api.patch('/users/avatar', data).then(response => {
updateUser(response.data);
addToast({
type: 'success',
title: 'Avatar atualizado',
});
});
}
},
[addToast, updateUser],
);
return (
<Container>
<header>
<div>
<Link to="/dashboard">
<FiArrowLeft size={32} />
</Link>
</div>
</header>
<Content>
<Form
ref={formRef}
initialData={{ name: user.name, email: user.email }}
onSubmit={handleSubmit}
>
<AvatarInput>
<img
src={
user.avatar_url ||
'https://api.adorable.io/avatars/186/[email protected]'
}
alt={user.name}
/>
<label htmlFor="avatar">
<FiCamera size={20} />
<input
data-testid="input-file"
type="file"
id="avatar"
onChange={handleAvatarChange}
/>
</label>
</AvatarInput>
<h1>Meu Perfil</h1>
<Input name="name" icon={FiUser} placeholder="Nome" />
<Input name="email" icon={FiMail} placeholder="E-mail" />
<Input
containerStyle={{ marginTop: 24 }}
name="old_password"
icon={FiLock}
type="password"
placeholder="Senha atual"
/>
<Input
name="password"
icon={FiLock}
type="password"
placeholder="Nova senha"
/>
<Input
name="password_confirmation"
icon={FiLock}
type="password"
placeholder="Confirmar senha"
/>
<Button type="submit">Confirmar mudanças</Button>
</Form>
</Content>
</Container>
);
}
Example #2
| Source File: index.tsx From front-entenda-direito with GNU General Public License v3.0 | 4 votes |
|
Profile: React.FC = () => {
const formRef = useRef<FormHandles>(null);
const { addToast } = useToast();
const { user, updateUser } = useAuth();
const history = useHistory();
const handleSubmit = useCallback(
async (data: ProfileFormData) => {
try {
formRef.current?.setErrors({});
const schema = Yup.object().shape({
name: Yup.string().required('Nome obrigatório'),
email: Yup.string()
.required('E-mail obrigatório')
.email('Digite um e-mail valido'),
old_password: Yup.string(),
password: Yup.string().when('old_password', {
is: (val) => !!val.length,
then: Yup.string()
.min(6, 'No mínimo 06 dígitos')
.required('Campo obrigatório'),
otherwise: Yup.string(),
}),
password_confirmation: Yup.string()
.when('old_password', {
is: (val) => !!val.length,
then: Yup.string().required('Campo obrigatório'),
otherwise: Yup.string(),
})
.oneOf([Yup.ref('password'), null], 'Confirmação incorreta'),
});
await schema.validate(data, {
abortEarly: false,
});
const {
name,
email,
old_password,
password,
password_confirmation,
} = data;
const formData = {
name,
email,
...(old_password && {
old_password,
password,
password_confirmation,
}),
};
const response = await api.put('/profile', formData);
updateUser(response.data);
addToast({
type: 'success',
title: 'Perfil atualizado! ?',
description:
'Suas informações do perfil foram atualizadas com sucesso! ?',
});
history.push('/dashboard');
} catch (err) {
if (err instanceof Yup.ValidationError) {
const errors = getValidationErrors(err);
formRef.current?.setErrors(errors);
return;
}
addToast({
type: 'error',
title: 'Erro na atualização ?',
description:
'?️ Ocorreu um erro ao atualizar perfil, tente novamente. ?️',
});
}
},
[addToast, history, updateUser],
);
const handleAvatarChange = useCallback(
(event: ChangeEvent<HTMLInputElement>) => {
if (event.target.files) {
const data = new FormData();
data.append('avatar', event.target.files[0]);
api.patch('/users/avatar', data).then((response) => {
updateUser(response.data);
addToast({
type: 'success',
title: 'Avatar atualizado!',
});
});
}
},
[addToast, updateUser],
);
return (
<Container>
<header>
<div>
<Link to="/dashboard">
<FiArrowLeft />
</Link>
</div>
</header>
<Content>
<Form
ref={formRef}
initialData={{
name: user.name,
email: user.email,
}}
onSubmit={handleSubmit}
>
<AvatarInput>
<img src={user.avatar_url} alt={user.name} />
<label htmlFor="avatar">
<FiCamera />
<input type="file" id="avatar" onChange={handleAvatarChange} />
</label>
</AvatarInput>
<h1>Meu perfil</h1>
<Input name="name" icon={FiUser} placeholder="Nome" />
<Input name="email" icon={FiMail} placeholder="E-mail" />
<Input
containerStyle={{ marginTop: 24 }}
name="old_password"
icon={FiLock}
type="password"
placeholder="Senha atual"
/>
<Input
name="password"
icon={FiLock}
type="password"
placeholder="Nova senha"
/>
<Input
name="password_confirmation"
icon={FiLock}
type="password"
placeholder="Confirmar senha"
/>
<Button type="submit">Confirmar mudanças</Button>
</Form>
</Content>
</Container>
);
}
Example #3
| Source File: index.tsx From gobarber-project with MIT License | 4 votes |
|
Profile: React.FC = () => {
const formRef = useRef<FormHandles>(null);
const { addToast } = useToast();
const history = useHistory();
const { user, updateUser } = useAuth();
const handleSubmit = useCallback(
async (data: IProfileData) => {
try {
formRef.current?.setErrors({});
const schema = Yup.object().shape({
name: Yup.string().required('Nome obrigatório'),
email: Yup.string()
.required('Email obrigatário')
.email('Digite um e-mail válido'),
old_password: Yup.string(),
password: Yup.string().when('old_password', {
is: val => !!val.length,
then: Yup.string().required('Campo obrigatório'),
otherwise: Yup.string(),
}),
password_confirmation: Yup.string()
.when('old_password', {
is: val => !!val.length,
then: Yup.string().required('Campo obrigatório'),
otherwise: Yup.string(),
})
.oneOf([Yup.ref('password')], 'Confirmação incorreta'),
});
await schema.validate(data, {
abortEarly: false,
});
const {
name,
email,
old_password,
password,
password_confirmation,
} = data;
const formData = {
name,
email,
...(old_password && {
old_password,
password,
password_confirmation,
}),
};
const response = await api.put('/profile', formData);
updateUser(response.data);
history.push('/dashboard');
addToast({
type: 'success',
title: 'Perfil atualizado!',
description:
'Suas informações do perfil foram atualizadas com sucesso!',
});
} catch (err) {
if (err instanceof Yup.ValidationError) {
const errors = getValidationErrors(err);
formRef.current?.setErrors(errors);
return;
}
addToast({
type: 'error',
title: 'Erro na atualização',
description: 'Ocorreu um erro ao atualizar perfil, tente novamente.',
});
}
},
[addToast, history, updateUser],
);
const handleAvatarChange = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
const data = new FormData();
data.append('avatar', e.target.files[0]);
api.patch('/users/avatar', data).then(response => {
updateUser(response.data);
addToast({
type: 'success',
title: 'Avatar atualizado',
});
});
}
},
[addToast, updateUser],
);
return (
<Container>
<header>
<div>
<Link to="/dashboard">
<FiArrowLeft />
</Link>
</div>
</header>
<Content>
<Form
ref={formRef}
onSubmit={handleSubmit}
initialData={{
name: user.name,
email: user.email,
}}
>
<AvatarInput>
{user.avatar_url ? (
<img src={user.avatar_url} alt={user.name} />
) : (
<img
src={`https://avatar.oxro.io/avatar?name=${user.name}`}
alt={user.name}
/>
)}
<label htmlFor="avatar">
<FiCamera />
<input type="file" id="avatar" onChange={handleAvatarChange} />
</label>
</AvatarInput>
<h1>Meu Perfil</h1>
<section>
<Input name="name" icon={FiUser} placeholder="Nome" />
<Input name="email" icon={FiMail} placeholder="E-mail" />
</section>
<section>
<Input
name="old_password"
icon={FiLock}
type="password"
placeholder="Senha atual"
/>
<Input
name="password"
icon={FiLock}
type="password"
placeholder="Nova senha"
/>
<Input
name="password_confirmation"
icon={FiLock}
type="password"
placeholder="Confirmar senha"
/>
</section>
<Button type="submit">Atualizar perfil</Button>
</Form>
</Content>
</Container>
);
}
Example #4
| Source File: index.tsx From GoBarber with MIT License | 4 votes |
|
Profile: React.FC = () => {
const formRef = useRef<FormHandles>(null);
const { addToast } = useToast();
const history = useHistory();
const { user, updateUser } = useAuth();
const handleSubmit = useCallback(
async (data: ProfileFormData) => {
try {
formRef.current?.setErrors({});
const schema = Yup.object().shape({
name: Yup.string().required('Nome obrigatório'),
email: Yup.string()
.email('Digite email válido')
.required('Email obrigatório'),
oldPassword: Yup.string(),
password: Yup.string().when('oldPassword', {
is: String,
then: Yup.string().min(6),
otherwise: Yup.string(),
}),
passwordConfirmation: Yup.string()
.when('oldPassword', {
is: String,
then: Yup.string().required('Campo obrigatório'),
otherwise: Yup.string(),
})
.oneOf([Yup.ref('password')], 'Senhas diferentes'),
});
await schema.validate(data, {
abortEarly: false,
});
const {
name,
email,
oldPassword,
password,
passwordConfirmation,
} = data;
const formData = {
name,
email,
...(oldPassword
? {
oldPassword,
password,
passwordConfirmation,
}
: {}),
};
console.log(formData);
const response = await api.put('/profile', formData);
updateUser(response.data);
history.push('/dashboard');
addToast({
type: 'success',
title: 'Perfil alterado',
description: 'Suas alterações foram salvas com sucesso',
});
history.push('/');
} catch (err) {
const errors = getValidationErrors(err);
formRef.current?.setErrors(errors);
addToast({
type: 'error',
title: 'Erro na atualização',
description: 'Ocorreu um erro ao atualizar o perfil',
});
}
},
[addToast, history, updateUser],
);
const handleAvatarChange = useCallback(
(event: ChangeEvent<HTMLInputElement>) => {
if (event.target.files) {
const data = new FormData();
data.append('avatar', event.target.files[0]);
api
.patch('/users/avatar', data)
.then((response) => {
updateUser(response.data);
addToast({
type: 'success',
title: 'Avatar atualizado',
});
})
.catch(() => {
addToast({
type: 'error',
title: 'Erro ao atualizar avatar',
});
});
}
},
[addToast, updateUser],
);
return (
<Container>
<Header>
<div>
<Link to="/dashboard">
<FiArrowLeft />
</Link>
</div>
</Header>
<Content>
<Form
initialData={{
name: user.name,
email: user.email,
}}
ref={formRef}
onSubmit={handleSubmit}
>
<AvatarInput>
<img src={user.avatar_url} alt={user.name} />
<label htmlFor="avatar">
<FiCamera />
<input type="file" id="avatar" onChange={handleAvatarChange} />
</label>
</AvatarInput>
<h1>Meu Perfil</h1>
<Input name="name" icon={FiUser} type="text" placeholder="Nome" />
<Input name="email" icon={FiMail} type="email" placeholder="E-mail" />
<Input
name="oldPassword"
icon={FiLock}
type="password"
placeholder="Senha atual"
/>
<Input
name="password"
icon={FiLock}
type="password"
placeholder="Nova senha"
/>
<Input
name="passwordConfirmation"
icon={FiLock}
type="password"
placeholder="Confirme a nova senha"
/>
<Button type="submit">Confirmar mudanças</Button>
</Form>
</Content>
</Container>
);
}
