imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Apply prettier formatting

Browse source
This commit is contained in:
Michael Weimann 2022-12-12 12:24:14 +01:00
parent 1cac306093
commit 526645c791
No known key found for this signature in database
GPG key ID: 53F535A266BB9584
1576 changed files with 65385 additions and 62478 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/components/views/settings/devices/DeviceTile.tsx
View file

@ -17,7 +17,7 @@ limitations under the License.
import React, { Fragment } from "react";
import classNames from "classnames";
import { Icon as InactiveIcon } from '../../../../../res/img/element-icons/settings/inactive.svg';
import { Icon as InactiveIcon } from "../../../../../res/img/element-icons/settings/inactive.svg";
import { _t } from "../../../../languageHandler";
import { formatDate, formatRelativeTime } from "../../../../DateUtils";
import Heading from "../../typography/Heading";
@ -33,9 +33,7 @@ export interface DeviceTileProps {
}
const DeviceTileName: React.FC<{ device: ExtendedDevice }> = ({ device }) => {
return <Heading size='h4'>
{ device.display_name || device.device_id }
</Heading>;
return <Heading size="h4">{device.display_name || device.device_id}</Heading>;
};
const MS_DAY = 24 * 60 * 60 * 1000;
@ -50,76 +48,66 @@ const formatLastActivity = (timestamp: number, now = new Date().getTime()): stri
return formatRelativeTime(new Date(timestamp));
};
const getInactiveMetadata = (device: ExtendedDevice): { id: string, value: React.ReactNode } | undefined => {
const getInactiveMetadata = (device: ExtendedDevice): { id: string; value: React.ReactNode } | undefined => {
const isInactive = isDeviceInactive(device);
if (!isInactive) {
return undefined;
}
return { id: 'inactive', value: (
<>
<InactiveIcon className="mx_DeviceTile_inactiveIcon" />
{
_t('Inactive for %(inactiveAgeDays)s+ days', { inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS }) +
` (${formatLastActivity(device.last_seen_ts)})`
}
</>),
return {
id: "inactive",
value: (
<>
<InactiveIcon className="mx_DeviceTile_inactiveIcon" />
{_t("Inactive for %(inactiveAgeDays)s+ days", { inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS }) +
` (${formatLastActivity(device.last_seen_ts)})`}
</>
),
};
};
const DeviceMetadata: React.FC<{ value: string | React.ReactNode, id: string }> = ({ value, id }) => (
value ? <span data-testid={`device-metadata-${id}`}>{ value }</span> : null
);
const DeviceMetadata: React.FC<{ value: string | React.ReactNode; id: string }> = ({ value, id }) =>
value ? <span data-testid={`device-metadata-${id}`}>{value}</span> : null;
const DeviceTile: React.FC<DeviceTileProps> = ({
device,
children,
isSelected,
onClick,
}) => {
const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, isSelected, onClick }) => {
const inactive = getInactiveMetadata(device);
const lastActivity = device.last_seen_ts && `${_t('Last activity')} ${formatLastActivity(device.last_seen_ts)}`;
const verificationStatus = device.isVerified ? _t('Verified') : _t('Unverified');
const lastActivity = device.last_seen_ts && `${_t("Last activity")} ${formatLastActivity(device.last_seen_ts)}`;
const verificationStatus = device.isVerified ? _t("Verified") : _t("Unverified");
// if device is inactive, don't display last activity or verificationStatus
const metadata = inactive
? [inactive, { id: 'lastSeenIp', value: device.last_seen_ip }]
? [inactive, { id: "lastSeenIp", value: device.last_seen_ip }]
: [
{ id: 'isVerified', value: verificationStatus },
{ id: 'lastActivity', value: lastActivity },
{ id: 'lastSeenIp', value: device.last_seen_ip },
{ id: 'deviceId', value: device.device_id },
];
{ id: "isVerified", value: verificationStatus },
{ id: "lastActivity", value: lastActivity },
{ id: "lastSeenIp", value: device.last_seen_ip },
{ id: "deviceId", value: device.device_id },
];
return <div
className={classNames(
"mx_DeviceTile",
{ "mx_DeviceTile_interactive": !!onClick },
)}
data-testid={`device-tile-${device.device_id}`}
onClick={onClick}
>
<DeviceTypeIcon
isVerified={device.isVerified}
isSelected={isSelected}
deviceType={device.deviceType}
/>
<div className="mx_DeviceTile_info">
<DeviceTileName device={device} />
<div className="mx_DeviceTile_metadata">
{ metadata.map(({ id, value }, index) =>
!!value
? <Fragment key={id}>
{ !!index && ' · ' }
<DeviceMetadata id={id} value={value} />
</Fragment>
: null,
) }
return (
<div
className={classNames("mx_DeviceTile", { mx_DeviceTile_interactive: !!onClick })}
data-testid={`device-tile-${device.device_id}`}
onClick={onClick}
>
<DeviceTypeIcon isVerified={device.isVerified} isSelected={isSelected} deviceType={device.deviceType} />
<div className="mx_DeviceTile_info">
<DeviceTileName device={device} />
<div className="mx_DeviceTile_metadata">
{metadata.map(({ id, value }, index) =>
!!value ? (
<Fragment key={id}>
{!!index && " · "}
<DeviceMetadata id={id} value={value} />
</Fragment>
) : null,
)}
</div>
</div>
<div className="mx_DeviceTile_actions" onClick={preventDefaultWrapper(() => {})}>
{children}
</div>
</div>
<div className="mx_DeviceTile_actions" onClick={preventDefaultWrapper(() => {})}>
{ children }
</div>
</div>;
);
};
export default DeviceTile;