Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Internacionalizacion grupos #114

Merged
merged 7 commits into from
Apr 11, 2024
Merged

Internacionalizacion grupos #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2148403
Internacionalizado GroupDetails
iyanfdezz Apr 11, 2024
726bbbf
Internacionalizada vista Grupos
iyanfdezz Apr 11, 2024
87fa266
Generalizando las cabeceras de las tablas de grupos
iyanfdezz Apr 11, 2024
d88df2f
Internacionalizada vista UserGroup
iyanfdezz Apr 11, 2024
a926b1b
Traducción a inglés
iyanfdezz Apr 11, 2024
6cff1ee
Internacionalización Grupos en Nav
iyanfdezz Apr 11, 2024
d218616
Añadiendo enlaces a grupos en el desplegable
iyanfdezz Apr 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions webapp/src/components/Nav/Nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,15 +184,15 @@ const Nav = () => {
onClick={() => handleNavigate("/social/grupos")}
color={textColor}
>
Grupos
{t("components.nav.groups")}
</Text>
<Text
data-testid="mygroups"
cursor="pointer"
onClick={() => handleNavigate("/social/misgrupos")}
color={textColor}
>
Mis grupos
{t("components.nav.usergroups")}
</Text>
</PopoverBody>
</PopoverContent>
Expand Down Expand Up @@ -315,6 +315,12 @@ const Nav = () => {
<Link href="/social/amigos">
{t("components.nav.friends")}
</Link>
<Link href="/social/grupos">
{t("components.nav.groups")}
</Link>
<Link href="/social/misgrupos">
{t("components.nav.usergroups")}
</Link>
<Link href="/stats">{t("components.nav.stats")}</Link>
<Link href="/ranking">{t("components.nav.ranking")}</Link>
</Flex>
Expand Down
34 changes: 34 additions & 0 deletions webapp/src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
"humancalculator": "Human Calculator",
"users": "Users",
"social": "Social",
"groups": "Groups",
"usergroups": "My groups",
"friends": "Friends",
"stats": "Statistics",
"ranking": "Ranking",
Expand Down Expand Up @@ -199,6 +201,38 @@
"profile": "View Profile",
"delete": "Delete Friend",
"noFriends": "You currently have no friends."
},
"groupdetails": {
"details": "Group details",
"loading": "Loading...",
"createdBy": "Created by",
"when": "on the",
"participants": "Participants",
"avatar": "Avatar",
"name": "Name",
"viewProfile": "View profile",
"loadingText": "Your search is being processed, please wait a moment.",
"noParticipants": "There are no participants in this group."
},
"groups": {
"title": "Create a group",
"name": "Name",
"create": "Create",
"errorPrefix": "Error: ",
"joinable": "Groups you can join",
"join": "Join group",
"noGroups": "There are no groups available to join."
},
"groupsTable": {
"groupName": "Group name",
"creationDate": "Creation date",
"creator": "Creator"
},
"usergroups": {
"title": "Your groups",
"seegroup": "See group",
"creationDate": "Creation date",
"creator": "Creator"
}
}
}
35 changes: 35 additions & 0 deletions webapp/src/locales/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
"humancalculator": "Calculadora humana",
"users": "Usuarios",
"social": "Social",
"groups": "Grupos",
"usergroups": "Mis grupos",
"friends": "Amigos",
"stats": "Estadísticas",
"ranking": "Ranking",
Expand Down Expand Up @@ -199,6 +201,39 @@
"profile": "Ver perfil",
"delete": "Eliminar amigo",
"noFriends": "No tienes amigos actualmente."
},
"groupdetails": {
"details":"Detalles del grupo",
"loading": "Cargando...",
"createdBy": "Creado por",
"when": "el",
"participants": "Participantes",
"avatar":"Avatar",
"name":"Nombre",
"viewProfile": "Ver perfil",
"loadingText": "Se está consultando su búsqueda, espere unos instantes.",
"noParticipants": "No hay participantes en este grupo."
},
"groups": {
"title": "Crea un grupo",
"name": "Nombre",
"create": "Crear",
"errorPrefix": "Error: ",
"joinable": "Grupos a los que puedes unirte",
"join": "Unirse al grupo",
"noGroups": "No hay grupos disponibles para unirse."
},
"groupsTable": {
"groupName": "Nombre del grupo",
"creationDate": "Fecha de creación",
"creator": "Creador"
},
"usergroups": {
"title":"Tus grupos",
"seegroup": "Ver grupo",
"creationDate": "Fecha de creación",
"creator": "Creador"
}

}
}
19 changes: 11 additions & 8 deletions webapp/src/pages/Social/GroupDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@ import axios from 'axios';
import { Container, Box, Text, Heading, Table, Thead, Tbody, Tr, Th, Td, Avatar, Link } from '@chakra-ui/react';
import Nav from "../../components/Nav/Nav.js";
import Footer from "../../components/Footer/Footer.js";
import { useTranslation } from "react-i18next";

