2020-08-08 03:17:54 +03:00
|
|
|
import * as React from "react";
|
2020-12-19 08:25:50 +03:00
|
|
|
import * as Constants from "~/common/constants";
|
|
|
|
import * as Validations from "~/common/validations";
|
|
|
|
import * as Window from "~/common/window";
|
|
|
|
import * as SVG from "~/common/svg";
|
|
|
|
import * as Actions from "~/common/actions";
|
|
|
|
import * as Events from "~/common/custom-events";
|
|
|
|
|
2021-01-21 08:41:46 +03:00
|
|
|
import { GlobalCarousel } from "~/components/system/components/GlobalCarousel";
|
2020-12-19 08:25:50 +03:00
|
|
|
import { css } from "@emotion/react";
|
2021-01-21 10:02:35 +03:00
|
|
|
import { TabGroup, PrimaryTabGroup, SecondaryTabGroup } from "~/components/core/TabGroup";
|
2021-01-14 23:40:14 +03:00
|
|
|
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
2020-08-08 03:17:54 +03:00
|
|
|
|
2021-01-11 06:21:30 +03:00
|
|
|
import EmptyState from "~/components/core/EmptyState";
|
2020-08-08 03:17:54 +03:00
|
|
|
import ScenePage from "~/components/core/ScenePage";
|
2020-12-19 08:25:50 +03:00
|
|
|
import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";
|
2020-08-22 07:25:34 +03:00
|
|
|
import ScenePageHeader from "~/components/core/ScenePageHeader";
|
2020-08-08 03:17:54 +03:00
|
|
|
|
2021-01-14 23:40:14 +03:00
|
|
|
const STYLES_LOADER = css`
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
height: calc(100vh - 400px);
|
|
|
|
width: 100%;
|
|
|
|
`;
|
|
|
|
|
2020-12-19 08:25:50 +03:00
|
|
|
const STYLES_IMAGE_BOX = css`
|
|
|
|
cursor: pointer;
|
|
|
|
position: relative;
|
|
|
|
box-shadow: ${Constants.shadow.light};
|
|
|
|
margin: 10px;
|
|
|
|
|
|
|
|
:hover {
|
|
|
|
box-shadow: ${Constants.shadow.medium};
|
|
|
|
}
|
2021-01-21 09:26:02 +03:00
|
|
|
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
|
|
overflow: hidden;
|
|
|
|
border-radius: 8px;
|
|
|
|
}
|
2020-12-19 08:25:50 +03:00
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_TEXT_AREA = css`
|
|
|
|
position: absolute;
|
2021-04-19 22:30:11 +03:00
|
|
|
top: 16px;
|
2020-12-19 08:25:50 +03:00
|
|
|
left: 0px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_TITLE = css`
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
color: ${Constants.system.white};
|
|
|
|
font-family: ${Constants.font.medium};
|
|
|
|
margin-bottom: 4px;
|
|
|
|
width: calc(100% - 32px);
|
|
|
|
padding: 0px 16px;
|
|
|
|
box-sizing: content-box;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_SECONDARY = css`
|
|
|
|
${STYLES_TITLE}
|
|
|
|
font-size: ${Constants.typescale.lvlN1};
|
|
|
|
width: 100%;
|
|
|
|
`;
|
|
|
|
|
2021-01-21 08:41:46 +03:00
|
|
|
const STYLES_SECONDARY_HOVERABLE = css`
|
|
|
|
${STYLES_SECONDARY}
|
|
|
|
padding: 8px 16px;
|
|
|
|
|
|
|
|
:hover {
|
|
|
|
color: ${Constants.system.brand} !important;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-12-19 08:25:50 +03:00
|
|
|
const STYLES_GRADIENT = css`
|
|
|
|
background: linear-gradient(
|
|
|
|
180deg,
|
2021-04-19 22:30:11 +03:00
|
|
|
rgba(0, 0, 0, 0.3) 0%,
|
2020-12-19 08:25:50 +03:00
|
|
|
rgba(0, 0, 0, 0.2) 26.56%,
|
2021-04-19 22:30:11 +03:00
|
|
|
rgba(0, 0, 0, 0) 100%
|
2020-12-19 08:25:50 +03:00
|
|
|
);
|
|
|
|
backdrop-filter: blur(2px);
|
|
|
|
width: 100%;
|
|
|
|
height: 72px;
|
|
|
|
position: absolute;
|
2021-04-19 22:30:11 +03:00
|
|
|
top: 0px;
|
2020-12-19 08:25:50 +03:00
|
|
|
left: 0px;
|
2021-01-21 09:26:02 +03:00
|
|
|
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
|
|
overflow: hidden;
|
|
|
|
border-radius: 0px 0px 8px 8px;
|
|
|
|
}
|
2020-12-19 08:25:50 +03:00
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_ACTIVITY_GRID = css`
|
|
|
|
margin: -10px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
flex-wrap: wrap;
|
2021-01-21 09:26:02 +03:00
|
|
|
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
|
|
margin-top: 24px;
|
|
|
|
}
|
2020-12-19 08:25:50 +03:00
|
|
|
`;
|
|
|
|
|
|
|
|
class ActivitySquare extends React.Component {
|
|
|
|
state = {
|
|
|
|
showText: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const item = this.props.item;
|
|
|
|
const size = this.props.size;
|
2021-03-07 23:53:54 +03:00
|
|
|
const isImage =
|
|
|
|
Validations.isPreviewableImage(item.file.data.type) || !!item.file.data.coverImage;
|
2020-12-19 08:25:50 +03:00
|
|
|
return (
|
|
|
|
<div
|
|
|
|
css={STYLES_IMAGE_BOX}
|
|
|
|
style={{ width: size, height: size }}
|
2021-04-19 22:30:11 +03:00
|
|
|
onMouseEnter={() => this.setState({ showText: true })}
|
|
|
|
onMouseLeave={() => this.setState({ showText: false })}
|
2020-12-19 08:25:50 +03:00
|
|
|
>
|
|
|
|
<SlateMediaObjectPreview
|
2021-03-07 23:53:54 +03:00
|
|
|
file={item.file}
|
2020-12-19 08:25:50 +03:00
|
|
|
centeredImage
|
2021-04-19 22:30:11 +03:00
|
|
|
// iconOnly
|
2020-12-19 08:25:50 +03:00
|
|
|
style={{ border: "none" }}
|
|
|
|
imageStyle={{ border: "none" }}
|
|
|
|
/>
|
2021-04-19 22:30:11 +03:00
|
|
|
{this.state.showText || this.props.isMobile ? <div css={STYLES_GRADIENT} /> : null}
|
|
|
|
{this.state.showText || this.props.isMobile ? (
|
2020-12-19 08:25:50 +03:00
|
|
|
<div css={STYLES_TEXT_AREA} style={{ width: this.props.size }}>
|
2021-04-19 22:30:11 +03:00
|
|
|
{/* {isImage ? null : (
|
2020-12-19 08:25:50 +03:00
|
|
|
<div
|
|
|
|
css={STYLES_TITLE}
|
|
|
|
style={{
|
|
|
|
color: Constants.system.textGray,
|
|
|
|
}}
|
|
|
|
>
|
2021-03-07 23:53:54 +03:00
|
|
|
{item.file.data.name || item.file.filename}
|
2020-12-19 08:25:50 +03:00
|
|
|
</div>
|
2021-04-19 22:30:11 +03:00
|
|
|
)} */}
|
|
|
|
<span
|
2020-12-19 08:25:50 +03:00
|
|
|
style={{
|
2021-04-19 22:30:11 +03:00
|
|
|
color: Constants.system.white,
|
2020-12-19 08:25:50 +03:00
|
|
|
}}
|
2021-01-21 09:26:02 +03:00
|
|
|
css={this.props.onClick ? STYLES_SECONDARY_HOVERABLE : STYLES_SECONDARY}
|
2021-01-21 08:41:46 +03:00
|
|
|
onClick={(e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
this.props.onClick();
|
|
|
|
}}
|
2020-12-19 08:25:50 +03:00
|
|
|
>
|
2021-04-19 22:30:11 +03:00
|
|
|
<SVG.ArrowDownLeft
|
|
|
|
height="10px"
|
|
|
|
style={{ transform: "scaleX(-1)", marginRight: 4 }}
|
|
|
|
/>
|
2020-12-19 08:25:50 +03:00
|
|
|
{item.slate.data.name || item.slate.slatename}
|
2021-04-19 22:30:11 +03:00
|
|
|
</span>
|
2020-12-19 08:25:50 +03:00
|
|
|
</div>
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-01-21 09:26:02 +03:00
|
|
|
const ActivityRectangle = ({ item, width, height }) => {
|
2020-12-19 08:25:50 +03:00
|
|
|
let file;
|
2021-03-07 23:53:54 +03:00
|
|
|
for (let obj of item.slate?.objects || []) {
|
2020-12-19 08:25:50 +03:00
|
|
|
if (Validations.isPreviewableImage(obj.type) || obj.coverImage) {
|
|
|
|
file = obj;
|
|
|
|
}
|
|
|
|
}
|
2021-03-07 23:53:54 +03:00
|
|
|
let numObjects = item.slate?.objects?.length || 0;
|
2020-12-19 08:25:50 +03:00
|
|
|
return (
|
2021-01-21 09:26:02 +03:00
|
|
|
<div css={STYLES_IMAGE_BOX} style={{ width, height }}>
|
2020-12-19 08:25:50 +03:00
|
|
|
{file ? (
|
|
|
|
<SlateMediaObjectPreview
|
2021-03-07 23:53:54 +03:00
|
|
|
file={file}
|
2020-12-19 08:25:50 +03:00
|
|
|
centeredImage
|
|
|
|
iconOnly
|
|
|
|
style={{ border: "none" }}
|
|
|
|
imageStyle={{ border: "none" }}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
<div css={STYLES_GRADIENT} />
|
|
|
|
<div css={STYLES_TEXT_AREA}>
|
|
|
|
<div
|
|
|
|
css={STYLES_TITLE}
|
|
|
|
style={{
|
|
|
|
fontFamily: Constants.font.semiBold,
|
2021-01-21 09:26:02 +03:00
|
|
|
width,
|
2020-12-19 08:25:50 +03:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
{item.slate.data.name || item.slate.slatename}
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
css={STYLES_SECONDARY}
|
|
|
|
style={{
|
|
|
|
color: Constants.system.textGrayLight,
|
2021-01-21 09:26:02 +03:00
|
|
|
width,
|
2020-12-19 08:25:50 +03:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
{numObjects} File{numObjects == 1 ? "" : "s"}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-08-08 03:17:54 +03:00
|
|
|
export default class SceneActivity extends React.Component {
|
2021-01-14 09:30:26 +03:00
|
|
|
counter = 0;
|
2020-12-19 08:25:50 +03:00
|
|
|
state = {
|
|
|
|
imageSize: 200,
|
|
|
|
tab: 0,
|
2021-01-14 23:40:14 +03:00
|
|
|
loading: "loading",
|
2020-12-19 08:25:50 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
async componentDidMount() {
|
|
|
|
this.calculateWidth();
|
|
|
|
this.debounceInstance = Window.debounce(this.calculateWidth, 200);
|
2021-01-14 09:30:26 +03:00
|
|
|
this.scrollDebounceInstance = Window.debounce(this._handleScroll, 200);
|
2020-12-19 08:25:50 +03:00
|
|
|
window.addEventListener("resize", this.debounceInstance);
|
2021-01-14 09:30:26 +03:00
|
|
|
window.addEventListener("scroll", this.scrollDebounceInstance);
|
|
|
|
this.fetchActivityItems(true);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
if (prevProps.tab !== this.props.tab) {
|
|
|
|
this.fetchActivityItems(true);
|
|
|
|
}
|
2020-12-19 08:25:50 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
window.removeEventListener("resize", this.debounceInstance);
|
2021-01-14 09:30:26 +03:00
|
|
|
window.removeEventListener("scroll", this.scrollDebounceInstance);
|
2020-12-19 08:25:50 +03:00
|
|
|
}
|
|
|
|
|
2021-01-14 09:30:26 +03:00
|
|
|
_handleScroll = (e) => {
|
|
|
|
if (this.state.loading) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const windowHeight =
|
|
|
|
"innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
|
|
|
|
const body = document.body;
|
|
|
|
const html = document.documentElement;
|
|
|
|
const docHeight = Math.max(
|
|
|
|
body.scrollHeight,
|
|
|
|
body.offsetHeight,
|
|
|
|
html.clientHeight,
|
|
|
|
html.scrollHeight,
|
|
|
|
html.offsetHeight
|
|
|
|
);
|
|
|
|
const windowBottom = windowHeight + window.pageYOffset;
|
|
|
|
if (windowBottom >= docHeight - 600) {
|
|
|
|
this.fetchActivityItems();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
fetchActivityItems = async (update = false) => {
|
2021-03-07 23:53:54 +03:00
|
|
|
const isExplore = this.props.tab === 1;
|
2021-01-14 09:30:26 +03:00
|
|
|
this.setState({ loading: "loading" });
|
2021-03-07 23:53:54 +03:00
|
|
|
let activity = isExplore ? this.props.viewer.explore || [] : this.props.viewer.activity || [];
|
|
|
|
|
|
|
|
let requestObject = {};
|
2021-01-14 09:30:26 +03:00
|
|
|
if (activity.length) {
|
|
|
|
if (update) {
|
2021-03-07 23:53:54 +03:00
|
|
|
requestObject.latestTimestamp = activity[0].createdAt;
|
2021-01-14 09:30:26 +03:00
|
|
|
} else {
|
2021-03-07 23:53:54 +03:00
|
|
|
requestObject.earliestTimestamp = activity[activity.length - 1].createdAt;
|
2021-01-14 09:30:26 +03:00
|
|
|
}
|
2021-03-07 23:53:54 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
let response;
|
|
|
|
if (isExplore) {
|
|
|
|
response = await Actions.getExplore(requestObject);
|
2021-01-14 09:30:26 +03:00
|
|
|
} else {
|
2021-03-07 23:53:54 +03:00
|
|
|
requestObject.following = this.props.viewer.following.map((item) => item.id);
|
|
|
|
requestObject.subscriptions = this.props.viewer.subscriptions.map((item) => item.id);
|
|
|
|
|
|
|
|
response = await Actions.getActivity(requestObject);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (Events.hasError(response)) {
|
|
|
|
this.setState({ loading: "failed" });
|
|
|
|
return;
|
2021-01-14 09:30:26 +03:00
|
|
|
}
|
2021-03-07 23:53:54 +03:00
|
|
|
|
|
|
|
let newItems = response.activity || response.explore;
|
|
|
|
|
|
|
|
if (update) {
|
|
|
|
activity.unshift(...newItems);
|
|
|
|
this.counter = 0;
|
|
|
|
activity = this.formatActivity(activity);
|
|
|
|
} else {
|
|
|
|
newItems = this.formatActivity(newItems);
|
|
|
|
activity.push(...newItems);
|
|
|
|
}
|
|
|
|
|
2021-01-14 09:30:26 +03:00
|
|
|
if (this.props.tab === 0) {
|
|
|
|
this.props.onUpdateViewer({ activity: activity });
|
|
|
|
} else {
|
|
|
|
this.props.onUpdateViewer({ explore: activity });
|
|
|
|
}
|
|
|
|
this.setState({ loading: false });
|
|
|
|
};
|
|
|
|
|
|
|
|
formatActivity = (userActivity) => {
|
2021-03-07 23:53:54 +03:00
|
|
|
let activity = [];
|
|
|
|
for (let item of userActivity) {
|
|
|
|
if (item.slate && !item.slate.isPublic) {
|
|
|
|
continue;
|
2021-01-14 09:30:26 +03:00
|
|
|
}
|
2021-03-07 23:53:54 +03:00
|
|
|
if (item.type === "CREATE_SLATE_OBJECT" && item.slate && item.file) {
|
|
|
|
activity.push(item);
|
|
|
|
} else if (item.type === "CREATE_SLATE" && item.slate) {
|
|
|
|
activity.push(item);
|
2021-01-14 09:30:26 +03:00
|
|
|
}
|
|
|
|
}
|
2021-03-07 23:53:54 +03:00
|
|
|
return activity; //NOTE(martina): because now it's only things of CREATE_SLATE_OBJECT type, so all square and don't need reordering
|
|
|
|
//NOTE(martina): rearrange order to always get an even row of 6 squares
|
|
|
|
//TODO(martina): improve this. will fail if there are no more squares left to "swap" with at the end, and you'll end up wtih an empty space
|
|
|
|
// let activity = userActivity || [];
|
|
|
|
// for (let i = 0; i < activity.length; i++) {
|
|
|
|
// let item = activity[i];
|
|
|
|
// if (item.type === "CREATE_SLATE") {
|
|
|
|
// this.counter += 2;
|
|
|
|
// } else if (item.type === "CREATE_SLATE_OBJECT") {
|
|
|
|
// this.counter += 1;
|
|
|
|
// }
|
|
|
|
// if (this.counter === 6) {
|
|
|
|
// this.counter = 0;
|
|
|
|
// } else if (this.counter > 6) {
|
|
|
|
// let j = i - 1;
|
|
|
|
// while (activity[j].type !== "CREATE_SLATE_OBJECT") {
|
|
|
|
// j -= 1;
|
|
|
|
// }
|
|
|
|
// let temp = activity[j];
|
|
|
|
// activity[j] = activity[i];
|
|
|
|
// activity[i] = temp;
|
|
|
|
// this.counter = 0;
|
|
|
|
// i -= 1;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// return activity;
|
2021-01-14 09:30:26 +03:00
|
|
|
};
|
|
|
|
|
2020-12-19 08:25:50 +03:00
|
|
|
_handleCreateSlate = () => {
|
|
|
|
this.props.onAction({
|
|
|
|
type: "NAVIGATE",
|
|
|
|
value: "NAV_SLATES",
|
|
|
|
data: null,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
calculateWidth = () => {
|
|
|
|
let windowWidth = window.innerWidth;
|
|
|
|
let imageSize;
|
|
|
|
if (windowWidth < Constants.sizes.mobile) {
|
2021-01-21 09:26:02 +03:00
|
|
|
imageSize = windowWidth - 2 * 24; //(windowWidth - 2 * 24 - 20) / 2;
|
2020-12-19 08:25:50 +03:00
|
|
|
} else {
|
|
|
|
imageSize = (windowWidth - 2 * 56 - 5 * 20) / 6;
|
|
|
|
}
|
|
|
|
this.setState({ imageSize });
|
|
|
|
};
|
|
|
|
|
2021-02-12 22:11:30 +03:00
|
|
|
getItemIndexById = (items, item) => {
|
2021-03-07 23:53:54 +03:00
|
|
|
const id = item.file?.id;
|
2021-02-12 22:11:30 +03:00
|
|
|
return items.findIndex((i) => i.id === id);
|
|
|
|
};
|
|
|
|
|
2020-08-08 03:17:54 +03:00
|
|
|
render() {
|
2021-01-14 09:30:26 +03:00
|
|
|
let activity =
|
|
|
|
this.props.tab === 0 ? this.props.viewer.activity || [] : this.props.viewer.explore || [];
|
2021-01-21 08:41:46 +03:00
|
|
|
let items = activity
|
2021-03-07 23:53:54 +03:00
|
|
|
.filter((item) => item.type === "CREATE_SLATE_OBJECT")
|
2021-01-21 08:41:46 +03:00
|
|
|
.map((item) => {
|
2021-02-22 16:57:45 +03:00
|
|
|
return {
|
2021-03-07 23:53:54 +03:00
|
|
|
...item.file,
|
|
|
|
slate: item.slate,
|
|
|
|
owner: item.owner?.username,
|
2021-02-22 16:57:45 +03:00
|
|
|
};
|
2021-01-21 08:41:46 +03:00
|
|
|
});
|
2021-02-22 16:57:45 +03:00
|
|
|
|
2020-08-08 03:17:54 +03:00
|
|
|
return (
|
|
|
|
<ScenePage>
|
2020-12-19 08:25:50 +03:00
|
|
|
<ScenePageHeader
|
|
|
|
title={
|
2021-03-07 23:53:54 +03:00
|
|
|
this.props.isMobile ? (
|
2021-01-21 10:02:35 +03:00
|
|
|
<TabGroup
|
|
|
|
tabs={[
|
|
|
|
{ title: "Files", value: "NAV_DATA" },
|
2021-04-23 08:18:46 +03:00
|
|
|
{ title: "Collections", value: "NAV_SLATES" },
|
2021-01-21 10:02:35 +03:00
|
|
|
{ title: "Activity", value: "NAV_ACTIVITY" },
|
|
|
|
]}
|
|
|
|
value={2}
|
|
|
|
onAction={this.props.onAction}
|
|
|
|
onChange={(value) => this.setState({ tab: value })}
|
|
|
|
style={{ marginTop: 0, marginBottom: 32 }}
|
|
|
|
itemStyle={{ margin: "0px 12px" }}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<PrimaryTabGroup
|
|
|
|
tabs={[
|
|
|
|
{ title: "Files", value: "NAV_DATA" },
|
2021-04-23 08:18:46 +03:00
|
|
|
{ title: "Collections", value: "NAV_SLATES" },
|
2021-01-21 10:02:35 +03:00
|
|
|
{ title: "Activity", value: "NAV_ACTIVITY" },
|
|
|
|
]}
|
|
|
|
value={2}
|
|
|
|
onAction={this.props.onAction}
|
|
|
|
/>
|
|
|
|
)
|
2020-12-19 08:25:50 +03:00
|
|
|
}
|
2021-01-14 09:30:26 +03:00
|
|
|
actions={
|
|
|
|
<SecondaryTabGroup
|
|
|
|
tabs={[
|
|
|
|
{ title: "My network", value: "NAV_ACTIVITY" },
|
|
|
|
{ title: "Explore", value: "NAV_EXPLORE" },
|
|
|
|
]}
|
|
|
|
value={this.props.tab}
|
|
|
|
onAction={this.props.onAction}
|
|
|
|
style={{ margin: 0 }}
|
|
|
|
/>
|
|
|
|
}
|
2020-12-19 08:25:50 +03:00
|
|
|
/>
|
2021-01-21 08:41:46 +03:00
|
|
|
<GlobalCarousel
|
|
|
|
carouselType="ACTIVITY"
|
|
|
|
viewer={this.props.viewer}
|
|
|
|
objects={items}
|
|
|
|
onAction={this.props.onAction}
|
2021-03-07 23:53:54 +03:00
|
|
|
isMobile={this.props.isMobile}
|
|
|
|
isOwner={false}
|
2021-01-21 08:41:46 +03:00
|
|
|
/>
|
2020-12-19 08:25:50 +03:00
|
|
|
{activity.length ? (
|
2021-01-14 23:40:14 +03:00
|
|
|
<div>
|
|
|
|
<div css={STYLES_ACTIVITY_GRID}>
|
2021-01-21 08:41:46 +03:00
|
|
|
{activity.map((item, index) => {
|
2021-03-07 23:53:54 +03:00
|
|
|
if (item.type === "CREATE_SLATE") {
|
2021-01-14 23:40:14 +03:00
|
|
|
return (
|
|
|
|
<span
|
|
|
|
key={item.id}
|
|
|
|
onClick={() =>
|
|
|
|
this.props.onAction({
|
|
|
|
type: "NAVIGATE",
|
|
|
|
value: "NAV_SLATE",
|
2021-03-07 23:53:54 +03:00
|
|
|
data: { decorator: "SLATE", ...item.slate },
|
2021-01-14 23:40:14 +03:00
|
|
|
})
|
|
|
|
}
|
|
|
|
>
|
2021-01-21 09:26:02 +03:00
|
|
|
<ActivityRectangle
|
|
|
|
width={
|
2021-03-07 23:53:54 +03:00
|
|
|
this.props.isMobile ? this.state.imageSize : this.state.imageSize * 2 + 20
|
2021-01-21 09:26:02 +03:00
|
|
|
}
|
|
|
|
height={this.state.imageSize}
|
2021-03-07 23:53:54 +03:00
|
|
|
item={item}
|
2021-01-21 09:26:02 +03:00
|
|
|
/>
|
2021-01-14 23:40:14 +03:00
|
|
|
</span>
|
|
|
|
);
|
2021-03-07 23:53:54 +03:00
|
|
|
} else if (item.type === "CREATE_SLATE_OBJECT") {
|
2021-01-14 23:40:14 +03:00
|
|
|
return (
|
|
|
|
<span
|
|
|
|
key={item.id}
|
2021-01-21 09:26:02 +03:00
|
|
|
onClick={
|
2021-03-07 23:53:54 +03:00
|
|
|
this.props.isMobile
|
2021-01-21 09:26:02 +03:00
|
|
|
? () => {
|
|
|
|
this.props.onAction({
|
|
|
|
type: "NAVIGATE",
|
|
|
|
value: "NAV_SLATE",
|
|
|
|
data: {
|
|
|
|
decorator: "SLATE",
|
2021-03-07 23:53:54 +03:00
|
|
|
...item.slate,
|
2021-01-21 09:26:02 +03:00
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
2021-02-12 22:14:06 +03:00
|
|
|
: () =>
|
2021-01-21 09:26:02 +03:00
|
|
|
Events.dispatchCustomEvent({
|
|
|
|
name: "slate-global-open-carousel",
|
2021-02-12 22:11:30 +03:00
|
|
|
detail: { index: this.getItemIndexById(items, item) },
|
2021-02-12 22:14:06 +03:00
|
|
|
})
|
2021-01-21 08:41:46 +03:00
|
|
|
}
|
2021-01-14 23:40:14 +03:00
|
|
|
>
|
2021-01-21 08:41:46 +03:00
|
|
|
<ActivitySquare
|
|
|
|
size={this.state.imageSize}
|
2021-03-07 23:53:54 +03:00
|
|
|
item={item}
|
|
|
|
isMobile={this.props.isMobile}
|
2021-01-21 09:26:02 +03:00
|
|
|
onClick={
|
2021-03-07 23:53:54 +03:00
|
|
|
this.props.isMobile
|
2021-01-21 09:26:02 +03:00
|
|
|
? () => {}
|
|
|
|
: () => {
|
|
|
|
this.props.onAction({
|
|
|
|
type: "NAVIGATE",
|
|
|
|
value: "NAV_SLATE",
|
|
|
|
data: {
|
|
|
|
decorator: "SLATE",
|
2021-03-07 23:53:54 +03:00
|
|
|
...item.slate,
|
2021-01-21 09:26:02 +03:00
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
2021-01-21 08:41:46 +03:00
|
|
|
/>
|
2021-01-14 23:40:14 +03:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
<div css={STYLES_LOADER} style={{ height: 100 }}>
|
|
|
|
{this.state.loading === "loading" ? <LoaderSpinner /> : null}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
) : this.state.loading === "loading" ? (
|
|
|
|
<div css={STYLES_LOADER}>
|
|
|
|
<LoaderSpinner />
|
2020-12-19 08:25:50 +03:00
|
|
|
</div>
|
|
|
|
) : (
|
2021-01-11 06:21:30 +03:00
|
|
|
<EmptyState>
|
|
|
|
<SVG.Users height="24px" />
|
|
|
|
<div style={{ marginTop: 24 }}>
|
2021-04-23 08:18:46 +03:00
|
|
|
Start following people and collections to see their activity here
|
2021-01-11 06:21:30 +03:00
|
|
|
</div>
|
|
|
|
</EmptyState>
|
|
|
|
)}
|
|
|
|
</ScenePage>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|