From 27c0ac75853278b30950ba4fe10faf080a6dae8b Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Fri, 30 Aug 2019 20:03:31 +0100 Subject: [PATCH] support optional parameters --- package-lock.json | 9 +- package.json | 2 +- src/page/channelCreator/index.js | 4 +- src/page/channelCreator/view.js | 193 +++++++++++++++++++++++++++---- src/styles/channelCreator.js | 26 ++++- 5 files changed, 200 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index 824a37d..e76b803 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5574,8 +5574,8 @@ } }, "lbry-redux": { - "version": "github:lbryio/lbry-redux#c74deed2a63e1acd0d1827ed9b954242d74e2a1e", - "from": "github:lbryio/lbry-redux#c74deed2a63e1acd0d1827ed9b954242d74e2a1e", + "version": "github:lbryio/lbry-redux#053aead0d92b02fdd192ab5288104ad6688d549f", + "from": "github:lbryio/lbry-redux#053aead0d92b02fdd192ab5288104ad6688d549f", "requires": { "proxy-polyfill": "0.1.6", "reselect": "^3.0.0", @@ -8039,11 +8039,6 @@ } } }, - "react-native-document-picker": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/react-native-document-picker/-/react-native-document-picker-3.2.4.tgz", - "integrity": "sha512-5l0/fkgasUZdIk9jUUkReDtNCQn2yg1+BrMPHMt45c/NVmE15ThnhIuDj8/n8h1F1RlhUb3SzF86ANK4OdZAiQ==" - }, "react-native-exception-handler": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/react-native-exception-handler/-/react-native-exception-handler-2.9.0.tgz", diff --git a/package.json b/package.json index 2732922..365a6bb 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "base-64": "^0.1.0", "@expo/vector-icons": "^8.1.0", "gfycat-style-urls": "^1.0.3", - "lbry-redux": "lbryio/lbry-redux#c74deed2a63e1acd0d1827ed9b954242d74e2a1e", + "lbry-redux": "lbryio/lbry-redux#053aead0d92b02fdd192ab5288104ad6688d549f", "lbryinc": "lbryio/lbryinc#4c761084990557d379c85e1c998fcae7e5db143a", "lodash": ">=4.17.11", "merge": ">=1.2.1", diff --git a/src/page/channelCreator/index.js b/src/page/channelCreator/index.js index e86c428..413e08b 100644 --- a/src/page/channelCreator/index.js +++ b/src/page/channelCreator/index.js @@ -3,6 +3,7 @@ import { selectBalance, selectMyChannelClaims, selectFetchingMyChannels, + doAbandonClaim, doFetchChannelListMine, doCreateChannel, doToast, @@ -18,8 +19,9 @@ const select = state => ({ }); const perform = dispatch => ({ + abandonClaim: (txid, nout) => dispatch(doAbandonClaim(txid, nout)), notify: data => dispatch(doToast(data)), - createChannel: (name, amount) => dispatch(doCreateChannel(name, amount)), + createChannel: (name, amount, optionalParams) => dispatch(doCreateChannel(name, amount, optionalParams)), fetchChannelListMine: () => dispatch(doFetchChannelListMine()), pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_CHANNEL_CREATOR)), setPlayerVisible: () => dispatch(doSetPlayerVisible(false)), diff --git a/src/page/channelCreator/view.js b/src/page/channelCreator/view.js index 0da0aa6..3547280 100644 --- a/src/page/channelCreator/view.js +++ b/src/page/channelCreator/view.js @@ -2,6 +2,7 @@ import React from 'react'; import { CLAIM_VALUES, isURIValid, regexInvalidURI } from 'lbry-redux'; import { ActivityIndicator, + Alert, DeviceEventEmitter, FlatList, Image, @@ -12,6 +13,7 @@ import { TouchableOpacity, View, } from 'react-native'; +import { navigateToUri } from 'utils/helper'; import Button from 'component/button'; import ChannelIconItem from 'component/channelIconItem'; import Colors from 'styles/colors'; @@ -43,6 +45,10 @@ export default class ChannelCreator extends React.PureComponent { coverImageUrl: null, avatarImagePickerOpen: false, coverImagePickerOpen: false, + + editMode: false, + selectionMode: false, + selectedChannels: [], }; didFocusListener; @@ -79,9 +85,19 @@ export default class ChannelCreator extends React.PureComponent { } onComponentFocused = () => { - const { channels, channelName, fetchChannelListMine, fetchingChannels } = this.props; + const { + channels, + channelName, + fetchChannelListMine, + fetchClaimListMine, + fetchingChannels, + pushDrawerStack, + setPlayerVisible, + } = this.props; NativeModules.Firebase.setCurrentScreen('Channels').then(result => { - if (!channels.length && !fetchingChannels) { + pushDrawerStack(); + setPlayerVisible(); + if (!fetchingChannels) { fetchChannelListMine(); } @@ -196,7 +212,7 @@ export default class ChannelCreator extends React.PureComponent { handleCreateChannelClick = () => { const { balance, createChannel, onChannelChange, notify } = this.props; - const { newChannelBid, newChannelName } = this.state; + const { newChannelBid, newChannelName, newChannelTitle } = this.state; if (newChannelName.trim().length === 0 || !isURIValid(newChannelName.substr(1), false)) { notify({ message: 'Your channel name contains invalid characters.' }); @@ -233,6 +249,7 @@ export default class ChannelCreator extends React.PureComponent { } // reset state and go back to the channel list + notify({ message: 'The channel was successfully created.' }); this.showChannelList(); }; @@ -243,7 +260,11 @@ export default class ChannelCreator extends React.PureComponent { }); }; - createChannel(channelName, newChannelBid).then(success, failure); + const optionalParams = { + title: newChannelTitle, + }; + + createChannel(channelName, newChannelBid, optionalParams).then(success, failure); }; channelExists = name => { @@ -295,6 +316,7 @@ export default class ChannelCreator extends React.PureComponent { resetChannelCreator = () => { this.setState({ + editMode: false, displayName: null, channelNameUserEdited: false, newChannelTitle: '', @@ -313,9 +335,98 @@ export default class ChannelCreator extends React.PureComponent { }); }; + onExitSelectionMode = () => { + this.setState({ selectionMode: false, selectedChannels: [] }); + }; + + onEditActionPressed = () => { + const { navigation } = this.props; + const { selectedChannels } = this.state; + + // only 1 item can be edited (and edit button should be visible only if there is a single selection) + const channel = selectedChannels[0]; + this.onExitSelectionMode(); + + this.prepareEdit(channel); + }; + + prepareEdit = channel => { + this.setState({ + currentPhase: Constants.PHASE_CREATE, + newChannelName: channel.name.substring(1), + newChannelTitle: channel.meta.title ? channel.meta.title : null, + newChannelBid: channel.amount, + }); + }; + + onDeleteActionPressed = () => { + const { abandonClaim, fetchChannelListMine } = this.props; + const { selectedChannels } = this.state; + + // show confirm alert + Alert.alert( + __('Delete channels'), + __('Are you sure you want to delete the selected channels?'), + [ + { text: __('No') }, + { + text: __('Yes'), + onPress: () => { + selectedChannels.forEach(channel => { + const { txid, nout } = channel; + abandonClaim(txid, nout); + }); + + // re-fetch the channel list + fetchChannelListMine(); + this.onExitSelectionMode(); + }, + }, + ], + { cancelable: true } + ); + }; + + selectedChannelIndex = channel => { + const { selectedChannels } = this.state; + for (let i = 0; i < selectedChannels.length; i++) { + if (selectedChannels[i].claim_id === channel.claim_id) { + return i; + } + } + + return -1; + }; + + addOrRemoveItem = channel => { + let selectedChannels = [...this.state.selectedChannels]; + const index = this.selectedChannelIndex(channel); + + if (index > -1) { + selectedChannels.splice(index, 1); + } else { + selectedChannels.push(channel); + } + + this.setState({ selectionMode: selectedChannels.length > 0, selectedChannels }); + }; + + handleChannelListItemPress = channel => { + const { navigation } = this.props; + const { selectionMode } = this.state; + if (selectionMode) { + this.addOrRemoveItem(channel); + } else { + navigateToUri(navigation, channel.permanent_url); + } + }; + + handleChannelListItemLongPress = channel => { + this.addOrRemoveItem(channel); + }; + render() { - const channel = this.state.addingChannel ? 'new' : this.props.channel; - const { enabled, fetchingChannels, channels = [], navigation } = this.props; + const { fetchingChannels, channels = [], navigation } = this.props; console.log(channels); @@ -332,23 +443,43 @@ export default class ChannelCreator extends React.PureComponent { addingChannel, showCreateChannel, thumbnailUrl, + selectionMode, + selectedChannels, } = this.state; return ( - + {currentPhase === Constants.PHASE_LIST && ( + + + ) : null + } ListEmptyComponent={ - - - You have not created a channel. Start now by creating a new channel! - - + fetchingChannels ? null : ( + + + You have not created a channel. Start now by creating a new channel! + + + ) } ListFooterComponent={ - +