const GroupDetails = () => {
const { t } = useTranslation();
const [group, setGroup] = useState(null);
const { groupName } = useParams();
const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
Expand All @@ -32,20 +34,21 @@ const GroupDetails = () => {
<>
<Nav/>
<Container maxW="md" mt="5">
<Heading as="h1" mb="5">Detalles del grupo: {groupName}</Heading>
<Heading as="h1" mb="5">{t('pages.groupdetails.details')} {groupName}</Heading>
{group ? (
<Box>
<Text fontSize="lg" fontWeight="bold" mb="4">
Creado por {group.members.length > 0 ? group.members[0] : ''} el {new Date(group.createdAt).toLocaleDateString()}
{t('pages.groupdetails.createdBy')} {group.members.length > 0 ? group.members[0] : ''}
{t('pages.groupdetails.when')} {new Date(group.createdAt).toLocaleDateString()}
</Text>

<Text fontSize="lg" fontWeight="bold" mb="2">Participantes ({group.members.length}) :</Text>
<Text fontSize="lg" fontWeight="bold" mb="2">{t('pages.groupdetails.participants')} ({group.members.length}) :</Text>
<Table variant="striped">
<Thead>
<Tr>
<Th>Avatar</Th>
<Th>Nombre</Th>
<Th>Ver perfil</Th>
<Th>{t('pages.groupdetails.avatar')}</Th>
<Th>{t('pages.groupdetails.name')}</Th>
<Th>{t('pages.groupdetails.viewProfile')}</Th>
</Tr>
</Thead>
<Tbody>
Expand All @@ -56,15 +59,15 @@ const GroupDetails = () => {
</Td>
<Td>{member}</Td>
<Td>
<Link color="blue.500" onClick={() => redirectToProfile(member)}>Ver perfil</Link>
<Link color="blue.500" onClick={() => redirectToProfile(member)}>{t('pages.groupdetails.viewProfile')}</Link>
</Td>
</Tr>
))}
</Tbody>
</Table>
</Box>
) : (
<Text>Loading...</Text>
<Text>{t('pages.groupdetails.loading')}</Text>
)}
</Container>
<Footer/>
Expand Down
20 changes: 11 additions & 9 deletions webapp/src/pages/Social/Groups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@ import axios from 'axios';
import { Box, Container, Text, Button, Input, InputGroup, InputRightElement, Alert, Table, Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react';
import Nav from "../../components/Nav/Nav.js";
import Footer from "../../components/Footer/Footer.js";
import { useTranslation } from "react-i18next";

const Groups = () => {
const { t } = useTranslation();
const [groups, setGroups] = useState([]);
const [name, setName] = useState('');
const [error, setError] = useState('');
Expand Down Expand Up @@ -69,17 +71,17 @@ const Groups = () => {
<Nav />
<Container maxW="md" mt="5">
<Box mb="5">
<Text fontSize="2xl" fontWeight="bold" mb="4">Crea un grupo</Text>
<Text fontSize="2xl" fontWeight="bold" mb="4">{t('pages.groups.title')}</Text>
<Box display="flex" alignItems="center">
<InputGroup flex="1" mr="4">
<Input
name="name"
placeholder="Nombre"
placeholder={t('pages.groups.name')}
value={name}
onChange={(e) => setName(e.target.value)}
/>
</InputGroup>
<Button colorScheme="blue" onClick={addGroup}>Crear</Button>
<Button colorScheme="blue" onClick={addGroup}>{t('pages.groups.create')}</Button>
</Box>
{error && (
<Alert status="error" variant="subtle" mt="2">
Expand All @@ -89,14 +91,14 @@ const Groups = () => {
</Box>

<Box mt="4">
<Text fontSize="3xl" fontWeight="bold" mb="4">Grupos a los que puedes unirte</Text>
<Text fontSize="3xl" fontWeight="bold" mb="4">{t('pages.groups.joinable')}</Text>
<Table variant="simple">
<Thead>
<Tr>
<Th>Nombre del grupo</Th>
<Th>Fecha de creación</Th>
<Th>Creador</Th>
<Th>Unirse al grupo</Th>
<Th>{t('pages.groupsTable.groupName')}</Th>
<Th>{t('pages.groupsTable.creationDate')}</Th>
<Th>{t('pages.groupsTable.creator')}</Th>
<Th>{t('pages.groups.join')}</Th>
</Tr>
</Thead>
<Tbody>
Expand All @@ -106,7 +108,7 @@ const Groups = () => {
<Td>{new Date(group.createdAt).toLocaleDateString()}</Td>
<Td>{group.members.length > 0 ? group.members[0] : ''}</Td>
<Td>
<Button colorScheme="blue" onClick={() => handleJoinGroup(group._id)}>Unirme</Button>
<Button colorScheme="blue" onClick={() => handleJoinGroup(group._id)}>{t('pages.groups.join')}</Button>
</Td>
</Tr>
))}
Expand Down
14 changes: 8 additions & 6 deletions webapp/src/pages/Social/UserGroups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@ import { Box, Container, Text, Button, Table, Thead, Tbody, Tr, Th, Td } from '@
import Nav from "../../components/Nav/Nav.js";
import Footer from "../../components/Footer/Footer.js";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";

const UserGroups = () => {
const { t } = useTranslation();
const [groups, setGroups] = useState([]);
const [name, setName] = useState('');
const [error, setError] = useState('');
Expand Down Expand Up @@ -40,14 +42,14 @@ const UserGroups = () => {
<Nav />
<Container maxW="xs" mt="5" textAlign="center">
<Box mt="5">
<Text fontSize="3xl" fontWeight="bold" mb="4">Tus grupos</Text>
<Text fontSize="3xl" fontWeight="bold" mb="4">{t('pages.usergroups.title')}</Text>
<Table variant="simple" mx="auto">
<Thead>
<Tr>
<Th>Nombre del grupo</Th>
<Th>Creador</Th>
<Th>Fecha de creación</Th>
<Th>Ver grupo</Th>
<Th>{t('pages.groupsTable.groupName')}</Th>
<Th>{t('pages.groupsTable.creationDate')}</Th>
<Th>{t('pages.groupsTable.creator')}</Th>
<Th>{t('pages.usergroups.seegroup')}</Th>
</Tr>
</Thead>
<Tbody>
Expand All @@ -57,7 +59,7 @@ const UserGroups = () => {
<Td>{group.members.length > 0 ? group.members[0] : ''}</Td>
<Td>{new Date(group.createdAt).toLocaleDateString()}</Td>
<Td>
<Button colorScheme="blue" onClick={() => seeGroupDetails(group.name)}>Ver grupo</Button>
<Button colorScheme="blue" onClick={() => seeGroupDetails(group.name)}>{t('pages.usergroups.seegroup')}</Button>
</Td>
</Tr>
))}
Expand Down
Loading