-
-
Notifications
You must be signed in to change notification settings - Fork 142
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
AddNotes: Add notes after payment #1447
Changes from 2 commits
3cb9562
93ff868
1eae97c
65e89c1
f9eb5a6
6f87432
45294d4
9f5c2f5
c83530a
da0b5e3
bb18fbe
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
import * as React from 'react'; | ||
import { View, TextInput } from 'react-native'; | ||
import EncryptedStorage from 'react-native-encrypted-storage'; | ||
|
||
import Header from '../components/Header'; | ||
import Screen from '../components/Screen'; | ||
import Button from '../components/Button'; | ||
|
||
import { themeColor } from '../utils/ThemeUtils'; | ||
|
||
interface AddNotesProps { | ||
navigation: any; | ||
} | ||
interface AddNotesState { | ||
notes?: string; | ||
payment_hash?: string; | ||
txid?: string; | ||
} | ||
|
||
export default class AddNotes extends React.Component< | ||
AddNotesProps, | ||
AddNotesState | ||
> { | ||
constructor(props: any) { | ||
super(props); | ||
const payment_hash: string = this.props.navigation.getParam( | ||
'payment_hash', | ||
null | ||
); | ||
const txid: string = this.props.navigation.getParam('txid', null); | ||
|
||
this.state = { | ||
notes: '', | ||
payment_hash, | ||
txid | ||
}; | ||
} | ||
async componentDidMount() { | ||
const key: any = this.state.txid || this.state.payment_hash; | ||
const storedNotes = await EncryptedStorage.getItem(key); | ||
if (storedNotes) { | ||
this.setState({ notes: storedNotes }); | ||
} | ||
} | ||
|
||
render() { | ||
const { navigation } = this.props; | ||
const { payment_hash, txid } = this.state; | ||
const { notes } = this.state; | ||
return ( | ||
<Screen> | ||
<Header | ||
leftComponent="Back" | ||
centerComponent={{ | ||
text: 'Add a note', | ||
style: { | ||
color: themeColor('text'), | ||
fontFamily: 'Lato-Regular', | ||
fontSize: 20 | ||
} | ||
}} | ||
navigation={navigation} | ||
/> | ||
<View style={{ padding: 20 }}> | ||
<TextInput | ||
onChangeText={(text: string) => { | ||
this.setState({ notes: text }); | ||
}} | ||
multiline | ||
numberOfLines={0} | ||
style={{ fontSize: 20 }} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. should also have |
||
value={notes} | ||
/> | ||
</View> | ||
<Button | ||
onPress={async () => { | ||
navigation.navigate('Wallet'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. instead of navigating back to the wallet it should navigate back to the previous screen There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ohh I was also thinking to do it, will do it |
||
const key: any = payment_hash || txid; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. let's make the key prefixed with |
||
await EncryptedStorage.setItem(key, notes); | ||
}} | ||
containerStyle={{ position: 'absolute', bottom: 40 }} | ||
buttonStyle={{ padding: 15 }} | ||
title="add note" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. use a locale for this string too |
||
/> | ||
</Screen> | ||
); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,6 @@ | ||
import * as React from 'react'; | ||
import { StyleSheet, ScrollView, View } from 'react-native'; | ||
import EncryptedStorage from 'react-native-encrypted-storage'; | ||
import { StyleSheet, ScrollView, View, TouchableOpacity } from 'react-native'; | ||
import { Icon, ListItem } from 'react-native-elements'; | ||
import { inject, observer } from 'mobx-react'; | ||
|
||
|
@@ -16,6 +17,8 @@ import LnurlPayStore from '../stores/LnurlPayStore'; | |
|
||
import LnurlPayHistorical from './LnurlPay/Historical'; | ||
|
||
import EditNotes from '../assets/images/SVG/Pen.svg'; | ||
|
||
interface PaymentProps { | ||
navigation: any; | ||
LnurlPayStore: LnurlPayStore; | ||
|
@@ -25,7 +28,8 @@ interface PaymentProps { | |
@observer | ||
export default class PaymentView extends React.Component<PaymentProps> { | ||
state = { | ||
lnurlpaytx: null | ||
lnurlpaytx: null, | ||
storedNotes: '' | ||
}; | ||
|
||
async componentDidMount() { | ||
|
@@ -35,10 +39,18 @@ export default class PaymentView extends React.Component<PaymentProps> { | |
if (lnurlpaytx) { | ||
this.setState({ lnurlpaytx }); | ||
} | ||
EncryptedStorage.getItem(payment.payment_hash) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. make sure you update the key format here too |
||
.then((storedNotes) => { | ||
this.setState({ storedNotes }); | ||
}) | ||
.catch((error) => { | ||
console.error('Error retrieving notes:', error); | ||
}); | ||
} | ||
|
||
render() { | ||
const { navigation } = this.props; | ||
const { storedNotes } = this.state; | ||
|
||
const payment: Payment = navigation.getParam('payment', null); | ||
const { | ||
|
@@ -53,6 +65,17 @@ export default class PaymentView extends React.Component<PaymentProps> { | |
|
||
const lnurlpaytx = this.state.lnurlpaytx; | ||
|
||
const EditNotesButton = () => ( | ||
<TouchableOpacity | ||
onPress={() => | ||
navigation.navigate('AddNotes', { payment_hash }) | ||
} | ||
style={{ marginTop: -12 }} | ||
> | ||
<EditNotes height={40} width={40} /> | ||
</TouchableOpacity> | ||
); | ||
|
||
return ( | ||
<Screen> | ||
<Header | ||
|
@@ -64,6 +87,7 @@ export default class PaymentView extends React.Component<PaymentProps> { | |
fontFamily: 'Lato-Regular' | ||
} | ||
}} | ||
rightComponent={<EditNotesButton />} | ||
navigation={navigation} | ||
/> | ||
<ScrollView> | ||
|
@@ -177,6 +201,13 @@ export default class PaymentView extends React.Component<PaymentProps> { | |
/> | ||
</ListItem> | ||
)} | ||
{storedNotes && ( | ||
<KeyValue | ||
keyValue={localeString('views.Payment.notes')} | ||
value={storedNotes} | ||
sensitive | ||
/> | ||
)} | ||
</View> | ||
</ScrollView> | ||
</Screen> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
wee just just use a singular definition here instead of requiring translators to translate it multiple times.
Also think it might be better as
Note
singularThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Okay, I thought there are different
views
in which we are using them so I did that, like we would have to use{localeString('views.Payment.notes')}
inTransaction
viewThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Its okay, I'll use only one definition