filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-22 16:41:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

new routing with external format

Browse Source
This commit is contained in:
Martina 2020-12-18 21:25:50 -08:00
parent 84b97de479
commit d7b6a59adb
26 changed files with 547 additions and 698 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
common/navigation-data.js
View File

@ -32,17 +32,18 @@ export const getCurrentById = (navigation, targetId) => {
const constructFilesTreeForNavigation = (library) => {
return {
...library[0],
name: `Data`,
children: [
{
id: "V1_NAVIGATION_ENCRYPTED_DATA",
decorator: "ENCRYPTED",
name: "Encrypted Data",
pageTitle: "Encrypted data",
children: null,
},
],
ignore: true,
id: "NAV_DATA",
decorator: "DATA",
name: "Home",
// children: [
// {
// id: "V1_NAVIGATION_ENCRYPTED_DATA",
// decorator: "ENCRYPTED",
// name: "Encrypted Data",
// pageTitle: "Encrypted data",
// children: null,
// },
// ],
};
};
@ -60,15 +61,17 @@ const constructFilesTreeForNavigation = (library) => {
// };
export const generate = ({ library = [], slates = [] }) => [
constructFilesTreeForNavigation(library),
{
id: "V1_NAVIGATION_HOME",
decorator: "HOME",
name: "Home",
id: "NAV_ACTIVITY",
decorator: "ACTIVITY",
name: "Activity",
pageTitle: "Welcome back!",
children: null,
ignore: true,
},
{
id: "V1_NAVIGATION_SLATES",
id: "NAV_SLATES",
decorator: "SLATES",
name: "Slates",
pageTitle: "Slates",
@ -76,7 +79,7 @@ export const generate = ({ library = [], slates = [] }) => [
ignore: true,
},
{
id: "V1_NAVIGATION_SLATES_FOLLOWING",
id: "NAV_SLATES_FOLLOWING",
decorator: "SLATES_FOLLOWING",
name: "Slates",
pageTitle: "Slates",
@ -84,14 +87,14 @@ export const generate = ({ library = [], slates = [] }) => [
ignore: true,
},
{
id: "V1_NAVIGATION_DIRECTORY",
id: "NAV_DIRECTORY",
decorator: "DIRECTORY",
name: "Directory",
pageTitle: "Your directory",
children: null,
},
{
id: "V1_NAVIGATION_DIRECTORY_FOLLOWERS",
id: "NAV_DIRECTORY_FOLLOWERS",
decorator: "DIRECTORY_FOLLOWERS",
name: "Directory",
pageTitle: "Your directory",
@ -99,15 +102,14 @@ export const generate = ({ library = [], slates = [] }) => [
ignore: true,
},
{
id: "V1_NAVIGATION_SLATE",
decorator: "PUBLIC_SLATE",
id: "NAV_SLATE",
decorator: "SLATE",
name: "Slate",
pageTitle: "Slate",
children: null,
ignore: true,
},
// ...constructSlatesTreeForNavigation(slates),
constructFilesTreeForNavigation(library),
/*
{
id: "V1_NAVIGATION_LOCAL",
@ -126,7 +128,7 @@ export const generate = ({ library = [], slates = [] }) => [
},
*/
{
id: "V1_NAVIGATION_ARCHIVE",
id: "NAV_FILECOIN",
decorator: "FILECOIN",
name: "Filecoin",
pageTitle: "Archive on Filecoin",
@ -134,29 +136,29 @@ export const generate = ({ library = [], slates = [] }) => [
children: null,
},
{
id: "V1_NAVIGATION_FILECOIN_STORAGE_DEAL",
decorator: "MAKE_DEAL",
id: "NAV_STORAGE_DEAL",
decorator: "STORAGE_DEAL",
name: "Storage Deal",
filecoin: true,
pageTitle: "Make an one-off Filecoin storage deal",
},
{
id: "V1_NAVIGATION_API",
decorator: "SETTINGS_DEVELOPER",
id: "NAV_API",
decorator: "API",
name: "API",
pageTitle: "Developer API",
children: null,
},
{
id: "V1_NAVIGATION_PROFILE_EDIT",
decorator: "EDIT_ACCOUNT",
id: "NAV_SETTINGS",
decorator: "SETTINGS",
name: "Profile & Account Settings",
pageTitle: "Your Profile & Account Settings",
children: null,
ignore: true,
},
{
id: "V1_NAVIGATION_PROFILE",
id: "NAV_PROFILE",
decorator: "PUBLIC_PROFILE",
name: "Profile",
pageTitle: "Profile",
@ -164,7 +166,7 @@ export const generate = ({ library = [], slates = [] }) => [
ignore: true,
},
{
id: "V1_NAVIGATION_FILE",
id: "NAV_FILE",
decorator: "FILE",
name: "File",
pageTitle: "File",

134
components/core/Application.js
View File

@ -18,7 +18,6 @@ import * as Events from "~/common/custom-events";
import SceneEditAccount from "~/scenes/SceneEditAccount";
import SceneFile from "~/scenes/SceneFile";
import SceneFilesFolder from "~/scenes/SceneFilesFolder";
import SceneHome from "~/scenes/SceneHome";
import SceneSettings from "~/scenes/SceneSettings";
import SceneSlates from "~/scenes/SceneSlates";
import SceneLocalData from "~/scenes/SceneLocalData";
@ -75,23 +74,22 @@ const SIDEBARS = {
};
const SCENES = {
HOME: <SceneHome />,
ACTIVITY: <SceneActivity />,
DIRECTORY: <SceneDirectory />,
PUBLIC_PROFILE: <ScenePublicProfile />,
PROFILE: <SceneProfile />,
FOLDER: <SceneFilesFolder />,
DATA: <SceneFilesFolder />,
FILE: <SceneFile />,
PUBLIC_SLATE: <ScenePublicSlate />,
SLATE: <SceneSlate />,
SETTINGS_DEVELOPER: <SceneSettingsDeveloper />,
EDIT_ACCOUNT: <SceneEditAccount />,
SLATE: <ScenePublicSlate />,
API: <SceneSettingsDeveloper />,
SETTINGS: <SceneEditAccount />,
SLATES: <SceneSlates tab={0} />,
SLATES_FOLLOWING: <SceneSlates tab={1} />,
LOCAL_DATA: <SceneLocalData />,
DIRECTORY: <SceneDirectory tab={0} />,
DIRECTORY_FOLLOWERS: <SceneDirectory tab={1} />,
FILECOIN: <SceneArchive />,
MAKE_DEAL: <SceneMakeFilecoinDeal />,
STORAGE_DEAL: <SceneMakeFilecoinDeal />,
};
let mounted;
@ -102,7 +100,6 @@ export default class ApplicationPage extends React.Component {
state = {
selected: {},
viewer: this.props.viewer,
history: [{ id: "V1_NAVIGATION_HOME", scrollTop: 0, data: null }],
currentIndex: 0,
data: null,
sidebar: null,
@ -125,7 +122,7 @@ export default class ApplicationPage extends React.Component {
window.addEventListener("online", this._handleOnlineStatus);
window.addEventListener("offline", this._handleOnlineStatus);
window.addEventListener("resize", this._handleWindowResize);
window.onpopstate = this._handleBrowserBack;
window.onpopstate = this._handleBackForward;
if (this.state.viewer) {
await this._handleSetupWebsocket();
@ -142,7 +139,6 @@ export default class ApplicationPage extends React.Component {
window.removeEventListener("online", this._handleOnlineStatus);
window.removeEventListener("offline", this._handleOnlineStatus);
window.removeEventListener("resize", this._handleWindowResize);
window.removeEventListener("onpopstate", this._handleBrowserBack);
mounted = false;
@ -231,7 +227,13 @@ export default class ApplicationPage extends React.Component {
});
const navigation = NavigationData.generate(this.state.viewer);
const next = this.state.history[this.state.currentIndex];
let next;
if (typeof window !== "undefined") {
next = window?.history?.state;
}
if (!next || !next.id) {
next = { id: "NAV_DATA", scrollTop: 0, data: null };
}
const current = NavigationData.getCurrentById(navigation, next.id);
let slate = null;
@ -425,7 +427,7 @@ export default class ApplicationPage extends React.Component {
let redirected = this._handleURLRedirect();
if (!redirected) {
this._handleAction({ type: "NAVIGATE", value: "V1_NAVIGATION_HOME" });
this._handleAction({ type: "NAVIGATE", value: "NAV_DATA" });
}
return response;
};
@ -437,7 +439,7 @@ export default class ApplicationPage extends React.Component {
const cid = Window.getQueryParameterByName("cid");
if (!Strings.isEmpty(id) && this.state.viewer) {
this._handleNavigateTo({ id, user, slate, cid });
this._handleNavigateTo({ id, user, slate, cid }, null, true);
return true;
}
return false;
@ -498,47 +500,23 @@ export default class ApplicationPage extends React.Component {
};
_handleNavigateTo = (next, data = null, redirect = false) => {
if (next.id) {
if (redirect) {
window.history.replaceState(
{ ...next, data },
"Slate",
`/_${next.id ? `?scene=${next.id}` : ""}`
);
} else {
window.history.pushState(
{ ...next, data },
"Slate",
`` //maybe don't need to do this scene thing. b/c going to change it to the other format anyways. ideally would set the data at the same time as the string stuff. but should i put that here or inside scenepublicslate?
`/_${next.id ? `?scene=${next.id}` : ""}`
);
}
if (redirect) {
const adjustedArray = [...this.state.history];
adjustedArray.length = this.state.currentIndex;
return this.setState({
history: [...adjustedArray, next],
data,
sidebar: null,
});
}
let body = document.documentElement || document.body;
this.state.history[this.state.currentIndex].scrollTop = body.scrollTop;
this.state.history[this.state.currentIndex].data = this.state.data;
if (this.state.currentIndex !== this.state.history.length - 1) {
const adjustedArray = [...this.state.history];
adjustedArray.length = this.state.currentIndex + 1;
return this.setState(
{
history: [...adjustedArray, next],
currentIndex: this.state.currentIndex + 1,
data,
sidebar: null,
},
() => body.scrollTo(0, 0)
);
}
this.setState(
{
history: [...this.state.history, next],
currentIndex: this.state.currentIndex + 1,
data,
sidebar: null,
},
@ -546,52 +524,15 @@ export default class ApplicationPage extends React.Component {
);
};
_handleBrowserBack = (e) => {
_handleBackForward = (e) => {
let next = window.history.state;
console.log(next);
window.history.replaceState({ ...next }, "Slate", `/_${next.id ? `?scene=${next.id}` : ""}`);
this.setState({
sidebar: null,
data: next.data,
});
};
_handleBack = () => {
let body = document.documentElement || document.body;
this.state.history[this.state.currentIndex].scrollTop = body.scrollTop;
this.state.history[this.state.currentIndex].data = this.state.data;
const next = this.state.history[this.state.currentIndex - 1];
window.history.replaceState({ ...next }, "Slate", `?scene=${next.id}`);
this.setState(
{
currentIndex: this.state.currentIndex - 1,
sidebar: null,
data: { ...next.data },
},
() => {
console.log({ next });
body.scrollTo(0, next.scrollTop);
}
);
};
_handleForward = () => {
let body = document.documentElement || document.body;
this.state.history[this.state.currentIndex].scrollTop = body.scrollTop;
const next = this.state.history[this.state.currentIndex + 1];
window.history.replaceState({ ...next }, "Slate", `?scene=${next.id}`);
this.setState(
{
currentIndex: this.state.currentIndex + 1,
sidebar: null,
data: { ...next.data },
},
() => {
console.log({ next });
body.scrollTo(0, next.scrollTop);
}
);
Events.dispatchCustomEvent({ name: "slate-global-close-carousel", detail: {} });
};
render() {
@ -620,9 +561,8 @@ export default class ApplicationPage extends React.Component {
next = window?.history?.state;
}
if (!next || !next.id) {
next = { id: "V1_NAVIGATION_HOME", scrollTop: 0, data: null };
next = { id: "NAV_DATA", scrollTop: 0, data: null };
}
// const next = this.state.history[this.state.currentIndex];
const current = NavigationData.getCurrentById(navigation, next.id);
// NOTE(jim): Only happens during a bad query parameter.
@ -636,12 +576,7 @@ export default class ApplicationPage extends React.Component {
viewer={this.state.viewer}
navigation={navigation}
activeIds={current.activeIds}
pageTitle={current.target.pageTitle}
currentIndex={this.state.currentIndex}
history={this.state.history}
onAction={this._handleAction}
onBack={this._handleBack}
onForward={this._handleForward}
mobile={this.state.mobile}
/>
);
@ -654,8 +589,6 @@ export default class ApplicationPage extends React.Component {
onSelectedChange: this._handleSelectedChange,
onAction: this._handleAction,
onUpload: this._handleUploadFiles,
onBack: this._handleBack,
onForward: this._handleForward,
onUpdateData: this._handleUpdateData,
onUpdateViewer: this._handleUpdateViewer,
sceneId: current.target.id,
@ -708,12 +641,7 @@ export default class ApplicationPage extends React.Component {
onUpdateViewer={this._handleUpdateViewer}
resources={this.props.resources}
viewer={this.state.viewer}
current={
current.target &&
(current.target.decorator === "SLATE" || current.target.decorator === "HOME")
? current.target
: this.state.data //NOTE(martina): for slates that are not your own
}
current={this.state.data}
slates={this.state.viewer.slates}
onAction={this._handleAction}
mobile={this.props.mobile}

84
components/core/ApplicationHeader.js
View File

@ -10,25 +10,39 @@ import { Boundary } from "~/components/system/components/fragments/Boundary";
import { PopoverNavigation } from "~/components/system";
const IconMap = {
HOME: <SVG.Home height="20px" />,
// ACTIVITY: <SVG.Home height="20px" />,
ENCRYPTED: <SVG.SecurityLock height="20px" />,
NETWORK: <SVG.Activity height="20px" />,
DIRECTORY: <SVG.Directory height="20px" />,
FOLDER: <SVG.Folder height="20px" />,
// DATA: <SVG.Folder height="20px" />,
DATA: <SVG.Home height="20px" />,
WALLET: <SVG.OldWallet height="20px" />,
DEALS: <SVG.Deals height="20px" />,
MAKE_DEAL: <SVG.HardDrive height="20px" />,
STORAGE_DEAL: <SVG.HardDrive height="20px" />,
SLATES: <SVG.Layers height="20px" />,
SLATE: <SVG.Slate height="20px" />,
LOCAL_DATA: <SVG.HardDrive height="20px" />,
PROFILE_PAGE: <SVG.ProfileUser height="20px" />,
SETTINGS_DEVELOPER: <SVG.Tool height="20px" />,
API: <SVG.Tool height="20px" />,
SETTINGS: <SVG.Settings height="20px" />,
DIRECTORY: <SVG.Directory height="20px" />,
FILECOIN: <SVG.Wallet height="20px" />,
MINERS: <SVG.Miners height="20px" />,
};
const STYLES_SHORTCUTS = css`
background-color: ${Constants.system.white};
border-radius: 2px;
height: 24px;
width: 24px;
margin-left: 4px;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
color: ${Constants.system.textGray};
`;
const STYLES_ICON_ELEMENT = css`
height: 40px;
width: 40px;
@ -112,27 +126,6 @@ const STYLES_STATIC = css`
transition: 200ms ease all;
`;
const STYLES_MARGIN_LEFT = css`
margin-left: 32px;
height: 40px;
width: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
color: ${Constants.system.textGray};
user-select: none;
cursor: pointer;
pointer-events: auto;
:hover {
color: ${Constants.system.brand};
}
@media (max-width: ${Constants.sizes.mobile}px) {
margin-left: 16px;
}
`;
export default class ApplicationHeader extends React.Component {
keysPressed = {};
@ -179,10 +172,10 @@ export default class ApplicationHeader extends React.Component {
};
render() {
const isBackDisabled = this.props.currentIndex === 0 || this.props.history.length < 2;
// const isBackDisabled = this.props.currentIndex === 0 || this.props.history.length < 2;
const isForwardDisabled =
this.props.currentIndex === this.props.history.length - 1 || this.props.history.length < 2;
// const isForwardDisabled =
// this.props.currentIndex === this.props.history.length - 1 || this.props.history.length < 2;
return (
<header css={STYLES_APPLICATION_HEADER}>
<div css={STYLES_LEFT}>
@ -232,7 +225,7 @@ export default class ApplicationHeader extends React.Component {
</Boundary>
) : null}
</span>
<span css={STYLES_MOBILE_HIDDEN} style={{ marginLeft: 32 }}>
{/* <span css={STYLES_MOBILE_HIDDEN} style={{ marginLeft: 32 }}>
<span
css={STYLES_ICON_ELEMENT}
style={
@ -253,17 +246,34 @@ export default class ApplicationHeader extends React.Component {
>
<SVG.ChevronRight height="28px" />
</span>
</span>
<span css={STYLES_MARGIN_LEFT} onClick={this._handleCreateSearch}>
</span> */}
{/* <div
style={{
height: 28,
margin: "0px 12px",
borderRight: `1px solid ${Constants.system.border}`,
}}
/> */}
<span
css={STYLES_ICON_ELEMENT}
style={{ marginLeft: 24 }}
onClick={this._handleCreateSearch}
>
<SVG.Search height="24px" />
</span>
<span css={STYLES_MOBILE_HIDDEN} onClick={this._handleCreateSearch}>
<span
css={STYLES_ICON_ELEMENT}
style={{ marginLeft: 16, color: Constants.system.border, cursor: "pointer" }}
<span css={STYLES_MOBILE_HIDDEN}>
<div
style={{
display: "flex",
alignItems: "center",
cursor: "pointer",
}}
>
<p>CMD+F</p>
</span>
<div css={STYLES_SHORTCUTS}>
<SVG.MacCommand height="12px" style={{ display: "block" }} />
</div>
<div css={STYLES_SHORTCUTS}>F</div>
</div>
</span>
</div>
{/* <div css={STYLES_MIDDLE} /> */}

4
components/core/ApplicationUserControls.js
View File

@ -157,7 +157,7 @@ export default class ApplicationUserControls extends React.Component {
onClick: (e) =>
this._handleAction(e, {
type: "NAVIGATE",
value: "V1_NAVIGATION_PROFILE",
value: "NAV_PROFILE",
data: this.props.viewer,
}),
},
@ -166,7 +166,7 @@ export default class ApplicationUserControls extends React.Component {
onClick: (e) =>
this._handleAction(e, {
type: "NAVIGATE",
value: "V1_NAVIGATION_PROFILE_EDIT",
value: "NAV_SETTINGS",
}),
},
{

2
components/core/Profile.js
View File

@ -181,7 +181,7 @@ export default class Profile extends React.Component {
onClose={() => this.setState({ visible: false })}
viewer={this.props.viewer}
open={this.state.visible}
redirectURL={`/_?scene=V1_NAVIGATION_PROFILE&user=${data.username}`}
redirectURL={`/_?scene=NAV_PROFILE&user=${data.username}`}
/>
</div>
)}

10
components/core/SearchModal.js
View File

@ -359,7 +359,7 @@ const STYLES_INPUT = css`
border: 0;
box-sizing: border-box;
transition: 200ms ease all;
padding: 0 16px 0 0;
padding: 0 40px 0 0;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 0 2px 2px 0;
@ -882,21 +882,21 @@ export class SearchModal extends React.Component {
if (value.type === "SLATE") {
this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_SLATE",
value: "NAV_SLATE",
data: value.data,
});
}
if (value.type === "USER") {
this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_PROFILE",
value: "NAV_PROFILE",
data: value.data,
});
}
if (value.type === "DATA_FILE") {
await this.props.onAction({
type: "NAVIGATE",
value: "data",
value: "NAV_DATA",
});
Events.dispatchCustomEvent({
name: "slate-global-open-carousel",
@ -906,7 +906,7 @@ export class SearchModal extends React.Component {
if (value.type === "FILE") {
await this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_SLATE",
value: "NAV_SLATE",
data: { ...value.data.data.slate, pageState: { id: value.data.data.file.id } },
});
}

2
components/core/SlateLayout.js
View File

@ -1858,7 +1858,7 @@ export class SlateLayout extends React.Component {
onClose={() => this.setState({ signInModal: false })}
viewer={this.props.viewer}
open={this.state.signInModal}
redirectURL={`/_?scene=V1_NAVIGATION_SLATE&user=${this.props.creator.username}&slate=${this.props.slate.slatename}`}
redirectURL={`/_?scene=NAV_SLATE&user=${this.props.creator.username}&slate=${this.props.slate.slatename}`}
/>
</div>
)}

6
components/core/SlatePreviewBlock.js
View File

@ -429,10 +429,10 @@ export class SlatePreviewBlock extends React.Component {
<React.Fragment>
<div css={STYLES_TITLE_LINE}>
<div css={STYLES_TITLE}>{this.props.slate.data.name}</div>
<div style={{ height: "18px" }}>
<div style={{ height: "16px" }}>
{this.props.isOwner && !this.props.slate.data.public ? (
<SVG.SecurityLock
height="18px"
height="16px"
style={{ color: Constants.system.grayBlack, marginRight: 24 }}
/>
) : null}
@ -592,7 +592,7 @@ export default class SlatePreviewBlocks extends React.Component {
onClick={() =>
this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_SLATE",
value: "NAV_SLATE",
data: { decorator: "SLATE", ...slate },
})
}

24
components/core/TabGroup.js
View File

@ -57,7 +57,7 @@ export class SecondaryTabGroup extends React.Component {
{this.props.tabs.map((tab, i) => (
<div
css={STYLES_TAB}
key={tab}
key={this.props.onAction ? tab.title : tab}
style={{
color:
this.props.disabled || this.props.value === i
@ -67,9 +67,15 @@ export class SecondaryTabGroup extends React.Component {
...this.props.itemStyle,
backgroundColor: this.props.value === i ? Constants.system.white : "transparent",
}}
onClick={this.props.disabled ? () => {} : () => this.props.onChange(i)}
onClick={
this.props.disabled || this.props.value === i
? () => {}
: this.props.onAction
? () => this.props.onAction({ type: "NAVIGATE", value: tab.value })
: () => this.props.onChange(i)
}
>
{tab}
{this.props.onAction ? tab.title : tab}
</div>
))}
</div>
@ -84,7 +90,7 @@ export class PrimaryTabGroup extends React.Component {
{this.props.tabs.map((tab, i) => (
<div
css={STYLES_TAB}
key={tab}
key={this.props.onAction ? tab.title : tab}
style={{
padding: "8px 16px 8px 0",
color:
@ -95,9 +101,15 @@ export class PrimaryTabGroup extends React.Component {
fontFamily: Constants.font.medium,
...this.props.itemStyle,
}}
onClick={this.props.disabled ? () => {} : () => this.props.onChange(i)}
onClick={
this.props.disabled || this.props.value === i
? () => {}
: this.props.onAction
? () => this.props.onAction({ type: "NAVIGATE", value: tab.value })
: () => this.props.onChange(i)
}
>
{tab}
{this.props.onAction ? tab.title : tab}
</div>
))}
</div>

2
components/sidebars/SidebarCreateSlate.js
View File

@ -88,7 +88,7 @@ export default class SidebarCreateSlate extends React.Component {
() =>
this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_SLATE",
value: "NAV_SLATE",
data: {
id: response.slate.id,
},

2
components/sidebars/SidebarSingleSlateSettings.js
View File

@ -105,7 +105,7 @@ export default class SidebarSingleSlateSettings extends React.Component {
this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_SLATES",
value: "NAV_SLATES",
});
const response = await Actions.deleteSlate({

96
components/system/components/GlobalCarousel.js
View File

@ -97,10 +97,6 @@ const STYLES_DISMISS_BOX = css`
:hover {
color: ${Constants.system.white};
}
${"" /* @media (min-width: ${Constants.sizes.mobile}px) {
display: none;
} */}
`;
const STYLES_MOBILE_HIDDEN = css`
@ -168,7 +164,7 @@ export class GlobalCarousel extends React.Component {
let carouselType =
!this.props.current ||
(this.props.current &&
(this.props.current.decorator === "FOLDER" || this.props.current.decorator === "HOME"))
(this.props.current.decorator === "FOLDER" || this.props.current.decorator === "ACTIVITY"))
? "data"
: "slate";
this.setState({
@ -177,22 +173,18 @@ export class GlobalCarousel extends React.Component {
index: e.detail.index || 0,
loading: false,
saving: false,
baseURL: e.detail.baseURL,
baseURL: window.location.pathname,
});
if (
carouselType === "slate" &&
e.detail.baseURL &&
this.props.current.data &&
this.props.current.data.objects
) {
const data = this.props.current.data.objects[e.detail.index];
window.history.replaceState(
{ index: e.detail.index },
"",
`/${e.detail.baseURL}/cid:${Strings.urlToCid(data.url)}`
);
}
// if (carouselType === "slate" && this.props.current.data && this.props.current.data.objects) {
// const data = this.props.current.data.objects[e.detail.index];
// console.log("WINDOW STATE");
// console.log(window.history.state);
// window.history.pushState(
// { ...window.history.state, cid: data.cid },
// null,
// `${window.location.pathname}/cid:${data.cid}`
// );
// }
};
_handleClose = (e) => {
@ -202,9 +194,11 @@ export class GlobalCarousel extends React.Component {
}
this.setState({ visible: false, index: 0, loading: false, saving: false });
if (this.state.baseURL) {
window.history.replaceState({}, "", `/${this.state.baseURL}`);
}
// if (this.state.baseURL) {
// console.log("WINDOW STATE");
// console.log(window.history.state);
// window.history.pushState({ ...window.history.state, cid: null }, "", this.state.baseURL);
// }
};
_handleNext = () => {
@ -228,19 +222,21 @@ export class GlobalCarousel extends React.Component {
}
this.setState({ index, loading: false, saving: false });
if (
this.state.carouselType === "slate" &&
this.state.baseURL &&
this.props.current.data &&
this.props.current.data.objects
) {
const data = this.props.current.data.objects[index];
window.history.replaceState(
{ index },
"",
`/${this.state.baseURL}/cid:${Strings.urlToCid(data.url)}`
);
}
// if (
// this.state.carouselType === "slate" &&
// this.state.baseURL &&
// this.props.current.data &&
// this.props.current.data.objects
// ) {
// const data = this.props.current.data.objects[index];
// console.log("WINDOW STATE");
// console.log(window.history.state);
// window.history.pushState(
// { ...window.history.state, cid: data.cid },
// "",
// `${this.state.baseURL}/cid:${data.cid}`
// );
// }
};
_handlePrevious = () => {
@ -262,19 +258,21 @@ export class GlobalCarousel extends React.Component {
}
this.setState({ index, loading: false, saving: false });
if (
this.state.carouselType === "slate" &&
this.state.baseURL &&
this.props.current.data &&
this.props.current.data.objects
) {
const data = this.props.current.data.objects[index];
window.history.replaceState(
{ index },
"",
`/${this.state.baseURL}/cid:${Strings.urlToCid(data.url)}`
);
}
// if (
// this.state.carouselType === "slate" &&
// this.state.baseURL &&
// this.props.current.data &&
// this.props.current.data.objects
// ) {
// const data = this.props.current.data.objects[index];
// console.log("WINDOW STATE");
// console.log(window.history.state);
// window.history.pushState(
// { ...window.history.state, cid: data.cid },
// "",
// `${this.state.baseURL}/cid:${data.cid}`
// );
// }
};
_handleSave = async (details, index) => {

4
components/system/components/fragments/TableComponents.js
View File

@ -289,9 +289,7 @@ export const TableContent = ({ type, text, action, data = {}, onAction }) => {
}
return (
<Link onClick={() => onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_FILE", data })}>
{text}
</Link>
<Link onClick={() => onAction({ type: "NAVIGATE", value: "NAV_FILE", data })}>{text}</Link>
);
default:
return text;

2
pages/_/profile.js
View File

@ -60,7 +60,7 @@ export default class ProfilePage extends React.Component {
viewer={this.props.viewer}
open={this.state.visible}
redirectURL={`/_${Strings.createQueryParams({
scene: "V1_NAVIGATION_PROFILE",
scene: "NAV_PROFILE",
user: this.props.creator.username,
})}`}
/>

2
pages/_/slate.js
View File

@ -344,7 +344,7 @@ export default class SlatePage extends React.Component {
viewer={this.props.viewer}
open={this.state.visible}
redirectURL={`/_${Strings.createQueryParams({
scene: "V1_NAVIGATION_SLATE",
scene: "NAV_SLATE",
user: this.props.creator.username,
slate: this.props.slate.slatename,
})}`}

321
scenes/SceneActivity.js
View File

@ -1,16 +1,327 @@
import * as React from "react";
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";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { PrimaryTabGroup } from "~/components/core/TabGroup";
import ScenePage from "~/components/core/ScenePage";
import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";
import ScenePageHeader from "~/components/core/ScenePageHeader";
// TODO(jim): Figure out the activity story.
export default class SceneActivity extends React.Component {
const STYLES_VIDEO_BIG = css`
display: block;
background-color: ${Constants.system.moonstone};
padding: 0;
outline: 0;
margin: 48px auto 88px auto;
border-radius: 4px;
width: 100%;
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
@media (max-width: ${Constants.sizes.tablet}px) {
margin: 32px auto 64px auto;
}
@media (max-width: ${Constants.sizes.mobile}px) {
margin: 24px auto 48px auto;
}
`;
const STYLES_IMAGE_BOX = css`
cursor: pointer;
position: relative;
box-shadow: ${Constants.shadow.light};
margin: 10px;
:hover {
box-shadow: ${Constants.shadow.medium};
}
`;
const STYLES_TEXT_AREA = css`
position: absolute;
bottom: 0px;
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};
margin-bottom: 16px;
width: 100%;
`;
const STYLES_GRADIENT = css`
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.2) 26.56%,
rgba(0, 0, 0, 0.3) 100%
);
backdrop-filter: blur(2px);
width: 100%;
height: 72px;
position: absolute;
bottom: 0px;
left: 0px;
`;
const STYLES_ACTIVITY_GRID = css`
margin: -10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
`;
class ActivitySquare extends React.Component {
state = {
showText: false,
};
render() {
const item = this.props.item;
const size = this.props.size;
const isImage = Validations.isPreviewableImage(item.file.type);
return (
<div
css={STYLES_IMAGE_BOX}
style={{ width: size, height: size }}
onMouseEnter={isImage ? () => this.setState({ showText: true }) : () => {}}
onMouseLeave={isImage ? () => this.setState({ showText: false }) : () => {}}
>
<SlateMediaObjectPreview
centeredImage
iconOnly
blurhash={item.file.blurhash}
url={item.file.url}
title={item.file.title || item.file.name}
type={item.file.type}
style={{ border: "none" }}
imageStyle={{ border: "none" }}
/>
{isImage && this.state.showText ? <div css={STYLES_GRADIENT} /> : null}
{this.state.showText || !isImage ? (
<div css={STYLES_TEXT_AREA} style={{ width: this.props.size }}>
{isImage ? null : (
<div
css={STYLES_TITLE}
style={{
color: Constants.system.textGray,
}}
>
{item.file.title || item.file.name}
</div>
)}
<div
css={STYLES_SECONDARY}
style={{
color: isImage ? Constants.system.white : Constants.system.textGrayLight,
}}
>
{isImage ? (
<SVG.ArrowDownLeft
height="10px"
style={{ transform: "scaleX(-1)", marginRight: 4 }}
/>
) : null}
{item.slate.data.name || item.slate.slatename}
</div>
</div>
) : null}
</div>
);
}
}
const ActivityRectangle = ({ item, size }) => {
let file;
for (let obj of item.slate?.data?.objects || []) {
if (Validations.isPreviewableImage(obj.type) || obj.coverImage) {
file = obj;
}
}
let numObjects = item.slate?.data?.objects?.length || 0;
return (
<div css={STYLES_IMAGE_BOX} style={{ width: size * 2 + 20, height: size }}>
{file ? (
<SlateMediaObjectPreview
centeredImage
iconOnly
blurhash={file.blurhash}
url={file.url}
title={file.title || file.name}
type={file.type}
style={{ border: "none" }}
imageStyle={{ border: "none" }}
coverImage={file.coverImage}
/>
) : null}
<div css={STYLES_GRADIENT} />
<div css={STYLES_TEXT_AREA}>
<div
css={STYLES_TITLE}
style={{
fontFamily: Constants.font.semiBold,
width: size,
}}
>
{item.slate.data.name || item.slate.slatename}
</div>
<div
css={STYLES_SECONDARY}
style={{
color: Constants.system.textGrayLight,
width: size,
}}
>
{numObjects} File{numObjects == 1 ? "" : "s"}
</div>
</div>
</div>
);
};
export default class SceneActivity extends React.Component {
state = {
imageSize: 200,
tab: 0,
};
async componentDidMount() {
this.calculateWidth();
this.debounceInstance = Window.debounce(this.calculateWidth, 200);
window.addEventListener("resize", this.debounceInstance);
//slates with no previewable images in them?
//filter to remove ones you no longer follow
}
componentWillUnmount() {
window.removeEventListener("resize", this.debounceInstance);
}
_handleCreateSlate = () => {
this.props.onAction({
type: "NAVIGATE",
value: "NAV_SLATES",
data: null,
});
};
calculateWidth = () => {
let windowWidth = window.innerWidth;
let imageSize;
if (windowWidth < Constants.sizes.mobile) {
imageSize = (windowWidth - 2 * 24 - 20) / 2;
} else {
imageSize = (windowWidth - 2 * 56 - 5 * 20) / 6;
}
this.setState({ imageSize });
};
render() {
let activity = this.props.viewer.activity;
return (
<ScenePage>
<ScenePageHeader title="Network [WIP]">
This scene is currently a work in progress.
</ScenePageHeader>
<ScenePageHeader
title={
<PrimaryTabGroup
tabs={[
{ title: "Files", value: "NAV_DATA" },
{ title: "Slates", value: "NAV_SLATES" },
{ title: "Activity", value: "NAV_ACTIVITY" },
]}
value={2}
onAction={this.props.onAction}
/>
}
/>
{activity.length ? (
<div css={STYLES_ACTIVITY_GRID}>
{activity.map((item) => {
if (item.data.type === "SUBSCRIBED_CREATE_SLATE") {
return (
<span
key={item.id}
onClick={() =>
this.props.onAction({
type: "NAVIGATE",
value: "NAV_SLATE",
data: { decorator: "SLATE", ...item.data.context.slate },
})
}
>
<ActivityRectangle size={this.state.imageSize} item={item.data.context} />
</span>
);
} else if (item.data.type === "SUBSCRIBED_ADD_TO_SLATE") {
return (
<span
key={item.id}
onClick={() => {
this.props.onAction({
type: "NAVIGATE",
value: "NAV_SLATE",
data: {
decorator: "SLATE",
...item.data.context.slate,
pageState: {
cid: item.data.context.file.cid,
},
},
});
}}
>
<ActivitySquare size={this.state.imageSize} item={item.data.context} />
</span>
);
} else {
return null;
}
})}
</div>
) : (
<React.Fragment>
<System.P>When you're ready, create a slate!</System.P>
<br />
<System.ButtonPrimary onClick={this._handleCreateSlate}>
Create a slate
</System.ButtonPrimary>
<video
css={STYLES_VIDEO_BIG}
autoPlay
loop
muted
src="https://slate.textile.io/ipfs/bafybeienjmql6lbtsaz3ycon3ttliohcl7qbquwvny43lhcodky54z65cy"
type="video/m4v"
playsInline
style={{
backgroundImage: `url('https://slate.textile.io/ipfs/bafybeienjmql6lbtsaz3ycon3ttliohcl7qbquwvny43lhcodky54z65cy')`,
borderRadius: `4px`,
width: `100%`,
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
backgroundSize: `cover`,
}}
/>
</React.Fragment>
)}
</ScenePage>
);
}

13
scenes/SceneDirectory.js
View File

@ -474,15 +474,12 @@ export default class SceneDirectory extends React.Component {
<ScenePage>
<ScenePageHeader title="Directory" />
<SecondaryTabGroup
tabs={["Following", "Followers"]}
tabs={[
{ title: "Following", value: "NAV_DIRECTORY" },
{ title: "Followers", value: "NAV_DIRECTORY_FOLLOWERS" },
]}
value={this.props.tab}
onChange={(value) => {
if (value === 0) {
this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_DIRECTORY" });
} else {
this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_DIRECTORY_FOLLOWERS" });
}
}}
onAction={this.props.onAction}
/>
{/* {this.props.tab === 0 ? (
requests && requests.length ? (

2
scenes/SceneFile.js
View File

@ -81,7 +81,7 @@ export default class SceneFile extends React.Component {
{fileURL}
</a>
</div>
<div css={STYLES_RIGHT} onClick={() => this.props.onBack()}>
<div css={STYLES_RIGHT}>
<SVG.Dismiss height="24px" />
</div>
</div>

16
scenes/SceneFilesFolder.js
View File

@ -25,15 +25,13 @@ export default class SceneFilesFolder extends React.Component {
<ScenePageHeader
title={
<PrimaryTabGroup
tabs={["Activity", "Files", "Slates"]}
value={1}
onChange={(value) => {
if (value === 2) {
this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_SLATES" });
} else if (value === 0) {
this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_HOME" });
}
}}
tabs={[
{ title: "Files", value: "NAV_DATA" },
{ title: "Slates", value: "NAV_SLATES" },
{ title: "Activity", value: "NAV_ACTIVITY" },
]}
value={0}
onAction={this.props.onAction}
/>
}
actions={

340
scenes/SceneHome.js
View File

@ -1,340 +0,0 @@
import * as React from "react";
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";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { PrimaryTabGroup } from "~/components/core/TabGroup";
import ScenePage from "~/components/core/ScenePage";
import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";
import ScenePageHeader from "~/components/core/ScenePageHeader";
const STYLES_VIDEO_BIG = css`
display: block;
background-color: ${Constants.system.moonstone};
padding: 0;
outline: 0;
margin: 48px auto 88px auto;
border-radius: 4px;
width: 100%;
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
@media (max-width: ${Constants.sizes.tablet}px) {
margin: 32px auto 64px auto;
}
@media (max-width: ${Constants.sizes.mobile}px) {
margin: 24px auto 48px auto;
}
`;
const STYLES_IMAGE_BOX = css`
cursor: pointer;
position: relative;
box-shadow: ${Constants.shadow.light};
margin: 10px;
:hover {
box-shadow: ${Constants.shadow.medium};
}
`;
const STYLES_PROFILE_IMAGE_BOX = css`
background-size: cover;
background-position: 50% 50%;
position: relative;
border-radius: 4px;
position: absolute;
top: 16px;
left: 16px;
width: 24px;
height: 24px;
`;
const STYLES_TEXT_AREA = css`
position: absolute;
bottom: 16px;
left: 16px;
`;
const STYLES_TITLE = css`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: ${Constants.system.white};
font-family: ${Constants.font.medium};
margin-bottom: 4px;
`;
const STYLES_SECONDARY = css`
${STYLES_TITLE}
font-size: ${Constants.typescale.lvlN1};
margin-bottom: 0px;
`;
const STYLES_GRADIENT = css`
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.2) 26.56%,
rgba(0, 0, 0, 0.3) 100%
);
backdrop-filter: blur(2px);
width: 100%;
height: 72px;
position: absolute;
bottom: 0px;
left: 0px;
`;
const STYLES_ACTIVITY_GRID = css`
margin: -10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
`;
class ActivitySquare extends React.Component {
state = {
showText: false,
};
render() {
const item = this.props.item;
const size = this.props.size;
const isImage = Validations.isPreviewableImage(item.file.type);
return (
<div
css={STYLES_IMAGE_BOX}
style={{ width: size, height: size }}
onMouseEnter={() => this.setState({ showText: true })}
onMouseLeave={() => this.setState({ showText: false })}
>
<SlateMediaObjectPreview
centeredImage
iconOnly
blurhash={item.file.blurhash}
url={item.file.url}
title={item.file.title || item.file.name}
type={item.file.type}
style={{ border: "none" }}
imageStyle={{ border: "none" }}
/>
{isImage && this.state.showText ? <div css={STYLES_GRADIENT} /> : null}
{this.state.showText ? (
<div css={STYLES_TEXT_AREA}>
{isImage ? null : (
<div
css={STYLES_TITLE}
style={{
color: Constants.system.textGray,
width: size,
}}
>
{item.file.title || item.file.name}
</div>
)}
<div
css={STYLES_SECONDARY}
style={{
width: size,
color: isImage ? Constants.system.white : Constants.system.textGrayLight,
}}
>
{isImage ? (
<SVG.ArrowDownLeft
height="10px"
style={{ transform: "scaleX(-1)", marginRight: 4 }}
/>
) : null}
{item.slate.data.name || item.slate.slatename}
</div>
</div>
) : null}
</div>
);
}
}
const ActivityRectangle = ({ item, size }) => {
let file;
for (let obj of item.slate?.data?.objects || []) {
if (Validations.isPreviewableImage(obj.type) || obj.coverImage) {
file = obj;
}
}
let numObjects = item.slate?.data?.objects?.length || 0;
return (
<div css={STYLES_IMAGE_BOX} style={{ width: size * 2 + 20, height: size }}>
{file ? (
<SlateMediaObjectPreview
centeredImage
iconOnly
blurhash={file.blurhash}
url={file.url}
title={file.title || file.name}
type={file.type}
style={{ border: "none" }}
imageStyle={{ border: "none" }}
coverImage={file.coverImage}
/>
) : null}
<div css={STYLES_GRADIENT} />
<div css={STYLES_TEXT_AREA}>
<div
css={STYLES_TITLE}
style={{
fontFamily: Constants.font.semiBold,
width: size,
}}
>
{item.slate.data.name || item.slate.slatename}
</div>
<div
css={STYLES_SECONDARY}
style={{
color: Constants.system.textGrayLight,
width: size,
}}
>
{numObjects} File{numObjects == 1 ? "" : "s"}
</div>
</div>
</div>
);
};
export default class SceneHome extends React.Component {
state = {
imageSize: 200,
tab: 0,
};
async componentDidMount() {
this.calculateWidth();
this.debounceInstance = Window.debounce(this.calculateWidth, 200);
window.addEventListener("resize", this.debounceInstance);
//slates with no previewable images in them?
//filter to remove ones you no longer follow
}
componentWillUnmount() {
window.removeEventListener("resize", this.debounceInstance);
}
_handleCreateSlate = () => {
this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_SLATES",
data: null,
});
};
calculateWidth = () => {
let windowWidth = window.innerWidth;
let imageSize;
if (windowWidth < Constants.sizes.mobile) {
imageSize = (windowWidth - 2 * 24 - 20) / 2;
} else {
imageSize = (windowWidth - 2 * 56 - 5 * 20) / 6;
}
this.setState({ imageSize });
};
render() {
let activity = this.props.viewer.activity;
return (
<ScenePage>
<ScenePageHeader
title={
<PrimaryTabGroup
tabs={["Activity", "Files", "Slates"]}
value={0}
onChange={(value) => {
if (value === 1) {
this.props.onAction({ type: "NAVIGATE", value: "data" });
} else if (value === 2) {
this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_SLATES" });
}
}}
/>
}
/>
{activity.length ? (
<div css={STYLES_ACTIVITY_GRID}>
{activity.map((item) => {
if (item.data.type === "SUBSCRIBED_CREATE_SLATE") {
return (
<span
key={item.id}
onClick={() =>
this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_SLATE",
data: { decorator: "SLATE", ...item.data.context.slate },
})
}
>
<ActivityRectangle size={this.state.imageSize} item={item.data.context} />
</span>
);
} else if (item.data.type === "SUBSCRIBED_ADD_TO_SLATE") {
return (
<span
key={item.id}
onClick={() => {
this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_SLATE",
data: {
decorator: "SLATE",
...item.data.context.slate,
pageState: {
cid: item.data.context.file.cid,
},
},
});
}}
>
<ActivitySquare size={this.state.imageSize} item={item.data.context} />
</span>
);
} else {
return null;
}
})}
</div>
) : (
<React.Fragment>
<System.P>When you're ready, create a slate!</System.P>
<br />
<System.ButtonPrimary onClick={this._handleCreateSlate}>
Create a slate
</System.ButtonPrimary>
<video
css={STYLES_VIDEO_BIG}
autoPlay
loop
muted
src="https://slate.textile.io/ipfs/bafybeienjmql6lbtsaz3ycon3ttliohcl7qbquwvny43lhcodky54z65cy"
type="video/m4v"
playsInline
style={{
backgroundImage: `url('https://slate.textile.io/ipfs/bafybeienjmql6lbtsaz3ycon3ttliohcl7qbquwvny43lhcodky54z65cy')`,
borderRadius: `4px`,
width: `100%`,
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
backgroundSize: `cover`,
}}
/>
</React.Fragment>
)}
</ScenePage>
);
}
}

2
scenes/SceneMakeFilecoinDeal.js
View File

@ -204,7 +204,7 @@ export default class SceneMakeFilecoinDeal extends React.Component {
"Your storage deal was put in the queue. This can take up to 36 hours, check back later."
);
this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_ARCHIVE" });
this.props.onAction({ type: "NAVIGATE", value: "NAV_FILECOIN" });
};
_handleRemove = async (cid) => {

2
scenes/ScenePublicProfile.js
View File

@ -41,7 +41,7 @@ export default class ScenePublicProfile extends React.Component {
};
fetchProfile = async () => {
const username = Window.getQueryParameterByName("user");
const { user: username } = window.history.state;
let query;
if (username) {
query = { username: username };

71
scenes/ScenePublicSlate.js
View File

@ -43,21 +43,11 @@ export default class ScenePublicSlate extends React.Component {
};
fetchSlate = async () => {
const { user: username, slate: slatename, cid } = window.history.state;
const pageState = this.props.data?.pageState;
const username = Window.getQueryParameterByName("user");
const slatename = Window.getQueryParameterByName("slate");
const cid = Window.getQueryParameterByName("cid");
if (
!this.props.data &&
!username &&
!slatename &&
this.props.viewer.slates &&
this.props.viewer.slates.length
) {
this.props.onAction({
type: "NAVIGATE",
value: this.props.viewer.slates[0].id,
});
if (!this.props.data && (!username || !slatename)) {
this.setState({ notFound: true });
return;
}
@ -83,9 +73,10 @@ export default class ScenePublicSlate extends React.Component {
return;
}
}
if (slate) {
window.history.replaceState(
window.history.state,
{ ...window.history.state, data: slate },
"Slate",
`/${this.props.viewer.username}/${slate.slatename}`
);
@ -108,60 +99,12 @@ export default class ScenePublicSlate extends React.Component {
}
slate = response.data;
window.history.replaceState(
window.history.state,
{ ...window.history.state, data: slate },
"Slate",
`/${response.data.user.username}/${response.data.slatename}`
);
}
// let slateIds = this.props.viewer.slates.map((slate) => slate.id);
// if (this.props.data && this.props.data.id && slateIds.includes(this.props.data.id)) {
// this.props.onAction({
// type: "NAVIGATE",
// value: this.props.data.id,
// redirect: true,
// });
// return;
// }
// if (username === this.props.viewer.username) {
// for (let slate of this.props.viewer.slates) {
// if (slate.slatename === slatename) {
// this.props.onAction({
// type: "NAVIGATE",
// value: slate.id,
// redirect: true,
// });
// return;
// }
// }
// Events.dispatchMessage({ message: "We're having trouble fetching that slate right now." });
// this.setState({ notFound: true });
// return;
// }
// let query;
// if (username && slatename) {
// query = { username, slatename };
// } else if (this.props.data && this.props.data.id) {
// query = { id: this.props.data.id };
// }
// let response;
// if (query) {
// response = await Actions.getSerializedSlate(query);
// }
// if (Events.hasError(response)) {
// this.setState({ notFound: true });
// return;
// }
// window.history.replaceState(
// window.history.state,
// "Slate",
// `/${response.data.user.username}/${response.data.slatename}`
// );
this.props.onUpdateData({ data: slate });
await this.setState({ slate });

4
scenes/SceneSlate.js
View File

@ -213,7 +213,7 @@ export default class SceneSlate extends React.Component {
<CircleButtonGray onClick={this._handleAdd} style={{ marginRight: 16 }}>
<SVG.Plus height="16px" />
</CircleButtonGray>
{isPublic ? (
{/* {isPublic ? (
<CircleButtonGray
style={{ marginRight: 16 }}
onClick={(e) =>
@ -231,7 +231,7 @@ export default class SceneSlate extends React.Component {
>
{this.state.copying ? <SVG.CheckBox height="16px" /> : <SVG.DeepLink height="16px" />}
</CircleButtonGray>
) : null}
) : null} */}
<CircleButtonGray onClick={this._handleShowSettings}>
<SVG.Settings height="16px" />
</CircleButtonGray>

32
scenes/SceneSlates.js
View File

@ -42,31 +42,23 @@ export default class SceneSlates extends React.Component {
<ScenePageHeader
title={
<PrimaryTabGroup
tabs={["Activity", "Files", "Slates"]}
value={2}
onChange={(value) => {
if (value === 1) {
this.props.onAction({ type: "NAVIGATE", value: "data" });
} else if (value === 0) {
this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_HOME" });
}
}}
tabs={[
{ title: "Files", value: "NAV_DATA" },
{ title: "Slates", value: "NAV_SLATES" },
{ title: "Activity", value: "NAV_ACTIVITY" },
]}
value={1}
onAction={this.props.onAction}
/>
}
actions={
<SecondaryTabGroup
tabs={["My Slates", "Following"]}
tabs={[
{ title: "My Slates", value: "NAV_SLATES" },
{ title: "Following", value: "NAV_SLATES_FOLLOWING" },
]}
value={this.props.tab}
onChange={(value) => {
if (value === 0) {
this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_SLATES" });
} else {
this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_SLATES_FOLLOWING",
});
}
}}
onAction={this.props.onAction}
style={{ margin: "0 0 24px 0" }}
/>
}

6
server.js
View File

@ -211,7 +211,7 @@ app.prepare().then(async () => {
if (shouldViewerRedirect) {
return res.redirect(
`/_${Strings.createQueryParams({
scene: "V1_NAVIGATION_PROFILE",
scene: "NAV_PROFILE",
user: req.params.username,
})}`
);
@ -304,7 +304,7 @@ app.prepare().then(async () => {
if (shouldViewerRedirect) {
return res.redirect(
`/_${Strings.createQueryParams({
scene: "V1_NAVIGATION_SLATE",
scene: "NAV_SLATE",
user: req.params.username,
slate: req.params.slatename,
})}`
@ -370,7 +370,7 @@ app.prepare().then(async () => {
if (shouldViewerRedirect) {
return res.redirect(
`/_${Strings.createQueryParams({
scene: "V1_NAVIGATION_SLATE",
scene: "NAV_SLATE",
user: req.params.username,
slate: req.params.slatename,
cid: req.params.cid,