yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Port UserListItem to functional style (#3802)

Browse Source 
* feat: Port `UserListItem` to functional style

* Add translation for pending invite

* Add missing translations

* Update `translations.json`

* Revert "Update `translations.json`"

This reverts commit d8000a75105a984f9ee8418b278d93a034ad4adf.

* fix: Incorrect translation strings

Co-authored-by: Tom Moor <tom.moor@gmail.com>
This commit is contained in:
CuriousCorrelation
2022-07-21 03:37:01 +05:30
committed by GitHub
parent 5758ff3459
commit 71dd4f267b
5 changed files with 52 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app/scenes/Settings/components/UserListItem.tsx
View File

@@ -1,5 +1,6 @@
import { observer } from "mobx-react";
import * as React from "react";
import { Trans, useTranslation } from "react-i18next";
import styled from "styled-components";
import User from "~/models/User";
import Avatar from "~/components/Avatar";
@@ -13,34 +14,31 @@ type Props = {
showMenu: boolean;
};
@observer
class UserListItem extends React.Component<Props> {
render() {
const { user, showMenu } = this.props;
const UserListItem = ({ user, showMenu }: Props) => {
const { t } = useTranslation();
return (
<ListItem
title={<Title>{user.name}</Title>}
image={<Avatar src={user.avatarUrl} size={32} />}
subtitle={
<>
{user.email ? `${user.email} · ` : undefined}
{user.lastActiveAt ? (
<>
Active <Time dateTime={user.lastActiveAt} /> ago
</>
) : (
"Invited"
)}
{user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
{user.isSuspended && <Badge>Suspended</Badge>}
</>
}
actions={showMenu ? <UserMenu user={user} /> : undefined}
/>
);
}
}
return (
<ListItem
title={<Title>{user.name}</Title>}
image={<Avatar src={user.avatarUrl} size={32} />}
subtitle={
<>
{user.email ? `${user.email} · ` : undefined}
{user.lastActiveAt ? (
<Trans>
Active <Time dateTime={user.lastActiveAt} /> ago
</Trans>
) : (
t("Invited")
)}
{user.isAdmin && <Badge primary={user.isAdmin}>{t("Admin")}</Badge>}
{user.isSuspended && <Badge>{t("Suspended")}</Badge>}
</>
}
actions={showMenu ? <UserMenu user={user} /> : undefined}
/>
);
};
const Title = styled.span`
&:hover {
@@ -49,4 +47,4 @@ const Title = styled.span`
}
`;
export default UserListItem;
export default observer(UserListItem);