feat: static equipo unirse
This commit is contained in:
@@ -1,19 +1,25 @@
|
||||
'use client'
|
||||
import Alert from '@/components/ui/Alert'
|
||||
import Button from '@/components/ui/Button'
|
||||
import Typography from '@/components/ui/Typography'
|
||||
import FormGroup from '@/components/ui/form/FormGroup'
|
||||
import Input from '@/components/ui/form/Input'
|
||||
import TextArea from '@/components/ui/form/TextArea'
|
||||
import { createTeamApply } from '@/services/frontend/teamApply'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { type Alert as AlertType } from '@/types/feedback'
|
||||
import { type TeamApplyData } from '@/types/teamApply'
|
||||
import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { FontAwesomeIcon, type FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
|
||||
import { AppwriteException } from 'appwrite'
|
||||
import { useFormik } from 'formik'
|
||||
import { AnimatePresence, motion } from 'framer-motion'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import { useEffect, type FC } from 'react'
|
||||
import { useEffect, useState, type FC } from 'react'
|
||||
|
||||
const ApplyForm: FC = () => {
|
||||
const searchParams = useSearchParams()
|
||||
const [alert, setAlert] = useState<AlertType | undefined>(undefined)
|
||||
|
||||
const formik = useFormik<TeamApplyData>({
|
||||
initialValues: {
|
||||
@@ -23,8 +29,25 @@ const ApplyForm: FC = () => {
|
||||
message: '',
|
||||
role: 'administrator'
|
||||
},
|
||||
onSubmit: (values) => {
|
||||
console.log(values)
|
||||
onSubmit: async (values) => {
|
||||
try {
|
||||
await createTeamApply(values)
|
||||
} catch (error) {
|
||||
if (error instanceof AppwriteException) {
|
||||
setAlert({
|
||||
title: 'Error al enviar el formulario',
|
||||
message: error.message,
|
||||
severity: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
console.error('Error al enviar el formulario', error)
|
||||
setAlert({
|
||||
severity: 'error',
|
||||
title: 'Error al enviar el formulario',
|
||||
message: 'Hubo un error al enviar el formulario, por favor, intenta nuevamente.'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
useEffect(() => {
|
||||
@@ -92,77 +115,126 @@ const ApplyForm: FC = () => {
|
||||
gap: 'medium'
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
order: { base: 2, md: 1 }
|
||||
})}
|
||||
>
|
||||
<FormGroup>
|
||||
<label htmlFor='name'>Nombre</label>
|
||||
<Input
|
||||
id='name'
|
||||
type='text'
|
||||
value={formik.values.name}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
{formik.touched.name !== undefined && formik.errors.name !== undefined && (
|
||||
<Typography variant='caption' color='danger'>
|
||||
{formik.errors.name}
|
||||
</Typography>
|
||||
)}
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<label htmlFor='email'>Email</label>
|
||||
<Input
|
||||
id='email'
|
||||
type='email'
|
||||
value={formik.values.email}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
{formik.touched.email !== undefined && formik.errors.email !== undefined && (
|
||||
<Typography variant='caption' color='danger'>
|
||||
{formik.errors.email}
|
||||
</Typography>
|
||||
)}
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<label htmlFor='discordName'>Nombre de Discord</label>
|
||||
<Input
|
||||
id='discordName'
|
||||
type='text'
|
||||
value={formik.values.discordName}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
{formik.touched.discordName !== undefined && formik.errors.discordName !== undefined && (
|
||||
<Typography variant='caption' color='danger'>
|
||||
{formik.errors.discordName}
|
||||
</Typography>
|
||||
)}
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<label htmlFor='message'>Mensaje</label>
|
||||
<Input
|
||||
id='message'
|
||||
type='text'
|
||||
value={formik.values.message}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
{formik.touched.message !== undefined && formik.errors.message !== undefined && (
|
||||
<Typography variant='caption' color='danger'>
|
||||
{formik.errors.message}
|
||||
</Typography>
|
||||
)}
|
||||
</FormGroup>
|
||||
<Button
|
||||
type='submit'
|
||||
{alert !== undefined && (
|
||||
<Alert
|
||||
severity={alert.severity}
|
||||
>
|
||||
Enviar
|
||||
</Button>
|
||||
</div>
|
||||
{alert.title !== undefined && (
|
||||
<Typography variant='h5' component='div'>{alert.title}</Typography>
|
||||
)}
|
||||
{alert.message}
|
||||
</Alert>
|
||||
)}
|
||||
{formik.submitCount > 0 && (
|
||||
<div
|
||||
className={css({
|
||||
order: { base: 2, md: 1 }
|
||||
})}
|
||||
>
|
||||
<FormGroup>
|
||||
<label htmlFor='name'>Nombre</label>
|
||||
<Input
|
||||
id='name'
|
||||
type='text'
|
||||
value={formik.values.name}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
{formik.touched.name !== undefined && formik.errors.name !== undefined
|
||||
? (
|
||||
<Typography variant='caption' color='danger'>
|
||||
{formik.errors.name}
|
||||
</Typography>
|
||||
)
|
||||
: (
|
||||
<Typography variant='caption' color='info'>
|
||||
Tu nombre.
|
||||
</Typography>
|
||||
)}
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<label htmlFor='email'>Email</label>
|
||||
<Input
|
||||
id='email'
|
||||
type='email'
|
||||
value={formik.values.email}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
{formik.touched.email !== undefined && formik.errors.email !== undefined
|
||||
? (
|
||||
<Typography variant='caption' color='danger'>
|
||||
{formik.errors.email}
|
||||
</Typography>
|
||||
)
|
||||
: (
|
||||
<Typography variant='caption' color='info'>
|
||||
Tu email, para poder contactarte.
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<label htmlFor='discordName'>Nombre de Discord</label>
|
||||
<Input
|
||||
id='discordName'
|
||||
type='text'
|
||||
value={formik.values.discordName}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
{formik.touched.discordName !== undefined && formik.errors.discordName !== undefined
|
||||
? (
|
||||
<Typography variant='caption' color='danger'>
|
||||
{formik.errors.discordName}
|
||||
</Typography>
|
||||
)
|
||||
: (
|
||||
<Typography variant='caption' color='info'>
|
||||
Tu nombre de Discord, para poder contactarte.
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<label htmlFor='message'>Mensaje</label>
|
||||
<TextArea
|
||||
id='message'
|
||||
value={formik.values.message}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
{formik.touched.message !== undefined && formik.errors.message !== undefined
|
||||
? (
|
||||
<Typography variant='caption' color='danger'>
|
||||
{formik.errors.message}
|
||||
</Typography>
|
||||
)
|
||||
: (
|
||||
<Typography variant='caption' color='info'>
|
||||
¿Por que te gustaría unirte al equipo?, ¿Que te gustaría hacer?, etc.
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
</FormGroup>
|
||||
<div
|
||||
className={css({
|
||||
paddingBlock: 'medium'
|
||||
})}
|
||||
>
|
||||
<Button
|
||||
type='submit'
|
||||
disabled={!formik.isValid || !formik.dirty}
|
||||
fullWidth
|
||||
|
||||
>
|
||||
Enviar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<div
|
||||
className={css({
|
||||
overflow: 'hidden',
|
||||
@@ -186,7 +258,7 @@ const ApplyForm: FC = () => {
|
||||
<Typography variant='h3'>Requisitos</Typography>
|
||||
<ul className="fa-ul">
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Imparcialidad</strong>
|
||||
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Imparcialidad</strong>
|
||||
<br />
|
||||
La comunidad esta conformada por amigos y conocidos, por lo tanto es importante poder actuar de forma imparcial y responsable.
|
||||
</li>
|
||||
@@ -194,7 +266,7 @@ const ApplyForm: FC = () => {
|
||||
<Typography variant='h3'>Beneficios</Typography>
|
||||
<ul className="fa-ul">
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Experiencia</strong>
|
||||
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Experiencia</strong>
|
||||
<br />
|
||||
Uno de los objetivos de la comunidad es brindar experiencia en gestión y desarrollo de proyectos equiparable a un entorno laboral, que sea comprobable y útil.
|
||||
</li>
|
||||
@@ -216,7 +288,7 @@ const ApplyForm: FC = () => {
|
||||
<Typography variant='h3'>Requisitos</Typography>
|
||||
<ul className="fa-ul">
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Profesionalismo</strong>
|
||||
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Profesionalismo</strong>
|
||||
<br />
|
||||
La comunidad siempre intenta conseguir el mayor nivel de calidad en todos sus proyectos, por lo que buscamos gente dispuesta a otorgar este nivel de profesionalismo para el disfrute de la comunidad.
|
||||
</li>
|
||||
@@ -224,7 +296,7 @@ const ApplyForm: FC = () => {
|
||||
<Typography variant='h3'>Beneficios</Typography>
|
||||
<ul className="fa-ul">
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Apoyo</strong>
|
||||
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Apoyo</strong>
|
||||
<br />
|
||||
Puedes contar con el apoyo de la comunidad para tus proyectos, ya sea en forma de difusión, asesoramiento o recursos.
|
||||
</li>
|
||||
@@ -246,17 +318,17 @@ const ApplyForm: FC = () => {
|
||||
<Typography variant='h3'>Requisitos</Typography>
|
||||
<ul className="fa-ul">
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Profesionalismo</strong>
|
||||
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Profesionalismo</strong>
|
||||
<br />
|
||||
La comunidad siempre intenta conseguir el mayor nivel de calidad en todos sus proyectos, por lo que buscamos gente dispuesta a otorgar este nivel de profesionalismo para el disfrute de la comunidad.
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Constancia</strong>
|
||||
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Constancia</strong>
|
||||
<br />
|
||||
La comunidad busca gente que en sus posibilidades sea activa, que pueda estar al tanto de lo que pasa en ella.
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Proactividad</strong>
|
||||
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Proactividad</strong>
|
||||
<br />
|
||||
La comunidad esta en constante crecimiento, por eso, buscamos gente que ayude a buscar nuevas oportunidades para diferentes proyectos y actividades de interés a la comunidad.
|
||||
</li>
|
||||
@@ -264,12 +336,12 @@ const ApplyForm: FC = () => {
|
||||
<Typography variant='h3'>Beneficios</Typography>
|
||||
<ul className="fa-ul">
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Experiencia</strong>
|
||||
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Experiencia</strong>
|
||||
<br />
|
||||
Uno de los objetivos de la comunidad es brindar experiencia en gestión y desarrollo de proyectos equiparable a un entorno laboral, que sea comprobable y útil.
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Capacitación</strong>
|
||||
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Capacitación</strong>
|
||||
<br />
|
||||
La comunidad buscara dar capacitación a sus miembros en lo referido a herramientas y procedimientos utilizados.
|
||||
</li>
|
||||
@@ -283,4 +355,5 @@ const ApplyForm: FC = () => {
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApplyForm
|
||||
|
||||
Reference in New Issue
Block a user