2020-08-18 22:41:41 +03:00
|
|
|
import * as React from "react";
|
|
|
|
import * as System from "~/components/system";
|
2020-08-31 21:19:46 +03:00
|
|
|
import * as Actions from "~/common/actions";
|
|
|
|
import * as Constants from "~/common/constants";
|
2020-09-05 02:15:29 +03:00
|
|
|
import * as SVG from "~/common/svg";
|
2020-08-18 22:41:41 +03:00
|
|
|
|
|
|
|
import { css } from "@emotion/react";
|
2020-09-03 02:17:31 +03:00
|
|
|
import { TabGroup } from "~/components/core/TabGroup";
|
2020-09-06 02:41:12 +03:00
|
|
|
import { Boundary } from "~/components/system/components/fragments/Boundary";
|
|
|
|
import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
|
2020-08-18 22:41:41 +03:00
|
|
|
|
|
|
|
import ScenePage from "~/components/core/ScenePage";
|
2020-08-26 00:51:18 +03:00
|
|
|
import ScenePageHeader from "~/components/core/ScenePageHeader";
|
2020-09-02 03:10:28 +03:00
|
|
|
import EmptyState from "~/components/core/EmptyState";
|
2020-08-18 22:41:41 +03:00
|
|
|
|
2020-08-31 21:19:46 +03:00
|
|
|
const STYLES_USER_ENTRY = css`
|
|
|
|
display: grid;
|
2020-09-06 00:36:20 +03:00
|
|
|
grid-template-columns: auto 1fr;
|
2020-08-31 21:19:46 +03:00
|
|
|
align-items: center;
|
|
|
|
font-size: ${Constants.typescale.lvl1};
|
|
|
|
cursor: pointer;
|
2020-09-05 22:08:09 +03:00
|
|
|
border: 1px solid rgba(229, 229, 229, 0.75);
|
|
|
|
border-radius: 4px;
|
|
|
|
margin-bottom: 8px;
|
2020-08-31 21:19:46 +03:00
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_USER = css`
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: auto 1fr;
|
|
|
|
align-items: center;
|
2020-09-05 22:08:09 +03:00
|
|
|
margin: 24px;
|
|
|
|
color: ${Constants.system.brand};
|
|
|
|
font-family: ${Constants.font.medium};
|
|
|
|
font-size: ${Constants.typescale.lvl1};
|
2020-08-31 21:19:46 +03:00
|
|
|
`;
|
|
|
|
|
2020-09-06 00:36:20 +03:00
|
|
|
const STYLES_BUTTONS = css`
|
2020-08-31 21:19:46 +03:00
|
|
|
justify-self: end;
|
2020-09-06 00:36:20 +03:00
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
margin-right: 48px;
|
|
|
|
`;
|
2020-08-31 21:19:46 +03:00
|
|
|
|
2020-09-06 02:41:12 +03:00
|
|
|
const STYLES_ITEM_BOX = css`
|
|
|
|
position: relative;
|
|
|
|
justify-self: end;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
padding: 8px;
|
|
|
|
margin-right: 48px;
|
|
|
|
color: ${Constants.system.darkGray};
|
|
|
|
`;
|
|
|
|
|
2020-09-06 00:36:20 +03:00
|
|
|
const STYLES_ACTION_BUTTON = css`
|
|
|
|
cursor: pointer;
|
|
|
|
padding: 8px;
|
|
|
|
color: ${Constants.system.brand};
|
|
|
|
font-family: ${Constants.font.medium};
|
2020-08-31 21:19:46 +03:00
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_PROFILE_IMAGE = css`
|
2020-09-10 06:28:48 +03:00
|
|
|
background-color: ${Constants.system.foreground};
|
2020-08-31 21:19:46 +03:00
|
|
|
background-size: cover;
|
|
|
|
background-position: 50% 50%;
|
|
|
|
height: 24px;
|
|
|
|
width: 24px;
|
2020-09-05 22:08:09 +03:00
|
|
|
margin-right: 16px;
|
|
|
|
border-radius: 4px;
|
2020-08-31 21:19:46 +03:00
|
|
|
`;
|
|
|
|
|
2020-09-06 02:41:12 +03:00
|
|
|
const STYLES_MESSAGE = css`
|
|
|
|
color: ${Constants.system.black};
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
|
|
@media (max-width: 1000px) {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-09-07 01:30:33 +03:00
|
|
|
const STYLES_NAME = css`
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
`;
|
|
|
|
|
2020-09-05 22:08:09 +03:00
|
|
|
function UserEntry({ user, button, onClick, message }) {
|
2020-08-31 21:19:46 +03:00
|
|
|
return (
|
|
|
|
<div key={user.username} css={STYLES_USER_ENTRY}>
|
|
|
|
<div css={STYLES_USER} onClick={onClick}>
|
|
|
|
<div
|
|
|
|
css={STYLES_PROFILE_IMAGE}
|
|
|
|
style={{ backgroundImage: `url(${user.data.photo})` }}
|
|
|
|
/>
|
2020-09-07 01:30:33 +03:00
|
|
|
<span css={STYLES_NAME}>
|
2020-09-05 22:08:09 +03:00
|
|
|
{user.data.name || `@${user.username}`}
|
2020-09-06 02:41:12 +03:00
|
|
|
{message ? <span css={STYLES_MESSAGE}>{message}</span> : null}
|
2020-09-05 22:08:09 +03:00
|
|
|
</span>
|
2020-08-31 21:19:46 +03:00
|
|
|
</div>
|
|
|
|
{button}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-09-06 02:41:12 +03:00
|
|
|
const STYLES_COPY_INPUT = css`
|
|
|
|
pointer-events: none;
|
|
|
|
position: absolute;
|
|
|
|
tabindex: -1;
|
|
|
|
opacity: 0;
|
|
|
|
`;
|
|
|
|
|
2020-08-18 22:41:41 +03:00
|
|
|
export default class SceneDirectory extends React.Component {
|
2020-09-06 02:41:12 +03:00
|
|
|
_ref;
|
|
|
|
|
2020-08-31 21:19:46 +03:00
|
|
|
state = {
|
2020-09-06 02:41:12 +03:00
|
|
|
copyValue: "",
|
2020-08-31 21:19:46 +03:00
|
|
|
loading: false,
|
2020-09-03 02:17:31 +03:00
|
|
|
tab: 0,
|
2020-09-06 02:41:12 +03:00
|
|
|
contextMenu: null,
|
2020-08-31 21:19:46 +03:00
|
|
|
};
|
|
|
|
|
2020-09-06 02:41:12 +03:00
|
|
|
_handleCopy = (e, value) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
this.setState({ copyValue: value }, () => {
|
|
|
|
this._ref.select();
|
|
|
|
document.execCommand("copy");
|
|
|
|
this._handleHide();
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
_handleHide = (e) => {
|
|
|
|
this.setState({ contextMenu: null });
|
|
|
|
};
|
|
|
|
|
|
|
|
_handleClick = (e, value) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
if (this.state.contextMenu === value) {
|
|
|
|
this._handleHide();
|
|
|
|
} else {
|
|
|
|
this.setState({ contextMenu: value });
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
_handleDelete = async (e, id) => {
|
|
|
|
this._handleHide();
|
|
|
|
e.stopPropagation();
|
2020-08-31 21:19:46 +03:00
|
|
|
const response = await Actions.deleteTrustRelationship({
|
|
|
|
id: id,
|
|
|
|
});
|
2020-09-06 00:36:20 +03:00
|
|
|
await this.props.onRehydrate();
|
2020-08-31 21:19:46 +03:00
|
|
|
};
|
|
|
|
|
2020-09-06 02:41:12 +03:00
|
|
|
_handleAccept = async (e, id) => {
|
|
|
|
this._handleHide();
|
|
|
|
e.stopPropagation();
|
2020-08-31 21:19:46 +03:00
|
|
|
const response = await Actions.updateTrustRelationship({
|
|
|
|
userId: id,
|
|
|
|
});
|
2020-09-06 00:36:20 +03:00
|
|
|
await this.props.onRehydrate();
|
2020-08-31 21:19:46 +03:00
|
|
|
};
|
|
|
|
|
2020-09-06 02:41:12 +03:00
|
|
|
_handleFollow = async (e, id) => {
|
|
|
|
this._handleHide();
|
|
|
|
e.stopPropagation();
|
2020-08-31 21:19:46 +03:00
|
|
|
const response = await Actions.createSubscription({
|
|
|
|
userId: id,
|
|
|
|
});
|
2020-09-06 00:36:20 +03:00
|
|
|
await this.props.onRehydrate();
|
2020-08-31 21:19:46 +03:00
|
|
|
};
|
|
|
|
|
2020-08-18 22:41:41 +03:00
|
|
|
render() {
|
2020-09-06 00:36:20 +03:00
|
|
|
let requests = this.props.viewer.pendingTrusted
|
2020-09-01 07:44:56 +03:00
|
|
|
.filter((relation) => {
|
|
|
|
return !relation.data.verified;
|
|
|
|
})
|
|
|
|
.map((relation) => {
|
|
|
|
let button = (
|
2020-09-06 00:36:20 +03:00
|
|
|
<div css={STYLES_BUTTONS}>
|
|
|
|
<div
|
|
|
|
css={STYLES_ACTION_BUTTON}
|
2020-09-06 02:41:12 +03:00
|
|
|
onClick={(e) => this._handleAccept(e, relation.owner.id)}
|
2020-09-06 00:36:20 +03:00
|
|
|
>
|
|
|
|
Accept
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
css={STYLES_ACTION_BUTTON}
|
|
|
|
style={{ color: Constants.system.darkGray, marginLeft: "16px" }}
|
2020-09-06 02:41:12 +03:00
|
|
|
onClick={(e) => {
|
|
|
|
this._handleDelete(e, relation.id);
|
2020-09-06 00:36:20 +03:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
Decline
|
|
|
|
</div>
|
2020-09-01 07:44:56 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
return (
|
|
|
|
<UserEntry
|
2020-09-06 02:41:12 +03:00
|
|
|
key={relation.id}
|
2020-09-01 07:44:56 +03:00
|
|
|
user={relation.owner}
|
|
|
|
button={button}
|
|
|
|
onClick={() => {
|
|
|
|
this.props.onAction({
|
|
|
|
type: "NAVIGATE",
|
|
|
|
value: this.props.sceneId,
|
2020-09-03 07:07:52 +03:00
|
|
|
scene: "PUBLIC_PROFILE",
|
2020-09-01 07:44:56 +03:00
|
|
|
data: relation.owner,
|
|
|
|
});
|
|
|
|
}}
|
2020-09-05 22:08:09 +03:00
|
|
|
message=" requested to trust you"
|
2020-09-01 07:44:56 +03:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2020-09-06 00:36:20 +03:00
|
|
|
let trusted = this.props.viewer.pendingTrusted
|
2020-09-01 07:44:56 +03:00
|
|
|
.filter((relation) => {
|
|
|
|
return relation.data.verified;
|
|
|
|
})
|
|
|
|
.map((relation) => {
|
|
|
|
let button = (
|
|
|
|
<div
|
2020-09-06 02:41:12 +03:00
|
|
|
css={STYLES_ITEM_BOX}
|
|
|
|
onClick={(e) => this._handleClick(e, relation.id)}
|
2020-09-01 07:44:56 +03:00
|
|
|
>
|
2020-09-06 02:41:12 +03:00
|
|
|
<SVG.MoreHorizontal height="24px" />
|
|
|
|
{this.state.contextMenu === relation.id ? (
|
|
|
|
<Boundary
|
|
|
|
captureResize={true}
|
|
|
|
captureScroll={false}
|
|
|
|
enabled
|
|
|
|
onOutsideRectEvent={(e) => this._handleClick(e, relation.id)}
|
|
|
|
>
|
|
|
|
<PopoverNavigation
|
|
|
|
style={{
|
|
|
|
top: "40px",
|
|
|
|
right: "0px",
|
|
|
|
}}
|
|
|
|
navigation={[
|
|
|
|
{
|
2020-09-13 03:00:58 +03:00
|
|
|
text: "Copy profile URL",
|
2020-09-06 02:41:12 +03:00
|
|
|
onClick: (e) =>
|
|
|
|
this._handleCopy(
|
|
|
|
e,
|
|
|
|
`https://slate.host/${relation.owner.username}`
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
2020-09-13 03:00:58 +03:00
|
|
|
text: "Remove peer",
|
2020-09-06 02:41:12 +03:00
|
|
|
onClick: (e) => this._handleDelete(e, relation.id),
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
</Boundary>
|
|
|
|
) : null}
|
2020-09-01 07:44:56 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
return (
|
|
|
|
<UserEntry
|
2020-09-06 02:41:12 +03:00
|
|
|
key={relation.id}
|
2020-09-01 07:44:56 +03:00
|
|
|
user={relation.owner}
|
|
|
|
button={button}
|
|
|
|
onClick={() => {
|
|
|
|
this.props.onAction({
|
|
|
|
type: "NAVIGATE",
|
|
|
|
value: this.props.sceneId,
|
2020-09-03 07:07:52 +03:00
|
|
|
scene: "PUBLIC_PROFILE",
|
2020-09-01 07:44:56 +03:00
|
|
|
data: relation.owner,
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
if (!trusted) {
|
|
|
|
trusted = [];
|
|
|
|
}
|
|
|
|
trusted.push(
|
2020-09-06 00:36:20 +03:00
|
|
|
...this.props.viewer.trusted
|
2020-09-01 07:44:56 +03:00
|
|
|
.filter((relation) => {
|
|
|
|
return relation.data.verified;
|
|
|
|
})
|
|
|
|
.map((relation) => {
|
|
|
|
let button = (
|
|
|
|
<div
|
2020-09-06 02:41:12 +03:00
|
|
|
css={STYLES_ITEM_BOX}
|
|
|
|
onClick={(e) => this._handleClick(e, relation.id)}
|
2020-09-01 07:44:56 +03:00
|
|
|
>
|
2020-09-06 02:41:12 +03:00
|
|
|
<SVG.MoreHorizontal height="24px" />
|
|
|
|
{this.state.contextMenu === relation.id ? (
|
|
|
|
<Boundary
|
|
|
|
captureResize={true}
|
|
|
|
captureScroll={false}
|
|
|
|
enabled
|
|
|
|
onOutsideRectEvent={(e) => this._handleClick(e, relation.id)}
|
|
|
|
>
|
|
|
|
<PopoverNavigation
|
|
|
|
style={{
|
2020-09-07 00:28:50 +03:00
|
|
|
top: "40px",
|
|
|
|
right: "0px",
|
2020-09-06 02:41:12 +03:00
|
|
|
}}
|
|
|
|
navigation={[
|
|
|
|
{
|
2020-09-13 03:00:58 +03:00
|
|
|
text: "Copy profile URL",
|
2020-09-06 02:41:12 +03:00
|
|
|
onClick: (e) =>
|
|
|
|
this._handleCopy(
|
|
|
|
e,
|
|
|
|
`https://slate.host/${relation.user.username}`
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
2020-09-13 03:00:58 +03:00
|
|
|
text: "Remove peer",
|
2020-09-06 02:41:12 +03:00
|
|
|
onClick: (e) => this._handleDelete(e, relation.id),
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
</Boundary>
|
|
|
|
) : null}
|
2020-09-01 07:44:56 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
return (
|
|
|
|
<UserEntry
|
2020-09-06 02:41:12 +03:00
|
|
|
key={relation.id}
|
2020-09-01 07:44:56 +03:00
|
|
|
user={relation.user}
|
|
|
|
button={button}
|
|
|
|
onClick={() => {
|
|
|
|
this.props.onAction({
|
|
|
|
type: "NAVIGATE",
|
|
|
|
value: this.props.sceneId,
|
2020-09-03 07:07:52 +03:00
|
|
|
scene: "PUBLIC_PROFILE",
|
2020-09-01 07:44:56 +03:00
|
|
|
data: relation.user,
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
})
|
|
|
|
);
|
|
|
|
|
2020-09-06 00:36:20 +03:00
|
|
|
let following = this.props.viewer.subscriptions
|
2020-09-01 07:44:56 +03:00
|
|
|
.filter((relation) => {
|
|
|
|
return !!relation.target_user_id;
|
|
|
|
})
|
|
|
|
.map((relation) => {
|
|
|
|
let button = (
|
|
|
|
<div
|
2020-09-06 02:41:12 +03:00
|
|
|
css={STYLES_ITEM_BOX}
|
|
|
|
onClick={(e) => this._handleClick(e, relation.id)}
|
2020-09-01 07:44:56 +03:00
|
|
|
>
|
2020-09-06 02:41:12 +03:00
|
|
|
<SVG.MoreHorizontal height="24px" />
|
|
|
|
{this.state.contextMenu === relation.id ? (
|
|
|
|
<Boundary
|
|
|
|
captureResize={true}
|
|
|
|
captureScroll={false}
|
|
|
|
enabled
|
|
|
|
onOutsideRectEvent={(e) => this._handleClick(e, relation.id)}
|
|
|
|
>
|
|
|
|
<PopoverNavigation
|
|
|
|
style={{
|
2020-09-07 00:28:50 +03:00
|
|
|
top: "40px",
|
|
|
|
right: "0px",
|
2020-09-06 02:41:12 +03:00
|
|
|
}}
|
|
|
|
navigation={[
|
|
|
|
{
|
2020-09-13 03:00:58 +03:00
|
|
|
text: "Copy profile URL",
|
2020-09-06 02:41:12 +03:00
|
|
|
onClick: (e) =>
|
|
|
|
this._handleCopy(
|
|
|
|
e,
|
|
|
|
`https://slate.host/${relation.user.username}`
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
text: "Unfollow",
|
|
|
|
onClick: (e) => this._handleFollow(e, relation.user.id),
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
</Boundary>
|
|
|
|
) : null}
|
2020-09-01 07:44:56 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
return (
|
|
|
|
<UserEntry
|
2020-09-06 02:41:12 +03:00
|
|
|
key={relation.id}
|
2020-09-01 07:44:56 +03:00
|
|
|
user={relation.user}
|
|
|
|
button={button}
|
|
|
|
onClick={() => {
|
|
|
|
this.props.onAction({
|
|
|
|
type: "NAVIGATE",
|
|
|
|
value: this.props.sceneId,
|
2020-09-04 01:42:08 +03:00
|
|
|
scene: "PUBLIC_PROFILE",
|
2020-09-01 07:44:56 +03:00
|
|
|
data: relation.user,
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
2020-09-07 01:30:33 +03:00
|
|
|
|
|
|
|
let followers = this.props.viewer.subscribers.map((relation) => {
|
|
|
|
let button = (
|
|
|
|
<div
|
|
|
|
css={STYLES_ITEM_BOX}
|
|
|
|
onClick={(e) => this._handleClick(e, relation.id)}
|
|
|
|
>
|
|
|
|
<SVG.MoreHorizontal height="24px" />
|
|
|
|
{this.state.contextMenu === relation.id ? (
|
|
|
|
<Boundary
|
|
|
|
captureResize={true}
|
|
|
|
captureScroll={false}
|
|
|
|
enabled
|
|
|
|
onOutsideRectEvent={(e) => this._handleClick(e, relation.id)}
|
|
|
|
>
|
|
|
|
<PopoverNavigation
|
|
|
|
style={{
|
|
|
|
top: "40px",
|
|
|
|
right: "0px",
|
|
|
|
}}
|
|
|
|
navigation={[
|
|
|
|
{
|
2020-09-13 03:00:58 +03:00
|
|
|
text: "Copy profile URL",
|
2020-09-07 01:30:33 +03:00
|
|
|
onClick: (e) =>
|
|
|
|
this._handleCopy(
|
|
|
|
e,
|
|
|
|
`https://slate.host/${relation.owner.username}`
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
text: this.props.viewer.subscriptions.filter(
|
|
|
|
(subscription) => {
|
|
|
|
return (
|
|
|
|
subscription.target_user_id === relation.owner.id
|
|
|
|
);
|
|
|
|
}
|
|
|
|
).length
|
|
|
|
? "Unfollow"
|
|
|
|
: "Follow",
|
|
|
|
onClick: (e) => this._handleFollow(e, relation.owner.id),
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
</Boundary>
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
return (
|
|
|
|
<UserEntry
|
|
|
|
key={relation.id}
|
|
|
|
user={relation.owner}
|
|
|
|
button={button}
|
|
|
|
onClick={() => {
|
|
|
|
this.props.onAction({
|
|
|
|
type: "NAVIGATE",
|
|
|
|
value: this.props.sceneId,
|
|
|
|
scene: "PUBLIC_PROFILE",
|
|
|
|
data: relation.owner,
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2020-08-18 22:41:41 +03:00
|
|
|
return (
|
2020-08-26 00:51:18 +03:00
|
|
|
<ScenePage>
|
2020-08-31 21:19:46 +03:00
|
|
|
<ScenePageHeader title="Directory" />
|
2020-09-03 02:17:31 +03:00
|
|
|
<TabGroup
|
2020-09-07 01:30:33 +03:00
|
|
|
tabs={["Requests", "Trusted", "Following", "Followers"]}
|
2020-09-03 02:17:31 +03:00
|
|
|
value={this.state.tab}
|
|
|
|
onChange={(value) => this.setState({ tab: value })}
|
|
|
|
/>
|
2020-09-08 01:16:02 +03:00
|
|
|
{this.state.tab === 0 ? (
|
2020-09-14 23:42:52 +03:00
|
|
|
requests && requests.length ? (
|
2020-09-08 01:16:02 +03:00
|
|
|
requests
|
|
|
|
) : (
|
2020-09-14 08:22:19 +03:00
|
|
|
<EmptyState>
|
|
|
|
<SVG.Users height="24px" style={{ marginBottom: 24 }} />
|
|
|
|
Trust requests that you receive will appear here.
|
2020-09-08 01:16:02 +03:00
|
|
|
</EmptyState>
|
|
|
|
)
|
|
|
|
) : null}
|
|
|
|
{this.state.tab === 1 ? (
|
2020-09-14 23:42:52 +03:00
|
|
|
trusted && trusted.length ? (
|
2020-09-08 01:16:02 +03:00
|
|
|
trusted
|
|
|
|
) : (
|
2020-09-14 08:22:19 +03:00
|
|
|
<EmptyState>
|
|
|
|
<SVG.Users height="24px" style={{ marginBottom: 24 }} />
|
|
|
|
Trusted is for your close friends.
|
2020-09-08 01:16:02 +03:00
|
|
|
</EmptyState>
|
|
|
|
)
|
|
|
|
) : null}
|
|
|
|
{this.state.tab === 2 ? (
|
2020-09-14 23:42:52 +03:00
|
|
|
following && following.length ? (
|
2020-09-08 01:16:02 +03:00
|
|
|
following
|
|
|
|
) : (
|
2020-09-14 08:22:19 +03:00
|
|
|
<EmptyState>
|
|
|
|
<SVG.Users height="24px" style={{ marginBottom: 24 }} />
|
|
|
|
You can follow any user on the network to be updated on their new
|
|
|
|
uploads and slates.
|
2020-09-08 01:16:02 +03:00
|
|
|
</EmptyState>
|
|
|
|
)
|
|
|
|
) : null}
|
|
|
|
{this.state.tab === 3 ? (
|
2020-09-14 23:42:52 +03:00
|
|
|
followers && followers.length ? (
|
2020-09-08 01:16:02 +03:00
|
|
|
followers
|
|
|
|
) : (
|
2020-09-14 08:22:19 +03:00
|
|
|
<EmptyState>
|
|
|
|
<SVG.Users height="24px" style={{ marginBottom: 24 }} />
|
2020-09-08 07:29:15 +03:00
|
|
|
You don't have any followers yet.
|
2020-09-08 01:16:02 +03:00
|
|
|
</EmptyState>
|
|
|
|
)
|
|
|
|
) : null}
|
|
|
|
<input
|
|
|
|
readOnly
|
|
|
|
ref={(c) => {
|
|
|
|
this._ref = c;
|
|
|
|
}}
|
|
|
|
value={this.state.copyValue}
|
|
|
|
css={STYLES_COPY_INPUT}
|
|
|
|
/>
|
2020-08-18 22:41:41 +03:00
|
|
|
</ScenePage>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|