SrJuggernaut/entgamers_pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: basic apply form

Browse Source
This commit is contained in:
SrJuggernaut
2024-01-18 22:21:34 -06:00
parent 984799d502
commit 57f5f80969
9 changed files with 481 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/equipo/page.tsx
+96 -16
View File
@@ -1,12 +1,40 @@
import Typography from '@/components/ui/Typography'
import { css } from '@/styled-system/css'
import { css, cx } from '@/styled-system/css'
import { Container } from '@/styled-system/jsx'
import { center } from '@/styled-system/patterns'
import { button } from '@/styled-system/recipes'
import { button, card } from '@/styled-system/recipes'
import { getClanMembers, getClanes } from 'entgamers-database/backend/clanes'
import { getUser, type UserWithPreferencesList } 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
moderators: UserWithPreferencesList
collaborators: UserWithPreferencesList
}
const getTeams = async (): Promise<GetTeamsResponse> => {
const allClanes = await getClanes()
const adminClanId = allClanes.teams.find(clan => clan.name === 'Admin')?.$id
const moderatorClanId = allClanes.teams.find(clan => clan.name === 'Moderator')?.$id
const collaboratorClanId = allClanes.teams.find(clan => clan.name === 'Collaborator')?.$id
const adminMembers: Models.MembershipList = adminClanId !== undefined ? await getClanMembers(adminClanId) : { total: 0, memberships: [] }
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 } }
}
const EquipoPage: FC = async () => {
const { admins } = await getTeams()
return (
<Container>
<Typography variant="h1" align="center">Equipo</Typography>
@@ -17,7 +45,67 @@ const EquipoPage: FC = async () => {
<Typography variant="body1">
Los administradores son quienes se encargan de que todo funcione como es debido en la comunidad, desde la moderación de los grupos hasta la organización de eventos.
</Typography>
<Container
{admins.total >= 1
? (
<Container
className={css({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 'medium',
flexWrap: 'wrap',
padding: 'medium',
width: '100%'
})}
>
{admins.users.map((user, index) => (
<div
key={`admin-${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 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>
</>
)
}
<div className={center()}>
<NextLink
className={button({ color: 'info' })}
href="/equipo/unirse?role=Admin"
>
¡Quiero ser Administrador!
</NextLink>
</div>
{/* <Container
className={css({
display: 'flex',
flexDirection: 'column',
@@ -27,7 +115,7 @@ const EquipoPage: FC = async () => {
flexWrap: 'wrap'
})}
>
{/* {team.map((member, index) => (
{team.map((member, index) => (
<div
key={`team-member-${index}`}
className={cx(card({ variant: 'retro' }).body, css({
@@ -70,16 +158,8 @@ const EquipoPage: FC = async () => {
</div>
</div>
</div>
))} */}
</Container>
<div className={center()}>
<NextLink
className={button({ color: 'info' })}
href="/equipo/unirse?role=administrator"
>
¡Quiero ser administrador!
</NextLink>
</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.
@@ -90,7 +170,7 @@ const EquipoPage: FC = async () => {
<div className={center()}>
<NextLink
className={button({ color: 'info' })}
href="/equipo/unirse?role=moderator"
href="/equipo/unirse?role=Moderator"
>
¡Quiero ser moderador!
</NextLink>
@@ -105,7 +185,7 @@ const EquipoPage: FC = async () => {
<div className={center()}>
<NextLink
className={button({ color: 'info' })}
href="/equipo/unirse?role=collaborator"
href="/equipo/unirse?role=Collaborator"
>
¡Quiero ser colaborador!
</NextLink>