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

chore: upgrade next and deps

Browse Source
This commit is contained in:
SrJuggernaut
2026-04-01 13:46:02 -06:00
parent f8018048bc
commit 57a6032a24
48 changed files with 488 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintignore
-1
View File
@@ -1 +0,0 @@
src/styled-system
.eslintrc.json
-55
View File
@@ -1,55 +0,0 @@
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"next/core-web-vitals",
"standard-with-typescript",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/react-in-jsx-scope": "off",
"react/jsx-uses-react": "off",
"indent": "off",
"@typescript-eslint/indent": [
"error",
2,
{
"SwitchCase": 1
}
],
"react/jsx-indent": [
"error",
2
],
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": [
"error"
],
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": [
"error",
{
"argsIgnorePattern": "^_"
}
],
"react-hooks/exhaustive-deps": "off",
"react/no-unknown-property": [
"error",
{
"ignore": [
"css"
]
}
]
}
}
bun.lockb
BIN
View File
Binary file not shown.
ecosystem.config.js
+12 -12
View File
@@ -19,13 +19,13 @@ module.exports = {
deploy: { deploy: {
production: { production: {
user: process.env.SSH_USERNAME, 'user': process.env.SSH_USERNAME,
host: process.env.DEPLOY_HOST, 'host': process.env.DEPLOY_HOST,
ref: 'origin/production', 'ref': 'origin/production',
repo: 'https://github.com/SrJuggernaut/entgamers_pro', 'repo': 'https://github.com/SrJuggernaut/entgamers_pro',
path: process.env.DEPLOY_PATH, 'path': process.env.DEPLOY_PATH,
'post-deploy': 'pm2 --silent startOrRestart ecosystem.config.js', 'post-deploy': 'pm2 --silent startOrRestart ecosystem.config.js',
env: { 'env': {
PORT: process.env.PORT, PORT: process.env.PORT,
NEXT_PUBLIC_APPWRITE_ENDPOINT: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT, NEXT_PUBLIC_APPWRITE_ENDPOINT: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT,
NEXT_PUBLIC_APPWRITE_PROJECT_ID: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID, NEXT_PUBLIC_APPWRITE_PROJECT_ID: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID,
@@ -37,13 +37,13 @@ module.exports = {
}, },
preview: { preview: {
user: process.env.SSH_USERNAME, 'user': process.env.SSH_USERNAME,
host: process.env.DEPLOY_HOST, 'host': process.env.DEPLOY_HOST,
ref: 'origin/preview', 'ref': 'origin/preview',
repo: 'https://github.com/SrJuggernaut/entgamers_pro', 'repo': 'https://github.com/SrJuggernaut/entgamers_pro',
path: process.env.DEPLOY_PATH, 'path': process.env.DEPLOY_PATH,
'post-deploy': 'pm2 --silent startOrRestart ecosystem.config.js', 'post-deploy': 'pm2 --silent startOrRestart ecosystem.config.js',
env: { 'env': {
PORT: process.env.PORT, PORT: process.env.PORT,
NEXT_PUBLIC_APPWRITE_ENDPOINT: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT, NEXT_PUBLIC_APPWRITE_ENDPOINT: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT,
NEXT_PUBLIC_APPWRITE_PROJECT_ID: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID, NEXT_PUBLIC_APPWRITE_PROJECT_ID: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID,
eslint.config.mjs
+98
View File
@@ -0,0 +1,98 @@
import eslintJs from '@eslint/js'
import nextPlugin from '@next/eslint-plugin-next'
import jsxA11yPlugin from 'eslint-plugin-jsx-a11y'
import reactPlugin from 'eslint-plugin-react'
import reactHooksPlugin from 'eslint-plugin-react-hooks'
import { defineConfig, globalIgnores } from 'eslint/config'
import globals from 'globals'
import tseslint from 'typescript-eslint'
import stylisticPlugin from '@stylistic/eslint-plugin'
export default defineConfig([
globalIgnores([
'node_modules/',
'public/', 'src/styled-system/**/*', '.next/**',
'out/**',
'build/**',
'next-env.d.ts']),
{
name: 'entgamers_pro/globals',
languageOptions: {
globals: {
...globals.browser,
...globals.node
}
}
},
{
name: 'project/eslint-js',
files: ['**/*.{js,mjs,ts,tsx}'],
...eslintJs.configs.recommended
},
{
name: 'project/typescript',
files: ['**/*.{ts,tsx}'],
extends: [
...tseslint.configs.recommended
],
rules: {
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }]
}
},
{
name: 'project/react-next',
files: ['**/*.{jsx,tsx}'],
plugins: {
'react': reactPlugin,
'react-hooks': reactHooksPlugin,
'jsx-a11y': jsxA11yPlugin,
'@next/next': nextPlugin
},
rules: {
...reactPlugin.configs.recommended.rules,
...reactPlugin.configs['jsx-runtime'].rules,
...reactHooksPlugin.configs['recommended-latest'].rules,
...jsxA11yPlugin.configs.strict.rules,
...nextPlugin.configs.recommended.rules,
...nextPlugin.configs['core-web-vitals'].rules,
'react/react-in-jsx-scope': 'off',
'react/prop-types': 'off',
'react/no-unknown-property': 'off',
'react/jsx-no-target-blank': 'off',
'jsx-a11y/alt-text': ['warn', { elements: ['img'], img: ['Image'] }],
'jsx-a11y/media-has-caption': 'warn'
},
settings: {
react: {
version: '19'
}
}
},
{
name: 'project/stylistic',
files: ['**/*.{js,mjs,ts,tsx}'],
plugins: {
'@stylistic': stylisticPlugin
},
rules: {
// Remove legacy formatting rules from ESLint core
...stylisticPlugin.configs['disable-legacy'].rules,
// Add recommended stylistic rules
...stylisticPlugin.configs.recommended.rules,
'@stylistic/indent': ['warn', 2],
'@stylistic/quotes': ['warn', 'single', {
avoidEscape: true,
allowTemplateLiterals: 'always'
}],
'@stylistic/semi': ['warn', 'never'],
'@stylistic/comma-dangle': ['warn', 'never'],
'@stylistic/arrow-parens': ['warn', 'always', {
requireForBlockBody: true
}],
'@stylistic/brace-style': ['warn', '1tbs', {
allowSingleLine: true
}]
}
}
])
next-env.d.ts
Vendored
+2 -1
View File
@@ -1,5 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts";
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
next.config.js
+1 -1
View File
@@ -1,4 +1,4 @@
const imageDomains = (process.env.IMAGE_DOMAINS ?? '').split(',').map(domain => { const imageDomains = (process.env.IMAGE_DOMAINS ?? '').split(',').map((domain) => {
const getDataRegex = /(?<protocol>[\w]+)?:\/\/(?<hostname>[\w.-]+)?((?<=[\d]{0,4}):(?<port>[\d]{0,4}))?\/?(?<pathname>.*)?$/ const getDataRegex = /(?<protocol>[\w]+)?:\/\/(?<hostname>[\w.-]+)?((?<=[\d]{0,4}):(?<port>[\d]{0,4}))?\/?(?<pathname>.*)?$/
const groups = getDataRegex.exec(domain).groups ?? {} const groups = getDataRegex.exec(domain).groups ?? {}
return groups return groups
package.json
+14 -19
View File
@@ -7,7 +7,7 @@
"build": "next build", "build": "next build",
"prestart": "bun install && next build", "prestart": "bun install && next build",
"start": "next start", "start": "next start",
"lint": "next lint", "lint": "eslint .",
"prepare": "panda codegen && husky install" "prepare": "panda codegen && husky install"
}, },
"dependencies": { "dependencies": {
@@ -18,6 +18,7 @@
"@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0", "@fortawesome/react-fontawesome": "^0.2.0",
"@reduxjs/toolkit": "^2.0.1", "@reduxjs/toolkit": "^2.0.1",
"@stylistic/eslint-plugin": "^5.10.0",
"@tanstack/match-sorter-utils": "^8.11.8", "@tanstack/match-sorter-utils": "^8.11.8",
"@tanstack/react-table": "^8.19.3", "@tanstack/react-table": "^8.19.3",
"appwrite": "^13.0.1", "appwrite": "^13.0.1",
@@ -25,12 +26,12 @@
"entgamers-database": "0.0.26", "entgamers-database": "0.0.26",
"entgamers-panda-preset": "0.1.5", "entgamers-panda-preset": "0.1.5",
"formik": "^2.4.5", "formik": "^2.4.5",
"framer-motion": "^10.17.6", "framer-motion": "^12.38.0",
"isomorphic-fetch": "^3.0.0", "isomorphic-fetch": "^3.0.0",
"next": "^14.0.4", "next": "16.2.2",
"node-appwrite": "^11.1.0", "node-appwrite": "^11.1.0",
"react": "18.2.0", "react": "19.2.4",
"react-dom": "18.2.0", "react-dom": "19.2.4",
"react-redux": "^9.0.4", "react-redux": "^9.0.4",
"sharp": "^0.33.1", "sharp": "^0.33.1",
"yup": "^1.3.3" "yup": "^1.3.3"
@@ -38,23 +39,17 @@
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^18.4.4", "@commitlint/cli": "^18.4.4",
"@commitlint/config-conventional": "^18.4.4", "@commitlint/config-conventional": "^18.4.4",
"@eslint/js": "^10.0.1",
"@pandacss/dev": "^0.23.0", "@pandacss/dev": "^0.23.0",
"@types/isomorphic-fetch": "^0.0.39", "@types/isomorphic-fetch": "^0.0.39",
"@types/node": "^20.10.6", "@types/node": "^20.10.6",
"@types/react": "^18.2.46", "@types/react": "19.2.14",
"@types/react-dom": "^18.2.18", "@types/react-dom": "19.2.3",
"@typescript-eslint/eslint-plugin": "^6.4.0", "eslint": "^10.1.0",
"@typescript-eslint/parser": "^5.38.0", "eslint-config-next": "16.2.2",
"eslint": "^8.0.1", "eslint-plugin-react": "^7.37.5",
"eslint-config-next": "latest",
"eslint-config-standard": "^17.0.0",
"eslint-config-standard-with-typescript": "latest",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "latest",
"husky": "^8.0.3", "husky": "^8.0.3",
"typescript": "*" "typescript": "*",
"typescript-eslint": "^8.58.0"
} }
} }
src/app/Clanes.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ const Clanes: FC = () => {
<div <div
className={card({ variant: 'glass' }).content} className={card({ variant: 'glass' }).content}
> >
<Typography variant="h2" align='center'>Clanes</Typography> <Typography variant="h2" align="center">Clanes</Typography>
<div <div
className={css({ className={css({
display: 'grid', display: 'grid',
src/app/FeedbackConsumer.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ import { type FC } from 'react'
import { createPortal } from 'react-dom' import { createPortal } from 'react-dom'
const FeedbackConsumer: FC = () => { const FeedbackConsumer: FC = () => {
const { alerts } = useAppSelector(state => state.feedback) const { alerts } = useAppSelector((state) => state.feedback)
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
return ( return (
<> <>
@@ -55,7 +55,7 @@ const FeedbackConsumer: FC = () => {
className={alert().closeButton} className={alert().closeButton}
onClick={() => dispatch(removeAlert(currentAlert.id))} onClick={() => dispatch(removeAlert(currentAlert.id))}
> >
<FontAwesomeIcon icon={faTimes} fixedWidth size='sm'/> <FontAwesomeIcon icon={faTimes} fixedWidth size="sm" />
</IconButton> </IconButton>
<Typography variant="h3" component="div"> <Typography variant="h3" component="div">
{currentAlert.title} {currentAlert.title}
src/app/Hero.tsx
+9 -9
View File
@@ -111,20 +111,20 @@ const Hero: FC = () => {
color: 'primary', color: 'primary',
size: 'large' size: 'large'
}), css({ }), css({
position: 'absolute', 'position': 'absolute',
bottom: '45px', 'bottom': '45px',
right: '50%', 'right': '50%',
animationName: 'bounce', 'animationName': 'bounce',
animationDuration: '1s', 'animationDuration': '1s',
animationIterationCount: 'infinite', 'animationIterationCount': 'infinite',
transform: 'translateX(50%)', 'transform': 'translateX(50%)',
zIndex: 1, 'zIndex': 1,
'&:hover': { '&:hover': {
animationPlayState: 'paused' animationPlayState: 'paused'
} }
}))} }))}
> >
<FontAwesomeIcon icon={faArrowDown} size='lg' fixedWidth /> <FontAwesomeIcon icon={faArrowDown} size="lg" fixedWidth />
</a> </a>
</section> </section>
) )
src/app/SessionConsumer.tsx
+6 -11
View File
@@ -5,15 +5,14 @@ import { setClanes, setCurrentUser, setSession, setStatus } from '@/state/sessio
import { AppwriteException } from 'appwrite' import { AppwriteException } from 'appwrite'
import { getClanes } from 'entgamers-database/frontend/clanes' import { getClanes } from 'entgamers-database/frontend/clanes'
import { getCurrentUser, getSession } from 'entgamers-database/frontend/session' import { getCurrentUser, getSession } from 'entgamers-database/frontend/session'
import { useCallback, useEffect, type FC } from 'react' import { useCallback, useEffect } from 'react'
const SessionConsumer: FC = () => { const SessionConsumer = () => {
const { status, session, user, clanes } = useAppSelector((state) => state.session) const { status, session, user, clanes } = useAppSelector((state) => state.session)
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const ensureSession = useCallback(async () => { const ensureSession = useCallback(async () => {
try { try {
if (status !== 'initializing' || session !== undefined) return
dispatch(setStatus('loading')) dispatch(setStatus('loading'))
const currentSession = await getSession('current') const currentSession = await getSession('current')
const currentUser = await getCurrentUser() const currentUser = await getCurrentUser()
@@ -26,16 +25,17 @@ const SessionConsumer: FC = () => {
} finally { } finally {
dispatch(setStatus('idle')) dispatch(setStatus('idle'))
} }
}, []) }, [dispatch])
useEffect(() => { useEffect(() => {
if (status !== 'initializing' || session !== undefined) return
ensureSession() ensureSession()
.catch((error) => { .catch((error) => {
if (error instanceof AppwriteException) { if (error instanceof AppwriteException) {
console.error(error) console.error(error)
} }
}) })
}, []) }, [status, session, ensureSession])
useEffect(() => { useEffect(() => {
if (user !== undefined && clanes === undefined) { if (user !== undefined && clanes === undefined) {
@@ -51,11 +51,6 @@ const SessionConsumer: FC = () => {
} else if (user === undefined && clanes !== undefined) { } else if (user === undefined && clanes !== undefined) {
dispatch(setClanes()) dispatch(setClanes())
} }
}, [user]) }, [user, clanes, dispatch])
return (
<>
</>
)
} }
export default SessionConsumer export default SessionConsumer
src/app/Social.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ const Social: FC = () => {
<div <div
className={card({ variant: 'glass' }).content} className={card({ variant: 'glass' }).content}
> >
<Typography variant="h2" align='center'>Redes Sociales</Typography> <Typography variant="h2" align="center">Redes Sociales</Typography>
<Typography variant="body1"> <Typography variant="body1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate deleniti dolore quas sed nemo sit, officia in rem nesciunt quisquam possimus ab! Labore sed reprehenderit quae, hic earum tempora placeat cumque id eos itaque perferendis nulla officia fuga porro, quis, unde facere accusamus repudiandae non? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate deleniti dolore quas sed nemo sit, officia in rem nesciunt quisquam possimus ab! Labore sed reprehenderit quae, hic earum tempora placeat cumque id eos itaque perferendis nulla officia fuga porro, quis, unde facere accusamus repudiandae non?
</Typography> </Typography>
src/app/clanes/page.tsx
+44 -13
View File
@@ -21,37 +21,68 @@ const ClanesPage: FC = () => {
<Typography variant="h2">Beneficios de los clanes</Typography> <Typography variant="h2">Beneficios de los clanes</Typography>
<Typography variant="body1">La intención de EntGamers es brindar beneficios a los clanes que les permitan operar en un ambiente de comunicación y colaboración.</Typography> <Typography variant="body1">La intención de EntGamers es brindar beneficios a los clanes que les permitan operar en un ambiente de comunicación y colaboración.</Typography>
<ul className="fa-ul"> <ul className="fa-ul">
<li><FontAwesomeIcon icon={faChevronRight} listItem /> Espacio en el servidor de Discord.</li> <li>
<li><FontAwesomeIcon icon={faChevronRight} listItem /> Apoyo de la administración con proyectos y eventos.</li> <FontAwesomeIcon icon={faChevronRight} listItem />
<li><FontAwesomeIcon icon={faChevronRight} listItem /> Apoyo del equipo de moderación.</li> {' '}
Espacio en el servidor de Discord.
</li>
<li>
<FontAwesomeIcon icon={faChevronRight} listItem />
{' '}
Apoyo de la administración con proyectos y eventos.
</li>
<li>
<FontAwesomeIcon icon={faChevronRight} listItem />
{' '}
Apoyo del equipo de moderación.
</li>
</ul> </ul>
</div> </div>
<div> <div>
<Typography variant="h2">Requisitos para formar un clan</Typography> <Typography variant="h2">Requisitos para formar un clan</Typography>
<Typography variant="body1">Todos los clanes deben cumplir con los siguientes requisitos:</Typography> <Typography variant="body1">Todos los clanes deben cumplir con los siguientes requisitos:</Typography>
<ul className="fa-ul"> <ul className="fa-ul">
<li><FontAwesomeIcon icon={faChevronRight} listItem /> Tener un encargado.</li> <li>
<li><FontAwesomeIcon icon={faChevronRight} listItem /> Fomentar el compañerismo y la comunidad.</li> <FontAwesomeIcon icon={faChevronRight} listItem />
<li><FontAwesomeIcon icon={faChevronRight} listItem /> Aportar contenido de forma periódica para la comunidad.</li> {' '}
<li><FontAwesomeIcon icon={faChevronRight} listItem /> Realizar al menos una actividad mensual con los integrantes.</li> Tener un encargado.
</li>
<li>
<FontAwesomeIcon icon={faChevronRight} listItem />
{' '}
Fomentar el compañerismo y la comunidad.
</li>
<li>
<FontAwesomeIcon icon={faChevronRight} listItem />
{' '}
Aportar contenido de forma periódica para la comunidad.
</li>
<li>
<FontAwesomeIcon icon={faChevronRight} listItem />
{' '}
Realizar al menos una actividad mensual con los integrantes.
</li>
</ul> </ul>
</div> </div>
</div> </div>
<Typography variant="h2">Clanes activos</Typography> <Typography variant="h2">Clanes activos</Typography>
<div <div
className={css({ className={css({
backgroundColor: 'info', 'backgroundColor': 'info',
color: 'info.contrast', 'color': 'info.contrast',
borderRadius: 'medium', 'borderRadius': 'medium',
padding: 'medium', 'padding': 'medium',
marginBlock: 'medium', 'marginBlock': 'medium',
'& a': { '& a': {
color: 'info.contrast', color: 'info.contrast',
fontWeight: 'bold' fontWeight: 'bold'
} }
})} })}
> >
Esta sección está en construcción. Puedes ver los clanes activos en nuestro <a href="http://discord.gg/nqwzHJC">Servidor de Discord</a>. Esta sección está en construcción. Puedes ver los clanes activos en nuestro
{' '}
<a href="http://discord.gg/nqwzHJC">Servidor de Discord</a>
.
</div> </div>
</Container> </Container>
) )
src/app/cuenta/CuentaTabs.tsx
+5 -3
View File
@@ -44,7 +44,7 @@ const CuentaTabs: FC = () => {
> >
<AnimatePresence <AnimatePresence
initial={false} initial={false}
mode='wait' mode="wait"
> >
{currentTab === 'login' && ( {currentTab === 'login' && (
<motion.div <motion.div
@@ -52,7 +52,8 @@ const CuentaTabs: FC = () => {
initial={{ opacity: 0, x: '-100%' }} initial={{ opacity: 0, x: '-100%' }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: '100%' }} exit={{ opacity: 0, x: '100%' }}
key="login"> key="login"
>
<UpdateEmail /> <UpdateEmail />
<UpdatePassword /> <UpdatePassword />
</motion.div> </motion.div>
@@ -63,7 +64,8 @@ const CuentaTabs: FC = () => {
initial={{ opacity: 0, x: '-100%' }} initial={{ opacity: 0, x: '-100%' }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: '100%' }} exit={{ opacity: 0, x: '100%' }}
key="perfil"> key="perfil"
>
<UpdateUserName /> <UpdateUserName />
<UpdateUserPreferences /> <UpdateUserPreferences />
</motion.div> </motion.div>
src/app/cuenta/UpdateUserName.tsx
+2 -3
View File
@@ -68,7 +68,7 @@ const UpdateUserName: FC = () => {
}) })
.catch(console.error) .catch(console.error)
} }
}, [status, session, user]) }, [status, session, user, formik])
if (status !== 'idle' || session === undefined) { if (status !== 'idle' || session === undefined) {
// TODO: Replace with Skeleton // TODO: Replace with Skeleton
@@ -99,8 +99,7 @@ const UpdateUserName: FC = () => {
<Typography variant="caption" color="danger">{formik.errors.name}</Typography> <Typography variant="caption" color="danger">{formik.errors.name}</Typography>
)} )}
</FormGroup> </FormGroup>
<FormGroup <FormGroup>
>
<Button <Button
type="submit" type="submit"
disabled={formik.isSubmitting || !formik.isValid} disabled={formik.isSubmitting || !formik.isValid}
src/app/cuenta/UpdateUserPreferences.tsx
+6 -6
View File
@@ -55,7 +55,7 @@ const UpdateUserPreferences: FC = () => {
}) })
.catch(console.error) .catch(console.error)
} }
}, [status, session]) }, [status, user, formik, session])
if (status !== 'idle' || session === undefined) { if (status !== 'idle' || session === undefined) {
// TODO: Replace with Skeleton // TODO: Replace with Skeleton
@@ -65,7 +65,7 @@ const UpdateUserPreferences: FC = () => {
return ( return (
<> <>
<Typography <Typography
variant='h3' variant="h3"
> >
Preferencias Preferencias
</Typography> </Typography>
@@ -74,13 +74,13 @@ const UpdateUserPreferences: FC = () => {
> >
<FormGroup> <FormGroup>
<label <label
htmlFor='bio' htmlFor="bio"
> >
Biografia Biografia
</label> </label>
<TextArea <TextArea
id='bio' id="bio"
name='bio' name="bio"
value={formik.values.bio} value={formik.values.bio}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
@@ -96,7 +96,7 @@ const UpdateUserPreferences: FC = () => {
{/* TODO: Add Profile Picture and Social Links fields */} {/* TODO: Add Profile Picture and Social Links fields */}
<FormGroup> <FormGroup>
<Button <Button
type='submit' type="submit"
disabled={formik.isSubmitting || !formik.isValid} disabled={formik.isSubmitting || !formik.isValid}
fullWidth fullWidth
> >
src/app/cuenta/page.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import Typography from '@/components/ui/Typography' import Typography from '@/components/ui/Typography'
import { Container } from '@/styled-system/jsx' import { Container } from '@/styled-system/jsx'
import { type FC } from 'react' import type { FC } from 'react'
import CuentaTabs from './CuentaTabs' import CuentaTabs from './CuentaTabs'
const CuentaPage: FC = () => { const CuentaPage: FC = () => {
@@ -10,7 +10,7 @@ const CuentaPage: FC = () => {
<Typography variant="body1"> <Typography variant="body1">
Desde aquí puedes administrar las preferencias y ajustes de tu cuenta. Desde aquí puedes administrar las preferencias y ajustes de tu cuenta.
</Typography> </Typography>
<CuentaTabs/> <CuentaTabs />
</Container> </Container>
) )
} }
src/app/dashboard/_components/DashboardTabs.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ const DashboardTabs: FC = () => {
> >
<AnimatePresence <AnimatePresence
initial={false} initial={false}
mode='wait' mode="wait"
> >
{currentTab === undefined && ( {currentTab === undefined && (
<motion.div <motion.div
src/app/dashboard/_components/teamApplications/ApplicationsFilter.tsx
+3 -3
View File
@@ -17,7 +17,7 @@ const ApplicationsFilter: FC<ApplicationsFilterProps> = ({ column }) => {
<StatusSelector <StatusSelector
id={`${column.id}-status-filter`} id={`${column.id}-status-filter`}
value={columnFilterValue as TeamApplicationStatus} value={columnFilterValue as TeamApplicationStatus}
onChange={value => { column.setFilterValue(value) }} onChange={(value) => { column.setFilterValue(value) }}
allowEmpty allowEmpty
/> />
) )
@@ -26,7 +26,7 @@ const ApplicationsFilter: FC<ApplicationsFilterProps> = ({ column }) => {
<RoleSelector <RoleSelector
id={`${column.id}-role-filter`} id={`${column.id}-role-filter`}
value={columnFilterValue as TeamApplicationRole} value={columnFilterValue as TeamApplicationRole}
onChange={value => { column.setFilterValue(value) }} onChange={(value) => { column.setFilterValue(value) }}
allowEmpty allowEmpty
/> />
) )
@@ -36,7 +36,7 @@ const ApplicationsFilter: FC<ApplicationsFilterProps> = ({ column }) => {
fullWidth fullWidth
type="text" type="text"
value={(columnFilterValue ?? '') as string} value={(columnFilterValue ?? '') as string}
onChange={value => { column.setFilterValue(value) }} onChange={(value) => { column.setFilterValue(value) }}
placeholder="Buscar..." placeholder="Buscar..."
className="w-36 border shadow rounded" className="w-36 border shadow rounded"
list={column.id + 'list'} list={column.id + 'list'}
src/app/dashboard/_components/teamApplications/ApplicationsList.tsx
+27 -19
View File
@@ -3,7 +3,7 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableHeadCell,
import useManageError from '@/hooks/useManageError' import useManageError from '@/hooks/useManageError'
import { css } from '@/styled-system/css' import { css } from '@/styled-system/css'
import { formatDate } from '@/utilities/date' import { formatDate } from '@/utilities/date'
import { type TeamApplication, type TeamApplicationList } from '@/utilities/teamApplication' import type { TeamApplication, TeamApplicationList } from '@/utilities/teamApplication'
import { faChevronLeft, faChevronRight, faSort, faSortAsc, faSortDesc } from '@fortawesome/free-solid-svg-icons' import { faChevronLeft, faChevronRight, faSort, faSortAsc, faSortDesc } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, type ColumnFiltersState, type PaginationState, type RowData, type SortingState } from '@tanstack/react-table' import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, type ColumnFiltersState, type PaginationState, type RowData, type SortingState } from '@tanstack/react-table'
@@ -29,7 +29,7 @@ const columns = [
columnHelper.accessor('status', { columnHelper.accessor('status', {
header: 'Estado', header: 'Estado',
cell: StatusUpdater, cell: StatusUpdater,
getUniqueValues () { getUniqueValues() {
return ['Pending', 'Accepted', 'Rejected'] return ['Pending', 'Accepted', 'Rejected']
} }
}), }),
@@ -125,7 +125,7 @@ const ApplicationsList: FC = () => {
if (error instanceof Error && error.name === 'AbortError') return if (error instanceof Error && error.name === 'AbortError') return
manageError(error, 'Error al obtener las aplicaciones', 'Error desconocido al obtener las aplicaciones', 'error') manageError(error, 'Error al obtener las aplicaciones', 'Error desconocido al obtener las aplicaciones', 'error')
}) })
}, [pagination, sorting, columnFilters]) }, [pagination, sorting, columnFilters, manageError])
// TODO: Better UI Controls for: column visibility. Quantity selector. // TODO: Better UI Controls for: column visibility. Quantity selector.
return ( return (
@@ -145,7 +145,9 @@ const ApplicationsList: FC = () => {
id={`${column.id}-view`} id={`${column.id}-view`}
checked={column.getIsVisible()} checked={column.getIsVisible()}
onChange={column.getToggleVisibilityHandler()} onChange={column.getToggleVisibilityHandler()}
/> {column.columnDef.header?.toString() ?? column.id} />
{' '}
{column.columnDef.header?.toString() ?? column.id}
</label> </label>
</div> </div>
))} ))}
@@ -159,8 +161,8 @@ const ApplicationsList: FC = () => {
<TableHeadCell <TableHeadCell
key={header.id} key={header.id}
className={css({ className={css({
verticalAlign: 'top', 'verticalAlign': 'top',
position: 'relative', 'position': 'relative',
'&:hover > [data-is-resizing]': { '&:hover > [data-is-resizing]': {
backgroundColor: 'border' backgroundColor: 'border'
} }
@@ -193,21 +195,21 @@ const ApplicationsList: FC = () => {
</div> </div>
{header.column.getCanFilter() {header.column.getCanFilter()
? ( ? (
<ApplicationsFilter column={header.column}/> <ApplicationsFilter column={header.column} />
) )
: null : null}
}
</div> </div>
<div <button
type="button"
className={css({ className={css({
position: 'absolute', 'position': 'absolute',
top: 0, 'top': 0,
right: 0, 'right': 0,
height: '100%', 'height': '100%',
width: '5px', 'width': '5px',
cursor: 'col-resize', 'cursor': 'col-resize',
userSelect: 'none', 'userSelect': 'none',
touchAction: 'none', 'touchAction': 'none',
'&:hover': { '&:hover': {
backgroundColor: 'border' backgroundColor: 'border'
}, },
@@ -257,7 +259,13 @@ const ApplicationsList: FC = () => {
> >
<FontAwesomeIcon icon={faChevronLeft} fixedWidth /> <FontAwesomeIcon icon={faChevronLeft} fixedWidth />
</IconButton> </IconButton>
Pagina {table.getState().pagination.pageIndex + 1} de {table.getPageCount()} Pagina
{' '}
{table.getState().pagination.pageIndex + 1}
{' '}
de
{' '}
{table.getPageCount()}
<IconButton <IconButton
onClick={() => { table.nextPage() }} onClick={() => { table.nextPage() }}
disabled={!table.getCanNextPage()} disabled={!table.getCanNextPage()}
src/app/dashboard/_components/teamApplications/RoleSelector.tsx
+11 -11
View File
@@ -15,17 +15,17 @@ const RoleSelector: FC<RoleSelectorProps> = ({ id, value, onChange, allowEmpty }
<select <select
id={`${id}-status`} id={`${id}-status`}
className={css({ className={css({
width: '100%', 'width': '100%',
border: 'none', 'border': 'none',
background: 'transparent', 'background': 'transparent',
color: 'inherit', 'color': 'inherit',
outline: 'none', 'outline': 'none',
cursor: 'pointer', 'cursor': 'pointer',
fontSize: 'inherit', 'fontSize': 'inherit',
fontWeight: 'inherit', 'fontWeight': 'inherit',
lineHeight: 'inherit', 'lineHeight': 'inherit',
padding: '0', 'padding': '0',
borderRadius: '0', 'borderRadius': '0',
'&:focus': { '&:focus': {
outline: 'none' outline: 'none'
} }
src/app/dashboard/_components/teamApplications/StatusSelector.tsx
+11 -11
View File
@@ -15,17 +15,17 @@ const StatusSelector: FC<StatusSelectorProps> = ({ id, value, onChange, allowEmp
<select <select
id={`${id}-status`} id={`${id}-status`}
className={css({ className={css({
width: '100%', 'width': '100%',
border: 'none', 'border': 'none',
background: 'transparent', 'background': 'transparent',
color: 'inherit', 'color': 'inherit',
outline: 'none', 'outline': 'none',
cursor: 'pointer', 'cursor': 'pointer',
fontSize: 'inherit', 'fontSize': 'inherit',
fontWeight: 'inherit', 'fontWeight': 'inherit',
lineHeight: 'inherit', 'lineHeight': 'inherit',
padding: '0', 'padding': '0',
borderRadius: '0', 'borderRadius': '0',
'&:focus': { '&:focus': {
outline: 'none' outline: 'none'
} }
src/app/equipo/page.tsx
+6 -9
View File
@@ -25,9 +25,9 @@ const getTeams = async (): Promise<GetTeamsResponse> => {
const moderatorMembers: Models.MembershipList = await getClanMembers(MODERATOR_CLAN_ID) const moderatorMembers: Models.MembershipList = await getClanMembers(MODERATOR_CLAN_ID)
const collaboratorMembers: Models.MembershipList = await getClanMembers(COLLABORATOR_CLAN_ID) const collaboratorMembers: Models.MembershipList = await getClanMembers(COLLABORATOR_CLAN_ID)
const adminsPromises = adminMembers.memberships.map(async membership => await getUser(membership.userId)) const adminsPromises = adminMembers.memberships.map(async (membership) => await getUser(membership.userId))
const moderatorsPromises = moderatorMembers.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 collaboratorsPromises = collaboratorMembers.memberships.map(async (membership) => await getUser(membership.userId))
const [admins, moderators, collaborators] = await Promise.all([ const [admins, moderators, collaborators] = await Promise.all([
Promise.all(adminsPromises), Promise.all(moderatorsPromises), Promise.all(collaboratorsPromises) Promise.all(adminsPromises), Promise.all(moderatorsPromises), Promise.all(collaboratorsPromises)
@@ -96,8 +96,7 @@ const EquipoPage: FC = async () => {
<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()}> <div className={center()}>
<NextLink <NextLink
className={button({ color: 'info' })} className={button({ color: 'info' })}
@@ -158,8 +157,7 @@ const EquipoPage: FC = async () => {
<Typography variant="body2" color="info"> <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. 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> </Typography>
) )}
}
<div className={center()}> <div className={center()}>
<NextLink <NextLink
className={button({ color: 'info' })} className={button({ color: 'info' })}
@@ -220,8 +218,7 @@ const EquipoPage: FC = async () => {
<Typography variant="body2" color="info"> <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. 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> </Typography>
) )}
}
<div className={center()}> <div className={center()}>
<NextLink <NextLink
className={button({ color: 'info' })} className={button({ color: 'info' })}
src/app/equipo/unirse/ApplyForm.tsx
+80 -60
View File
@@ -16,11 +16,14 @@ import { ADMIN_CLAN_ID, COLLABORATOR_CLAN_ID, MODERATOR_CLAN_ID } from 'entgamer
import { createTeamApplication, type TeamApplicationData } from 'entgamers-database/frontend/database/teamApplications' import { createTeamApplication, type TeamApplicationData } from 'entgamers-database/frontend/database/teamApplications'
import { useFormik } from 'formik' import { useFormik } from 'formik'
import { AnimatePresence, motion } from 'framer-motion' import { AnimatePresence, motion } from 'framer-motion'
import { useSearchParams } from 'next/navigation' import { usePathname, useSearchParams } from 'next/navigation'
import { useRouter } from 'next/router'
import { useEffect, type FC } from 'react' import { useEffect, type FC } from 'react'
const ApplyForm: FC = () => { const ApplyForm: FC = () => {
const searchParams = useSearchParams() const searchParams = useSearchParams()
const pathname = usePathname()
const router = useRouter()
const { manageError } = useManageError() const { manageError } = useManageError()
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
@@ -54,8 +57,11 @@ const ApplyForm: FC = () => {
.catch((error) => { .catch((error) => {
console.error(error) console.error(error)
}) })
.finally(() => {
router.replace(pathname)
})
} }
}, []) }, [searchParams, formik, pathname, router])
return ( return (
<form <form
@@ -70,7 +76,7 @@ const ApplyForm: FC = () => {
})} })}
> >
<Button <Button
type='button' type="button"
onClick={() => { onClick={() => {
formik.setFieldValue('role', MODERATOR_CLAN_ID) formik.setFieldValue('role', MODERATOR_CLAN_ID)
.catch((error) => { .catch((error) => {
@@ -82,7 +88,7 @@ const ApplyForm: FC = () => {
Moderador Moderador
</Button> </Button>
<Button <Button
type='button' type="button"
onClick={() => { onClick={() => {
formik.setFieldValue('role', ADMIN_CLAN_ID) formik.setFieldValue('role', ADMIN_CLAN_ID)
.catch((error) => { .catch((error) => {
@@ -94,7 +100,7 @@ const ApplyForm: FC = () => {
Administrador Administrador
</Button> </Button>
<Button <Button
type='button' type="button"
onClick={() => { onClick={() => {
formik.setFieldValue('role', COLLABORATOR_CLAN_ID) formik.setFieldValue('role', COLLABORATOR_CLAN_ID)
.catch((error) => { .catch((error) => {
@@ -121,90 +127,87 @@ const ApplyForm: FC = () => {
})} })}
> >
<FormGroup> <FormGroup>
<label htmlFor='name'>Nombre</label> <label htmlFor="name">Nombre</label>
<Input <Input
id='name' id="name"
type='text' type="text"
value={formik.values.name} value={formik.values.name}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
/> />
{formik.touched.name !== undefined && formik.errors.name !== undefined {formik.touched.name !== undefined && formik.errors.name !== undefined
? ( ? (
<Typography variant='caption' color='danger'> <Typography variant="caption" color="danger">
{formik.errors.name} {formik.errors.name}
</Typography> </Typography>
) )
: ( : (
<Typography variant='caption' color='info'> <Typography variant="caption" color="info">
Tu nombre. Tu nombre.
</Typography> </Typography>
)} )}
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<label htmlFor='email'>Email</label> <label htmlFor="email">Email</label>
<Input <Input
id='email' id="email"
type='email' type="email"
value={formik.values.email} value={formik.values.email}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
/> />
{formik.touched.email !== undefined && formik.errors.email !== undefined {formik.touched.email !== undefined && formik.errors.email !== undefined
? ( ? (
<Typography variant='caption' color='danger'> <Typography variant="caption" color="danger">
{formik.errors.email} {formik.errors.email}
</Typography> </Typography>
) )
: ( : (
<Typography variant='caption' color='info'> <Typography variant="caption" color="info">
Tu email, para poder contactarte. Tu email, para poder contactarte.
</Typography> </Typography>
) )}
}
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<label htmlFor='discord'>Nombre de Discord</label> <label htmlFor="discord">Nombre de Discord</label>
<Input <Input
id='discord' id="discord"
type='text' type="text"
value={formik.values.discord} value={formik.values.discord}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
/> />
{formik.touched.discord !== undefined && formik.errors.discord !== undefined {formik.touched.discord !== undefined && formik.errors.discord !== undefined
? ( ? (
<Typography variant='caption' color='danger'> <Typography variant="caption" color="danger">
{formik.errors.discord} {formik.errors.discord}
</Typography> </Typography>
) )
: ( : (
<Typography variant='caption' color='info'> <Typography variant="caption" color="info">
Tu nombre de Discord, para poder contactarte. Tu nombre de Discord, para poder contactarte.
</Typography> </Typography>
) )}
}
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<label htmlFor='message'>Mensaje</label> <label htmlFor="message">Mensaje</label>
<TextArea <TextArea
id='message' id="message"
value={formik.values.message} value={formik.values.message}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
/> />
{formik.touched.message !== undefined && formik.errors.message !== undefined {formik.touched.message !== undefined && formik.errors.message !== undefined
? ( ? (
<Typography variant='caption' color='danger'> <Typography variant="caption" color="danger">
{formik.errors.message} {formik.errors.message}
</Typography> </Typography>
) )
: ( : (
<Typography variant='caption' color='info'> <Typography variant="caption" color="info">
¿Por que te gustaría unirte al equipo?, ¿Que te gustaría hacer?, etc. ¿Por que te gustaría unirte al equipo?, ¿Que te gustaría hacer?, etc.
</Typography> </Typography>
) )}
}
</FormGroup> </FormGroup>
<div <div
className={css({ className={css({
@@ -212,7 +215,7 @@ const ApplyForm: FC = () => {
})} })}
> >
<Button <Button
type='submit' type="submit"
disabled={!formik.isValid || !formik.dirty} disabled={!formik.isValid || !formik.dirty}
fullWidth fullWidth
@@ -239,14 +242,13 @@ const ApplyForm: FC = () => {
justifyContent: 'center' justifyContent: 'center'
})} })}
> >
<Typography variant='h2' align="center">¡Gracias por interesarte en unirte al equipo!</Typography> <Typography variant="h2" align="center">¡Gracias por interesarte en unirte al equipo!</Typography>
<Typography variant='body1'> <Typography variant="body1">
El equipo de EntGamers se pondrá en contacto contigo a la brevedad posible. El equipo de EntGamers se pondrá en contacto contigo a la brevedad posible.
</Typography> </Typography>
</div> </div>
</div> </div>
) )}
}
<div <div
className={css({ className={css({
overflow: 'hidden', overflow: 'hidden',
@@ -254,31 +256,35 @@ const ApplyForm: FC = () => {
paddingBlock: 'medium' paddingBlock: 'medium'
})} })}
> >
<AnimatePresence mode='wait' initial={false}> <AnimatePresence mode="wait" initial={false}>
{formik.values.role === MODERATOR_CLAN_ID && ( {formik.values.role === MODERATOR_CLAN_ID && (
<motion.div <motion.div
key={'motion-moderator'} key="motion-moderator"
transition={{ duration: 0.15, ease: 'easeInOut' }} transition={{ duration: 0.15, ease: 'easeInOut' }}
initial={{ opacity: 0, x: '-250px' }} initial={{ opacity: 0, x: '-250px' }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: '250px' }} exit={{ opacity: 0, x: '250px' }}
> >
<Typography variant='h2' align="center">Moderadores</Typography> <Typography variant="h2" align="center">Moderadores</Typography>
<Typography variant='body1'> <Typography variant="body1">
El equipo de moderación de EntGamers se encarga de moderar los distintos espacios en los que se desenvuelve la comunidad, como los grupos de Facebook, Discord, Etc. El equipo de moderación de EntGamers se encarga de moderar los distintos espacios en los que se desenvuelve la comunidad, como los grupos de Facebook, Discord, Etc.
</Typography> </Typography>
<Typography variant='h3'>Requisitos</Typography> <Typography variant="h3">Requisitos</Typography>
<ul className="fa-ul"> <ul className="fa-ul">
<li> <li>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Imparcialidad</strong> <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem />
{' '}
<strong>Imparcialidad</strong>
<br /> <br />
La comunidad esta conformada por amigos y conocidos, por lo tanto es importante poder actuar de forma imparcial y responsable. La comunidad esta conformada por amigos y conocidos, por lo tanto es importante poder actuar de forma imparcial y responsable.
</li> </li>
</ul> </ul>
<Typography variant='h3'>Beneficios</Typography> <Typography variant="h3">Beneficios</Typography>
<ul className="fa-ul"> <ul className="fa-ul">
<li> <li>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Experiencia</strong> <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem />
{' '}
<strong>Experiencia</strong>
<br /> <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. 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>
@@ -287,28 +293,32 @@ const ApplyForm: FC = () => {
)} )}
{formik.values.role === COLLABORATOR_CLAN_ID && ( {formik.values.role === COLLABORATOR_CLAN_ID && (
<motion.div <motion.div
key={'motion-collaborator'} key="motion-collaborator"
transition={{ duration: 0.15, ease: 'easeInOut' }} transition={{ duration: 0.15, ease: 'easeInOut' }}
initial={{ opacity: 0, x: '-250px' }} initial={{ opacity: 0, x: '-250px' }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: '250px' }} exit={{ opacity: 0, x: '250px' }}
> >
<Typography variant='h2' align='center'>Colaborador</Typography> <Typography variant="h2" align="center">Colaborador</Typography>
<Typography variant='body1'> <Typography variant="body1">
Los colaboradores son personas ajenas al staff central de EntGamers que nos ayudan a traer contenido, eventos y actividades a la comunidad. Los colaboradores son personas ajenas al staff central de EntGamers que nos ayudan a traer contenido, eventos y actividades a la comunidad.
</Typography> </Typography>
<Typography variant='h3'>Requisitos</Typography> <Typography variant="h3">Requisitos</Typography>
<ul className="fa-ul"> <ul className="fa-ul">
<li> <li>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Profesionalismo</strong> <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem />
{' '}
<strong>Profesionalismo</strong>
<br /> <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. 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>
</ul> </ul>
<Typography variant='h3'>Beneficios</Typography> <Typography variant="h3">Beneficios</Typography>
<ul className="fa-ul"> <ul className="fa-ul">
<li> <li>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Apoyo</strong> <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem />
{' '}
<strong>Apoyo</strong>
<br /> <br />
Puedes contar con el apoyo de la comunidad para tus proyectos, ya sea en forma de difusión, asesoramiento o recursos. Puedes contar con el apoyo de la comunidad para tus proyectos, ya sea en forma de difusión, asesoramiento o recursos.
</li> </li>
@@ -317,43 +327,53 @@ const ApplyForm: FC = () => {
)} )}
{formik.values.role === ADMIN_CLAN_ID && ( {formik.values.role === ADMIN_CLAN_ID && (
<motion.div <motion.div
key={'motion-administrator'} key="motion-administrator"
transition={{ duration: 0.15, ease: 'easeInOut' }} transition={{ duration: 0.15, ease: 'easeInOut' }}
initial={{ opacity: 0, x: '-250px' }} initial={{ opacity: 0, x: '-250px' }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: '250px' }} exit={{ opacity: 0, x: '250px' }}
> >
<Typography variant='h2' align='center'>Administradores</Typography> <Typography variant="h2" align="center">Administradores</Typography>
<Typography variant='body1'> <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 y actividades. Son los responsables de que la comunidad siga creciendo y mejorando. 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 y actividades. Son los responsables de que la comunidad siga creciendo y mejorando.
</Typography> </Typography>
<Typography variant='h3'>Requisitos</Typography> <Typography variant="h3">Requisitos</Typography>
<ul className="fa-ul"> <ul className="fa-ul">
<li> <li>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Profesionalismo</strong> <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem />
{' '}
<strong>Profesionalismo</strong>
<br /> <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. 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>
<li> <li>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Constancia</strong> <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem />
{' '}
<strong>Constancia</strong>
<br /> <br />
La comunidad busca gente que en sus posibilidades sea activa, que pueda estar al tanto de lo que pasa en ella. La comunidad busca gente que en sus posibilidades sea activa, que pueda estar al tanto de lo que pasa en ella.
</li> </li>
<li> <li>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Proactividad</strong> <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem />
{' '}
<strong>Proactividad</strong>
<br /> <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. 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> </li>
</ul> </ul>
<Typography variant='h3'>Beneficios</Typography> <Typography variant="h3">Beneficios</Typography>
<ul className="fa-ul"> <ul className="fa-ul">
<li> <li>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Experiencia</strong> <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem />
{' '}
<strong>Experiencia</strong>
<br /> <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. 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>
<li> <li>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Capacitación</strong> <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem />
{' '}
<strong>Capacitación</strong>
<br /> <br />
La comunidad buscara dar capacitación a sus miembros en lo referido a herramientas y procedimientos utilizados. La comunidad buscara dar capacitación a sus miembros en lo referido a herramientas y procedimientos utilizados.
</li> </li>
src/app/equipo/unirse/page.tsx
+4 -2
View File
@@ -1,7 +1,7 @@
import Typography from '@/components/ui/Typography' import Typography from '@/components/ui/Typography'
import { Container } from '@/styled-system/jsx' import { Container } from '@/styled-system/jsx'
import { ensureTeamApplicationsCollection } from 'entgamers-database/backend/database/teamApplications' import { ensureTeamApplicationsCollection } from 'entgamers-database/backend/database/teamApplications'
import { type FC } from 'react' import { Suspense, type FC } from 'react'
import ApplyForm from './ApplyForm' import ApplyForm from './ApplyForm'
const EquipoUnirsePage: FC = async () => { const EquipoUnirsePage: FC = async () => {
@@ -12,7 +12,9 @@ const EquipoUnirsePage: FC = async () => {
<Typography variant="body1"> <Typography variant="body1">
El equipo de EntGamers está formado por personas que se dedican a la administración de la comunidad, a la organización de eventos y a la creación de contenido. Aquí podrás enterarte cuales son las funciones de cada uno de los miembros del equipo y como puedes unirte a nosotros. El equipo de EntGamers está formado por personas que se dedican a la administración de la comunidad, a la organización de eventos y a la creación de contenido. Aquí podrás enterarte cuales son las funciones de cada uno de los miembros del equipo y como puedes unirte a nosotros.
</Typography> </Typography>
<ApplyForm /> <Suspense fallback={<Typography variant="body1">Cargando...</Typography>}>
<ApplyForm />
</Suspense>
</Container> </Container>
) )
} }
src/app/login/LoginForm.tsx
+4 -2
View File
@@ -57,7 +57,7 @@ const LoginForm: FC = () => {
if (session.status === 'idle' && session.session !== undefined) { if (session.status === 'idle' && session.session !== undefined) {
router.push('/') router.push('/')
} }
}, [session]) }, [session, router])
return ( return (
<form <form
@@ -95,7 +95,9 @@ const LoginForm: FC = () => {
)} )}
</FormGroup> </FormGroup>
<Typography variant="caption" color="muted"> <Typography variant="caption" color="muted">
¿Perdiste tu contraseña? <NextLink href="/recover-password">Recupérala</NextLink> ¿Perdiste tu contraseña?
{' '}
<NextLink href="/recover-password">Recupérala</NextLink>
</Typography> </Typography>
<FormGroup> <FormGroup>
<Button <Button
src/app/login/page.tsx
+5 -4
View File
@@ -15,8 +15,7 @@ const LoginPage: FC = () => {
container(), container(),
css({ css({
minHeight: 'calc(100vh - 60px - 72px)' minHeight: 'calc(100vh - 60px - 72px)'
})) }))}
}
> >
<div <div
className={cx( className={cx(
@@ -41,8 +40,10 @@ const LoginPage: FC = () => {
className={card().content} className={card().content}
> >
<LoginForm /> <LoginForm />
<Typography variant="caption" align="center" > <Typography variant="caption" align="center">
¿No tienes una cuenta? <NextLink href="/register">Regístrate</NextLink> ¿No tienes una cuenta?
{' '}
<NextLink href="/register">Regístrate</NextLink>
</Typography> </Typography>
</div> </div>
</div> </div>
src/app/recover-password/CreateRecoverPasswordForm.tsx
+5 -4
View File
@@ -68,10 +68,11 @@ const CreateRecoverPasswordForm: FC = () => {
{formik.errors.email} {formik.errors.email}
</Typography> </Typography>
) )
: (<Typography variant="caption" color="info"> : (
Por favor, introduce el correo electrónico con el que te has registrado. Te enviaremos un correo con instrucciones para la recuperación de contraseña <Typography variant="caption" color="info">
</Typography>) Por favor, introduce el correo electrónico con el que te has registrado. Te enviaremos un correo con instrucciones para la recuperación de contraseña
} </Typography>
)}
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Button <Button
src/app/recover-password/ManageRecoverPassword.tsx
+9 -13
View File
@@ -1,27 +1,23 @@
'use client' 'use client'
import CreateRecoverPasswordForm from '@/app/recover-password/CreateRecoverPasswordForm' import CreateRecoverPasswordForm from '@/app/recover-password/CreateRecoverPasswordForm'
import { useSearchParams } from 'next/navigation' import { useSearchParams } from 'next/navigation'
import { useEffect, useState, type FC } from 'react' import type { FC } from 'react'
import UpdateRecoverPasswordForm, { type UpdateRecoverPasswordFormProps } from './UpdateRecoverPasswordForm' import UpdateRecoverPasswordForm, { type UpdateRecoverPasswordFormProps } from './UpdateRecoverPasswordForm'
const ManageRecoverPassword: FC = () => { const ManageRecoverPassword: FC = () => {
const [recoverData, setRecoverData] = useState<UpdateRecoverPasswordFormProps | undefined>()
const searchParams = useSearchParams() const searchParams = useSearchParams()
const userId = searchParams.get('userId')
useEffect(() => { const secret = searchParams.get('secret')
const userId = searchParams.get('userId') const recoverData: UpdateRecoverPasswordFormProps | undefined = (userId !== null && secret !== null) ? { userId, secret } : undefined
const secret = searchParams.get('secret')
if (userId !== null && secret !== null) {
setRecoverData({ userId, secret })
}
}, [])
if (recoverData === undefined) { if (recoverData === undefined) {
return <CreateRecoverPasswordForm /> return <CreateRecoverPasswordForm />
} else { } else {
return <UpdateRecoverPasswordForm return (
{...recoverData} <UpdateRecoverPasswordForm
/> {...recoverData}
/>
)
} }
} }
src/app/recover-password/UpdateRecoverPasswordForm.tsx
+1 -2
View File
@@ -89,8 +89,7 @@ const UpdateRecoverPasswordForm: FC<UpdateRecoverPasswordFormProps> = (props) =>
<Typography variant="caption" color="info"> <Typography variant="caption" color="info">
Escribe tu nueva contraseña Escribe tu nueva contraseña
</Typography> </Typography>
) )}
}
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<label htmlFor="confirmPassword"> <label htmlFor="confirmPassword">
src/app/recover-password/page.tsx
+1 -2
View File
@@ -13,8 +13,7 @@ const page: FC = () => {
container(), container(),
css({ css({
minHeight: 'calc(100vh - 60px - 72px)' minHeight: 'calc(100vh - 60px - 72px)'
})) }))}
}
> >
<div <div
className={cx( className={cx(
src/app/register/page.tsx
+5 -4
View File
@@ -15,8 +15,7 @@ const RegisterPage: FC = () => {
container(), container(),
css({ css({
minHeight: 'calc(100vh - 60px - 72px)' minHeight: 'calc(100vh - 60px - 72px)'
})) }))}
}
> >
<div <div
@@ -42,8 +41,10 @@ const RegisterPage: FC = () => {
className={card().content} className={card().content}
> >
<RegisterForm /> <RegisterForm />
<Typography variant="caption" align="center" > <Typography variant="caption" align="center">
¿Ya tienes una cuenta? <NextLink href="/login">Inicia sesión</NextLink> ¿Ya tienes una cuenta?
{' '}
<NextLink href="/login">Inicia sesión</NextLink>
</Typography> </Typography>
</div> </div>
</div> </div>
src/components/layout/Footer.tsx
+18 -6
View File
@@ -22,14 +22,20 @@ const Footer: FC = () => {
})} })}
> >
<div> <div>
<Typography variant="h3" component='div'> Acerca de </Typography> <Typography variant="h3" component="div"> Acerca de </Typography>
<ul className="fa-ul"> <ul className="fa-ul">
<li><FontAwesomeIcon icon={faChevronRight} listItem fixedWidth /><NextLink href="/acerca-de"> EntGamers</NextLink></li> <li>
<li><FontAwesomeIcon icon={faChevronRight} listItem fixedWidth /><NextLink href="/clanes"> Clanes</NextLink></li> <FontAwesomeIcon icon={faChevronRight} listItem fixedWidth />
<NextLink href="/acerca-de"> EntGamers</NextLink>
</li>
<li>
<FontAwesomeIcon icon={faChevronRight} listItem fixedWidth />
<NextLink href="/clanes"> Clanes</NextLink>
</li>
</ul> </ul>
</div> </div>
<div> <div>
<Typography variant="h3" component='div'> Contacto </Typography> <Typography variant="h3" component="div"> Contacto </Typography>
</div> </div>
<div></div> <div></div>
</Container> </Container>
@@ -40,8 +46,14 @@ const Footer: FC = () => {
justifyContent: 'center' justifyContent: 'center'
})} })}
> >
<Typography variant="body2" component='div'> <Typography variant="body2" component="div">
Hecho con <FontAwesomeIcon className={css({ color: 'red' })} icon={faHeart} /> por <a href="https://srjuggernaut.dev">SrJuggernaut</a> Hecho con
{' '}
<FontAwesomeIcon className={css({ color: 'red' })} icon={faHeart} />
{' '}
por
{' '}
<a href="https://srjuggernaut.dev">SrJuggernaut</a>
</Typography> </Typography>
</Container> </Container>
</footer> </footer>
src/components/layout/Header.tsx
+17 -17
View File
@@ -21,28 +21,28 @@ const Header: FC = () => {
return () => { return () => {
window.removeEventListener('scroll', handleScroll) window.removeEventListener('scroll', handleScroll)
} }
}, []) }, [handleScroll])
return ( return (
<> <>
<header <header
className={css({ className={css({
display: 'flex', 'display': 'flex',
alignItems: 'center', 'alignItems': 'center',
justifyContent: 'center', 'justifyContent': 'center',
backgroundColor: 'transparent', 'backgroundColor': 'transparent',
color: 'text', 'color': 'text',
minHeight: '60px', 'minHeight': '60px',
position: 'fixed', 'position': 'fixed',
top: 0, 'top': 0,
left: 0, 'left': 0,
width: '100%', 'width': '100%',
zIndex: 'sticky', 'zIndex': 'sticky',
boxShadow: 'none', 'boxShadow': 'none',
transitionProperty: 'background-color, box-shadow', 'transitionProperty': 'background-color, box-shadow',
transitionDuration: '0.25s', 'transitionDuration': '0.25s',
transitionTimingFunction: 'easeInOut', 'transitionTimingFunction': 'easeInOut',
willChange: 'background-color, box-shadow', 'willChange': 'background-color, box-shadow',
'&[data-scrolled=true]': { '&[data-scrolled=true]': {
backgroundColor: 'surface', backgroundColor: 'surface',
boxShadow: '2px 2px 4px 0px rgba(0, 0, 0, 0.25)' boxShadow: '2px 2px 4px 0px rgba(0, 0, 0, 0.25)'
src/components/layout/Header/SessionButtons.tsx
+10 -10
View File
@@ -14,7 +14,7 @@ import NextLink from 'next/link'
import { type FC } from 'react' import { type FC } from 'react'
const SessionButtons: FC = () => { const SessionButtons: FC = () => {
const { session, status, clanes } = useAppSelector(state => state.session) const { session, status, clanes } = useAppSelector((state) => state.session)
const { manageError } = useManageError() const { manageError } = useManageError()
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
@@ -24,8 +24,8 @@ const SessionButtons: FC = () => {
return ( return (
<> <>
<Tooltip <Tooltip
title={'Iniciar sesión'} title="Iniciar sesión"
position='bottom' position="bottom"
> >
<NextLink <NextLink
href="/login" href="/login"
@@ -44,8 +44,8 @@ const SessionButtons: FC = () => {
return ( return (
<> <>
<Tooltip <Tooltip
title={'Mi cuenta'} title="Mi cuenta"
position='bottom' position="bottom"
> >
<NextLink <NextLink
href="/cuenta" href="/cuenta"
@@ -56,10 +56,10 @@ const SessionButtons: FC = () => {
<FontAwesomeIcon icon={faUser} fixedWidth /> <FontAwesomeIcon icon={faUser} fixedWidth />
</NextLink> </NextLink>
</Tooltip> </Tooltip>
{clanes !== undefined && clanes?.teams.some(team => team.$id === ADMIN_CLAN_ID || team.$id === MODERATOR_CLAN_ID) && ( {clanes !== undefined && clanes?.teams.some((team) => team.$id === ADMIN_CLAN_ID || team.$id === MODERATOR_CLAN_ID) && (
<Tooltip <Tooltip
title={'Panel de administración'} title="Panel de administración"
position='bottom' position="bottom"
> >
<NextLink <NextLink
href="/dashboard" href="/dashboard"
@@ -72,8 +72,8 @@ const SessionButtons: FC = () => {
</Tooltip> </Tooltip>
)} )}
<Tooltip <Tooltip
title={'Cerrar sesión'} title="Cerrar sesión"
position='bottom' position="bottom"
> >
<IconButton <IconButton
onClick={() => { onClick={() => {
src/components/layout/Menu.tsx
+18 -15
View File
@@ -3,7 +3,7 @@ import BackDrop from '@/components/ui/BackDrop'
import IconButton from '@/components/ui/IconButton' import IconButton from '@/components/ui/IconButton'
import { css } from '@/styled-system/css' import { css } from '@/styled-system/css'
import { iconButton } from '@/styled-system/recipes' import { iconButton } from '@/styled-system/recipes'
import { type IconDefinition } from '@fortawesome/fontawesome-common-types' import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
import { faBars, faHome, faTimes, faUsers } from '@fortawesome/free-solid-svg-icons' import { faBars, faHome, faTimes, faUsers } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import NextLink from 'next/link' import NextLink from 'next/link'
@@ -62,6 +62,7 @@ const Menu: FC = () => {
})} })}
> >
<button <button
type="button"
className={iconButton({ className={iconButton({
color: 'danger' color: 'danger'
})} })}
@@ -80,22 +81,21 @@ const Menu: FC = () => {
> >
{menuLinks.map((menuLink, index) => ( {menuLinks.map((menuLink, index) => (
<li <li
key={`menu-link-${index}`} key={`menu-link-${menuLink.label}-${index.toString()}`}
onClick={() => { setIsMenuOpen(false) }}
> >
<NextLink <NextLink
className={css({ className={css({
display: 'flex', 'display': 'flex',
alignItems: 'center', 'alignItems': 'center',
justifyContent: 'left', 'justifyContent': 'left',
padding: '1rem', 'padding': '1rem',
textDecoration: 'none', 'textDecoration': 'none',
backgroundColor: 'transparent', 'backgroundColor': 'transparent',
color: 'text', 'color': 'text',
transitionProperty: 'background-color', 'transitionProperty': 'background-color',
transitionDuration: 'normal', 'transitionDuration': 'normal',
transitionTimingFunction: 'easeInOut', 'transitionTimingFunction': 'easeInOut',
willChange: 'background-color color', 'willChange': 'background-color color',
'&:hover': { '&:hover': {
backgroundColor: 'primary', backgroundColor: 'primary',
color: 'primary.contrast' color: 'primary.contrast'
@@ -107,8 +107,11 @@ const Menu: FC = () => {
})} })}
href={menuLink.href} href={menuLink.href}
data-active={pathName === menuLink.href} data-active={pathName === menuLink.href}
onClick={() => { setIsMenuOpen(false) }}
> >
<FontAwesomeIcon icon={menuLink.icon} fixedWidth />&nbsp;{menuLink.label} <FontAwesomeIcon icon={menuLink.icon} fixedWidth />
&nbsp;
{menuLink.label}
</NextLink> </NextLink>
</li> </li>
))} ))}
src/components/ui/Alert.tsx
+2 -3
View File
@@ -32,9 +32,8 @@ export const AlertCloseButton: FC<ComposedAlertCloseButtonProps> = ({ children,
{...allOtherAlertProps} {...allOtherAlertProps}
> >
{children === undefined {children === undefined
? <FontAwesomeIcon icon={faTimes as FontAwesomeIconProps['icon']} fixedWidth size='sm' /> ? <FontAwesomeIcon icon={faTimes as FontAwesomeIconProps['icon']} fixedWidth size="sm" />
: children : children}
}
</IconButton> </IconButton>
) )
} }
src/components/ui/BackDrop.tsx
+1 -2
View File
@@ -38,8 +38,7 @@ const BackDrop: FC<BackDropProps> = ({ isOpen, onClickAway, children }) => {
{children} {children}
</motion.div> </motion.div>
) )
: undefined : undefined}
}
</AnimatePresence> </AnimatePresence>
), document.body) ), document.body)
} }
src/components/ui/Button.tsx
+3 -5
View File
@@ -1,11 +1,9 @@
import { cx } from '@/styled-system/css' import { cx } from '@/styled-system/css'
import { button, type ButtonVariantProps } from '@/styled-system/recipes/button' import { button, type ButtonVariantProps } from '@/styled-system/recipes/button'
import { type MergeOmitting } from '@/types/utilities' import type { MergeOmitting } from '@/types/utilities'
import { type ButtonHTMLAttributes, type DetailedHTMLProps, type FC } from 'react' import type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react'
type ComposedButtonProps = MergeOmitting<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonVariantProps> export type ButtonProps = MergeOmitting<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonVariantProps>
export interface ButtonProps extends ComposedButtonProps {}
const Button: FC<ButtonProps> = ({ children, className, ...rest }) => { const Button: FC<ButtonProps> = ({ children, className, ...rest }) => {
const [buttonRecipeArgs, allOtherButtonProps] = button.splitVariantProps(rest) const [buttonRecipeArgs, allOtherButtonProps] = button.splitVariantProps(rest)
src/components/ui/IconButton.tsx
+3 -5
View File
@@ -1,11 +1,9 @@
import { cx } from '@/styled-system/css' import { cx } from '@/styled-system/css'
import { iconButton, type IconButtonVariantProps } from '@/styled-system/recipes/icon-button' import { iconButton, type IconButtonVariantProps } from '@/styled-system/recipes/icon-button'
import { type MergeOmitting } from '@/types/utilities' import type { MergeOmitting } from '@/types/utilities'
import { type ButtonHTMLAttributes, type DetailedHTMLProps, type FC } from 'react' import type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react'
type ComposedIconButtonProps = MergeOmitting<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IconButtonVariantProps> export type IconButtonProps = MergeOmitting<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IconButtonVariantProps>
export interface IconButtonProps extends ComposedIconButtonProps {}
const IconButton: FC<IconButtonProps> = ({ children, className, ...rest }) => { const IconButton: FC<IconButtonProps> = ({ children, className, ...rest }) => {
const [iconButtonRecipeArgs, allOtherIconButtonProps] = iconButton.splitVariantProps(rest) const [iconButtonRecipeArgs, allOtherIconButtonProps] = iconButton.splitVariantProps(rest)
src/components/ui/Typography.tsx
+9 -10
View File
@@ -1,7 +1,7 @@
import { cx } from '@/styled-system/css' import { cx } from '@/styled-system/css'
import { typography, type TypographyVariantProps } from '@/styled-system/recipes/typography' import { typography, type TypographyVariantProps } from '@/styled-system/recipes/typography'
import { type MergeOmitting } from '@/types/utilities' import type { MergeOmitting } from '@/types/utilities'
import { type ElementType, type FC, type HTMLAttributes } from 'react' import { type ElementType, type FC, type HTMLAttributes, createElement } from 'react'
type ComposedTypographyProps = MergeOmitting<HTMLAttributes<HTMLElement>, TypographyVariantProps> type ComposedTypographyProps = MergeOmitting<HTMLAttributes<HTMLElement>, TypographyVariantProps>
@@ -35,19 +35,18 @@ const variantToComponent = (variant: TypographyVariantProps['variant']): Element
const Typography: FC<TypographyProps> = ({ children, className, component, ...rest }) => { const Typography: FC<TypographyProps> = ({ children, className, component, ...rest }) => {
const [typographyRecipeArgs, allOtherTypographyProps] = typography.splitVariantProps(rest) const [typographyRecipeArgs, allOtherTypographyProps] = typography.splitVariantProps(rest)
const Component = component ?? variantToComponent(typographyRecipeArgs.variant)
typographyRecipeArgs.color = typographyRecipeArgs.color ?? ( typographyRecipeArgs.color = typographyRecipeArgs.color ?? (
typeof typographyRecipeArgs.variant === 'string' && typographyRecipeArgs.variant.startsWith('h') typeof typographyRecipeArgs.variant === 'string' && typographyRecipeArgs.variant.startsWith('h')
? 'primary' ? 'primary'
: 'inherit' : 'inherit'
) )
return ( return createElement(
<Component component ?? variantToComponent(typographyRecipeArgs.variant),
className={cx(typography(typographyRecipeArgs), className)} {
{...allOtherTypographyProps} className: cx(typography(typographyRecipeArgs), className),
> ...allOtherTypographyProps
{children} },
</Component> children
) )
} }
src/components/ui/form/DebouncedInput.tsx
+5 -3
View File
@@ -19,14 +19,16 @@ const DebouncedInput: FC<DebouncedInputProps> = ({ value: initialValue, onChange
onChange(value) onChange(value)
}, debounce) }, debounce)
return () => { clearTimeout(timeout) } return () => {
}, [value]) clearTimeout(timeout)
}
}, [value, onChange, debounce])
return ( return (
<Input <Input
{...props} {...props}
value={value} value={value}
onChange={e => { setValue(e.target.value) }} onChange={(e) => { setValue(e.target.value) }}
/> />
) )
} }
src/components/ui/form/Input.tsx
+5 -9
View File
@@ -1,21 +1,17 @@
import { cx } from '@/styled-system/css' import { cx } from '@/styled-system/css'
import { input, type InputVariantProps } from '@/styled-system/recipes/input' import { input, type InputVariantProps } from '@/styled-system/recipes/input'
import { type MergeOmitting } from '@/types/utilities' import type { MergeOmitting } from '@/types/utilities'
import { type DetailedHTMLProps, type FC, type InputHTMLAttributes } from 'react' import type { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react'
type ComposedInputProps = MergeOmitting<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, InputVariantProps> export type InputProps = MergeOmitting<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, InputVariantProps>
export interface InputProps extends ComposedInputProps {} const Input: FC<InputProps> = ({ className, ...rest }) => {
const Input: FC<InputProps> = ({ children, className, ...rest }) => {
const [inputRecipeArgs, allOtherInputProps] = input.splitVariantProps(rest) const [inputRecipeArgs, allOtherInputProps] = input.splitVariantProps(rest)
return ( return (
<input <input
className={cx(input(inputRecipeArgs), className)} className={cx(input(inputRecipeArgs), className)}
{...allOtherInputProps} {...allOtherInputProps}
> />
{children}
</input>
) )
} }
src/components/ui/form/PasswordInput.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ const PasswordInput: FC<InputProps> = ({ className, ...props }) => {
size="small" size="small"
onClick={() => { setShowPassword(!showPassword) }} onClick={() => { setShowPassword(!showPassword) }}
> >
<FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} fixedWidth/> <FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} fixedWidth />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div> </div>
src/state/feedbackSlice.ts
+3 -3
View File
@@ -13,16 +13,16 @@ const feedbackSlice = createSlice({
name: 'feedback', name: 'feedback',
initialState, initialState,
reducers: { reducers: {
addAlert (state, action: PayloadAction<Alert>) { addAlert(state, action: PayloadAction<Alert>) {
return { return {
...state, ...state,
alerts: [...state.alerts, action.payload] alerts: [...state.alerts, action.payload]
} }
}, },
removeAlert (state, action: PayloadAction<string>) { removeAlert(state, action: PayloadAction<string>) {
return { return {
...state, ...state,
alerts: state.alerts.filter(alert => alert.id !== action.payload) alerts: state.alerts.filter((alert) => alert.id !== action.payload)
} }
} }
} }
src/state/sessionSlice.ts
+10 -10
View File
@@ -1,15 +1,15 @@
import { createSlice, type PayloadAction } from '@reduxjs/toolkit' import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
import { type Models } from 'appwrite' import type { Models } from 'appwrite'
import { type ClanList } from 'entgamers-database/frontend/clanes' import type { ClanList } from 'entgamers-database/frontend/clanes'
import { type User } from 'entgamers-database/frontend/session' import type { User } from 'entgamers-database/frontend/session'
export type SessionState = export type SessionState
| { = | {
status: 'idle' | 'loading' | 'initializing' status: 'idle' | 'loading' | 'initializing'
session?: Models.Session session?: Models.Session
user?: User user?: User
clanes?: ClanList clanes?: ClanList
} }
const initialState: SessionState = { const initialState: SessionState = {
status: 'initializing' status: 'initializing'
tsconfig.json
+3 -2
View File
@@ -16,7 +16,7 @@
"moduleResolution": "Node16", "moduleResolution": "Node16",
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"jsx": "preserve", "jsx": "react-jsx",
"incremental": true, "incremental": true,
"baseUrl": "src", "baseUrl": "src",
"paths": { "paths": {
@@ -35,7 +35,8 @@
"**/*.ts", "**/*.ts",
"**/*.tsx", "**/*.tsx",
".next/types/**/*.ts", ".next/types/**/*.ts",
"next.config.js" "next.config.js",
".next/dev/types/**/*.ts"
], ],
"exclude": [ "exclude": [
"node_modules" "node_modules"