2020-08-31 21:19:46 +03:00
|
|
|
import * as React from "react";
|
|
|
|
import * as Actions from "~/common/actions";
|
2021-03-01 07:17:41 +03:00
|
|
|
import * as Utilities from "~/common/utilities";
|
|
|
|
import * as Strings from "~/common/strings";
|
|
|
|
import * as Events from "~/common/custom-events";
|
2020-12-20 05:19:32 +03:00
|
|
|
import * as SVG from "~/common/svg";
|
2020-08-31 21:19:46 +03:00
|
|
|
|
2020-11-30 08:24:22 +03:00
|
|
|
import { css } from "@emotion/react";
|
2020-12-20 05:19:32 +03:00
|
|
|
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
2020-08-31 21:19:46 +03:00
|
|
|
|
|
|
|
import ScenePage from "~/components/core/ScenePage";
|
|
|
|
import Profile from "~/components/core/Profile";
|
2020-12-20 05:19:32 +03:00
|
|
|
import EmptyState from "~/components/core/EmptyState";
|
2020-08-31 21:19:46 +03:00
|
|
|
|
2020-12-20 05:19:32 +03:00
|
|
|
const STYLES_LOADER = css`
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
height: 90vh;
|
|
|
|
width: 100%;
|
|
|
|
`;
|
|
|
|
|
2020-08-31 21:19:46 +03:00
|
|
|
export default class SceneProfile extends React.Component {
|
2020-12-20 05:19:32 +03:00
|
|
|
state = {
|
|
|
|
profile: null,
|
|
|
|
notFound: false,
|
2021-03-07 23:53:54 +03:00
|
|
|
isOwner: false,
|
|
|
|
loading: true,
|
2020-12-20 05:19:32 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
componentDidMount = async () => {
|
2021-03-01 07:17:41 +03:00
|
|
|
this.fetchProfile();
|
2020-12-20 05:19:32 +03:00
|
|
|
};
|
|
|
|
|
2021-03-07 23:53:54 +03:00
|
|
|
componentDidUpdate = (prevProps) => {
|
|
|
|
if (this.state.isOwner && this.props.viewer.library !== prevProps.viewer.library) {
|
|
|
|
let filteredViewer = this.getFilteredViewer();
|
|
|
|
this.setState({ profile: filteredViewer });
|
|
|
|
} else if (this.props.page !== prevProps.page) {
|
|
|
|
this.openCarouselToItem();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-12-20 05:19:32 +03:00
|
|
|
fetchProfile = async () => {
|
2021-01-29 03:57:02 +03:00
|
|
|
const username = this.props.page.user || this.props.page.data?.username;
|
2021-03-07 23:53:54 +03:00
|
|
|
let isOwner = false;
|
2020-12-20 05:19:32 +03:00
|
|
|
let query;
|
|
|
|
let targetUser;
|
|
|
|
if (username) {
|
|
|
|
if (username === this.props.viewer.username) {
|
2021-03-07 23:53:54 +03:00
|
|
|
isOwner = true;
|
2021-03-01 07:17:41 +03:00
|
|
|
targetUser = this.getFilteredViewer();
|
2020-12-20 05:19:32 +03:00
|
|
|
} else {
|
|
|
|
query = { username: username };
|
|
|
|
}
|
2021-03-07 23:53:54 +03:00
|
|
|
} else if (this.props.data?.id) {
|
2020-12-20 05:19:32 +03:00
|
|
|
if (this.props.data.id === this.props.viewer.id) {
|
2021-03-07 23:53:54 +03:00
|
|
|
isOwner = true;
|
2021-03-01 07:17:41 +03:00
|
|
|
targetUser = this.getFilteredViewer();
|
2020-12-20 05:19:32 +03:00
|
|
|
} else {
|
|
|
|
query = { id: this.props.data.id };
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!targetUser) {
|
|
|
|
let response;
|
|
|
|
if (query) {
|
|
|
|
response = await Actions.getSerializedProfile(query);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!response || response.error) {
|
|
|
|
this.setState({ notFound: true });
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
targetUser = response.data;
|
|
|
|
}
|
2021-01-29 03:57:02 +03:00
|
|
|
window.history.replaceState(
|
|
|
|
{ ...window.history.state, data: targetUser },
|
|
|
|
"A slate user",
|
|
|
|
`/${targetUser.username}`
|
|
|
|
);
|
2021-03-07 23:53:54 +03:00
|
|
|
this.props.onUpdateData(targetUser);
|
|
|
|
this.setState({ isOwner, profile: targetUser, loading: false }, this.openCarouselToItem);
|
|
|
|
};
|
2020-12-20 05:19:32 +03:00
|
|
|
|
2021-03-07 23:53:54 +03:00
|
|
|
openCarouselToItem = () => {
|
|
|
|
if (!this.state.profile?.library?.length) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const { cid, fileId, index } = this.props.page;
|
2021-03-01 07:17:41 +03:00
|
|
|
|
2021-03-07 23:53:54 +03:00
|
|
|
if (Strings.isEmpty(cid) && Strings.isEmpty(fileId) && typeof index === "undefined") {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const library = this.state.profile.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",
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
// });
|
|
|
|
// }
|
2021-03-01 07:17:41 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
getFilteredViewer = () => {
|
|
|
|
let viewer = this.props.viewer;
|
|
|
|
const res = Utilities.getPublicAndPrivateFiles({ viewer });
|
2021-03-07 23:53:54 +03:00
|
|
|
return { ...viewer, library: res.publicFiles };
|
2020-12-20 05:19:32 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
if (this.state.notFound) {
|
|
|
|
return (
|
|
|
|
<ScenePage>
|
|
|
|
<EmptyState>
|
|
|
|
<SVG.Users height="24px" style={{ marginBottom: 24 }} />
|
|
|
|
<div>We were unable to locate that user profile</div>
|
|
|
|
</EmptyState>
|
|
|
|
</ScenePage>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-03-07 23:53:54 +03:00
|
|
|
if (this.state.loading) {
|
2020-12-20 05:19:32 +03:00
|
|
|
return (
|
2021-03-07 23:53:54 +03:00
|
|
|
<ScenePage>
|
|
|
|
<div css={STYLES_LOADER}>
|
|
|
|
<LoaderSpinner />
|
|
|
|
</div>
|
|
|
|
</ScenePage>
|
|
|
|
);
|
|
|
|
} else if (this.state.profile?.id) {
|
|
|
|
return (
|
|
|
|
<Profile
|
|
|
|
{...this.props}
|
|
|
|
user={this.state.profile}
|
|
|
|
isOwner={this.state.isOwner}
|
|
|
|
isAuthenticated={this.props.viewer !== null}
|
|
|
|
key={this.state.profile.id}
|
|
|
|
/>
|
2020-12-20 05:19:32 +03:00
|
|
|
);
|
|
|
|
}
|
2021-03-07 23:53:54 +03:00
|
|
|
return null;
|
2020-08-31 21:19:46 +03:00
|
|
|
}
|
|
|
|
}
|