filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-25 10:05:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

removed peers from ui

Browse Source
This commit is contained in:
Martina 2020-12-12 17:16:55 -08:00
parent 31642ede5a
commit fa7e91d1b6
6 changed files with 286 additions and 384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
components/core/Profile.js
View File

@ -28,6 +28,7 @@ const STYLES_PROFILE = css`
`; `;
const STYLES_PROFILE_INFO = css` const STYLES_PROFILE_INFO = css`
padding: 32px 32px 0px 32px;
display: flex; display: flex;
line-height: 1.3; line-height: 1.3;
width: 50%; width: 50%;
@ -59,21 +60,8 @@ const STYLES_INFO_INTERNAL = css`
} }
`; `;
const STYLES_INFO = css`
display: block;
width: 100%;
max-width: calc(100% - 224px);
text-align: left;
margin-bottom: 48px;
overflow-wrap: break-word;
white-space: pre-wrap;
@media (max-width: ${Constants.sizes.mobile}px) {
max-width: calc(100% - 80px);
}
`;
const STYLES_PROFILE_IMAGE = css` const STYLES_PROFILE_IMAGE = css`
background-color: ${Constants.system.foreground}; background-color: ${Constants.system.white};
background-size: cover; background-size: cover;
background-position: 50% 50%; background-position: 50% 50%;
width: 80px; width: 80px;
@ -88,17 +76,6 @@ const STYLES_PROFILE_IMAGE = css`
} }
`; `;
const STYLES_NAME = css`
font-size: ${Constants.typescale.lvl3};
font-family: ${Constants.font.medium};
max-width: 100%;
font-weight: 400;
margin: 8px 24px 0px 0;
overflow-wrap: break-word;
white-space: pre-wrap;
color: ${Constants.system.black};
`;
const STYLES_NAME_INTERNAL = css` const STYLES_NAME_INTERNAL = css`
font-size: ${Constants.typescale.lvl3}; font-size: ${Constants.typescale.lvl3};
font-family: ${Constants.font.semiBold}; font-family: ${Constants.font.semiBold};
@ -138,29 +115,6 @@ const STYLES_STAT = css`
flex-shrink: 0; flex-shrink: 0;
`; `;
const STYLES_BUTTON = css`
width: 96px;
height: 36px;
border-radius: 4px;
border: 1px solid ${Constants.system.gray};
padding: 8px 16px;
cursor: pointer;
margin-top: 8px;
font-family: ${Constants.font.medium};
font-weight: 400;
font-size: 14px;
text-align: center;
text-decoration: none;
color: ${Constants.system.black};
:hover {
background-color: ${Constants.system.gray};
transition: 200ms background-color linear;
}
:visited {
color: ${Constants.system.black};
}
`;
const STYLES_FLEX = css` const STYLES_FLEX = css`
display: flex; display: flex;
align-items: center; align-items: center;
@ -180,6 +134,7 @@ export default class Profile extends React.Component {
}; };
render() { render() {
const external = !this.props.onAction;
let data = this.props.creator ? this.props.creator : this.props.data; let data = this.props.creator ? this.props.creator : this.props.data;
let exploreSlates = this.props.exploreSlates; let exploreSlates = this.props.exploreSlates;
@ -189,75 +144,36 @@ export default class Profile extends React.Component {
} }
return ( return (
<div> <div>
{this.props.onAction ? ( <div css={external ? STYLES_PROFILE_INFO : STYLES_PROFILE_INFO_INTERNAL}>
<div css={STYLES_PROFILE_INFO_INTERNAL}> <div
<div css={STYLES_PROFILE_IMAGE}
css={STYLES_PROFILE_IMAGE} style={{ backgroundImage: `url('${data.data.photo}')` }}
style={{ backgroundImage: `url('${data.data.photo}')` }} />
/> <div css={STYLES_INFO_INTERNAL}>
<div css={STYLES_INFO_INTERNAL}> <div css={STYLES_FLEX} style={{ marginTop: 8 }}>
<div css={STYLES_FLEX} style={{ marginTop: 8 }}> <div css={STYLES_NAME_INTERNAL}>{Strings.getPresentationName(data)}</div>
<div css={STYLES_NAME_INTERNAL}>{Strings.getPresentationName(data)}</div> <div>{this.props.buttons}</div>
<div>{this.props.buttons}</div>
</div>
<div css={STYLES_STATS}>
<div css={STYLES_STAT}>
<div style={{ fontFamily: `${Constants.font.text}` }}>
{total}{" "}
<span style={{ color: `${Constants.system.darkGray}` }}>Public data</span>
</div>
</div>
<div css={STYLES_STAT}>
<div style={{ fontFamily: `${Constants.font.text}` }}>
{data.slates.length}{" "}
<span style={{ color: `${Constants.system.darkGray}` }}>Public slates</span>
</div>
</div>
</div>
{data.data.body ? (
<div css={STYLES_DESCRIPTION}>
<ProcessedText text={data.data.body} />
</div>
) : null}
</div> </div>
</div> <div css={STYLES_STATS}>
) : ( <div css={STYLES_STAT}>
<div css={STYLES_PROFILE}> <div style={{ fontFamily: `${Constants.font.text}` }}>
<div css={STYLES_PROFILE_INFO}> {total} <span style={{ color: `${Constants.system.darkGray}` }}>Public data</span>
<div
css={STYLES_PROFILE_IMAGE}
style={{ backgroundImage: `url('${data.data.photo}')` }}
/>
<div css={STYLES_INFO}>
<div css={STYLES_FLEX}>
<div css={STYLES_NAME}>{Strings.getPresentationName(data)}</div>
<a css={STYLES_BUTTON} href={"http://slate.host/_"}>
Follow
</a>
</div> </div>
<div css={STYLES_STATS}> </div>
<div css={STYLES_STAT}> <div css={STYLES_STAT}>
<div style={{ fontFamily: `${Constants.font.text}` }}> <div style={{ fontFamily: `${Constants.font.text}` }}>
{total}{" "} {data.slates.length}{" "}
<span style={{ color: `${Constants.system.darkGray}` }}>Public data</span> <span style={{ color: `${Constants.system.darkGray}` }}>Public slates</span>
</div>
</div>
<div css={STYLES_STAT}>
<div style={{ fontFamily: `${Constants.font.text}` }}>
{data.slates.length}{" "}
<span style={{ color: `${Constants.system.darkGray}` }}>Public slates</span>
</div>
</div>
</div> </div>
{data.data.body ? (
<div css={STYLES_DESCRIPTION} style={{ marginBottom: 16 }}>
<ProcessedText text={data.data.body} />
</div>
) : null}
</div> </div>
</div> </div>
{data.data.body ? (
<div css={STYLES_DESCRIPTION}>
<ProcessedText text={data.data.body} />
</div>
) : null}
</div> </div>
)} </div>
{this.state.visible && ( {this.state.visible && (
<div> <div>

5
components/core/SlatePreviewBlock.js
View File

@ -584,8 +584,9 @@ export default class SlatePreviewBlocks extends React.Component {
<div css={STYLES_SLATES}> <div css={STYLES_SLATES}>
{this.props.external {this.props.external
? this.props.slates.map((slate) => ( ? this.props.slates.map((slate) => (
<div <a
key={slate.id} key={slate.id}
style={{ textDecoration: "none", color: Constants.system.black }}
href={ href={
this.props.username this.props.username
? `/${this.props.username}/${slate.slatename}` ? `/${this.props.username}/${slate.slatename}`
@ -598,7 +599,7 @@ export default class SlatePreviewBlocks extends React.Component {
slate={slate} slate={slate}
external={this.props.external} external={this.props.external}
/> />
</div> </a>
)) ))
: this.props.slates.map((slate) => ( : this.props.slates.map((slate) => (
<div <div

25
pages/_/profile.js
View File

@ -3,12 +3,13 @@ import * as Constants from "~/common/constants";
import * as Strings from "~/common/strings"; import * as Strings from "~/common/strings";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { Alert } from "~/components/core/Alert"; import { ButtonSecondary } from "~/components/system/components/Buttons";
import Profile from "~/components/core/Profile"; import Profile from "~/components/core/Profile";
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper"; import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader"; import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader";
import WebsitePrototypeFooter from "~/components/core/WebsitePrototypeFooter"; import WebsitePrototypeFooter from "~/components/core/WebsitePrototypeFooter";
import CTATransition from "~/components/core/CTATransition";
const DEFAULT_IMAGE = const DEFAULT_IMAGE =
"https://slate.textile.io/ipfs/bafkreiaow45dlq5xaydaeqocdxvffudibrzh2c6qandpqkb6t3ahbvh6re"; "https://slate.textile.io/ipfs/bafkreiaow45dlq5xaydaeqocdxvffudibrzh2c6qandpqkb6t3ahbvh6re";
@ -29,11 +30,18 @@ const STYLES_ROOT = css`
`; `;
export default class ProfilePage extends React.Component { export default class ProfilePage extends React.Component {
state = {
visible: false,
};
render() { render() {
const title = this.props.creator ? `${this.props.creator.username}` : "404"; const title = this.props.creator ? `${this.props.creator.username}` : "404";
const url = `https://slate.host/${title}`; const url = `https://slate.host/${title}`;
const description = this.props.creator.data.body; const description = this.props.creator.data.body;
const image = this.props.creator.data.photo; const image = this.props.creator.data.photo;
const buttons = (
<ButtonSecondary onClick={() => this.setState({ visible: true })}>Follow</ButtonSecondary>
);
if (Strings.isEmpty(image)) { if (Strings.isEmpty(image)) {
image = DEFAULT_IMAGE; image = DEFAULT_IMAGE;
@ -43,8 +51,21 @@ export default class ProfilePage extends React.Component {
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}> <WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
<WebsitePrototypeHeader /> <WebsitePrototypeHeader />
<div css={STYLES_ROOT}> <div css={STYLES_ROOT}>
<Profile {...this.props} /> <Profile {...this.props} buttons={buttons} />
</div> </div>
{this.state.visible && (
<div>
<CTATransition
onClose={() => this.setState({ visible: false })}
viewer={this.props.viewer}
open={this.state.visible}
redirectURL={`/_${Strings.createQueryParams({
scene: "V1_NAVIGATION_PROFILE",
user: this.props.creator.username,
})}`}
/>
</div>
)}
<WebsitePrototypeFooter /> <WebsitePrototypeFooter />
</WebsitePrototypeWrapper> </WebsitePrototypeWrapper>
); );

56
pages/_/slate.js
View File

@ -7,8 +7,8 @@ import * as Actions from "~/common/actions";
import * as Validations from "~/common/validations"; import * as Validations from "~/common/validations";
import * as Events from "~/common/custom-events"; import * as Events from "~/common/custom-events";
import { ButtonSecondary } from "~/components/system/components/Buttons";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { Alert } from "~/components/core/Alert";
import { ViewAllButton } from "~/components/core/ViewAll"; import { ViewAllButton } from "~/components/core/ViewAll";
import { SlateLayout } from "~/components/core/SlateLayout"; import { SlateLayout } from "~/components/core/SlateLayout";
import { SlateLayoutMobile } from "~/components/core/SlateLayoutMobile"; import { SlateLayoutMobile } from "~/components/core/SlateLayoutMobile";
@ -59,6 +59,7 @@ const STYLES_SLATE_INTRO = css`
const STYLES_TITLELINE = css` const STYLES_TITLELINE = css`
display: flex; display: flex;
align-items: flex-end;
line-height: 1.3; line-height: 1.3;
word-wrap: break-word; word-wrap: break-word;
@ -121,42 +122,6 @@ const STYLES_STAT = css`
flex-shrink: 0; flex-shrink: 0;
`; `;
const STYLES_BUTTONS = css`
display: flex;
width: 200px;
height: 36px;
border-radius: 4px;
border: 1px solid ${Constants.system.gray};
flex-shrink: 0;
@media (max-width: ${Constants.sizes.mobile}px) {
margin: 12px 0;
}
`;
const STYLES_BUTTON = css`
border-right: 1px solid ${Constants.system.gray};
padding: 8px 4px;
cursor: pointer;
width: 50%;
font-family: ${Constants.font.medium};
font-weight: 400;
font-size: 14px;
text-align: center;
text-decoration: none;
color: ${Constants.system.black};
:last-child {
border-right: none;
}
:hover {
background-color: ${Constants.system.gray};
transition: 200ms background-color linear;
}
:visited {
color: ${Constants.system.black};
}
`;
const STYLES_SLATE = css` const STYLES_SLATE = css`
padding: 0 32px; padding: 0 32px;
display: block; display: block;
@ -321,14 +286,9 @@ export default class SlatePage extends React.Component {
{slateCreator} {slateCreator}
</a> </a>
<div css={STYLES_TITLE}>{slateTitle} </div> <div css={STYLES_TITLE}>{slateTitle} </div>
<div css={STYLES_BUTTONS}> <ButtonSecondary onClick={() => this.setState({ visible: true })}>
<div css={STYLES_BUTTON} onClick={() => this.setState({ visible: true })}> Follow
Follow </ButtonSecondary>
</div>
<div css={STYLES_BUTTON} onClick={() => this.setState({ visible: true })}>
Download
</div>
</div>
</div> </div>
<div css={STYLES_DESCRIPTION}> <div css={STYLES_DESCRIPTION}>
<ViewAllButton fullText={this.props.slate.data.body} maxCharacter={208}> <ViewAllButton fullText={this.props.slate.data.body} maxCharacter={208}>
@ -383,7 +343,11 @@ export default class SlatePage extends React.Component {
onClose={() => this.setState({ visible: false })} onClose={() => this.setState({ visible: false })}
viewer={this.props.viewer} viewer={this.props.viewer}
open={this.state.visible} open={this.state.visible}
redirectURL={`/_?scene=V1_NAVIGATION_SLATE&user=${this.props.creator.username}&slate=${this.props.slate.slatename}`} redirectURL={`/_${Strings.createQueryParams({
scene: "V1_NAVIGATION_SLATE",
user: this.props.creator.username,
slate: this.props.slate.slatename,
})}`}
/> />
</div> </div>
)} )}

358
scenes/SceneDirectory.js
View File

@ -189,181 +189,181 @@ export default class SceneDirectory extends React.Component {
}; };
render() { render() {
let requests = this.props.viewer.pendingTrusted // let requests = this.props.viewer.pendingTrusted
.filter((relation) => { // .filter((relation) => {
return !relation.data.verified; // return !relation.data.verified;
}) // })
.map((relation) => { // .map((relation) => {
let button = ( // let button = (
<React.Fragment> // <React.Fragment>
<span css={STYLES_MOBILE_ONLY}> // <span css={STYLES_MOBILE_ONLY}>
<div css={STYLES_BUTTONS}> // <div css={STYLES_BUTTONS}>
<div // <div
css={STYLES_ITEM_BOX} // css={STYLES_ITEM_BOX}
onClick={(e) => this._handleAccept(e, relation.owner.id)} // onClick={(e) => this._handleAccept(e, relation.owner.id)}
> // >
<SVG.CheckBox height="24px" style={{ color: Constants.system.brand }} /> // <SVG.CheckBox height="24px" style={{ color: Constants.system.brand }} />
</div> // </div>
<div // <div
css={STYLES_ITEM_BOX} // css={STYLES_ITEM_BOX}
style={{ marginRight: 0 }} // style={{ marginRight: 0 }}
onClick={(e) => { // onClick={(e) => {
this._handleDelete(e, relation.id); // this._handleDelete(e, relation.id);
}} // }}
> // >
<SVG.Dismiss height="24px" style={{ color: Constants.system.gray }} /> // <SVG.Dismiss height="24px" style={{ color: Constants.system.gray }} />
</div> // </div>
</div> // </div>
</span> // </span>
<span css={STYLES_MOBILE_HIDDEN}> // <span css={STYLES_MOBILE_HIDDEN}>
<div css={STYLES_BUTTONS}> // <div css={STYLES_BUTTONS}>
<ButtonPrimary // <ButtonPrimary
transparent // transparent
style={{ fontSize: 16 }} // style={{ fontSize: 16 }}
onClick={(e) => this._handleAccept(e, relation.owner.id)} // onClick={(e) => this._handleAccept(e, relation.owner.id)}
> // >
Accept // Accept
</ButtonPrimary> // </ButtonPrimary>
<ButtonSecondary // <ButtonSecondary
transparent // transparent
style={{ fontSize: 16 }} // style={{ fontSize: 16 }}
onClick={(e) => { // onClick={(e) => {
this._handleDelete(e, relation.id); // this._handleDelete(e, relation.id);
}} // }}
> // >
Decline // Decline
</ButtonSecondary> // </ButtonSecondary>
</div> // </div>
</span> // </span>
</React.Fragment> // </React.Fragment>
); // );
return ( // return (
<UserEntry // <UserEntry
key={relation.id} // key={relation.id}
user={relation.owner} // user={relation.owner}
button={button} // button={button}
onClick={() => { // onClick={() => {
this.props.onAction({ // this.props.onAction({
type: "NAVIGATE", // type: "NAVIGATE",
value: this.props.sceneId, // value: this.props.sceneId,
scene: "PUBLIC_PROFILE", // scene: "PUBLIC_PROFILE",
data: relation.owner, // data: relation.owner,
}); // });
}} // }}
message=" requested to trust you" // message=" requested to trust you"
/> // />
); // );
}); // });
let trusted = this.props.viewer.pendingTrusted // let trusted = this.props.viewer.pendingTrusted
.filter((relation) => { // .filter((relation) => {
return relation.data.verified; // return relation.data.verified;
}) // })
.map((relation) => { // .map((relation) => {
let button = ( // let button = (
<div css={STYLES_ITEM_BOX} onClick={(e) => this._handleClick(e, relation.id)}> // <div css={STYLES_ITEM_BOX} onClick={(e) => this._handleClick(e, relation.id)}>
<SVG.MoreHorizontal height="24px" /> // <SVG.MoreHorizontal height="24px" />
{this.state.contextMenu === relation.id ? ( // {this.state.contextMenu === relation.id ? (
<Boundary // <Boundary
captureResize={true} // captureResize={true}
captureScroll={false} // captureScroll={false}
enabled // enabled
onOutsideRectEvent={(e) => this._handleClick(e, relation.id)} // onOutsideRectEvent={(e) => this._handleClick(e, relation.id)}
> // >
<PopoverNavigation // <PopoverNavigation
style={{ // style={{
top: "40px", // top: "40px",
right: "0px", // right: "0px",
}} // }}
navigation={[ // navigation={[
{ // {
text: "Copy profile URL", // text: "Copy profile URL",
onClick: (e) => // onClick: (e) =>
this._handleCopy(e, `https://slate.host/${relation.owner.username}`), // this._handleCopy(e, `https://slate.host/${relation.owner.username}`),
}, // },
{ // {
text: "Remove peer", // text: "Remove peer",
onClick: (e) => this._handleDelete(e, relation.id), // onClick: (e) => this._handleDelete(e, relation.id),
}, // },
]} // ]}
/> // />
</Boundary> // </Boundary>
) : null} // ) : null}
</div> // </div>
); // );
return ( // return (
<UserEntry // <UserEntry
key={relation.id} // key={relation.id}
user={relation.owner} // user={relation.owner}
button={button} // button={button}
onClick={() => { // onClick={() => {
this.props.onAction({ // this.props.onAction({
type: "NAVIGATE", // type: "NAVIGATE",
value: this.props.sceneId, // value: this.props.sceneId,
scene: "PUBLIC_PROFILE", // scene: "PUBLIC_PROFILE",
data: relation.owner, // data: relation.owner,
}); // });
}} // }}
/> // />
); // );
}); // });
if (!trusted) { // if (!trusted) {
trusted = []; // trusted = [];
} // }
trusted.push( // trusted.push(
...this.props.viewer.trusted // ...this.props.viewer.trusted
.filter((relation) => { // .filter((relation) => {
return relation.data.verified; // return relation.data.verified;
}) // })
.map((relation) => { // .map((relation) => {
let button = ( // let button = (
<div css={STYLES_ITEM_BOX} onClick={(e) => this._handleClick(e, relation.id)}> // <div css={STYLES_ITEM_BOX} onClick={(e) => this._handleClick(e, relation.id)}>
<SVG.MoreHorizontal height="24px" /> // <SVG.MoreHorizontal height="24px" />
{this.state.contextMenu === relation.id ? ( // {this.state.contextMenu === relation.id ? (
<Boundary // <Boundary
captureResize={true} // captureResize={true}
captureScroll={false} // captureScroll={false}
enabled // enabled
onOutsideRectEvent={(e) => this._handleClick(e, relation.id)} // onOutsideRectEvent={(e) => this._handleClick(e, relation.id)}
> // >
<PopoverNavigation // <PopoverNavigation
style={{ // style={{
top: "40px", // top: "40px",
right: "0px", // right: "0px",
}} // }}
navigation={[ // navigation={[
{ // {
text: "Copy profile URL", // text: "Copy profile URL",
onClick: (e) => // onClick: (e) =>
this._handleCopy(e, `https://slate.host/${relation.user.username}`), // this._handleCopy(e, `https://slate.host/${relation.user.username}`),
}, // },
{ // {
text: "Remove peer", // text: "Remove peer",
onClick: (e) => this._handleDelete(e, relation.id), // onClick: (e) => this._handleDelete(e, relation.id),
}, // },
]} // ]}
/> // />
</Boundary> // </Boundary>
) : null} // ) : null}
</div> // </div>
); // );
return ( // return (
<UserEntry // <UserEntry
key={relation.id} // key={relation.id}
user={relation.user} // user={relation.user}
button={button} // button={button}
onClick={() => { // onClick={() => {
this.props.onAction({ // this.props.onAction({
type: "NAVIGATE", // type: "NAVIGATE",
value: this.props.sceneId, // value: this.props.sceneId,
scene: "PUBLIC_PROFILE", // scene: "PUBLIC_PROFILE",
data: relation.user, // data: relation.user,
}); // });
}} // }}
/> // />
); // );
}) // })
); // );
let following = this.props.viewer.subscriptions let following = this.props.viewer.subscriptions
.filter((relation) => { .filter((relation) => {
@ -475,11 +475,11 @@ export default class SceneDirectory extends React.Component {
<ScenePage> <ScenePage>
<ScenePageHeader title="Directory" /> <ScenePageHeader title="Directory" />
<TabGroup <TabGroup
tabs={["Requests", "Trusted", "Following", "Followers"]} tabs={["Following", "Followers"]}
value={this.state.tab} value={this.state.tab}
onChange={(value) => this.setState({ tab: value })} onChange={(value) => this.setState({ tab: value })}
/> />
{this.state.tab === 0 ? ( {/* {this.state.tab === 0 ? (
requests && requests.length ? ( requests && requests.length ? (
requests requests
) : ( ) : (
@ -498,8 +498,8 @@ export default class SceneDirectory extends React.Component {
Trusted is for your close friends. Trusted is for your close friends.
</EmptyState> </EmptyState>
) )
) : null} ) : null} */}
{this.state.tab === 2 ? ( {this.state.tab === 0 ? (
following && following.length ? ( following && following.length ? (
following following
) : ( ) : (
@ -509,7 +509,7 @@ export default class SceneDirectory extends React.Component {
</EmptyState> </EmptyState>
) )
) : null} ) : null}
{this.state.tab === 3 ? ( {this.state.tab === 1 ? (
followers && followers.length ? ( followers && followers.length ? (
followers followers
) : ( ) : (

88
scenes/SceneProfile.js
View File

@ -21,21 +21,21 @@ const STATUS_BUTTON_MAP = {
}; };
export default class SceneProfile extends React.Component { export default class SceneProfile extends React.Component {
_handleTrust = async (trustStatus, trustId) => { // _handleTrust = async (trustStatus, trustId) => {
if (trustStatus === "untrusted" || trustStatus === "sent") { // if (trustStatus === "untrusted" || trustStatus === "sent") {
await Actions.createTrustRelationship({ // await Actions.createTrustRelationship({
userId: this.props.data.id, // userId: this.props.data.id,
}); // });
} else if (trustStatus === "received") { // } else if (trustStatus === "received") {
await Actions.updateTrustRelationship({ // await Actions.updateTrustRelationship({
userId: this.props.data.id, // userId: this.props.data.id,
}); // });
} else { // } else {
await Actions.deleteTrustRelationship({ // await Actions.deleteTrustRelationship({
id: trustId, // id: trustId,
}); // });
} // }
}; // };
_handleFollow = async () => { _handleFollow = async () => {
await Actions.createSubscription({ await Actions.createSubscription({
@ -45,32 +45,32 @@ export default class SceneProfile extends React.Component {
render() { render() {
let trustId, followStatus, relation; let trustId, followStatus, relation;
let trustStatus = "untrusted"; // let trustStatus = "untrusted";
let viewer = this.props.viewer; let viewer = this.props.viewer;
let trust = viewer.trusted.filter((entry) => { // let trust = viewer.trusted.filter((entry) => {
return entry.target_user_id === this.props.data.id; // return entry.target_user_id === this.props.data.id;
}); // });
if (trust.length) { // if (trust.length) {
relation = trust[0]; // relation = trust[0];
trustId = relation.id; // trustId = relation.id;
if (relation.data.verified) { // if (relation.data.verified) {
trustStatus = "trusted"; // trustStatus = "trusted";
} else { // } else {
trustStatus = "sent"; // trustStatus = "sent";
} // }
} // }
let pendingTrust = viewer.pendingTrusted.filter((entry) => { // let pendingTrust = viewer.pendingTrusted.filter((entry) => {
return entry.owner_user_id === this.props.data.id; // return entry.owner_user_id === this.props.data.id;
}); // });
if (pendingTrust.length) { // if (pendingTrust.length) {
relation = pendingTrust[0]; // relation = pendingTrust[0];
trustId = relation.id; // trustId = relation.id;
if (pendingTrust[0].data.verified) { // if (pendingTrust[0].data.verified) {
trustStatus = "trusted"; // trustStatus = "trusted";
} else { // } else {
trustStatus = "received"; // trustStatus = "received";
} // }
} // }
followStatus = !!viewer.subscriptions.filter((entry) => { followStatus = !!viewer.subscriptions.filter((entry) => {
return entry.target_user_id === this.props.data.id; return entry.target_user_id === this.props.data.id;
}).length; }).length;
@ -78,15 +78,15 @@ export default class SceneProfile extends React.Component {
let buttons = ( let buttons = (
<div css={STYLES_BUTTONS}> <div css={STYLES_BUTTONS}>
{followStatus ? ( {followStatus ? (
<ButtonSecondary style={{ marginRight: 8, minWidth: 152 }} onClick={this._handleFollow}> <ButtonSecondary style={{ marginRight: 8 }} onClick={this._handleFollow}>
Unfollow Unfollow
</ButtonSecondary> </ButtonSecondary>
) : ( ) : (
<ButtonPrimary style={{ marginRight: 8, minWidth: 152 }} onClick={this._handleFollow}> <ButtonPrimary style={{ marginRight: 8 }} onClick={this._handleFollow}>
Follow Follow
</ButtonPrimary> </ButtonPrimary>
)} )}
{trustStatus === "untrusted" || trustStatus === "received" ? ( {/* {trustStatus === "untrusted" || trustStatus === "received" ? (
<ButtonPrimary <ButtonPrimary
style={{ marginRight: 8, minWidth: 152 }} style={{ marginRight: 8, minWidth: 152 }}
onClick={() => this._handleTrust(trustStatus, trustId)} onClick={() => this._handleTrust(trustStatus, trustId)}
@ -100,7 +100,7 @@ export default class SceneProfile extends React.Component {
> >
{STATUS_BUTTON_MAP[trustStatus]} {STATUS_BUTTON_MAP[trustStatus]}
</ButtonSecondary> </ButtonSecondary>
)} )} */}
</div> </div>
); );
return ( return (