slate/scenes/SceneDirectory.js

521 lines
14 KiB
JavaScript
Raw Normal View History

import * as React from "react";
import * as System from "~/components/system";
import * as Actions from "~/common/actions";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
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";
import ScenePage from "~/components/core/ScenePage";
import ScenePageHeader from "~/components/core/ScenePageHeader";
import EmptyState from "~/components/core/EmptyState";
const STYLES_USER_ENTRY = css`
display: grid;
2020-09-06 00:36:20 +03:00
grid-template-columns: auto 1fr;
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;
`;
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-09-06 00:36:20 +03:00
const STYLES_BUTTONS = css`
justify-self: end;
2020-09-06 00:36:20 +03:00
display: flex;
flex-direction: row;
margin-right: 48px;
`;
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};
`;
const STYLES_PROFILE_IMAGE = css`
2020-09-10 06:28:48 +03:00
background-color: ${Constants.system.foreground};
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-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 }) {
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>
</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;
`;
export default class SceneDirectory extends React.Component {
2020-09-06 02:41:12 +03:00
_ref;
state = {
2020-09-06 02:41:12 +03:00
copyValue: "",
loading: false,
2020-09-03 02:17:31 +03:00
tab: 0,
2020-09-06 02:41:12 +03:00
contextMenu: null,
};
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();
const response = await Actions.deleteTrustRelationship({
id: id,
});
2020-09-06 00:36:20 +03:00
await this.props.onRehydrate();
};
2020-09-06 02:41:12 +03:00
_handleAccept = async (e, id) => {
this._handleHide();
e.stopPropagation();
const response = await Actions.updateTrustRelationship({
userId: id,
});
2020-09-06 00:36:20 +03:00
await this.props.onRehydrate();
};
2020-09-06 02:41:12 +03:00
_handleFollow = async (e, id) => {
this._handleHide();
e.stopPropagation();
const response = await Actions.createSubscription({
userId: id,
});
2020-09-06 00:36:20 +03:00
await this.props.onRehydrate();
};
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={[
{
text: "Copy profile URL",
2020-09-06 02:41:12 +03:00
onClick: (e) =>
this._handleCopy(
e,
`https://slate.host/${relation.owner.username}`
),
},
{
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={{
top: "40px",
right: "0px",
2020-09-06 02:41:12 +03:00
}}
navigation={[
{
text: "Copy profile URL",
2020-09-06 02:41:12 +03:00
onClick: (e) =>
this._handleCopy(
e,
`https://slate.host/${relation.user.username}`
),
},
{
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={{
top: "40px",
right: "0px",
2020-09-06 02:41:12 +03:00
}}
navigation={[
{
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={[
{
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,
});
}}
/>
);
});
return (
<ScenePage>
<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
) : (
<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
) : (
<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
) : (
<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
) : (
<EmptyState>
<SVG.Users height="24px" style={{ marginBottom: 24 }} />
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}
/>
</ScenePage>
);
}
}