diff --git a/src/app/(admins)/administrador/evento/[id_evento]/page.tsx b/src/app/(admins)/administrador/evento/[id_evento]/page.tsx index 551c312..aaf3b44 100644 --- a/src/app/(admins)/administrador/evento/[id_evento]/page.tsx +++ b/src/app/(admins)/administrador/evento/[id_evento]/page.tsx @@ -3,7 +3,7 @@ import EditEvento from '@/containers/edit-evento'; import { useGetApi } from '@/hooks/use-get-api'; import { CuestionarioWithCupo, - GetEventoWithCuestionarios, + GetEventoWithCuestionariosWithCupos, } from '@/types/evento'; import { useParams } from 'next/navigation'; import React, { useState, useEffect } from 'react'; @@ -21,11 +21,12 @@ type Params = { export default function Page() { const params = useParams(); - const { data } = useGetApi( + const { data } = useGetApi( `/evento/${params.id_evento}/cuestionarios` ); - const [evento, setEvento] = useState(null); + const [evento, setEvento] = + useState(null); const [loading, setLoading] = useState(false); useEffect(() => { @@ -47,7 +48,7 @@ export default function Page() { }; const handleEventoActualizado = ( - eventoActualizado: GetEventoWithCuestionarios + eventoActualizado: GetEventoWithCuestionariosWithCupos ) => { setEvento(eventoActualizado); }; @@ -133,10 +134,7 @@ export default function Page() { return (
- + Volver diff --git a/src/app/(admins)/administrador/page.tsx b/src/app/(admins)/administrador/page.tsx index da32aaf..cbf8b05 100644 --- a/src/app/(admins)/administrador/page.tsx +++ b/src/app/(admins)/administrador/page.tsx @@ -1,19 +1,20 @@ 'use client'; import Button from '@/components/button'; -import EventoCard from '@/components/evento-card'; +import CuestionarioCard from '@/components/cuestionario-card'; import { useGetApi } from '@/hooks/use-get-api'; -import { GetEventoWithCuestionarios } from '@/types/evento'; +import { GetEventoWithCuestionariosWithCupos } from '@/types/evento'; import Link from 'next/link'; import React from 'react'; export default function Page() { - const { loading, data, error } = useGetApi( - '/evento/activos/cuestionarios' - ); - const { data: recientes } = useGetApi( + const { loading, data, error } = useGetApi< + GetEventoWithCuestionariosWithCupos[] + >('/evento/activos/cuestionarios'); + const { data: recientes } = useGetApi( '/evento/recientes/cuestionarios' ); + const { data: eventos } = useGetApi('/evento/activos'); if (loading) return
Cargando formularios...
; if (error) return
{error.message}
; @@ -36,7 +37,7 @@ export default function Page() { className={`col-md-6 col-lg-4 my-4 fade-in-up-bounce ${fadeClass}`} key={key} > - +
); })} @@ -53,12 +54,13 @@ export default function Page() { className={`col-md-6 col-lg-4 my-4 fade-in-up-bounce ${fadeClass}`} key={key} > - + ); })} )} +
{JSON.stringify(eventos, null, 2)}
); } diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx index 444e2ac..7381364 100644 --- a/src/app/(public)/page.tsx +++ b/src/app/(public)/page.tsx @@ -1,13 +1,13 @@ 'use client'; import ClientCarousel from '@/client-components/client-carousel'; -import EventoCard from '@/components/evento-card'; +import CuestionarioCard from '@/components/cuestionario-card'; import { useGetApi } from '@/hooks/use-get-api'; -import { GetEventoWithCuestionarios } from '@/types/evento'; +import { GetEventoWithCuestionariosWithCupos } from '@/types/evento'; import React from 'react'; export default function Page() { - const { loading, data } = useGetApi( + const { loading, data } = useGetApi( '/evento/activos/cuestionarios' ); @@ -15,10 +15,12 @@ export default function Page() {
{loading &&
Cargando...
} @@ -27,8 +29,11 @@ export default function Page() { {data.map((item, key) => { const fadeClass = `delay-${(key % 5) + 1}`; return ( -
- +
+
); })} diff --git a/src/components/cuestionario-card.tsx b/src/components/cuestionario-card.tsx new file mode 100644 index 0000000..161b4dc --- /dev/null +++ b/src/components/cuestionario-card.tsx @@ -0,0 +1,106 @@ +'use client'; +import { GetEventoWithCuestionariosWithCupos } from '@/types/evento'; +import Image from 'next/image'; +import Link from 'next/link'; +import React, { useState } from 'react'; +import MarkdownRenderer from './markdown-render'; + +export default function EventoCard({ + evento, + user = 'public', +}: { + evento: GetEventoWithCuestionariosWithCupos; + user?: 'public' | 'administrador' | 'staff'; +}) { + const [verMas, setVerMas] = useState(false); + const descripcion = evento.descripcion_evento ?? ''; + const limite = 100; + + const descripcionRecortada = + descripcion.length > limite && !verMas + ? `${descripcion.slice(0, limite)}...` + : descripcion; + + return ( +
+
+
+ + Banner formulario +
{evento.nombre_evento}
+ +
+
+ +
+
+ {evento.cuestionarios[0]?.cupo_maximo === null ? ( + Sin límite + ) : ( + + {evento.cuestionarios[0]?.cupos_disponibles} cupos disponibles + + )} + + {descripcion.length > limite && ( + + )} +
+ + {evento.cuestionarios.length > 0 && + evento.cuestionarios.map((cuestionario) => ( +
+ {user === 'administrador' || user === 'staff' ? ( + + Ver evento + + ) : cuestionario.cupos_disponibles === 0 && + cuestionario.cupo_maximo !== null ? ( + + ) : ( + + Registro + + )} +
+ ))} +
+
+
+ ); +} diff --git a/src/components/evento-card.tsx b/src/components/evento-card.tsx index 6ea130d..1499a09 100644 --- a/src/components/evento-card.tsx +++ b/src/components/evento-card.tsx @@ -1,106 +1,5 @@ -'use client'; -import { GetEventoWithCuestionarios } from '@/types/evento'; -import Image from 'next/image'; -import Link from 'next/link'; -import React, { useState } from 'react'; -import MarkdownRenderer from './markdown-render'; +import React from 'react'; -export default function EventoCard({ - evento, - user = 'public', -}: { - evento: GetEventoWithCuestionarios; - user?: 'public' | 'administrador' | 'staff'; -}) { - const [verMas, setVerMas] = useState(false); - const descripcion = evento.descripcion_evento ?? ''; - const limite = 100; - - const descripcionRecortada = - descripcion.length > limite && !verMas - ? `${descripcion.slice(0, limite)}...` - : descripcion; - - return ( -
-
-
- - Banner formulario -
{evento.nombre_evento}
- -
-
- -
-
- {evento.cuestionarios[0]?.cupo_maximo === null ? ( - Sin límite - ) : ( - - {evento.cuestionarios[0]?.cupos_disponibles} cupos disponibles - - )} - - {descripcion.length > limite && ( - - )} -
- - {evento.cuestionarios.length > 0 && - evento.cuestionarios.map((cuestionario) => ( -
- {user === 'administrador' || user === 'staff' ? ( - - Ver evento - - ) : cuestionario.cupos_disponibles === 0 && - cuestionario.cupo_maximo !== null ? ( - - ) : ( - - Registro - - )} -
- ))} -
-
-
- ); +export default function EventoCard() { + return
EventoCard
; } diff --git a/src/containers/edit-evento.tsx b/src/containers/edit-evento.tsx index 215c90a..25cbc21 100644 --- a/src/containers/edit-evento.tsx +++ b/src/containers/edit-evento.tsx @@ -4,7 +4,7 @@ import Button from '@/components/button'; import Input from '@/components/input'; import Select from '@/components/select'; import { CreateEventoType } from '@/types/create-evento'; -import { GetEventoWithCuestionarios } from '@/types/evento'; +import { GetEventoWithCuestionariosWithCupos } from '@/types/evento'; import axiosInstance from '@/utils/api-config'; import { formatDateLocal } from '@/utils/date-utils'; import { getAxiosError } from '@/utils/errors-utils'; @@ -15,9 +15,11 @@ import toast from 'react-hot-toast'; const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false }); interface EditEventoProps { - evento: GetEventoWithCuestionarios; + evento: GetEventoWithCuestionariosWithCupos; handleChange: (field: keyof CreateEventoType, value: string | Date) => void; - handleOnChange: (eventoActualizado: GetEventoWithCuestionarios) => void; + handleOnChange: ( + eventoActualizado: GetEventoWithCuestionariosWithCupos + ) => void; } export default function EditEvento({ @@ -25,7 +27,6 @@ export default function EditEvento({ handleChange, handleOnChange, }: EditEventoProps) { - const [loading, setLoading] = useState(false); const [nuevoBanner, setNuevoBanner] = useState(null); diff --git a/src/types/evento.d.ts b/src/types/evento.d.ts index b6f1a35..fa35152 100644 --- a/src/types/evento.d.ts +++ b/src/types/evento.d.ts @@ -1,4 +1,4 @@ -import { TipoPregunta, TiposValidacion } from "./create-formulario"; +import { TipoPregunta, TiposValidacion } from './create-formulario'; export interface GetEvento { id_evento: number; @@ -34,7 +34,6 @@ export interface CuestionarioWithCupo extends Cuestionario { cupos_usados: number; cupos_disponibles: number; } - export interface GetCuestionario { tipo_cuestionario: { id_tipo_cuestionario: number; @@ -82,10 +81,15 @@ export interface CuestionarioWithSecciones extends Cuestionario { }[]; } -export interface GetEventoWithCuestionarios extends GetEvento { +export interface GetEventoWithCuestionariosWithCupos extends GetEvento { cuestionarios: CuestionarioWithCupo[]; } export interface GetEventoWithCuestionario extends GetEvento { cuestionario: Cuestionario; } + +export interface GetEventoWithCuestionarios extends GetEvento { + cuestionarios: Cuestionario[]; + total_cuestionarios: number; +}