diff --git a/components/core/Profile.js b/components/core/Profile.js index fe7d6e32..92bf316e 100644 --- a/components/core/Profile.js +++ b/components/core/Profile.js @@ -3,25 +3,16 @@ import * as Constants from "~/common/constants"; import * as Strings from "~/common/strings"; import * as SVG from "~/common/svg"; import * as Actions from "~/common/actions"; -import * as Utilities from "~/common/utilities"; import * as Events from "~/common/custom-events"; -import * as Window from "~/common/window"; import * as Styles from "~/common/styles"; -import { useState } from "react"; import { Link } from "~/components/core/Link"; -import { GlobalCarousel } from "~/components/system/components/GlobalCarousel"; import { css } from "@emotion/react"; import { ButtonPrimary, ButtonSecondary } from "~/components/system/components/Buttons"; -import { TabGroup, SecondaryTabGroup } from "~/components/core/TabGroup"; -import { Boundary } from "~/components/system/components/fragments/Boundary"; -import { PopoverNavigation } from "~/components/system/components/PopoverNavigation"; -import { FileTypeGroup } from "~/components/core/FileTypeIcon"; +import { SecondaryTabGroup } from "~/components/core/TabGroup"; import { LoaderSpinner } from "~/components/system/components/Loaders"; import ProcessedText from "~/components/core/ProcessedText"; -import SlatePreviewBlocks from "~/components/core/SlatePreviewBlock"; -import DataView from "~/components/core/DataView"; import EmptyState from "~/components/core/EmptyState"; import ProfilePhoto from "~/components/core/ProfilePhoto"; import CollectionPreviewBlock from "~/components/core/CollectionPreviewBlock"; @@ -139,16 +130,6 @@ const STYLES_STAT = css` flex-shrink: 0; `; -const STYLES_EXPLORE = css` - font-size: ${Constants.typescale.lvl1}; - font-family: ${Constants.font.text}; - font-weight: 400; - margin: 64px auto 64px auto; - width: 120px; - padding-top: 16px; - border-top: 1px solid ${Constants.system.black}; -`; - const STYLES_BUTTON = css` margin-bottom: 32px; @@ -157,164 +138,12 @@ const STYLES_BUTTON = css` } `; -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_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_DIRECTORY_PROFILE_IMAGE = css` - background-color: ${Constants.semantic.bgLight}; - background-size: cover; - background-position: 50% 50%; - height: 24px; - width: 24px; - margin-right: 16px; - border-radius: 4px; - position: relative; -`; - -const STYLES_DIRECTORY_STATUS_INDICATOR = css` - position: absolute; - bottom: 0; - right: 0; - width: 7px; - height: 7px; - border-radius: 50%; - border: 1.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_DIRECTORY_NAME = css` - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -`; - // const STYLES_COPY_INPUT = css` // pointer-events: none; // position: absolute; // opacity: 0; // `; -function UserEntry({ user, button, onClick, message, checkStatus }) { - const isOnline = checkStatus({ id: user.id }); - - return ( -
-
-
- - {isOnline &&
} -
- - {user.data.name || `@${user.username}`} - {message ? {message} : null} - -
- {button} -
- ); -} - -function FilesPage({ - library, - user, - isOwner, - isMobile, - viewer, - onAction, - resources, - page, - tab = "grid", -}) { - return ( -
- {isMobile ? null : ( - , - value: { tab: "grid", subtab: "files" }, - }, - { - title: , - value: { tab: "table", subtab: "files" }, - }, - ]} - value={tab} - onAction={onAction} - style={{ margin: "0 0 24px 0" }} - /> - )} - {library.length ? ( - - ) : ( - - -
This user does not have any public files yet
-
- )} -
- ); -} - function CollectionsPage({ user, viewer, @@ -339,8 +168,8 @@ function CollectionsPage({
{ - e.stopPropagation(); - e.preventDefault(); - if (!id || selectedUser === id) { - setSelectedUser(null); - } else { - setSelectedUser(id); - } - }; - const followUser = async (e, id) => { - e.stopPropagation(); - e.preventDefault(); - selectUser(e, null); - if (!viewer) { - onLoginModal(); - return; - } - await Actions.createSubscription({ - userId: id, - }); - }; - - let peers = tab === "following" ? following : followers; - peers = peers.map((relation) => { - const following = !!( - viewer && - viewer.following.some((subscription) => { - return subscription.id === relation.id; - }).length - ); - let button = - !viewer || relation.id !== viewer?.id ? ( -
selectUser(e, relation.id)}> - - {selectedUser === relation.id ? ( - selectUser(e)} - > - followUser(e, relation.id), - }, - ], - ]} - /> - - ) : null} -
- ) : null; - - return ( - - - - ); - }); - - return ( -
- -
- {peers?.length ? ( - peers - ) : ( - - {fetched ? ( - - - {tab === "following" - ? `This user is not following anyone yet` - : `This user does not have any followers yet`} - - ) : ( - - )} - - )} -
-
- ); -} - export default class Profile extends React.Component { _ref = null; state = { contextMenu: null, subscriptions: [], - followers: [], - following: [], isFollowing: this.props.external || this.props.user.id === this.props.viewer?.id ? false @@ -506,10 +222,6 @@ export default class Profile extends React.Component { index: -1, }; - componentDidMount = () => { - this.fetchSocial(); - }; - componentDidUpdate = (prevProps) => { if (!this.state.fetched && this.props.page.params !== prevProps.page.params) { this.fetchSocial(); @@ -518,12 +230,9 @@ export default class Profile extends React.Component { fetchSocial = async () => { if (this.state.fetched) return; - if (this.props.page.params?.subtab !== "peers" && this.props.page.params?.tab !== "subscribed") - return; - let following, followers, subscriptions; + if (this.props.page.params?.tab !== "subscribed") return; + let subscriptions; if (this.props.user.id === this.props.viewer?.id) { - following = this.props.viewer?.following; - followers = this.props.viewer?.followers; subscriptions = this.props.viewer?.subscriptions; } else { const query = { id: this.props.user.id }; @@ -531,19 +240,15 @@ export default class Profile extends React.Component { if (Events.hasError(response)) { return; } - following = response.following; - followers = response.followers; subscriptions = response.subscriptions; } this.setState({ - following: following, - followers: followers, subscriptions: subscriptions, fetched: true, }); }; - _handleHide = (e) => { + _handleHide = () => { this.setState({ contextMenu: null }); }; @@ -582,33 +287,14 @@ export default class Profile extends React.Component { }; render() { - let subtab = this.props.page.params?.subtab - ? this.props.page.params?.subtab - : this.props.page.params?.cid - ? "files" - : "collections"; let tab = this.props.page.params?.tab; - let library = this.props.user.library; - let isOwner = this.props.isOwner; - let user = this.props.user; + let { user, isOwner } = this.props; + let { fileCount } = user; const showStatusIndicator = this.props.isAuthenticated; return (
- this.setState({ index })} - />
@@ -650,7 +336,7 @@ export default class Profile extends React.Component {
- {library.length}{" "} + {fileCount}{" "} Files
@@ -665,39 +351,12 @@ export default class Profile extends React.Component {
- - {subtab === "files" ? ( - - ) : null} - {subtab === "collections" ? ( - - ) : null} - {subtab === "peers" ? ( - - ) : null}
);