From 6deff95d7c9dd94c5a60271cc25e7f29eb925745 Mon Sep 17 00:00:00 2001 From: Martina Date: Mon, 24 Aug 2020 14:15:51 -0700 Subject: [PATCH 01/13] rebase --- common/navigation-data.js | 10 +- components/core/Application.js | 69 +++-- components/core/ApplicationControlMenu.js | 25 +- components/core/ApplicationNavigation.js | 17 +- components/core/Profile.js | 161 ++++++++++ pages/_/profile.js | 95 ++---- scenes/SceneDirectory.js | 354 +++++++++++++++++++++- scenes/SceneProfile.js | 30 ++ scenes/SceneSlate.js | 88 +++--- 9 files changed, 690 insertions(+), 159 deletions(-) create mode 100644 components/core/Profile.js create mode 100644 scenes/SceneProfile.js diff --git a/common/navigation-data.js b/common/navigation-data.js index d604e58d..57e17d5a 100644 --- a/common/navigation-data.js +++ b/common/navigation-data.js @@ -111,7 +111,7 @@ export const generate = ({ library = [], slates = [] }) => [ children: null, }, { - id: "V1_NAVIGATION_PROFILE", + id: "V1_NAVIGATION_PROFILE_EDIT", decorator: "EDIT_ACCOUNT", name: "Profile & Account Settings", pageTitle: "Your Profile & Account Settings", @@ -126,4 +126,12 @@ export const generate = ({ library = [], slates = [] }) => [ children: null, ignore: true, }, + { + id: "V1_NAVIGATION_PROFILE", + decorator: "PROFILE", + name: "Profile", + pageTitle: "Profile", + children: null, + ignore: true, + }, ]; diff --git a/components/core/Application.js b/components/core/Application.js index 2b7a6082..93031dbb 100644 --- a/components/core/Application.js +++ b/components/core/Application.js @@ -23,6 +23,7 @@ import SceneSignIn from "~/scenes/SceneSignIn"; import SceneSlate from "~/scenes/SceneSlate"; import SceneActivity from "~/scenes/SceneActivity"; import SceneDirectory from "~/scenes/SceneDirectory"; +import SceneProfile from "~/scenes/SceneProfile"; // NOTE(jim): // Sidebars each have a decorator and can be shown to with _handleAction @@ -58,6 +59,9 @@ const SIDEBARS = { const SCENES = { HOME: , + DIRECTORY: , + PROFILE: , + VIEW_SLATE: , WALLET: , FOLDER: , FILE: , @@ -73,6 +77,8 @@ const SCENES = { }; export default class ApplicationPage extends React.Component { + _body; + state = { selected: {}, viewer: this.props.viewer, @@ -347,13 +353,16 @@ export default class ApplicationPage extends React.Component { }; _handleDismissSidebar = () => { - this.setState({ sidebar: null, sidebarLoading: false, data: null }); + this.setState({ sidebar: null, sidebarLoading: false }); }; _handleAction = (options) => { console.log(options); if (options.type === "NAVIGATE") { - return this._handleNavigateTo({ id: options.value }, options.data); + return this._handleNavigateTo( + { id: options.value, scene: options.scene }, + options.data + ); } if (options.type === "NEW_WINDOW") { @@ -379,8 +388,9 @@ export default class ApplicationPage extends React.Component { }; _handleNavigateTo = (next, data = null) => { - this.state.history[this.state.currentIndex].scrollTop = window.scrollY; - this.state.history[this.state.currentIndex].data = data; + let body = document.getElementById("slate-client-body"); + this.state.history[this.state.currentIndex].scrollTop = body.scrollTop; //window.scrollY => body.scrollTop (where body is the body of the ApplicationLayout) + this.state.history[this.state.currentIndex].data = this.state.data; //BUG FIX: was originally = data. So it was setting it equal to the data for the next one rather than the current one if (this.state.currentIndex !== this.state.history.length - 1) { const adjustedArray = [...this.state.history]; @@ -393,7 +403,7 @@ export default class ApplicationPage extends React.Component { data, sidebar: null, }, - () => window.scrollTo(0, 0) + () => body.scrollTo(0, 0) ); } @@ -404,12 +414,14 @@ export default class ApplicationPage extends React.Component { data, sidebar: null, }, - () => window.scrollTo(0, 0) + () => body.scrollTo(0, 0) ); }; _handleBack = () => { - this.state.history[this.state.currentIndex].scrollTop = window.scrollY; + let body = document.getElementById("slate-client-body"); + this.state.history[this.state.currentIndex].scrollTop = body.scrollTop; + this.state.history[this.state.currentIndex].data = this.state.data; //BUG FIX: if you go back, it doesn't save the data for that page. so if you go forward to it again, it breaks. changed data => this.state.data const next = this.state.history[this.state.currentIndex - 1]; @@ -421,13 +433,14 @@ export default class ApplicationPage extends React.Component { }, () => { console.log({ next }); - window.scrollTo(0, next.scrollTop); + body.scrollTo(0, next.scrollTop); } ); }; _handleForward = () => { - this.state.history[this.state.currentIndex].scrollTop = window.scrollY; + let body = document.getElementById("slate-client-body"); + this.state.history[this.state.currentIndex].scrollTop = body.scrollTop; const next = this.state.history[this.state.currentIndex + 1]; @@ -439,7 +452,7 @@ export default class ApplicationPage extends React.Component { }, () => { console.log({ next }); - window.scrollTo(0, next.scrollTop); + body.scrollTo(0, next.scrollTop); } ); }; @@ -467,6 +480,7 @@ export default class ApplicationPage extends React.Component { const navigation = NavigationData.generate(this.state.viewer); const next = this.state.history[this.state.currentIndex]; const current = NavigationData.getCurrentById(navigation, next.id); + console.log(this.state.history); const navigationElement = ( ); - const scene = React.cloneElement(SCENES[current.target.decorator], { - current: current.target, - data: this.state.data, - viewer: this.state.viewer, - selected: this.state.selected, - onNavigateTo: this._handleNavigateTo, - onSelectedChange: this._handleSelectedChange, - onViewerChange: this._handleViewerChange, - onDeleteYourself: this._handleDeleteYourself, - onAction: this._handleAction, - onBack: this._handleBack, - onForward: this._handleForward, - onRehydrate: this.rehydrate, - }); + const scene = React.cloneElement( + SCENES[ + this.state.history[this.state.currentIndex].scene || + current.target.decorator + ], + { + current: current.target, + data: this.state.data, + viewer: this.state.viewer, + selected: this.state.selected, + onNavigateTo: this._handleNavigateTo, + onSelectedChange: this._handleSelectedChange, + onViewerChange: this._handleViewerChange, + onDeleteYourself: this._handleDeleteYourself, + onAction: this._handleAction, + onBack: this._handleBack, + onForward: this._handleForward, + onRehydrate: this.rehydrate, + sceneId: current.target.id, + } + ); let sidebarElement; if (this.state.sidebar) { diff --git a/components/core/ApplicationControlMenu.js b/components/core/ApplicationControlMenu.js index 69867130..6ac37196 100644 --- a/components/core/ApplicationControlMenu.js +++ b/components/core/ApplicationControlMenu.js @@ -2,7 +2,11 @@ import * as React from "react"; import * as Constants from "~/common/constants"; import * as OldSVG from "~/components/system/svg"; -import { TooltipWrapper, dispatchCustomEvent, PopoverNavigation } from "~/components/system"; +import { + TooltipWrapper, + dispatchCustomEvent, + PopoverNavigation, +} from "~/components/system"; import { css } from "@emotion/react"; import Dismissible from "~/components/core/Dismissible"; @@ -67,7 +71,8 @@ export default class ApplicationControlMenu extends React.Component { captureScroll={false} enabled onOutsideRectEvent={this._handleHide} - style={this.props.style}> + style={this.props.style} + > - }> + } + > + }} + > - + ); } } diff --git a/components/core/ApplicationNavigation.js b/components/core/ApplicationNavigation.js index 6b2b4727..f55f62e2 100644 --- a/components/core/ApplicationNavigation.js +++ b/components/core/ApplicationNavigation.js @@ -19,6 +19,7 @@ const IconMap = { LOCAL_DATA: , PROFILE_PAGE: , SETTINGS_DEVELOPER: , + DIRECTORY: , }; const STYLES_NAVIGATION = css` @@ -69,7 +70,8 @@ const STYLES_PROFILE = css` align-items: center; justify-content: flex-start; transition: 200ms ease all; -/* + cursor: pointer; + :hover { color: ${Constants.system.white}; background-color: ${Constants.system.brand}; @@ -256,11 +258,16 @@ export default class ApplicationNavigation extends React.Component { return (