Skip to content
Permalink
Browse files

(Chore) 1236 fixes after pr merged for master (#1523)

* refactor: create useNativeSharing hook and move related functionality there

* refactor: remove unnecessary alert. log data fro useEffect instead on fn component body

* fix: change the 'text' property to 'message' to make share object be compatible with react-native/mobile browser share functionality

* fix: fix share fn tests

* fix: fix tests for TabsView component
  • Loading branch information
yaroslav-fedyshyn-nordwhale committed Mar 24, 2020
1 parent eb2915f commit 7ed0d72376718e04351a732b4b0863a99d514afa
@@ -1,6 +1,8 @@
// @flow
import React from 'react'
import { isMobile } from 'mobile-device-detect'
import React, { useCallback, useEffect } from 'react'
import { Share } from 'react-native'
import logger from '../../../lib/logger/pino-logger'
import useNativeSharing from '../../../lib/hooks/useNativeSharing'
import { useErrorDialog } from '../../../lib/undux/utils/dialog'
import CustomButton from './CustomButton'
import CopyButton from './CopyButton'
@@ -12,21 +14,27 @@ type ShareButtonProps = {
buttonProps: any,
}

const log = logger.child({ from: 'ShareButton' })

const ShareButton = ({ share, onPressDone, actionText, ...buttonProps }: ShareButtonProps) => {
const [showErrorDialog] = useErrorDialog()
const { canShare } = useNativeSharing()

useEffect(() => {
log.info('getPaymentLink', { share })
}, [])

console.info('getPaymentLink', { share })
const shareAction = async () => {
const shareAction = useCallback(async () => {
try {
await navigator.share(share)
await Share.share(share)
} catch (e) {
if (e.name !== 'AbortError') {
showErrorDialog('Sorry, there was an error sharing you link. Please try again later.')
}
}
}
}, [showErrorDialog])

if (isMobile && navigator.share) {
if (canShare) {
return (
<CustomButton onPress={shareAction} {...buttonProps}>
{actionText}
@@ -1,14 +1,13 @@
// @flow
import React, { useState } from 'react'
import React, { useCallback, useMemo, useState } from 'react'
import { View } from 'react-native'
import { isMobile } from 'mobile-device-detect'
import useNativeSharing from '../../../lib/hooks/useNativeSharing'
import CustomButton from '../buttons/CustomButton'
import ShareButton from '../buttons/ShareButton'
import logger from '../../../lib/logger/pino-logger'
import normalize from '../../../lib/utils/normalizeText'
import userStorage from '../../../lib/gundb/UserStorage'
import goodWallet from '../../../lib/wallet/GoodWallet'
import { generateSendShareObject, generateSendShareText, generateShareLink } from '../../../lib/share'
import { useErrorDialog } from '../../../lib/undux/utils/dialog'
import { withStyles } from '../../../lib/styles'
import Text from '../view/Text'
@@ -21,13 +20,14 @@ const ModalActionsByFeedType = ({ theme, styles, item, handleModalClose, navigat
const [showErrorDialog] = useErrorDialog()
const [state, setState] = useState({})
const store = GDStore.useStore()
const { canShare, generateSendShareObject, generateSendShareText, generateShareLink } = useNativeSharing()
const currentUserName = store.get('profile').fullName

const fireEventAnalytics = actionType => {
fireEvent(CLICK_BTN_CARD_ACTION, { cardId: item.id, actionType })
}

const cancelPayment = async () => {
const cancelPayment = useCallback(async () => {
log.info({ item, action: 'cancelPayment' })
fireEventAnalytics('cancelPayment')
if (item.status === 'pending') {
@@ -55,17 +55,17 @@ const ModalActionsByFeedType = ({ theme, styles, item, handleModalClose, navigat
}
}
handleModalClose()
}
}, [showErrorDialog, setState, state, handleModalClose])

const getPaymentLink = () => {
const getPaymentLink = useMemo(() => {
const url = generateShareLink('send', {
paymentCode: item.data.withdrawCode,
reason: item.data.message,
})

let result

if (isMobile && navigator.share) {
if (canShare) {
result = generateSendShareObject(url, item.data.amount, item.data.endpoint.fullName, currentUserName)
} else {
result = {
@@ -76,40 +76,43 @@ const ModalActionsByFeedType = ({ theme, styles, item, handleModalClose, navigat
fireEventAnalytics('Sharelink')

return result
}
}, [generateShareLink, item, canShare, generateSendShareText, generateSendShareObject])

const readMore = () => {
const readMore = useCallback(() => {
fireEventAnalytics('readMore')
log.info({ item, action: 'readMore' })
handleModalClose()
}
const shareMessage = () => {
}, [handleModalClose, item])

const shareMessage = useCallback(() => {
fireEventAnalytics('shareMessage')
log.info({ item, action: 'shareMessage' })
handleModalClose()
}
const invitePeople = () => {
}, [handleModalClose, item])

const invitePeople = useCallback(() => {
fireEventAnalytics('Rewards')
navigation.navigate('Rewards')
handleModalClose()
}
}, [handleModalClose, navigation])

const Marketplace = () => {
const Marketplace = useCallback(() => {
fireEventAnalytics('Marketplace')
navigation.navigate('Marketplace')
handleModalClose()
}
const backupPage = () => {
}, [handleModalClose, navigation])

const backupPage = useCallback(() => {
fireEventAnalytics('BackupWallet')
navigation.navigate('BackupWallet')
handleModalClose()
}
}, [handleModalClose, navigation])

const goToClaimPage = () => {
const goToClaimPage = useCallback(() => {
fireEventAnalytics('Claim')
navigation.navigate('Claim')
handleModalClose()
}
}, [handleModalClose, navigation])

switch (item.displayType) {
case 'sendpending':
@@ -127,7 +130,7 @@ const ModalActionsByFeedType = ({ theme, styles, item, handleModalClose, navigat
Cancel link
</CustomButton>
<ShareButton
share={getPaymentLink()}
share={getPaymentLink}
actionText="Share link"
mode="outlined"
style={[styles.rightButton, styles.shareButton]}
@@ -224,7 +227,7 @@ const ModalActionsByFeedType = ({ theme, styles, item, handleModalClose, navigat
<View style={styles.rightButtonContainer}>
<CustomButton mode="contained" style={styles.button} onPress={goToClaimPage}>
<Text fontSize={14} color="#FFFFFF" fontFamily="Roboto">
{'CLAIM G$'}
CLAIM G$
</Text>
</CustomButton>
</View>
@@ -237,7 +240,7 @@ const ModalActionsByFeedType = ({ theme, styles, item, handleModalClose, navigat
<View style={styles.rightButtonContainer}>
<CustomButton mode="contained" style={styles.button} onPress={goToClaimPage}>
<Text fontSize={14} color="#FFFFFF" fontFamily="Roboto">
{'CLAIM NOW'}
CLAIM NOW
</Text>
</CustomButton>
</View>
@@ -1,9 +1,8 @@
// @flow
import React, { useMemo } from 'react'
import { View } from 'react-native'
import { isMobile } from 'mobile-device-detect'
import React, { useCallback, useMemo } from 'react'
import { Share, View } from 'react-native'
import useNativeSharing from '../../lib/hooks/useNativeSharing'
import { fireEvent } from '../../lib/analytics/analytics'
import { generateCode, generateReceiveShareObject, generateShareLink } from '../../lib/share'
import GDStore from '../../lib/undux/GDStore'
import { useErrorDialog } from '../../lib/undux/utils/dialog'
import goodWallet from '../../lib/wallet/GoodWallet'
@@ -18,32 +17,38 @@ export type ReceiveProps = {
styles: any,
}

const RECEIVE_TITLE = 'Receive G$'
const SHARE_TEXT = 'Share your wallet link'
const Receive = ({ screenProps, styles, ...props }: ReceiveProps) => {

const Receive = ({ screenProps, styles }: ReceiveProps) => {
const profile = GDStore.useStore().get('profile')
const { account, networkId } = goodWallet
const [showErrorDialog] = useErrorDialog()
const { canShare, generateCode, generateReceiveShareObject, generateShareLink } = useNativeSharing()
const amount = 0
const reason = ''
const codeObj = useMemo(() => generateCode(account, networkId, amount, reason), [account, networkId, amount, reason])
const share = useMemo(() => generateReceiveShareObject(codeObj, amount, '', profile.fullName), [codeObj])
const shareLink = useMemo(() => generateShareLink('receive', codeObj), [codeObj])

const shareAction = async () => {
const shareAction = useCallback(async () => {
try {
await navigator.share(share)
fireEvent('RECEIVE_DONE', { type: 'wallet' })
await Share.share(share)
} catch (e) {
if (e.name !== 'AbortError') {
showErrorDialog(e)
}
}
}
}, [showErrorDialog, share])

const onPressScanQRButton = useCallback(() => screenProps.push('ReceiveByQR'), [screenProps])

const onPressCopyButton = () => fireEvent('RECEIVE_DONE', { type: 'wallet' })

return (
<Wrapper>
<TopBar hideBalance={false} push={screenProps.push}>
<ScanQRButton onPress={() => screenProps.push('ReceiveByQR')} />
<ScanQRButton onPress={onPressScanQRButton} />
</TopBar>
<Section grow>
<Section.Stack grow={3} justifyContent="space-around" alignItems="center">
@@ -66,22 +71,13 @@ const Receive = ({ screenProps, styles, ...props }: ReceiveProps) => {
Request specific amount
</PushButton>
<View style={styles.space} />
{isMobile && navigator.share ? (
<CustomButton
onPress={() => {
fireEvent('RECEIVE_DONE', { type: 'wallet' })
shareAction()
}}
>
{SHARE_TEXT}
</CustomButton>
{canShare ? (
<CustomButton onPress={shareAction}>{SHARE_TEXT}</CustomButton>
) : (
<CopyButton
style={styles.shareButton}
toCopy={shareLink}
onPress={() => {
fireEvent('RECEIVE_DONE', { type: 'wallet' })
}}
onPress={onPressCopyButton}
onPressDone={screenProps.goToRoot}
>
{SHARE_TEXT}
@@ -94,7 +90,7 @@ const Receive = ({ screenProps, styles, ...props }: ReceiveProps) => {
}

Receive.navigationOptions = {
title: RECEIVE_TITLE,
title: 'Receive G$',
}

const getStylesFromProps = ({ theme }) => ({
@@ -1,17 +1,16 @@
// @flow
import React, { useMemo } from 'react'
import { isMobile } from '../../lib/utils/platform'
import canShare from '../../lib/utils/canShare'
import React, { useCallback, useMemo } from 'react'
import { Share } from 'react-native'
import { fireEvent } from '../../lib/analytics/analytics'
import Clipboard from '../../lib/utils/Clipboard'
import GDStore from '../../lib/undux/GDStore'
import { generateReceiveShareObject, generateReceiveShareText, generateShareLink } from '../../lib/share'
import BigGoodDollar from '../common/view/BigGoodDollar'
import QRCode from '../common/view/QrCode/QRCode'
import Section from '../common/layout/Section'
import Wrapper from '../common/layout/Wrapper'
import ShareLinkReceiveAnimationButton from '../common/animations/ShareLinkReceiveButton/ShareLinkReceiveButton'
import TopBar from '../common/view/TopBar'
import useNativeSharing from '../../lib/hooks/useNativeSharing'

import { useScreenState } from '../appNavigation/stackNavigation'
import { withStyles } from '../../lib/styles'
@@ -24,37 +23,46 @@ export type ReceiveProps = {
styles: any,
}

const ReceiveConfirmation = ({ screenProps, styles, ...props }: ReceiveProps) => {
const ReceiveConfirmation = ({ screenProps, styles }: ReceiveProps) => {
const profile = GDStore.useStore().get('profile')
const [showErrorDialog] = useErrorDialog()
const [screenState] = useScreenState(screenProps)
const { canShare, generateReceiveShareObject, generateReceiveShareText, generateShareLink } = useNativeSharing()
const { amount, code, reason, counterPartyDisplayName } = screenState

const share = useMemo(() => {
if (canShare) {
return generateReceiveShareObject(code, amount, counterPartyDisplayName, profile.fullName)
}
return {
url: generateReceiveShareText(code, amount, counterPartyDisplayName, profile.fullName),
}
}, [code])
return generateReceiveShareText(code, amount, counterPartyDisplayName, profile.fullName)
}, [code, canShare, generateReceiveShareObject, generateReceiveShareText])

const urlForQR = useMemo(() => {
return generateShareLink('receive', code)
}, [code])
}, [code, generateShareLink])

const shareAction = async () => {
if (isMobile && navigator.share) {
try {
await navigator.share(share)
} catch (e) {
if (e.name !== 'AbortError') {
showErrorDialog('Sorry, there was an error sharing you link. Please try again later.')
}
}
const shareActionPressHandler = useCallback(async () => {
let executeShare

if (canShare) {
executeShare = Share.share
} else {
Clipboard.setString(share)
executeShare = Clipboard.setString
}
}

try {
await executeShare(share)
} catch (e) {
if (e.name !== 'AbortError') {
showErrorDialog('Sorry, there was an error sharing you link. Please try again later.')
}
}
}, [canShare, showErrorDialog])

const shareActionDonePressHandler = useCallback(() => {
fireEvent('RECEIVE_DONE', { type: 'link' })
screenProps.goToRoot()
}, [screenProps])

return (
<Wrapper>
@@ -79,11 +87,8 @@ const ReceiveConfirmation = ({ screenProps, styles, ...props }: ReceiveProps) =>
</Section.Stack>
<Section.Stack>
<ShareLinkReceiveAnimationButton
onPress={shareAction}
onPressDone={() => {
fireEvent('RECEIVE_DONE', { type: 'link' })
screenProps.goToRoot()
}}
onPress={shareActionPressHandler}
onPressDone={shareActionDonePressHandler}
/>
</Section.Stack>
</Section>

0 comments on commit 7ed0d72

Please sign in to comment.
You can’t perform that action at this time.