From 7e320c2876398affebcc9497df362ad68052548a Mon Sep 17 00:00:00 2001 From: Martina Date: Thu, 21 Jan 2021 13:53:33 -0800 Subject: [PATCH] reworked page details format --- components/core/Application.js | 44 +++++++++++++------------- components/core/CarouselSidebarData.js | 10 +++--- components/core/Profile.js | 14 ++++++-- components/core/ScenePageHeader.js | 5 ++- components/core/SearchModal.js | 9 ++---- components/core/SignIn.js | 4 --- components/core/SlateLayout.js | 6 +++- pages/_/slate.js | 6 ++-- scenes/SceneActivity.js | 3 -- scenes/SceneFilesFolder.js | 27 ++++++++++++++++ scenes/SceneProfile.js | 2 +- scenes/SceneSlate.js | 15 ++++----- 12 files changed, 90 insertions(+), 55 deletions(-) diff --git a/components/core/Application.js b/components/core/Application.js index c958d728..d606a3bc 100644 --- a/components/core/Application.js +++ b/components/core/Application.js @@ -159,14 +159,14 @@ export default class ApplicationPage extends React.Component { //NOTE(martina): if updating viewer affects this.state.data (e.g. you're viewing your own slate), update data as well if (newViewerState.slates?.length) { - let next; + let page; if (typeof window !== "undefined") { - next = window?.history?.state; + page = window?.history?.state; } - if (!next || !next.id) { - next = { id: "NAV_DATA", scrollTop: 0, data: null }; + if (!page || !page.id) { + page = { id: "NAV_DATA", scrollTop: 0, data: null }; } - if (next.id === "NAV_SLATE" && this.state.data?.data?.ownerId === this.props.viewer.id) { + if (page.id === "NAV_SLATE" && this.state.data?.data?.ownerId === this.props.viewer.id) { let data = this.state.data; for (let slate of newViewerState.slates) { if (slate.id === data.id) { @@ -247,14 +247,14 @@ export default class ApplicationPage extends React.Component { dataTransfer: e.dataTransfer, }); - let next; + let page; if (typeof window !== "undefined") { - next = window?.history?.state; + page = window?.history?.state; } - if (!next || !next.id) { - next = { id: "NAV_DATA", scrollTop: 0, data: null }; + if (!page || !page.id) { + page = { id: "NAV_DATA", scrollTop: 0, data: null }; } - const current = NavigationData.getCurrentById(next.id); + const current = NavigationData.getCurrentById(page.id); let slate = null; if ( @@ -482,17 +482,16 @@ export default class ApplicationPage extends React.Component { }; _handleAction = (options) => { + console.log("on action"); if (options.type === "NAVIGATE") { // NOTE(martina): The `scene` property is only necessary when you need to display a component different from the one corresponding to the tab it appears in // + e.g. to display while on the Home tab // + `scene` should be the decorator of the component you want displayed return this._handleNavigateTo( { + ...options, id: options.value, - scene: options.scene, - user: options.user, - slate: options.slate, - cid: options.cid, + redirect: null, }, options.data, options.redirect @@ -564,10 +563,10 @@ export default class ApplicationPage extends React.Component { }; _handleBackForward = (e) => { - let next = window.history.state; + let page = window.history.state; this.setState({ sidebar: null, - data: next.data, + data: page.data, }); Events.dispatchCustomEvent({ name: "slate-global-close-carousel", detail: {} }); }; @@ -591,14 +590,14 @@ export default class ApplicationPage extends React.Component { ); } // NOTE(jim): Authenticated. - let next; + let page; if (typeof window !== "undefined") { - next = window?.history?.state; + page = window?.history?.state; } - if (!next || !next.id) { - next = { id: "NAV_DATA", scrollTop: 0, data: null }; + if (!page || !page.id) { + page = { id: "NAV_DATA", scrollTop: 0, data: null }; } - const current = NavigationData.getCurrentById(next.id); + const current = NavigationData.getCurrentById(page.id); // NOTE(jim): Only happens during a bad query parameter. if (!current.target) { @@ -616,7 +615,8 @@ export default class ApplicationPage extends React.Component { /> ); - const scene = React.cloneElement(SCENES[next.scene || current.target.decorator], { + const scene = React.cloneElement(SCENES[page.scene || current.target.decorator], { + page: page, current: current.target, data: this.state.data, viewer: this.state.viewer, diff --git a/components/core/CarouselSidebarData.js b/components/core/CarouselSidebarData.js index 158a65cd..32605680 100644 --- a/components/core/CarouselSidebarData.js +++ b/components/core/CarouselSidebarData.js @@ -492,10 +492,12 @@ export default class CarouselSidebarData extends React.Component { {this.state.loading === "gatewayUrlCopying" ? "Copied!" : "Copy file URL"} -
- - Download -
+ {this.props.external ? null : ( +
+ + Download +
+ )} {this.props.isOwner ? (
this._handleDelete(cid)}> diff --git a/components/core/Profile.js b/components/core/Profile.js index e396bdc5..14b4961d 100644 --- a/components/core/Profile.js +++ b/components/core/Profile.js @@ -290,6 +290,9 @@ export default class Profile extends React.Component { }; _handleFollow = async (e, id) => { + if (this.props.external) { + this._handleRedirectToInternal(); + } this._handleHide(); e.stopPropagation(); await Actions.createSubscription({ @@ -297,6 +300,10 @@ export default class Profile extends React.Component { }); }; + _handleRedirectToInternal = () => { + this.setState({ visible: true }); + }; + render() { let isOwner = this.props.isOwner; let creator = this.props.creator; @@ -458,7 +465,7 @@ export default class Profile extends React.Component { />
{Strings.getPresentationName(creator)}
- {!isOwner && !this.props.external && ( + {!isOwner && (
{this.state.isFollowing ? ( this.setState({ visible: false })} viewer={this.props.viewer} open={this.state.visible} - redirectURL={`/_?scene=NAV_PROFILE&user=${creator.username}`} + redirectURL={`/_${Strings.createQueryParams({ + scene: "NAV_PROFILE", + user: creator.username, + })}`} />
)} diff --git a/components/core/ScenePageHeader.js b/components/core/ScenePageHeader.js index 60a5116f..26cfa8de 100644 --- a/components/core/ScenePageHeader.js +++ b/components/core/ScenePageHeader.js @@ -10,7 +10,10 @@ const STYLES_ROOT = css` align-items: flex-start; justify-content: space-between; width: 100%; - flex-wrap: wrap; + + @media (max-width: ${Constants.sizes.mobile}px) { + flex-wrap: wrap; + } `; const STYLES_LEFT = css` diff --git a/components/core/SearchModal.js b/components/core/SearchModal.js index c988e333..2d8b75d0 100644 --- a/components/core/SearchModal.js +++ b/components/core/SearchModal.js @@ -5,7 +5,6 @@ import * as Actions from "~/common/actions"; import * as Strings from "~/common/strings"; import * as Window from "~/common/window"; import * as Validations from "~/common/validations"; -import * as Events from "~/common/custom-events"; import MiniSearch from "minisearch"; import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview"; @@ -894,17 +893,15 @@ export class SearchModal extends React.Component { await this.props.onAction({ type: "NAVIGATE", value: "NAV_DATA", - }); - Events.dispatchCustomEvent({ - name: "slate-global-open-carousel", - detail: { index: value.data.data.index }, + index: value.data.data.index, }); } if (value.type === "FILE") { await this.props.onAction({ type: "NAVIGATE", value: "NAV_SLATE", - data: { ...value.data.data.slate, pageState: { id: value.data.data.file.id } }, + data: value.data.data.slate, + fileId: value.data.data.file.id, }); } this._handleHide(); diff --git a/components/core/SignIn.js b/components/core/SignIn.js index ff3e1920..52b04a10 100644 --- a/components/core/SignIn.js +++ b/components/core/SignIn.js @@ -78,10 +78,6 @@ export class SignIn extends React.Component { showPassword: false, }; - componentDidMount() { - // window.history.replaceState({ id: null }, "Slate", `/_`); - } - _handleChange = (e) => { if (e.target.name === "accepted" && e.target.value) { const hash = Strings.generateRandomString(); diff --git a/components/core/SlateLayout.js b/components/core/SlateLayout.js index 594d2f3f..6322ce1f 100644 --- a/components/core/SlateLayout.js +++ b/components/core/SlateLayout.js @@ -1782,7 +1782,11 @@ export class SlateLayout extends React.Component { onClose={() => this.setState({ signInModal: false })} viewer={this.props.viewer} open={this.state.signInModal} - redirectURL={`/_?scene=NAV_SLATE&user=${this.props.creator.username}&slate=${this.props.slate.slatename}`} + redirectURL={`/_${Strings.createQueryParams({ + scene: "NAV_SLATE", + user: this.props.creator.username, + slate: this.props.slate.slatename, + })}`} />
)} diff --git a/pages/_/slate.js b/pages/_/slate.js index bd098496..ca2101be 100644 --- a/pages/_/slate.js +++ b/pages/_/slate.js @@ -292,15 +292,15 @@ export default class SlatePage extends React.Component {
{this.props.slate.data.objects.length}{" "} - Data + Files
-
+ {/*
{contributorsCount}{" "} Contributors
-
+
*/}
diff --git a/scenes/SceneActivity.js b/scenes/SceneActivity.js index 0596f8a0..648d5ebe 100644 --- a/scenes/SceneActivity.js +++ b/scenes/SceneActivity.js @@ -495,9 +495,6 @@ export default class SceneActivity extends React.Component { data: { decorator: "SLATE", ...item.data.context.slate, - // pageState: { - // cid: item.data.context.file.cid, - // }, }, }); } diff --git a/scenes/SceneFilesFolder.js b/scenes/SceneFilesFolder.js index 49b97bd9..1f3afb7a 100644 --- a/scenes/SceneFilesFolder.js +++ b/scenes/SceneFilesFolder.js @@ -1,5 +1,6 @@ import * as React from "react"; import * as SVG from "~/common/svg"; +import * as Events from "~/common/custom-events"; import { ButtonPrimary } from "~/components/system/components/Buttons"; import { FileTypeGroup } from "~/components/core/FileTypeIcon"; @@ -19,6 +20,32 @@ export default class SceneFilesFolder extends React.Component { view: 0, }; + componentDidMount = () => { + let index = -1; + let page = this.props.page; + if (page?.fileId || page?.cid || page?.index) { + if (page?.index) { + index = page.index; + } else { + let library = this.props.viewer.library[0]?.children || []; + for (let i = 0; i < library.length; i++) { + let obj = library[i]; + if ((obj.cid && obj.cid === page?.cid) || (obj.id && obj.id === page?.fileId)) { + index = i; + break; + } + } + } + } + + if (index !== -1) { + Events.dispatchCustomEvent({ + name: "slate-global-open-carousel", + detail: { index }, + }); + } + }; + render() { return ( diff --git a/scenes/SceneProfile.js b/scenes/SceneProfile.js index ddf60595..0bf18cfe 100644 --- a/scenes/SceneProfile.js +++ b/scenes/SceneProfile.js @@ -34,7 +34,7 @@ export default class SceneProfile extends React.Component { }; fetchProfile = async () => { - const { user: username } = window.history.state; + const username = this.props.page.user; let query; let targetUser; if (username) { diff --git a/scenes/SceneSlate.js b/scenes/SceneSlate.js index e1ca97b0..37d446cc 100644 --- a/scenes/SceneSlate.js +++ b/scenes/SceneSlate.js @@ -70,9 +70,8 @@ export default class SceneSlate extends React.Component { }; fetchSlate = async () => { - const { user: username, slate: slatename, cid } = window.history.state; + const { user: username, slate: slatename, cid } = this.props.page; - const pageState = this.props.data?.pageState; if (!this.props.data && (!username || !slatename)) { this.setState({ notFound: true }); return; @@ -135,15 +134,16 @@ export default class SceneSlate extends React.Component { this.props.onUpdateData({ data: slate }); let index = -1; - if (pageState || !Strings.isEmpty(cid)) { - if (pageState?.index) { - index = pageState.index; + let page = this.props.page; + if (page?.fileId || page?.cid || page?.index || !Strings.isEmpty(cid)) { + if (page?.index) { + index = page.index; } else { for (let i = 0; i < slate.data.objects.length; i++) { let obj = slate.data.objects[i]; if ( - (obj.cid && (obj.cid === cid || obj.cid === pageState?.cid)) || - (obj.id && obj.id === pageState?.id) + (obj.cid && (obj.cid === cid || obj.cid === page?.cid)) || + (obj.id && obj.id === page?.fileId) ) { index = i; break; @@ -153,7 +153,6 @@ export default class SceneSlate extends React.Component { } if (index !== -1) { - await Window.delay(250); Events.dispatchCustomEvent({ name: "slate-global-open-carousel", detail: { index },