feat: equipo pages now uses data from database package

src/app/equipo/page.tsx

@@ -3,38 +3,40 @@ import { css, cx } from '@/styled-system/css'
 import { Container } from '@/styled-system/jsx'
 import { center } from '@/styled-system/patterns'
 import { button, card } from '@/styled-system/recipes'
-import { getClanMembers, getClanes } from 'entgamers-database/backend/clanes'
+import { getClanMembers } from 'entgamers-database/backend/clanes'
-import { getUser, type UserWithPreferencesList } from 'entgamers-database/backend/users'
+import { ADMIN_CLAN_ID, COLLABORATOR_CLAN_ID, MODERATOR_CLAN_ID, ensureAdministrativeClans } from 'entgamers-database/backend/clanes/administrative'
+import { getUser, type UserList } from 'entgamers-database/backend/users'
 import NextImage from 'next/image'
 import NextLink from 'next/link'
 import { type Models } from 'node-appwrite'
 import { type FC } from 'react'
 
 interface GetTeamsResponse {
-  admins: UserWithPreferencesList
+  admins: UserList & { id: string }
-  moderators: UserWithPreferencesList
+  moderators: UserList & { id: string }
-  collaborators: UserWithPreferencesList
+  collaborators: UserList & { id: string }
 }
 
 const getTeams = async (): Promise<GetTeamsResponse> => {
-  const allClanes = await getClanes()
+  await ensureAdministrativeClans()
-  const adminClanId = allClanes.teams.find(clan => clan.name === 'Admin')?.$id
+
-  const moderatorClanId = allClanes.teams.find(clan => clan.name === 'Moderator')?.$id
+  const adminMembers: Models.MembershipList = await getClanMembers(ADMIN_CLAN_ID)
-  const collaboratorClanId = allClanes.teams.find(clan => clan.name === 'Collaborator')?.$id
+  const moderatorMembers: Models.MembershipList = await getClanMembers(MODERATOR_CLAN_ID)
-  const adminMembers: Models.MembershipList = adminClanId !== undefined ? await getClanMembers(adminClanId) : { total: 0, memberships: [] }
+  const collaboratorMembers: Models.MembershipList = await getClanMembers(COLLABORATOR_CLAN_ID)
-  const moderatorMembers: Models.MembershipList = moderatorClanId !== undefined ? await getClanMembers(moderatorClanId) : { total: 0, memberships: [] }
+
-  const collaboratorMembers: Models.MembershipList = collaboratorClanId !== undefined ? await getClanMembers(collaboratorClanId) : { total: 0, memberships: [] }
   const adminsPromises = adminMembers.memberships.map(async membership => await getUser(membership.userId))
   const moderatorsPromises = moderatorMembers.memberships.map(async membership => await getUser(membership.userId))
   const collaboratorsPromises = collaboratorMembers.memberships.map(async membership => await getUser(membership.userId))
+
   const [admins, moderators, collaborators] = await Promise.all([
     Promise.all(adminsPromises), Promise.all(moderatorsPromises), Promise.all(collaboratorsPromises)
   ])
-  return { admins: { total: admins.length, users: admins }, moderators: { total: moderators.length, users: moderators }, collaborators: { total: collaborators.length, users: collaborators } }
+
+  return { admins: { id: ADMIN_CLAN_ID, total: admins.length, users: admins }, moderators: { id: MODERATOR_CLAN_ID, total: moderators.length, users: moderators }, collaborators: { id: COLLABORATOR_CLAN_ID, total: collaborators.length, users: collaborators } }
 }
 
 const EquipoPage: FC = async () => {
-  const { admins } = await getTeams()
+  const { admins, moderators, collaborators } = await getTeams()
   return (
     <Container>
       <Typography variant="h1" align="center">Equipo</Typography>
@@ -90,87 +92,77 @@ const EquipoPage: FC = async () => {
           </Container>
         )
         : (
-          <>
+          <Typography variant="body2" color="info">
-            <Typography variant="body2" color="info">
+            Ups, parece que ahora mismo no hay administradores, pero en EntGamers siempre estamos estamos buscando gente que quiera organizar cosas para la comunidad, puedes contactarnos para formar parte de nuestro equipo haciendo click en el siguiente enlace.
-              Ups, parece que ahora mismo no hay administradores, pero en EntGamers siempre estamos estamos buscando gente que quiera organizar cosas para la comunidad, puedes contactarnos para formar parte de nuestro equipo haciendo click en el siguiente enlace.
+          </Typography>
-            </Typography>
-          </>
         )
       }
       <div className={center()}>
         <NextLink
           className={button({ color: 'info' })}
-          href="/equipo/unirse?role=Admin"
+          href={`/equipo/unirse?role=${ADMIN_CLAN_ID}`}
         >
           ¡Quiero ser Administrador!
         </NextLink>
       </div>
-      {/* <Container
-        className={css({
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: 'medium',
-          flexWrap: 'wrap'
-        })}
-      >
-        {team.map((member, index) => (
-          <div
-            key={`team-member-${index}`}
-            className={cx(card({ variant: 'retro' }).body, css({
-              maxWidth: '300px',
-              textAlign: 'center'
-            }))}
-          >
-            <div
-              className={cx(card({ variant: 'retro' }).media, center())}
-            >
-              <NextImage
-                src={member.image}
-                alt={member.name}
-                width={120}
-                height={120}
-              />
-            </div>
-            <div
-              className={card({ variant: 'retro' }).content}
-            >
-              <h3>{member.name}</h3>
-              <p>{member.description}</p>
-              <div
-                className={css({
-                  display: 'flex',
-                  justifyContent: 'center',
-                  gap: 'small',
-                  flexWrap: 'wrap'
-                })}
-              >
-                {member.socialNetworks.map((socialNetwork, index) => (
-                  <a
-                    key={`team-member-${index}-social-network`}
-                    className={iconButton()}
-                    href={socialNetwork.url}
-                  >
-                    <FontAwesomeIcon icon={socialNetwork.icon} fixedWidth />
-                  </a>
-                ))}
-              </div>
-            </div>
-          </div>
-        ))}
-      </Container> */}
       <Typography variant="h2" align="center">Moderadores</Typography>
       <Typography variant="body1">
         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.
       </Typography>
-      <Typography variant="body2" color="info">
+      {moderators.total >= 1
-        Ups, parece que ahora mismo no hay moderadores, pero en EntGamers siempre estamos buscando gente que quiera ayudar a la comunidad. si quieres ser moderador, puedes hacer click en el botón de abajo.
+        ? (
-      </Typography>
+          <Container
+            className={css({
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 'medium',
+              flexWrap: 'wrap',
+              padding: 'medium',
+              width: '100%'
+            })}
+          >
+            {moderators.users.map((user, index) => (
+              <div
+                key={`moderator-${index}`}
+                className={cx(card({ variant: 'retro' }).body, css({
+                  maxWidth: '300px',
+                  textAlign: 'center'
+                }))}
+              >
+                <div
+                  className={cx(card({ variant: 'retro' }).media, center())}
+                >
+                  <NextImage
+                    src={user.prefs.profilePicture ?? '/images/EntGamers.png'}
+                    alt={user.name !== '' ? user.name : `Usuario ${index + 1} avatar`}
+                    width={120}
+                    height={120}
+                  />
+                </div>
+                <div
+                  className={card({ variant: 'retro' }).content}
+                >
+                  <Typography variant="h3" align="center">{user.name !== '' ? user.name : `Usuario ${index + 1}`}</Typography>
+                  {user.prefs.bio !== undefined && user.prefs.bio !== '' && (
+                    <Typography variant="body1">{user.prefs.bio}</Typography>
+                  )}
+                </div>
+              </div>
+            ))}
+          </Container>
+        )
+        : (
+          <Typography variant="body2" color="info">
+            Ups, parece que ahora mismo no hay moderadores, pero en EntGamers siempre estamos buscando gente que quiera ayudar a la comunidad. si quieres ser moderador, puedes hacer click en el botón de abajo.
+          </Typography>
+        )
+      }
       <div className={center()}>
         <NextLink
           className={button({ color: 'info' })}
-          href="/equipo/unirse?role=Moderator"
+          href={`/equipo/unirse?role=${moderators.id}`}
         >
           ¡Quiero ser moderador!
         </NextLink>
@@ -179,13 +171,60 @@ const EquipoPage: FC = async () => {
       <Typography variant="body1">
         Los colaboradores son los encargados de crear contenido para la comunidad, como artículos, tutoriales, vídeos, eventos etc.
       </Typography>
-      <Typography variant="body2" color="info">
+      {collaborators.total >= 1
-        Ups, parece que ahora mismo no hay colaboradores, pero en EntGamers siempre estamos buscando gente que quiera ayudar a la comunidad. si quieres ser colaborador, puedes hacer click en el botón de abajo.
+        ? (
-      </Typography>
+          <Container
+            className={css({
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 'medium',
+              flexWrap: 'wrap',
+              padding: 'medium',
+              width: '100%'
+            })}
+          >
+            {collaborators.users.map((user, index) => (
+              <div
+                key={`collaborator-${index}`}
+                className={cx(card({ variant: 'retro' }).body, css({
+                  maxWidth: '300px',
+                  textAlign: 'center'
+                }))}
+              >
+                <div
+                  className={cx(card({ variant: 'retro' }).media, center())}
+                >
+                  <NextImage
+                    src={user.prefs.profilePicture ?? '/images/EntGamers.png'}
+                    alt={user.name !== '' ? user.name : `Usuario ${index + 1} avatar`}
+                    width={120}
+                    height={120}
+                  />
+                </div>
+                <div
+                  className={card({ variant: 'retro' }).content}
+                >
+                  <Typography variant="h3" align="center">{user.name !== '' ? user.name : `Usuario ${index + 1}`}</Typography>
+                  {user.prefs.bio !== undefined && user.prefs.bio !== '' && (
+                    <Typography variant="body1">{user.prefs.bio}</Typography>
+                  )}
+                </div>
+              </div>
+            ))}
+          </Container>
+        )
+        : (
+          <Typography variant="body2" color="info">
+            Ups, parece que ahora mismo no hay colaboradores, pero en EntGamers siempre estamos buscando gente que quiera ayudar a la comunidad. si quieres ser colaborador, puedes hacer click en el botón de abajo.
+          </Typography>
+        )
+      }
       <div className={center()}>
         <NextLink
           className={button({ color: 'info' })}
-          href="/equipo/unirse?role=Collaborator"
+          href={`/equipo/unirse?role=${collaborators.id}`}
         >
           ¡Quiero ser colaborador!
         </NextLink>
@@ -193,4 +232,5 @@ const EquipoPage: FC = async () => {
     </Container>
   )
 }
+
 export default EquipoPage

src/app/equipo/unirse/ApplyForm.tsx

@@ -11,6 +11,7 @@ import { teamApplicationDataSchema, type TeamApplicationData } from '@/utilities
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon, type FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
 import { nanoid } from '@reduxjs/toolkit'
+import { ADMIN_CLAN_ID, COLLABORATOR_CLAN_ID, MODERATOR_CLAN_ID } from 'entgamers-database/frontend/clanes/administrative'
 import { useFormik } from 'formik'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useSearchParams } from 'next/navigation'
