slate/scenes/SceneProfile.js
2020-11-29 21:35:19 -08:00

120 lines
3.4 KiB
JavaScript

import * as React from "react";
import * as Actions from "~/common/actions";
import { css } from "@emotion/react";
import { ButtonPrimary, ButtonSecondary } from "~/components/system/components/Buttons";
import ScenePage from "~/components/core/ScenePage";
import Profile from "~/components/core/Profile";
const STYLES_BUTTONS = css`
display: inline-flex;
flex-direction: row;
align-items: center;
`;
const STATUS_BUTTON_MAP = {
trusted: "Remove peer",
untrusted: "Add peer",
sent: "Cancel request",
received: "Accept request",
};
export default class SceneProfile extends React.Component {
_handleTrust = async (trustStatus, trustId) => {
if (trustStatus === "untrusted" || trustStatus === "sent") {
await Actions.createTrustRelationship({
userId: this.props.data.id,
});
} else if (trustStatus === "received") {
await Actions.updateTrustRelationship({
userId: this.props.data.id,
});
} else {
await Actions.deleteTrustRelationship({
id: trustId,
});
}
};
_handleFollow = async () => {
await Actions.createSubscription({
userId: this.props.data.id,
});
};
render() {
let trustId, followStatus, relation;
let trustStatus = "untrusted";
let viewer = this.props.viewer;
let trust = viewer.trusted.filter((entry) => {
return entry.target_user_id === this.props.data.id;
});
if (trust.length) {
relation = trust[0];
trustId = relation.id;
if (relation.data.verified) {
trustStatus = "trusted";
} else {
trustStatus = "sent";
}
}
let pendingTrust = viewer.pendingTrusted.filter((entry) => {
return entry.owner_user_id === this.props.data.id;
});
if (pendingTrust.length) {
relation = pendingTrust[0];
trustId = relation.id;
if (pendingTrust[0].data.verified) {
trustStatus = "trusted";
} else {
trustStatus = "received";
}
}
followStatus = !!viewer.subscriptions.filter((entry) => {
return entry.target_user_id === this.props.data.id;
}).length;
let buttons = (
<div css={STYLES_BUTTONS}>
{followStatus ? (
<ButtonSecondary style={{ marginRight: 8, minWidth: 152 }} onClick={this._handleFollow}>
Unfollow
</ButtonSecondary>
) : (
<ButtonPrimary style={{ marginRight: 8, minWidth: 152 }} onClick={this._handleFollow}>
Follow
</ButtonPrimary>
)}
{trustStatus === "untrusted" || trustStatus === "received" ? (
<ButtonPrimary
style={{ marginRight: 8, minWidth: 152 }}
onClick={() => this._handleTrust(trustStatus, trustId)}
>
{STATUS_BUTTON_MAP[trustStatus]}
</ButtonPrimary>
) : (
<ButtonSecondary
style={{ marginRight: 8, minWidth: 152 }}
onClick={() => this._handleTrust(trustStatus, trustId)}
>
{STATUS_BUTTON_MAP[trustStatus]}
</ButtonSecondary>
)}
</div>
);
return (
<ScenePage>
<Profile
{...this.props}
onAction={this.props.onAction}
creator={this.props.data}
sceneId={this.props.sceneId}
buttons={this.props.viewer.username === this.props.data.username ? null : buttons}
isOwner={this.props.viewer.username === this.props.data.username}
/>
</ScenePage>
);
}
}