feat: I18n (#1653)
* feat: i18n * Changing language single source of truth from TEAM to USER * Changes according to @tommoor comments on PR * Changed package.json for build:i18n and translation label * Finished 1st MVP of i18n for outline * new translation labels & Portuguese from Portugal translation * Fixes from PR request * Described language dropdown as an experimental feature * Set keySeparator to false in order to cowork with html keys * Added useTranslation to Breadcrumb * Repositioned <strong> element * Removed extra space from TemplatesMenu * Fortified the test suite for i18n * Fixed trans component problematic * Check if selected language is available * Update yarn.lock * Removed unused Trans * Removing debug variable from i18n init * Removed debug variable * test: update snapshots * flow: Remove decorator usage to get proper flow typing It's a shame, but hopefully we'll move to Typescript in the next 6 months and we can forget this whole Flow mistake ever happened * translate: Drafts * More translatable strings * Mo translation strings * translation: Search * async translations loading * cache translations in client * Revert "cache translations in client" This reverts commit 08fb61ce36384ff90a704faffe4761eccfb76da1. * Revert localStorage cache for cache headers * Update Crowdin configuration file * Moved translation files to locales folder and fixed english text * Added CONTRIBUTING File for CrowdIn * chore: Move translations again to please CrowdIn * fix: loading paths chore: Add strings for editor * fix: Improve validation on documents.import endpoint * test: mock bull * fix: Unknown mimetype should fallback to Markdown parsing if markdown extension (#1678) * closes #1675 * Update CONTRIBUTING * chore: Add link to translation portal from app UI * refactor: Centralize language config * fix: Ensure creation of i18n directory in build * feat: Add language prompt * chore: Improve contributing guidelines, add link from README * chore: Normalize tab header casing * chore: More string externalization * fix: Language prompt in dark mode Co-authored-by: André Glatzl <andreglatzl@gmail.com>
This commit is contained in:
Tom Moor
GitHub
@@ -3,6 +3,7 @@ import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { EditIcon } from "outline-icons";
|
||||
import * as React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { withRouter, type RouterHistory } from "react-router-dom";
|
||||
import styled from "styled-components";
|
||||
import { settings } from "shared/utils/routeHelpers";
|
||||
@@ -26,61 +27,65 @@ type Props = {
|
||||
onRequestClose: () => void,
|
||||
};
|
||||
|
||||
@observer
|
||||
class UserProfile extends React.Component<Props> {
|
||||
render() {
|
||||
const { user, auth, documents, ...rest } = this.props;
|
||||
if (!user) return null;
|
||||
const isCurrentUser = auth.user && auth.user.id === user.id;
|
||||
function UserProfile(props: Props) {
|
||||
const { t } = useTranslation();
|
||||
const { user, auth, documents, ...rest } = props;
|
||||
if (!user) return null;
|
||||
const isCurrentUser = auth.user && auth.user.id === user.id;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<Flex align="center">
|
||||
<Avatar src={user.avatarUrl} size={38} />
|
||||
<span> {user.name}</span>
|
||||
</Flex>
|
||||
}
|
||||
{...rest}
|
||||
>
|
||||
<Flex column>
|
||||
<Meta>
|
||||
{isCurrentUser
|
||||
? "You joined"
|
||||
: user.lastActiveAt
|
||||
? "Joined"
|
||||
: "Invited"}{" "}
|
||||
{distanceInWordsToNow(new Date(user.createdAt))} ago.
|
||||
{user.isAdmin && (
|
||||
<StyledBadge admin={user.isAdmin}>Admin</StyledBadge>
|
||||
)}
|
||||
{user.isSuspended && <Badge>Suspended</Badge>}
|
||||
{isCurrentUser && (
|
||||
<Edit>
|
||||
<Button
|
||||
onClick={() => this.props.history.push(settings())}
|
||||
icon={<EditIcon />}
|
||||
neutral
|
||||
>
|
||||
Edit Profile
|
||||
</Button>
|
||||
</Edit>
|
||||
)}
|
||||
</Meta>
|
||||
<PaginatedDocumentList
|
||||
documents={documents.createdByUser(user.id)}
|
||||
fetch={documents.fetchOwned}
|
||||
options={{ user: user.id }}
|
||||
heading={<Subheading>Recently updated</Subheading>}
|
||||
empty={
|
||||
<HelpText>{user.name} hasn’t updated any documents yet.</HelpText>
|
||||
}
|
||||
showCollection
|
||||
/>
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<Flex align="center">
|
||||
<Avatar src={user.avatarUrl} size={38} />
|
||||
<span> {user.name}</span>
|
||||
</Flex>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
{...rest}
|
||||
>
|
||||
<Flex column>
|
||||
<Meta>
|
||||
{isCurrentUser
|
||||
? t("You joined")
|
||||
: user.lastActiveAt
|
||||
? t("Joined")
|
||||
: t("Invited")}{" "}
|
||||
{t("{{ time }} ago.", {
|
||||
time: distanceInWordsToNow(new Date(user.createdAt)),
|
||||
})}
|
||||
{user.isAdmin && (
|
||||
<StyledBadge admin={user.isAdmin}>{t("Admin")}</StyledBadge>
|
||||
)}
|
||||
{user.isSuspended && <Badge>{t("Suspended")}</Badge>}
|
||||
{isCurrentUser && (
|
||||
<Edit>
|
||||
<Button
|
||||
onClick={() => this.props.history.push(settings())}
|
||||
icon={<EditIcon />}
|
||||
neutral
|
||||
>
|
||||
{t("Edit Profile")}
|
||||
</Button>
|
||||
</Edit>
|
||||
)}
|
||||
</Meta>
|
||||
<PaginatedDocumentList
|
||||
documents={documents.createdByUser(user.id)}
|
||||
fetch={documents.fetchOwned}
|
||||
options={{ user: user.id }}
|
||||
heading={<Subheading>{t("Recently updated")}</Subheading>}
|
||||
empty={
|
||||
<HelpText>
|
||||
{t("{{ userName }} hasn’t updated any documents yet.", {
|
||||
userName: user.name,
|
||||
})}
|
||||
</HelpText>
|
||||
}
|
||||
showCollection
|
||||
/>
|
||||
</Flex>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const Edit = styled.span`
|
||||
@@ -98,4 +103,4 @@ const Meta = styled(HelpText)`
|
||||
margin-top: -12px;
|
||||
`;
|
||||
|
||||
export default inject("documents", "auth")(withRouter(UserProfile));
|
||||
export default inject("documents", "auth")(withRouter(observer(UserProfile)));
|
||||
|
||||
Reference in New Issue
Block a user