From 42eda96cdb5b4b24aa6709614239f4f38bcb22c5 Mon Sep 17 00:00:00 2001 From: Martina Date: Wed, 8 Dec 2021 14:25:13 -0800 Subject: [PATCH] added internal routing for default to first slate in profile, and added directory to sidebar --- common/navigation-data.js | 12 +- components/core/Application.js | 22 +- components/core/ApplicationUserControls.js | 22 +- components/core/Filter/Filters.js | 29 +- components/core/Filter/Popup.js | 12 +- components/core/Filter/Sidebar.js | 12 +- components/core/Filter/index.js | 25 +- scenes/SceneDirectory.js | 354 --------------------- scenes/SceneProfile.js | 60 ++-- 9 files changed, 125 insertions(+), 423 deletions(-) delete mode 100644 scenes/SceneDirectory.js diff --git a/common/navigation-data.js b/common/navigation-data.js index 65010fd5..91ec6774 100644 --- a/common/navigation-data.js +++ b/common/navigation-data.js @@ -165,12 +165,12 @@ export const navigation = [ // pathname: "/_/search", // mainNav: true, // }, - { - id: "NAV_DIRECTORY", - name: "Directory", - pageTitle: "Your Following", - pathname: "/_/directory", - }, + // { + // id: "NAV_DIRECTORY", + // name: "Directory", + // pageTitle: "Your Following", + // pathname: "/_/directory", + // }, slatePage, { id: "NAV_API", diff --git a/components/core/Application.js b/components/core/Application.js index a9283eac..e6c52676 100644 --- a/components/core/Application.js +++ b/components/core/Application.js @@ -24,7 +24,7 @@ import SceneSettingsDeveloper from "~/scenes/SceneSettingsDeveloper"; import SceneAuth from "~/scenes/SceneAuth"; import SceneSlate from "~/scenes/SceneSlate"; import SceneActivity from "~/scenes/SceneActivity"; -import SceneDirectory from "~/scenes/SceneDirectory"; +// import SceneDirectory from "~/scenes/SceneDirectory"; import SceneProfile from "~/scenes/SceneProfile"; // NOTE(jim): @@ -71,7 +71,7 @@ const SCENES = { NAV_ERROR: , NAV_SIGN_IN: , ...(Environment.ACTIVITY_FEATURE_FLAG ? { NAV_ACTIVITY: } : {}), - NAV_DIRECTORY: , + // NAV_DIRECTORY: , NAV_PROFILE: , NAV_DATA: , NAV_SLATE: , @@ -374,6 +374,11 @@ export default class ApplicationPage extends React.Component { data = response.data; pathname = `/${data.owner.username}/${data.slatename}${search}`; } else if (page?.id === "NAV_PROFILE") { + if (details.id === this.state.viewer?.id) { + this.setState({ loading: false }); + this._handleNavigateTo({ href: "/_/data", redirect: true }); + return; + } let response = await Actions.getSerializedProfile(details); if (!response || response.error) { this.setState({ loading: false }); @@ -381,6 +386,15 @@ export default class ApplicationPage extends React.Component { return; } data = response.data; + if (data.slates?.length) { + this.setState({ loading: false }); + this._handleNavigateTo({ + href: `/${data.username}/${data.slates[0].slatename}`, + redirect: true, + }); + return; + } + pathname = `/${data.username}${search}`; } @@ -473,7 +487,7 @@ export default class ApplicationPage extends React.Component { const isProfilePage = (page.id === "NAV_SLATE" && this.state.data?.ownerId !== this.state.viewer?.id) || - (page.id === "NAV_PROFILE" && this.state.data?.id !== this.state.viewer?.id); + page.id === "NAV_PROFILE"; // if (!this.state.loaded) { // return ( @@ -505,7 +519,7 @@ export default class ApplicationPage extends React.Component { viewer={this.state.viewer} > - Profile - - - ), - }, - { - text: ( -
- - Directory + Home
), }, + // { + // text: ( + //
+ // + // Directory + // + //
+ // ), + // }, ], [ { @@ -207,8 +207,6 @@ export class ApplicationUserControlsPopup extends React.Component { ), }, - ], - [ { text: (
diff --git a/components/core/Filter/Filters.js b/components/core/Filter/Filters.js index f4496ddd..38b5f90c 100644 --- a/components/core/Filter/Filters.js +++ b/components/core/Filter/Filters.js @@ -49,11 +49,12 @@ const STYLES_FILTERS_GROUP = css` } `; -const FilterButton = ({ children, Icon, isSelected, ...props }) => ( +const FilterButton = ({ children, Icon, image, isSelected, ...props }) => (
  • - + {Icon ? : null} + {image ? image : null} {children} @@ -120,6 +121,28 @@ function Tags({ viewer, data, onAction, ...props }) { ); } +function Following({ viewer, data, onAction, ...props }) { + const [, { hidePopup }] = useFilterContext(); + + return ( + + {viewer.following.map((user) => ( + } + onClick={hidePopup} + > + {user.username} + + ))} + + ); +} + function Profile({ viewer, data, page, onAction, ...props }) { if (page.id === "NAV_SLATE") { data = data.owner; @@ -230,4 +253,4 @@ function ProfileTags({ viewer, data, page, onAction, ...props }) { ); } -export { Library, Tags, Profile, ProfileTags }; +export { Library, Tags, Following, Profile, ProfileTags }; diff --git a/components/core/Filter/Popup.js b/components/core/Filter/Popup.js index 1afa9b99..e565a369 100644 --- a/components/core/Filter/Popup.js +++ b/components/core/Filter/Popup.js @@ -66,12 +66,9 @@ const STYLES_SIDEBAR_FILTER_WRAPPER = (theme) => css` } `; -export function Popup({ viewer, onAction, css, data, page, isMobile, ...props }) { +export function Popup({ viewer, onAction, css, data, page, isMobile, isProfilePage, ...props }) { const [{ popupState }] = useFilterContext(); - const isProfilePage = - (page.id === "NAV_SLATE" && data?.ownerId !== viewer?.id) || - (page.id === "NAV_PROFILE" && data?.id !== viewer?.id); if (isProfilePage && !isMobile) { return null; } @@ -102,6 +99,13 @@ export function Popup({ viewer, onAction, css, data, page, isMobile, ...props }) onAction={onAction} style={{ marginTop: 12 }} /> +
    • ); } diff --git a/components/core/Filter/Sidebar.js b/components/core/Filter/Sidebar.js index 7c6dabe6..c9e1007c 100644 --- a/components/core/Filter/Sidebar.js +++ b/components/core/Filter/Sidebar.js @@ -56,11 +56,8 @@ const STYLES_SIDEBAR_FILTER_WRAPPER = (theme) => css` } `; -export function Sidebar({ viewer, onAction, data, page, isMobile }) { +export function Sidebar({ viewer, onAction, data, page, isMobile, isProfilePage }) { const [{ sidebarState }] = useFilterContext(); - const isProfilePage = - (page.id === "NAV_SLATE" && data?.ownerId !== viewer?.id) || - (page.id === "NAV_PROFILE" && data?.id !== viewer?.id); if ((!isProfilePage || isMobile) && (!sidebarState.isVisible || isMobile)) return null; @@ -98,6 +95,13 @@ export function Sidebar({ viewer, onAction, data, page, isMobile }) { viewer={viewer} style={{ marginTop: 12 }} /> + ); diff --git a/components/core/Filter/index.js b/components/core/Filter/index.js index a3f15e3f..feeaa39d 100644 --- a/components/core/Filter/index.js +++ b/components/core/Filter/index.js @@ -113,7 +113,16 @@ const STYLES_FILTER_CONTENT = (theme) => css` ${"" /* margin-top: ${theme.sizes.filterNavbar}px; */} `; -export default function Filter({ isActive, viewer, onAction, page, data, isMobile, children }) { +export default function Filter({ + isActive, + viewer, + onAction, + page, + data, + isMobile, + children, + isProfilePage, +}) { const { results, isSearching } = useSearchStore(); const showSearchResult = isSearching && !!results; @@ -125,10 +134,6 @@ export default function Filter({ isActive, viewer, onAction, page, data, isMobil ); } - const isProfilePage = - (page.id === "NAV_SLATE" && data?.ownerId !== viewer?.id) || - (page.id === "NAV_PROFILE" && data?.id !== viewer?.id); - return ( {isProfilePage && isMobile ? ( @@ -152,6 +157,7 @@ export default function Filter({ isActive, viewer, onAction, page, data, isMobil data={data} page={page} isMobile={isMobile} + isProfilePage={isProfilePage} /> @@ -175,7 +181,14 @@ export default function Filter({ isActive, viewer, onAction, page, data, isMobil
    - +
    {showSearchResult ? ( diff --git a/scenes/SceneDirectory.js b/scenes/SceneDirectory.js deleted file mode 100644 index 32a1e559..00000000 --- a/scenes/SceneDirectory.js +++ /dev/null @@ -1,354 +0,0 @@ -import * as React from "react"; -import * as Actions from "~/common/actions"; -import * as Constants from "~/common/constants"; -import * as SVG from "~/common/svg"; - -import { css } from "@emotion/react"; -import { SecondaryTabGroup } from "~/components/core/TabGroup"; -import { Boundary } from "~/components/system/components/fragments/Boundary"; -import { PopoverNavigation } from "~/components/system/components/PopoverNavigation"; -import { Link } from "~/components/core/Link"; - -import ScenePage from "~/components/core/ScenePage"; -import ScenePageHeader from "~/components/core/ScenePageHeader"; -import EmptyState from "~/components/core/EmptyState"; -import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper"; -import ProfilePhoto from "~/components/core/ProfilePhoto"; - -const STYLES_USER_ENTRY = css` - display: grid; - grid-template-columns: auto 1fr; - align-items: center; - font-size: ${Constants.typescale.lvl1}; - cursor: pointer; - border: 1px solid ${Constants.semantic.borderGrayLight}; - border-radius: 4px; - margin-bottom: 8px; - background-color: ${Constants.system.white}; -`; - -const STYLES_USER = css` - display: grid; - grid-template-columns: auto 1fr; - align-items: center; - margin: 16px; - color: ${Constants.system.blue}; - font-family: ${Constants.font.medium}; - font-size: ${Constants.typescale.lvl1}; - - @media (max-width: ${Constants.sizes.mobile}px) { - margin: 12px 16px; - } -`; - -const STYLES_BUTTONS = css` - justify-self: end; - display: flex; - flex-direction: row; - margin-right: 16px; - justify-content: flex-end; - - @media (max-width: ${Constants.sizes.mobile}px) { - margin-right: 8px; - } -`; - -const STYLES_ITEM_BOX = css` - position: relative; - justify-self: end; - display: flex; - align-items: center; - justify-content: center; - padding: 8px; - margin-right: 16px; - color: ${Constants.system.grayLight2}; - - @media (max-width: ${Constants.sizes.mobile}px) { - margin-right: 8px; - } -`; - -const STYLES_ACTION_BUTTON = css` - cursor: pointer; - padding: 8px; - color: ${Constants.system.blue}; - font-family: ${Constants.font.medium}; -`; - -const STYLES_PROFILE_IMAGE = css` - background-color: ${Constants.semantic.bgLight}; - background-size: cover; - background-position: 50% 50%; - height: 24px; - width: 24px; - margin-right: 16px; - border-radius: 8px; - position: relative; -`; - -const STYLES_STATUS_INDICATOR = css` - position: absolute; - bottom: 0; - right: 0; - width: 7px; - height: 7px; - border-radius: 50%; - border: 2px solid ${Constants.system.green}; - background-color: ${Constants.system.green}; -`; - -const STYLES_MESSAGE = css` - color: ${Constants.system.black}; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - @media (max-width: 1000px) { - display: none; - } -`; - -const STYLES_NAME = css` - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -`; - -function UserEntry({ user, button, onClick, message, checkStatus }) { - const isOnline = checkStatus({ id: user.id }); - - return ( -
    -
    -
    - - {isOnline ?
    : null} -
    - - {user.name || `@${user.username}`} - {message ? {message} : null} - -
    - {button} -
    - ); -} - -const STYLES_COPY_INPUT = css` - pointer-events: none; - position: absolute; - opacity: 0; -`; - -const STYLES_MOBILE_HIDDEN = css` - @media (max-width: ${Constants.sizes.mobile}px) { - display: none; - } -`; - -const STYLES_MOBILE_ONLY = css` - @media (min-width: ${Constants.sizes.mobile}px) { - display: none; - } -`; - -export default class SceneDirectory extends React.Component { - _ref; - - state = { - copyValue: "", - contextMenu: null, - }; - - _handleCopy = (e, value) => { - e.stopPropagation(); - this.setState({ copyValue: value }, () => { - this._ref.select(); - document.execCommand("copy"); - this._handleHide(); - }); - }; - - _handleHide = (e) => { - this.setState({ contextMenu: null }); - }; - - _handleClick = (e, value) => { - e.stopPropagation(); - e.preventDefault(); - if (this.state.contextMenu === value) { - this._handleHide(); - } else { - this.setState({ contextMenu: value }); - } - }; - - _handleFollow = async (e, id) => { - e.stopPropagation(); - e.preventDefault(); - this._handleHide(); - await Actions.createSubscription({ - userId: id, - }); - }; - - checkStatus = ({ id }) => { - const { activeUsers } = this.props; - - return activeUsers && activeUsers.includes(id); - }; - - render() { - let following = this.props.viewer.following.map((relation) => { - let button = ( -
    this._handleClick(e, relation.id)}> - - {this.state.contextMenu === relation.id ? ( - this._handleClick(e, relation.id)} - > - this._handleFollow(e, relation.id), - }, - ], - ]} - /> - - ) : null} -
    - ); - return ( - - { - // this.props.onAction({ - // type: "NAVIGATE", - // value: "NAV_PROFILE", - // shallow: true, - // data: relation, - // }); - // }} - /> - - ); - }); - - let followers = this.props.viewer.followers.map((relation) => { - let button = ( -
    this._handleClick(e, relation.id)}> - - {this.state.contextMenu === relation.id ? ( - this._handleClick(e, relation.id)} - > - { - return user.id === relation.id; - }) - ? "Unfollow" - : "Follow", - onClick: (e) => this._handleFollow(e, relation.id), - }, - ], - ]} - /> - - ) : null} -
    - ); - return ( - - { - // this.props.onAction({ - // type: "NAVIGATE", - // value: "NAV_PROFILE", - // shallow: true, - // data: relation, - // }); - // }} - /> - - ); - }); - - let tab = this.props.page.params?.tab || "following"; - return ( - - - - - {tab === "following" ? ( - following && following.length ? ( - following - ) : ( - - - You can follow any user on the network to be updated on their new uploads and - collections. - - ) - ) : null} - {tab === "followers" ? ( - followers && followers.length ? ( - followers - ) : ( - - - You don't have any followers yet. - - ) - ) : null} - { - this._ref = c; - }} - value={this.state.copyValue} - tabIndex="-1" - css={STYLES_COPY_INPUT} - /> - - - ); - } -} diff --git a/scenes/SceneProfile.js b/scenes/SceneProfile.js index 4dd9fe29..40b246fe 100644 --- a/scenes/SceneProfile.js +++ b/scenes/SceneProfile.js @@ -147,36 +147,36 @@ export default class SceneProfile extends React.Component { render() { const viewer = this.props.viewer; let user = this.props.data; - if (!user) { - return ( - - - - -
    We were unable to locate that user profile
    -     -     -     - ); - } - if (!user.slates?.length) { - return ( - - - - -
    This user doesn't have any public content
    -     -     -     - ); - } + // if (!user) { + // return ( + // + // + // + // + //
    We were unable to locate that user profile
    + //     + //     + //     + // ); + // } + // if (!user.slates?.length) { + return ( + + + + +
    This user doesn't have any public content
    +     +     +     + ); + // } const isOwner = user.id === viewer?.id; let name = user.name || `@${user.username}`; let description, title;