filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-26 13:45:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

reworked page details format

Browse Source
This commit is contained in:
Martina 2021-01-21 13:53:33 -08:00
parent 449f75bfcb
commit 7e320c2876
12 changed files with 90 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/core/Application.js
View File

@ -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 <SceneProfile/> 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,

10
components/core/CarouselSidebarData.js
View File

@ -492,10 +492,12 @@ export default class CarouselSidebarData extends React.Component {
{this.state.loading === "gatewayUrlCopying" ? "Copied!" : "Copy file URL"}
</span>
</div>
<div css={STYLES_ACTION} onClick={this._handleDownload}>
<SVG.Download height="24px" />
<span style={{ marginLeft: 16 }}>Download</span>
</div>
{this.props.external ? null : (
<div css={STYLES_ACTION} onClick={this._handleDownload}>
<SVG.Download height="24px" />
<span style={{ marginLeft: 16 }}>Download</span>
</div>
)}
{this.props.isOwner ? (
<div css={STYLES_ACTION} onClick={() => this._handleDelete(cid)}>
<SVG.Trash height="24px" />

14
components/core/Profile.js
View File

@ -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 {
/>
<div css={STYLES_INFO}>
<div css={STYLES_NAME}>{Strings.getPresentationName(creator)}</div>
{!isOwner && !this.props.external && (
{!isOwner && (
<div css={STYLES_BUTTON}>
{this.state.isFollowing ? (
<ButtonSecondary
@ -508,7 +515,10 @@ export default class Profile extends React.Component {
onClose={() => 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,
})}`}
/>
</div>
)}

5
components/core/ScenePageHeader.js
View File

@ -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`

9
components/core/SearchModal.js
View File

@ -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();

4
components/core/SignIn.js
View File

@ -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();

6
components/core/SlateLayout.js
View File

@ -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,
})}`}
/>
</div>
)}

6
pages/_/slate.js
View File

@ -292,15 +292,15 @@ export default class SlatePage extends React.Component {
<div css={STYLES_STAT}>
<div style={{ fontFamily: `${Constants.font.medium}` }}>
{this.props.slate.data.objects.length}{" "}
<span style={{ color: `${Constants.system.darkGray}` }}>Data</span>
<span style={{ color: `${Constants.system.darkGray}` }}>Files</span>
</div>
</div>
<div css={STYLES_STAT}>
{/* <div css={STYLES_STAT}>
<div style={{ fontFamily: `${Constants.font.medium}` }}>
{contributorsCount}{" "}
<span style={{ color: `${Constants.system.darkGray}` }}>Contributors</span>
</div>
</div>
</div> */}
</div>
</div>
<div css={STYLES_SLATE}>

3
scenes/SceneActivity.js
View File

@ -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,
// },
},
});
}

27
scenes/SceneFilesFolder.js
View File

@ -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 (
<ScenePage>

2
scenes/SceneProfile.js
View File

@ -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) {

15
scenes/SceneSlate.js
View File

@ -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 },