From 2bc7c100305d94727e1a9f67a5d44ee79c1ed476 Mon Sep 17 00:00:00 2001 From: Aminejv Date: Tue, 26 Oct 2021 17:17:58 +0100 Subject: [PATCH] feat(CollectionSharingModal): remove Share modal --- components/core/Application.js | 2 - .../components/ShareButton.js | 12 +- .../ShareModals/CollectionSharingModal.js | 155 --------------- .../core/ShareModals/ShareModalPrimitive.js | 185 ------------------ 4 files changed, 5 insertions(+), 349 deletions(-) delete mode 100644 components/core/ShareModals/CollectionSharingModal.js delete mode 100644 components/core/ShareModals/ShareModalPrimitive.js diff --git a/components/core/Application.js b/components/core/Application.js index 5ada0770..a0898379 100644 --- a/components/core/Application.js +++ b/components/core/Application.js @@ -51,7 +51,6 @@ import CTATransition from "~/components/core/CTATransition"; import { GlobalModal } from "~/components/system/components/GlobalModal"; import { OnboardingModal } from "~/components/core/OnboardingModal"; import { SearchModal } from "~/components/core/SearchModal"; -import { CollectionSharingModal } from "~/components/core/ShareModals/CollectionSharingModal"; import { Alert } from "~/components/core/Alert"; import { announcements } from "~/components/core/OnboardingModal"; import { Logo } from "~/common/logo"; @@ -519,7 +518,6 @@ export default class ApplicationPage extends React.Component { onAction={this._handleAction} isMobile={this.props.isMobile} /> - {/* {!this.state.loaded ? (
css` ${Styles.BUTTON_RESET}; @@ -28,15 +27,14 @@ const STYLES_BUTTON = (theme) => css` `; export default function ShareButton({ user, collection, preview, ...props }) { - const { openModal } = useCollectionSharingModal(); const handleOnClick = (e) => { e.preventDefault(); e.stopPropagation(); - openModal({ - user, - collection, - preview, - }); + // openModal({ + // user, + // collection, + // preview, + // }); }; return ( diff --git a/components/core/ShareModals/CollectionSharingModal.js b/components/core/ShareModals/CollectionSharingModal.js deleted file mode 100644 index a1f97089..00000000 --- a/components/core/ShareModals/CollectionSharingModal.js +++ /dev/null @@ -1,155 +0,0 @@ -import * as React from "react"; -import * as Events from "~/common/custom-events"; -import * as Styles from "~/common/styles"; -import * as SVG from "~/common/svg"; -import * as Utilities from "~/common/utilities"; - -import { css } from "@emotion/react"; -import { P3 } from "~/components/system/components/Typography"; -import { Divider } from "~/components/system"; -import { motion } from "framer-motion"; -import { useEventListener, useTimeout } from "~/common/hooks"; -import { ShareModalPrimitive } from "~/components/core/ShareModals/ShareModalPrimitive"; - -const STYLES_COPY_ACTIONS_WRAPPER = css` - border-radius: 12px; - overflow: hidden; -`; - -const STYLES_COPY_BUTTON = (theme) => css` - ${Styles.BUTTON_RESET}; - background-color: ${theme.system.white}; - width: 100%; - padding: 9px 12px 11px; -`; - -const formatDataSafely = ({ collection, user }) => { - if (typeof window === "undefined" || !collection || !user) return {}; - const rootUrl = window?.location?.origin; - return { - id: collection.id, - title: collection?.name || collection?.slatename, - link: `${rootUrl}/${user.username}/${collection.slatename}`, - }; -}; - -export const CollectionSharingModal = () => { - const [state, handlers] = useModalState(); - const { open, user, collection, view, preview } = state; - const { closeModal, changeView, handleModalVisibility } = handlers; - - const { id, title, link } = React.useMemo(() => formatDataSafely({ collection, user }), [ - user, - collection, - ]); - - useEventListener("collection-sharing-modal", handleModalVisibility, []); - - const handleTwitterSharing = () => - window.open( - `https://twitter.com/intent/tweet?text=${title} by ${user.username} on Slate%0D&url=${link}`, - "_blank" - ); - - const handleEmailSharing = () => { - window.open(`mailto: ?subject=${title} by ${user.username} on Slate&body=${link}`, "_b"); - }; - - const handleLinkCopy = () => (Utilities.copyToClipboard(link), changeView("LINK_COPIED")); - const handleIdCopy = () => (Utilities.copyToClipboard(id), changeView("ID_COPIED")); - - return ( - - {view === "initial" ? ( -
- - - -
- ) : ( - - {view === "LINK_COPIED" ? "Link copied to clipboard" : "ID copied to clipboard"} - - )} - - ); -}; - -const LinkCopiedScene = ({ closeModal, children }) => { - useTimeout(closeModal, 3000); - return ( - - - - {children} - - - ); -}; - -const useModalState = () => { - const [state, setState] = React.useState({ - open: false, - // NOTE(amine): INITIAL || LINK_COPIED || ID_COPIED - view: "initial", - user: {}, - data: {}, - preview: {}, - }); - - const handlers = React.useMemo( - () => ({ - closeModal: () => setState((prev) => ({ ...prev, open: false })), - changeView: (view) => setState((prev) => ({ ...prev, view })), - handleModalVisibility: (e) => - setState(() => ({ - view: "initial", - open: e.detail.open, - user: e.detail.user, - collection: e.detail.collection, - preview: e.detail.preview, - })), - }), - [] - ); - return [state, handlers]; -}; - -export const useCollectionSharingModal = () => { - const openModal = ({ user, collection, preview }) => - Events.dispatchCustomEvent({ - name: "collection-sharing-modal", - detail: { open: true, user, collection, preview }, - }); - const closeModal = () => - Events.dispatchCustomEvent({ - name: "collection-sharing-modal", - detail: { open: false }, - }); - return { openModal, closeModal }; -}; diff --git a/components/core/ShareModals/ShareModalPrimitive.js b/components/core/ShareModals/ShareModalPrimitive.js deleted file mode 100644 index e9585b10..00000000 --- a/components/core/ShareModals/ShareModalPrimitive.js +++ /dev/null @@ -1,185 +0,0 @@ -import * as React from "react"; -import * as Styles from "~/common/styles"; -import * as SVG from "~/common/svg"; -import * as Constants from "~/common/constants"; - -import { css } from "@emotion/react"; -import { H5, P3 } from "~/components/system/components/Typography"; -import { AnimatePresence, motion } from "framer-motion"; -import { useEscapeKey, useLockScroll } from "~/common/hooks"; -import { Preview } from "~/components/core/CollectionPreviewBlock/components"; -import { Symbol } from "~/common/logo"; - -const STYLES_OVERLAY = (theme) => css` - position: fixed; - top: 0; - left: 0; - height: 100vh; - width: 100%; - background-color: ${theme.semantic.bgBlurBlackTRN}; - ${Styles.CONTAINER_CENTERED}; - z-index: ${theme.zindex.modal}; -`; - -const STYLES_MODAL_WRAPPER = (theme) => css` - min-width: 400px; - padding: 24px; - border: 1px solid ${theme.semantic.bgGrayLight}; - border-radius: 16px; - background: ${theme.system.white}; - @supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) { - -webkit-backdrop-filter: blur(75px); - backdrop-filter: blur(75px); - background: linear-gradient( - 120.84deg, - rgba(255, 255, 255, 0.85) 5.24%, - rgba(255, 255, 255, 0.544) 98.51% - ); - } - @media (max-width: ${theme.sizes.mobile}px) { - min-width: auto; - width: calc(100% - 32px); - } -`; - -const STYLES_PROFILE = css` - display: block; - ${Styles.HORIZONTAL_CONTAINER}; - align-items: flex-start; -`; - -const STYLES_DISMISS_BUTTON = (theme) => css` - ${Styles.BUTTON_RESET}; - color: ${theme.semantic.textGray}; -`; - -// NOTE(amine): social buttons styles -const STYLES_SOCIAL_BUTTON = (theme) => css` - ${Styles.VERTICAL_CONTAINER_CENTERED} - padding: 16px; - border-radius: 12px; - box-shadow: ${theme.shadow.lightLarge}; -`; - -const STYLES_TWITTER_BUTTON = css` - background-color: #58aee7; -`; - -const STYLES_EMAIL_BUTTON = (theme) => css` - background-color: ${theme.system.white}; -`; - -const STYLES_TEXT_CENTER = css` - text-align: center; -`; - -const STYLES_PREVIEW = (theme) => css` - width: 48px; - max-width: 48px; - height: 48px; - border-radius: 12px; - background-color: ${theme.semantic.bgLight}; - ${Styles.CONTAINER_CENTERED} -`; - -const EmptyFallbackPreview = () => { - return ( -
- -
- ); -}; - -// NOTE(amine): This modal will be a building block for both Object and Collection sharing modals -export const ShareModalPrimitive = ({ - isOpen, - closeModal, - title, - description, - includeSocialSharing = true, - onTwitterSharing, - onEmailSharing, - preview, - children, -}) => { - useEscapeKey(closeModal); - useLockScroll({ lock: isOpen }); - - const handleModalClick = (e) => (e.preventDefault(), e.stopPropagation()); - - return ( - - {isOpen ? ( - - - - {/**TODO(amine): add dynamic preview to support collection and object previews */} - -
-
- {title} -
- - {description} - -
- - - - {includeSocialSharing && ( -
- - - -
- )} -
{children}
- - - ) : null} - - ); -};