@@ -90,31 +91,31 @@ const ApplyForm: FC = () => {
         <Button
           type='button'
           onClick={() => {
-            formik.setFieldValue('role', 'Moderator')
+            formik.setFieldValue('role', MODERATOR_CLAN_ID)
               .catch((error) => {
                 console.error(error)
               })
           }}
-          disabled={formik.values.role === 'Moderator'}
+          disabled={formik.values.role === MODERATOR_CLAN_ID}
         >
           Moderador
         </Button>
         <Button
           type='button'
           onClick={() => {
-            formik.setFieldValue('role', 'Admin')
+            formik.setFieldValue('role', ADMIN_CLAN_ID)
               .catch((error) => {
                 console.error(error)
               })
           }}
-          disabled={formik.values.role === 'Admin'}
+          disabled={formik.values.role === ADMIN_CLAN_ID}
         >
           Administrador
         </Button>
         <Button
           type='button'
           onClick={() => {
-            formik.setFieldValue('role', 'Collaborator')
+            formik.setFieldValue('role', COLLABORATOR_CLAN_ID)
               .catch((error) => {
                 console.error(error)
               })
@@ -273,7 +274,7 @@ const ApplyForm: FC = () => {
           })}
         >
           <AnimatePresence mode='wait' initial={false}>
-            {formik.values.role === 'Moderator' && (
+            {formik.values.role === MODERATOR_CLAN_ID && (
               <motion.div
                 key={'motion-moderator'}
                 transition={{ duration: 0.15, ease: 'easeInOut' }}
@@ -303,7 +304,7 @@ const ApplyForm: FC = () => {
                 </ul>
               </motion.div>
             )}
-            {formik.values.role === 'Collaborator' && (
+            {formik.values.role === COLLABORATOR_CLAN_ID && (
               <motion.div
                 key={'motion-collaborator'}
                 transition={{ duration: 0.15, ease: 'easeInOut' }}
@@ -333,7 +334,7 @@ const ApplyForm: FC = () => {
                 </ul>
               </motion.div>
             )}
-            {formik.values.role === 'Admin' && (
+            {formik.values.role === ADMIN_CLAN_ID && (
               <motion.div
                 key={'motion-administrator'}
                 transition={{ duration: 0.15, ease: 'easeInOut' }}