Skip to content
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

PhotoUtils #2104

Merged
merged 2 commits into from
Apr 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 2 additions & 10 deletions components/WalletHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
} from 'react-native';
import { inject, observer } from 'mobx-react';
import Clipboard from '@react-native-clipboard/clipboard';
import RNFS from 'react-native-fs';

import ChannelsStore from '../stores/ChannelsStore';
import LightningAddressStore from '../stores/LightningAddressStore';
Expand All @@ -28,6 +27,7 @@ import NodeIdenticon from '../components/NodeIdenticon';

import handleAnything, { isClipboardValue } from '../utils/handleAnything';
import BackendUtils from '../utils/BackendUtils';
import { getPhoto } from '../utils/PhotoUtils';
import { localeString } from '../utils/LocaleUtils';
import { protectedNavigation } from '../utils/NavigationUtils';
import PrivacyUtils from '../utils/PrivacyUtils';
Expand Down Expand Up @@ -205,14 +205,6 @@ export default class WalletHeader extends React.Component<
}
}

getPhoto(photo: string | null): string {
if (typeof photo === 'string' && photo.includes('rnfs://')) {
const fileName = photo.replace('rnfs://', '');
return `file://${RNFS.DocumentDirectoryPath}/${fileName}`;
}
return photo || '';
}

