slate/scenes/SceneProfile.js

206 lines
5.9 KiB
JavaScript

import * as React from "react";
import * as Strings from "~/common/strings";
import * as Utilities from "~/common/utilities";
import * as Constants from "~/common/constants";
import * as Events from "~/common/custom-events";
import * as Validations from "~/common/validations";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { LoaderSpinner } from "~/components/system/components/Loaders";
import ScenePage from "~/components/core/ScenePage";
import Profile from "~/components/core/Profile";
import EmptyState from "~/components/core/EmptyState";
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
const STYLES_LOADER = css`
display: flex;
align-items: center;
justify-content: center;
height: 90vh;
width: 100%;
`;
export default class SceneProfile extends React.Component {
state = {
notFound: false,
loading: false,
};
// componentDidMount = async () => {
// if (this.props.data) {
// this.openCarouselToItem();
// }
// };
// componentDidUpdate = (prevProps) => {
// // if (
// // this.state.isOwner &&
// // this.props.viewer &&
// // this.props.viewer.library !== prevProps.viewer.library
// // ) {
// // let filteredViewer = this.getFilteredViewer();
// // this.setState({ profile: filteredViewer });
// // } else
// if (this.props.data !== prevProps.data || this.props.page.params !== prevProps.page.params) {
// this.openCarouselToItem();
// }
// };
// fetchProfile = async () => {
// const username = this.props.page.username || this.props.page.data?.username;
// const { userId } = this.props.page;
// const id = userId || this.props.data?.id;
// let isOwner = false;
// let query;
// let targetUser;
// if (username) {
// if (this.props.viewer && username === this.props.viewer.username) {
// isOwner = true;
// targetUser = this.getFilteredViewer();
// } else {
// query = { username };
// }
// } else if (id) {
// if (this.props.viewer && id === this.props.viewer.id) {
// isOwner = true;
// targetUser = this.getFilteredViewer();
// } else {
// query = { id };
// }
// }
// if (!targetUser) {
// let response;
// if (query) {
// response = await Actions.getSerializedProfile(query);
// }
// if (!response || response.error) {
// this.setState({ notFound: true });
// return;
// }
// targetUser = response.data;
// }
// window.history.replaceState(
// { ...window.history.state, data: targetUser },
// "A slate user",
// `/${targetUser.username}`
// );
// this.props.onUpdateData(targetUser);
// this.setState({ isOwner, profile: targetUser, loading: false }, this.openCarouselToItem);
// };
// openCarouselToItem = () => {
// if (!this.props.data?.library?.length || !this.props.page?.params) {
// return;
// }
// const { cid, fileId, index } = this.props.page.params;
// if (Strings.isEmpty(cid) && Strings.isEmpty(fileId) && typeof index === "undefined") {
// return;
// }
// const library = this.props.data.library;
// let foundIndex = -1;
// if (index) {
// foundIndex = index;
// } else if (cid) {
// foundIndex = library.findIndex((object) => object.cid === cid);
// } else if (fileId) {
// foundIndex = library.findIndex((object) => object.id === fileId);
// }
// if (typeof foundIndex !== "undefined" && foundIndex !== -1) {
// Events.dispatchCustomEvent({
// name: "slate-global-open-carousel",
// detail: { index: foundIndex },
// });
// }
// // else {
// // Events.dispatchCustomEvent({
// // name: "create-alert",
// // detail: {
// // alert: {
// // message:
// // "The requested file could not be found. It could have been deleted or may be private",
// // },
// // },
// // });
// // }
// };
render() {
let user = this.props.data;
if (!user) {
return (
<WebsitePrototypeWrapper
title={`${this.props.page.pageTitle} • Slate`}
url={`${Constants.hostname}${this.props.page.pathname}`}
>
<ScenePage>
<EmptyState>
<SVG.Users height="24px" style={{ marginBottom: 24 }} />
<div>We were unable to locate that user profile</div>
</EmptyState>
</ScenePage>
</WebsitePrototypeWrapper>
);
}
let name = user.name || `@${user.username}`;
let description, title;
const image = user.photo;
if (user.body) {
description = `${name}. ${user.body}`;
} else {
description = `View collections and content from ${name} on Slate`;
}
if (user.name) {
title = `${user.name} (@${user.username}) • Slate`;
} else {
title = `${user.username} • Slate`;
}
return (
<WebsitePrototypeWrapper
description={description}
title={title}
url={`${Constants.hostname}${this.props.page.pathname}`}
image={image}
>
<Profile
{...this.props}
user={user}
isOwner={this.props.viewer ? user.id === this.props.viewer.id : false}
isAuthenticated={this.props.viewer !== null}
key={user.id}
/>
</WebsitePrototypeWrapper>
);
// if (this.state.loading) {
// return (
// <ScenePage>
// <div css={STYLES_LOADER}>
// <LoaderSpinner />
// </div>
// </ScenePage>
// );
// } else {
// return (
// <Profile
// {...this.props}
// user={user}
// isOwner={this.state.isOwner}
// isAuthenticated={this.props.viewer !== null}
// key={user.id}
// />
// );
// }
}
}