- 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;