render() {
const { clipboard } = this.state;
const {
Expand Down Expand Up @@ -254,7 +246,7 @@ export default class WalletHeader extends React.Component<
{selectedNode && selectedNode.photo ? (
<Image
source={{
uri: this.getPhoto(selectedNode.photo)
uri: getPhoto(selectedNode.photo)
}}
style={styles.photo}
/>
Expand Down
8 changes: 3 additions & 5 deletions models/Contact.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { computed } from 'mobx';
import BaseModel from './BaseModel';
import RNFS from 'react-native-fs';

import { getPhoto } from '../utils/PhotoUtils';

export default class Contact extends BaseModel {
id: string; // deprecated
public contactId: string;
Expand Down Expand Up @@ -86,11 +88,7 @@ export default class Contact extends BaseModel {
}

@computed public get getPhoto(): string {
if (this.photo?.includes('rnfs://')) {
const fileName = this.photo.replace('rnfs://', '');
return `file://${RNFS.DocumentDirectoryPath}/${fileName}`;
}
return this.photo || '';
return getPhoto(this.photo || '');
}

@computed public get getBanner(): string {
Expand Down
42 changes: 42 additions & 0 deletions utils/PhotoUtils.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { getPhoto } from './PhotoUtils';
jest.mock('react-native-fs', () => ({
DocumentDirectoryPath: 'docpath'
}));
jest.mock('react-native', () => ({
Image: {
resolveAssetSource: (file: any) => ({
uri: file.testUri
})
}
}));

describe('PhotoUtils', () => {
describe('getPhoto', () => {
it('groks out rnfs:// values', () => {
expect(getPhoto('rnfs://zeus1.jpg')).toEqual(
'file://docpath/zeus1.jpg'
);
expect(getPhoto('rnfs://zeus2.jpg')).toEqual(
'file://docpath/zeus2.jpg'
);
expect(getPhoto('rnfs://zeus3.jpg')).toEqual(
'file://docpath/zeus3.jpg'
);
});

it('groks out preset:// values', () => {
expect(getPhoto('preset://lnd')).toEqual(
'../../../assets/images/LND.jpg'
);
expect(getPhoto('preset://zeusillustration1a')).toEqual(
'../../../assets/images/zeus-illustration-1a.jpg'
);
});

it('returns value as is if no match', () => {
expect(getPhoto('file://zeus1.jpg')).toEqual('file://zeus1.jpg');
expect(getPhoto('file://zeus2.jpg')).toEqual('file://zeus2.jpg');
expect(getPhoto('file://zeus3.jpg')).toEqual('file://zeus3.jpg');
});
});
});
58 changes: 58 additions & 0 deletions utils/PhotoUtils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { Image } from 'react-native';
import RNFS from 'react-native-fs';

const zeusillustration1a = require('..//assets/images/zeus-illustration-1a.jpg');
const zeusillustration1b = require('..//assets/images/zeus-illustration-1b.jpg');
const zeusillustration2a = require('..//assets/images/zeus-illustration-2a.jpg');
const zeusillustration2b = require('..//assets/images/zeus-illustration-2b.jpg');
const zeusillustration3a = require('..//assets/images/zeus-illustration-3a.jpg');
const zeusillustration3b = require('..//assets/images/zeus-illustration-3b.jpg');
const zeusillustration4a = require('..//assets/images/zeus-illustration-4a.jpg');
const zeusillustration4b = require('..//assets/images/zeus-illustration-4b.jpg');
const zeusillustration5a = require('..//assets/images/zeus-illustration-5a.jpg');
const zeusillustration5b = require('..//assets/images/zeus-illustration-5b.jpg');
const zeusillustration6a = require('..//assets/images/zeus-illustration-6a.jpg');
const zeusillustration6b = require('..//assets/images/zeus-illustration-6b.jpg');
const zeusillustration7a = require('..//assets/images/zeus-illustration-7a.jpg');
const zeusillustration7b = require('..//assets/images/zeus-illustration-7b.jpg');

const Alby = require('..//assets/images/Alby.jpg');
const BTCpay = require('..//assets/images/BTCpay.jpg');
const CLN = require('..//assets/images/CLN.jpg');
const LND = require('..//assets/images/LND.jpg');

const getPhoto = (photo: string | null): string => {
if (typeof photo === 'string' && photo.includes('rnfs://')) {
const fileName = photo.replace('rnfs://', '');
return `file://${RNFS.DocumentDirectoryPath}/${fileName}`;
}
if (typeof photo === 'string' && photo.includes('preset://')) {
const fileName = photo.replace('preset://', '');
let file;
if (fileName === 'zeusillustration1a') file = zeusillustration1a;
if (fileName === 'zeusillustration2a') file = zeusillustration2a;
if (fileName === 'zeusillustration3a') file = zeusillustration3a;
if (fileName === 'zeusillustration4a') file = zeusillustration4a;
if (fileName === 'zeusillustration5a') file = zeusillustration5a;
if (fileName === 'zeusillustration6a') file = zeusillustration6a;
if (fileName === 'zeusillustration7a') file = zeusillustration7a;

if (fileName === 'zeusillustration1b') file = zeusillustration1b;
if (fileName === 'zeusillustration2b') file = zeusillustration2b;
if (fileName === 'zeusillustration3b') file = zeusillustration3b;
if (fileName === 'zeusillustration4b') file = zeusillustration4b;
if (fileName === 'zeusillustration5b') file = zeusillustration5b;
if (fileName === 'zeusillustration6b') file = zeusillustration6b;
if (fileName === 'zeusillustration7b') file = zeusillustration7b;

if (fileName === 'alby') file = Alby;
if (fileName === 'btcpay') file = BTCpay;
if (fileName === 'cln') file = CLN;
if (fileName === 'lnd') file = LND;

return Image.resolveAssetSource(file).uri || '';
}
return photo || '';
};

export { getPhoto };
29 changes: 11 additions & 18 deletions views/Settings/AddContact.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,22 @@ import { Icon, Divider } from 'react-native-elements';
import { launchImageLibrary } from 'react-native-image-picker';
import RNFS from 'react-native-fs';

import LightningBolt from '../../assets/images/SVG/Lightning Bolt.svg';
import BitcoinIcon from '../../assets/images/SVG/BitcoinIcon.svg';
import KeySecurity from '../../assets/images/SVG/Key Security.svg';
import VerifiedAccount from '../../assets/images/SVG/Verified Account.svg';
import AddIcon from '../../assets/images/SVG/Add.svg';
import Scan from '../../assets/images/SVG/Scan.svg';
import { themeColor } from '../../utils/ThemeUtils';
import AddressUtils from '../../utils/AddressUtils';

import Button from '../../components/Button';
import { localeString } from '../../utils/LocaleUtils';
import Screen from '../../components/Screen';
import Header from '../../components/Header';
import { Row } from '../../components/layout/Row';

import AddressUtils from '../../utils/AddressUtils';
import { getPhoto } from '../../utils/PhotoUtils';
import { themeColor } from '../../utils/ThemeUtils';

import LightningBolt from '../../assets/images/SVG/Lightning Bolt.svg';
import BitcoinIcon from '../../assets/images/SVG/BitcoinIcon.svg';
import KeySecurity from '../../assets/images/SVG/Key Security.svg';
import VerifiedAccount from '../../assets/images/SVG/Verified Account.svg';
import AddIcon from '../../assets/images/SVG/Add.svg';
import Scan from '../../assets/images/SVG/Scan.svg';
import Star from '../../assets/images/SVG/Star.svg';

interface AddContactProps {
Expand Down Expand Up @@ -371,14 +372,6 @@ export default class AddContact extends React.Component<
}
}

getPhoto(photo): string {
if (photo?.includes('rnfs://')) {
const fileName = photo.replace('rnfs://', '');
return `file://${RNFS.DocumentDirectoryPath}/${fileName}`;
}
return photo || '';
}

render() {
const { navigation } = this.props;
const {
Expand Down Expand Up @@ -505,7 +498,7 @@ export default class AddContact extends React.Component<
{photo ? (
<Image
source={{
uri: this.getPhoto(photo)
uri: getPhoto(photo)
}}
style={styles.photo}
/>
Expand Down
12 changes: 2 additions & 10 deletions views/Settings/NodeConfiguration.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import Clipboard from '@react-native-clipboard/clipboard';
import { inject, observer } from 'mobx-react';
import EncryptedStorage from 'react-native-encrypted-storage';
import cloneDeep from 'lodash/cloneDeep';
import RNFS from 'react-native-fs';

import { hash, STORAGE_KEY } from '../../backends/LNC/credentialStore';

Expand Down Expand Up @@ -47,6 +46,7 @@ import SettingsStore, {
import Scan from '../../assets/images/SVG/Scan.svg';
import AddIcon from '../../assets/images/SVG/Add.svg';

import { getPhoto } from '../../utils/PhotoUtils';
import { createLndWallet } from '../../utils/LndMobileUtils';

interface NodeConfigurationProps {
Expand Down Expand Up @@ -583,14 +583,6 @@ export default class NodeConfiguration extends React.Component<
}
};

getPhoto(photo: string | null): string {
if (typeof photo === 'string' && photo.includes('rnfs://')) {
const fileName = photo.replace('rnfs://', '');
return `file://${RNFS.DocumentDirectoryPath}/${fileName}`;
}
return photo || '';
}

render() {
const { navigation, SettingsStore } = this.props;
const node = navigation.getParam('node', null);
Expand Down Expand Up @@ -986,7 +978,7 @@ export default class NodeConfiguration extends React.Component<
{node?.photo || photo ? (
<Image
source={{
uri: this.getPhoto(
uri: getPhoto(
node?.photo || photo
)
}}
Expand Down
17 changes: 5 additions & 12 deletions views/Settings/Nodes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,21 @@ import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
import DragList, { DragListRenderItemInfo } from 'react-native-draglist';
import { Icon, ListItem } from 'react-native-elements';
import { inject, observer } from 'mobx-react';
import RNFS from 'react-native-fs';

import Button from '../../components/Button';
import Header from '../../components/Header';
import NodeIdenticon, { NodeTitle } from '../../components/NodeIdenticon';
import Screen from '../../components/Screen';

import BackendUtils from '../../utils/BackendUtils';
import BalanceStore from '../../stores/BalanceStore';
import NodeInfoStore from '../../stores/NodeInfoStore';
import SettingsStore, { INTERFACE_KEYS } from '../../stores/SettingsStore';
import ChannelsStore from '../../stores/ChannelsStore';

import { getPhoto } from '../../utils/PhotoUtils';
import { localeString } from '../../utils/LocaleUtils';
import { themeColor } from '../../utils/ThemeUtils';
import ChannelsStore from '../../stores/ChannelsStore';
import BackendUtils from '../../utils/BackendUtils';

import Add from '../../assets/images/SVG/Add.svg';
import DragDots from '../../assets/images/SVG/DragDots.svg';
Expand Down Expand Up @@ -94,14 +95,6 @@ export default class Nodes extends React.Component<NodesProps, NodesState> {
/>
);

getPhoto(photo: string | null): string {
if (typeof photo === 'string' && photo.includes('rnfs://')) {
const fileName = photo.replace('rnfs://', '');
return `file://${RNFS.DocumentDirectoryPath}/${fileName}`;
}
return photo || '';
}

render() {
const {
navigation,
Expand Down Expand Up @@ -262,7 +255,7 @@ export default class Nodes extends React.Component<NodesProps, NodesState> {
{item.photo ? (
<Image
source={{
uri: this.getPhoto(
uri: getPhoto(
item.photo
)
}}
Expand Down
Loading
Loading