diff --git a/bun.lockb b/bun.lockb index 42f5785..8b9f981 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 708dcf1..94cab45 100644 --- a/package.json +++ b/package.json @@ -11,25 +11,23 @@ "prepare": "panda codegen && husky install" }, "dependencies": { - "@fontsource/open-sans": "^5.0.12", + "@fontsource/open-sans": "^5.0.20", "@fontsource/permanent-marker": "^5.0.8", "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-brands-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", - "appwrite": "^13.0.0", + "appwrite": "^13.0.1", "entgamers-panda-preset": "0.1.0", - "formik": "^2.4.4", - "framer-motion": "^10.16.4", - "gsap": "^3.12.2", + "formik": "^2.4.5", + "framer-motion": "^10.16.16", "isomorphic-fetch": "^3.0.0", - "next": "13.4.19", - "next-connect": "^1.0.0", - "node-appwrite": "^11.0.0", + "next": "^14.0.4", + "node-appwrite": "^11.1.0", "react": "18.2.0", "react-dom": "18.2.0", - "sharp": "^0.32.5", - "yup": "^1.2.0" + "sharp": "^0.33.1", + "yup": "^1.3.3" }, "devDependencies": { "@commitlint/cli": "^18.4.3", diff --git a/src/app/equipo/page.tsx b/src/app/equipo/page.tsx index c099efb..50506a2 100644 --- a/src/app/equipo/page.tsx +++ b/src/app/equipo/page.tsx @@ -1,34 +1,12 @@ import Typography from '@/components/ui/Typography' -import { css, cx } from '@/styled-system/css' +import { css } from '@/styled-system/css' import { Container } from '@/styled-system/jsx' import { center } from '@/styled-system/patterns' -import { button, card, iconButton } from '@/styled-system/recipes' -import { type TeamMember } from '@/types/User' -import { faFacebook, faInstagram, faTwitch, faTwitter, faYoutube } from '@fortawesome/free-brands-svg-icons' -import { faGlobe } from '@fortawesome/free-solid-svg-icons' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import NextImage from 'next/image' +import { button } from '@/styled-system/recipes' import NextLink from 'next/link' import { type FC } from 'react' -const team: TeamMember[] = [ - { - image: '/images/team/SrJuggernaut.png', - name: 'SrJuggernaut', - role: 'administrator', - description: 'Soy desarrollador web y me gusta jugar videojuegos.', - socialNetworks: [ - { url: 'https://www.facebook.com/SrJuggernaut', label: 'SrJuggernaut Facebook', icon: faFacebook }, - { url: 'https://twitter.com/SrJuggernaut', label: 'SrJuggernaut Twitter', icon: faTwitter }, - { url: 'https://youtube.com/juggernautplays', label: 'SrJuggernaut YouTube', icon: faYoutube }, - { url: 'https://twitch.tv/juggernautplays', label: 'SrJuggernaut Twitch', icon: faTwitch }, - { url: 'https://www.instagram.com/sr_juggernaut', label: 'SrJuggernaut Instagram', icon: faInstagram }, - { url: 'https://srjuggernaut.dev/', label: 'SrJuggernaut Website', icon: faGlobe } - ] - } -] - -const EquipoPage: FC = () => { +const EquipoPage: FC = async () => { return ( Equipo @@ -49,7 +27,7 @@ const EquipoPage: FC = () => { flexWrap: 'wrap' })} > - {team.map((member, index) => ( + {/* {team.map((member, index) => (
{
- ))} + ))} */} + +
+ + ¡Quiero ser administrador! + +
Moderadores Los moderadores son los encargados de mantener el orden en los grupos de la comunidad, así como de ayudar a los usuarios a resolver sus dudas. diff --git a/src/app/equipo/unirse/ApplyForm.tsx b/src/app/equipo/unirse/ApplyForm.tsx index 13c03b2..78d05a3 100644 --- a/src/app/equipo/unirse/ApplyForm.tsx +++ b/src/app/equipo/unirse/ApplyForm.tsx @@ -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(undefined) const formik = useFormik({ 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' })} > -
- - - - {formik.touched.name !== undefined && formik.errors.name !== undefined && ( - - {formik.errors.name} - - )} - - - - - {formik.touched.email !== undefined && formik.errors.email !== undefined && ( - - {formik.errors.email} - - )} - - - - - {formik.touched.discordName !== undefined && formik.errors.discordName !== undefined && ( - - {formik.errors.discordName} - - )} - - - - - {formik.touched.message !== undefined && formik.errors.message !== undefined && ( - - {formik.errors.message} - - )} - - -
+ {alert.title !== undefined && ( + {alert.title} + )} + {alert.message} + + )} + {formik.submitCount > 0 && ( +
+ + + + {formik.touched.name !== undefined && formik.errors.name !== undefined + ? ( + + {formik.errors.name} + + ) + : ( + + Tu nombre. + + )} + + + + + {formik.touched.email !== undefined && formik.errors.email !== undefined + ? ( + + {formik.errors.email} + + ) + : ( + + Tu email, para poder contactarte. + + ) + } + + + + + {formik.touched.discordName !== undefined && formik.errors.discordName !== undefined + ? ( + + {formik.errors.discordName} + + ) + : ( + + Tu nombre de Discord, para poder contactarte. + + ) + } + + + +