|
| 1 | +import { MouseEventHandler, useCallback } from 'react' |
| 2 | + |
| 3 | +import { |
| 4 | + Nullable, |
| 5 | + useTwitterButtonStatus, |
| 6 | + CommonState, |
| 7 | + cacheUsersActions, |
| 8 | + cacheUsersSelectors |
| 9 | +} from '@audius/common' |
| 10 | +import { HarmonyButton, HarmonyButtonProps } from '@audius/stems' |
| 11 | +import { useDispatch, useSelector } from 'react-redux' |
| 12 | + |
| 13 | +import { ReactComponent as IconTwitterBird } from 'assets/img/iconTwitterBird.svg' |
| 14 | +import { useRecord, TrackEvent } from 'common/store/analytics/actions' |
| 15 | +import { openTwitterLink } from 'utils/tweet' |
| 16 | + |
| 17 | +const { fetchUserSocials } = cacheUsersActions |
| 18 | +const { getUser } = cacheUsersSelectors |
| 19 | + |
| 20 | +const messages = { |
| 21 | + share: 'Share to Twitter' |
| 22 | +} |
| 23 | + |
| 24 | +type StaticTwitterProps = { |
| 25 | + type: 'static' |
| 26 | + shareText: string |
| 27 | + analytics?: TrackEvent |
| 28 | +} |
| 29 | + |
| 30 | +type DynamicTwitterProps = { |
| 31 | + type: 'dynamic' |
| 32 | + handle: string |
| 33 | + name?: string |
| 34 | + additionalHandle?: string |
| 35 | + shareData: ( |
| 36 | + twitterHandle: string, |
| 37 | + otherTwitterHandle?: Nullable<string> |
| 38 | + ) => Nullable<{ shareText: string; analytics: TrackEvent }> |
| 39 | +} |
| 40 | + |
| 41 | +type TwitterShareButtonProps = { |
| 42 | + url?: string |
| 43 | + hideText?: boolean |
| 44 | + fullWidth?: HarmonyButtonProps['fullWidth'] |
| 45 | + size?: HarmonyButtonProps['size'] |
| 46 | +} & (StaticTwitterProps | DynamicTwitterProps) |
| 47 | + |
| 48 | +export const TwitterShareButton = (props: TwitterShareButtonProps) => { |
| 49 | + const { url = null, fullWidth, size, hideText, ...other } = props |
| 50 | + const record = useRecord() |
| 51 | + const dispatch = useDispatch() |
| 52 | + |
| 53 | + const user = useSelector((state: CommonState) => |
| 54 | + getUser(state, { handle: 'handle' in other ? other.handle : undefined }) |
| 55 | + ) |
| 56 | + |
| 57 | + const additionalUser = useSelector((state: CommonState) => |
| 58 | + getUser(state, { |
| 59 | + handle: 'additionalHandle' in other ? other.additionalHandle : undefined |
| 60 | + }) |
| 61 | + ) |
| 62 | + |
| 63 | + const { |
| 64 | + userName, |
| 65 | + additionalUserName, |
| 66 | + shareTwitterStatus, |
| 67 | + twitterHandle, |
| 68 | + additionalTwitterHandle, |
| 69 | + setLoading, |
| 70 | + setIdle |
| 71 | + } = useTwitterButtonStatus(user, additionalUser) |
| 72 | + |
| 73 | + const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback( |
| 74 | + (e) => { |
| 75 | + e.stopPropagation() |
| 76 | + if (other.type === 'static') { |
| 77 | + openTwitterLink(url, other.shareText) |
| 78 | + if (other.analytics) { |
| 79 | + record(other.analytics) |
| 80 | + } |
| 81 | + } |
| 82 | + if (other.type === 'dynamic') { |
| 83 | + dispatch(fetchUserSocials(other.handle)) |
| 84 | + if (other.additionalHandle) { |
| 85 | + dispatch(fetchUserSocials(other.additionalHandle)) |
| 86 | + } |
| 87 | + setLoading() |
| 88 | + } |
| 89 | + }, |
| 90 | + [url, other, dispatch, record, setLoading] |
| 91 | + ) |
| 92 | + |
| 93 | + if ( |
| 94 | + other.type === 'dynamic' && |
| 95 | + shareTwitterStatus === 'success' && |
| 96 | + userName && |
| 97 | + (other.additionalHandle ? additionalUserName : true) |
| 98 | + ) { |
| 99 | + const handle = twitterHandle ? `@${twitterHandle}` : userName |
| 100 | + |
| 101 | + const otherHandle = other.additionalHandle |
| 102 | + ? additionalTwitterHandle |
| 103 | + ? `@${additionalTwitterHandle}` |
| 104 | + : additionalUserName |
| 105 | + : null |
| 106 | + |
| 107 | + const twitterData = other.shareData(handle, otherHandle) |
| 108 | + if (twitterData) { |
| 109 | + const { shareText, analytics } = twitterData |
| 110 | + openTwitterLink(url, shareText) |
| 111 | + if (analytics) { |
| 112 | + record(analytics) |
| 113 | + } |
| 114 | + setIdle() |
| 115 | + } |
| 116 | + } |
| 117 | + |
| 118 | + const colorOverride: Partial<HarmonyButtonProps> = { |
| 119 | + color: 'staticTwitterBlue' |
| 120 | + } |
| 121 | + |
| 122 | + return ( |
| 123 | + <HarmonyButton |
| 124 | + fullWidth={fullWidth} |
| 125 | + text={hideText ? null : messages.share} |
| 126 | + iconLeft={IconTwitterBird} |
| 127 | + size={size} |
| 128 | + {...colorOverride} |
| 129 | + onClick={handleClick} |
| 130 | + /> |
| 131 | + ) |
| 132 | +} |
0 commit comments