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.

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

Add i18next and language switcher #345

Merged
merged 5 commits into from
Sep 3, 2020
Merged

Add i18next and language switcher #345

merged 5 commits into from
Sep 3, 2020

Conversation

phiter
Copy link
Contributor

@phiter phiter commented Jul 23, 2020

Description

This PR adds i18next and react-i18next libraries to the project to initialize the i18n feature.

It also adds a language switch component to both the office and room appbars.

Initially only basic english and portuguese translations have been created.

The language will be set automatically according to the browser setting and if the user changes the language, the choice will be stored in the localStorage.

resolves #341

How to test?

  1. Login to the Matrix
  2. Look for the language switch button in the appbar and open it
  3. Click one of the languages.

Expected behavior

The language names will change to their versions in the selected language, as well as the tooltip of the language switcher menu activator.

@phiter
Copy link
Contributor Author

phiter commented Jul 23, 2020

Gonna fix those codeclimate issues later today.

@phiter
Copy link
Contributor Author

phiter commented Jul 28, 2020

These codeclimate issues are odd. It says invalid token <> for react fragments. I think that's the only reason the function is exceeding the limit (might be wrong though), because there are other components which have way more LOC.

Example:

const RoomCard = ({ name, description, users, meetingEnabled, onEnterRoom, onEnterMeeting }) => {
const [isExpanded, toggleExpand] = useState(false);
const classes = useStyles();
const userToShow = isExpanded ? users : users.slice(0, 3);
const totalUsersHidden = users.length - userToShow.length;
return (
<Card className={classes.root}>
<CardActionArea
className={classes.contentAction}
onClick={() => {
toggleExpand(!isExpanded);
}}
>
<CardContent className={classes.content}>
<div className={classes.flex}>
<Typography gutterBottom variant="h5" component="h2" className={classes.content}>
{name}
</Typography>
{description && (
<Tooltip title={description}>
<InfoIcon className={classes.descriptionIcon} color="action" />
</Tooltip>
)}
</div>
<div className={classes.userGrid}>
{userToShow.map(user => (
<Tooltip key={user.id} title={user.name}>
<div
className={clsx({
[classes.avatarInMeeting]: user.inMeet
})}
>
<Avatar src={decodeURIComponent(user.imageUrl)} />
</div>
</Tooltip>
))}
{totalUsersHidden > 0 && (
<Tooltip title={`more ${totalUsersHidden} users`}>
<Avatar>{`+${totalUsersHidden}`}</Avatar>
</Tooltip>
)}
{users.length === 0 && <div className={classes.emptyUserSpace} />}
</div>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary" onClick={onEnterRoom}>
Enter room
</Button>
{meetingEnabled && (
<Button size="small" color="primary" onClick={onEnterMeeting}>
Enter meeting
</Button>
)}
</CardActions>
</Card>
);
};

Adds i18n to login application and refactors google signin button
@juliemar juliemar merged commit ac04e99 into develop Sep 3, 2020
@juliemar juliemar deleted the add-i18n branch September 3, 2020 02:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants