Add tipping feature to app. #391

Closed
hackrush01 wants to merge 0 commits from tipping_button into master
hackrush01 commented 2017-07-26 21:07:01 +02:00 (Migrated from github.com)
  • Button add to FileActions component, from a new component file.
  • Use icon gift
  • Once clicked, the user is displayed a simple form with a single input for LBC, and "Confirm" / Cancel buttons (confirm should affirm the action, e.g. "Send Tip")
  • The forms should include some help copy, possibly with a link to a FAQ.
  • The initiated action should be shown inline
  • Add snack bar for successful tip.
  • Confirm that sending transaction is not causing weird behaviour(checked as no problem was caused during preliminary testing).
  • Change modals to use constants.
  • Hide Nearby buttons when tip form is shown.
  • Treat myself at KFC once merged.

For issue #355

New list copied from below to track

  • Rework tipping to use the wallet_send API command
  • Render tipping UI in FilePage instead of FileActions
  • Extract Wallet_Send form and use that for tipping instead of the FormFieldPrice as one can tip in LBC only
  • Something with controlled and uncontrolled components
  • Borrow things from tip_and_supports branch?????? (Not at sure what to do with that)
  • Display a better Transaction List with columns for types of transaction(Support, claim, update, unbound), a link to claim if applicable(this might need some changes depending on how lbryio/lbryum#148 goes)
  • Use a better name instead of "Unbound" transaction. Using "Unfiltered"
  • Do a whole lot of conflict fixing in the end.
- [x] Button add to `FileActions` component, from a new component file. - [x] Use icon `gift` - [x] Once clicked, the user is displayed a simple form with a single input for LBC, and "Confirm" / Cancel buttons (confirm should affirm the action, e.g. "Send Tip") - [x] The forms should include some help copy, possibly with a link to a FAQ. - [x] The initiated action should be shown inline - [x] Add snack bar for successful tip. - [x] Confirm that sending transaction is not causing weird behaviour(checked as no problem was caused during preliminary testing). - [x] Change modals to use constants. - [x] Hide Nearby buttons when tip form is shown. - [ ] Treat myself at KFC once merged. For issue #355 New list copied from below to track - [x] Rework tipping to use the `wallet_send` API command - [x] Render tipping UI in `FilePage` instead of `FileActions` - [x] ~Extract `Wallet_Send` form and use that for tipping instead of the `FormFieldPrice` as one can tip in LBC only~ - [x] Something with controlled and uncontrolled components - [x] ~Borrow things from `tip_and_supports` branch?????? (Not at sure what to do with that)~ - [x] Display a better `Transaction List` with columns for types of transaction(Support, claim, update, unbound), a link to claim if applicable(this might need some changes depending on how lbryio/lbryum#148 goes) - [x] Use a better name instead of "Unbound" transaction. **Using "Unfiltered"** - [x] Do a whole lot of conflict fixing in the end.
hackrush01 (Migrated from github.com) reviewed 2017-07-26 21:08:27 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-26 21:08:27 +02:00

Changed for consistency

Changed for consistency
kauffj (Migrated from github.com) reviewed 2017-07-27 00:51:49 +02:00
kauffj (Migrated from github.com) left a comment

First set of feedback.

First set of feedback.
kauffj (Migrated from github.com) commented 2017-07-27 00:51:29 +02:00

If these source values are shared across forms, could this cause any weird behavior?

If these source values are shared across forms, could this cause any weird behavior?
kauffj (Migrated from github.com) commented 2017-07-27 00:50:17 +02:00

All of the tip box logic should be it's own component.

All of the tip box logic should be it's own component.
kauffj (Migrated from github.com) commented 2017-07-27 00:48:09 +02:00

We've also changed the way modals work to use constants. I also think this code was copy and pasted, which is a sign it ought to be refactored. These should probably be moved into app/view.jsx.

You can see the FIRST_REWARD modal here for reference 29553bc391

We've also changed the way modals work to use constants. I also think this code was copy and pasted, which is a sign it ought to be refactored. These should probably be moved into `app/view.jsx`. You can see the FIRST_REWARD modal here for reference https://github.com/lbryio/lbry-app/commit/29553bc391e594c0d918179345cf1e33a38c9c40
kauffj (Migrated from github.com) commented 2017-07-27 00:48:58 +02:00

Shouldn't this should be obtainable from the URI without being passed in?

Shouldn't this should be obtainable from the URI without being passed in?
hackrush01 (Migrated from github.com) reviewed 2017-07-27 04:06:55 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-27 04:06:55 +02:00

I'm unsure. This might need some testing/confirmation from your side. Although to make an educated guess, we are dispatching states in doSendDraftTransactions, so it must be to avoid these weird behaviour. But I am not sure if that's how it works.

I'm unsure. This might need some testing/confirmation from your side. Although to make an educated guess, we _are_ dispatching states in `doSendDraftTransactions`, so it must be to avoid these weird behaviour. But I am not sure if that's how it works.
hackrush01 (Migrated from github.com) reviewed 2017-07-27 04:11:58 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-27 04:11:58 +02:00

It is(by resolving it). But I think re-resolving the same URL, would be a useless overhead, when we could simply use an existing data-set. This also helps the app to remain fast and fluid in its operation. I suggest keeping this as is. What's your stance on this?

It is(by resolving it). But I think re-resolving the same URL, would be a useless overhead, when we could simply use an existing data-set. This also helps the app to remain fast and fluid in its operation. I suggest keeping this as is. What's your stance on this?
hackrush01 (Migrated from github.com) reviewed 2017-07-27 04:12:12 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-27 04:12:12 +02:00

I will look into it.

I will look into it.
hackrush01 (Migrated from github.com) reviewed 2017-07-27 04:17:05 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-27 04:17:05 +02:00

Ok. I'll do it.
That's how it was originally done(the modal one), but I got confused with "add button to fileActions" part. A slight misinterpretation on my part.

Ok. I'll do it. That's how it was originally done(the modal one), but I got confused with "add button to `fileActions`" part. A slight misinterpretation on my part.
hackrush01 commented 2017-07-27 04:23:25 +02:00 (Migrated from github.com)

Updated task list to reflect the review.

Updated task list to reflect the review.
kauffj (Migrated from github.com) reviewed 2017-07-27 22:52:06 +02:00
kauffj (Migrated from github.com) left a comment

More feedback.

More feedback.
kauffj (Migrated from github.com) commented 2017-07-27 22:21:15 +02:00

Let's drop this modal and replace with a snackbar showing:

You sent ${amount} LBC. [History]

History is a link to the Transaction History page.

Let's drop this modal and replace with a snackbar showing: You sent ${amount} LBC. [History] History is a link to the Transaction History page.
@ -169,1 +177,4 @@
icon="icon-gift"
onClick={this.handleSupportButtonClicked.bind(this)}
/>
{showMenu
kauffj (Migrated from github.com) commented 2017-07-27 22:51:41 +02:00

This should hide everything else in this component when activated.

This should hide everything else in this component when activated.
kauffj (Migrated from github.com) commented 2017-07-27 22:28:59 +02:00

Just "Tip"

Just "Tip"
kauffj (Migrated from github.com) commented 2017-07-27 22:29:16 +02:00

And move inside of the "..." menu button

And move inside of the "..." menu button
kauffj (Migrated from github.com) commented 2017-07-27 22:36:23 +02:00

All of this modal code can be dropped from here now.

All of this modal code can be dropped from here now.
kauffj (Migrated from github.com) commented 2017-07-27 22:36:42 +02:00

Turn this into a snackbar (mentioned elsewhere).

Turn this into a snackbar (mentioned elsewhere).
kauffj (Migrated from github.com) commented 2017-07-27 22:43:07 +02:00

An LBC/USD input now appears:

  • Here
  • On Publish
  • On Settings

It should probably just be turned into it's own component.

An LBC/USD input now appears: - Here - On Publish - On Settings It should probably just be turned into it's own component.
kauffj (Migrated from github.com) commented 2017-07-27 22:37:48 +02:00

Are you sure an actual second resolve is triggered? I.e. is an API call actually made or are you just seeing the action dispatch?

Either way, the claim shouldn't be passed. If we are doing an unnecessary extra resolve, that should be fixed elsewhere.

Are you sure an actual second resolve is triggered? I.e. is an API call actually made or are you just seeing the action dispatch? Either way, the claim shouldn't be passed. If we are doing an unnecessary extra resolve, that should be fixed elsewhere.
hackrush01 (Migrated from github.com) reviewed 2017-07-27 22:54:42 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-27 22:54:42 +02:00

Ok

Ok
hackrush01 (Migrated from github.com) reviewed 2017-07-27 22:55:10 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-27 22:55:10 +02:00

You mean inside the drop-down menu after open?

You mean inside the drop-down menu after open?
hackrush01 (Migrated from github.com) reviewed 2017-07-27 23:02:30 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-27 23:02:29 +02:00

Not quite sure what you mean by this. Please elaborate.

Not quite sure what you mean by this. Please elaborate.
kauffj (Migrated from github.com) reviewed 2017-07-27 23:05:23 +02:00
kauffj (Migrated from github.com) commented 2017-07-27 23:05:23 +02:00

A text input coupled with an LBC/USD select box appears in a few places. This adds another place it should appear (even though you did it without the currency select).

I was proposing that the text input and lbc/usd select could become it's own component, then that component could be used in all 3 places.

A text input coupled with an LBC/USD select box appears in a few places. This adds another place it should appear (even though you did it without the currency select). I was proposing that the text input and lbc/usd select could become it's own component, then that component could be used in all 3 places.
hackrush01 (Migrated from github.com) reviewed 2017-07-29 08:59:14 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-29 08:59:14 +02:00

I've added this css, is this okay?

I've added this css, is this okay?
hackrush01 (Migrated from github.com) reviewed 2017-07-29 10:25:16 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-29 10:25:15 +02:00

Done, now it is being done using selectors in the FileActions

Done, now it is being done using selectors in the FileActions
hackrush01 (Migrated from github.com) reviewed 2017-07-29 10:27:25 +02:00
@ -169,1 +177,4 @@
icon="icon-gift"
onClick={this.handleSupportButtonClicked.bind(this)}
/>
{showMenu
hackrush01 (Migrated from github.com) commented 2017-07-29 10:27:25 +02:00

Done

Done
hackrush01 (Migrated from github.com) reviewed 2017-07-29 10:27:30 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-29 10:27:30 +02:00

Done

Done
hackrush01 (Migrated from github.com) reviewed 2017-07-29 10:27:37 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-29 10:27:37 +02:00

Done

Done
hackrush01 (Migrated from github.com) reviewed 2017-07-29 10:28:01 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-29 10:28:00 +02:00

Done, please check slack

Done, please check slack
hackrush01 (Migrated from github.com) reviewed 2017-07-29 10:28:01 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-29 10:28:01 +02:00

done

done
hackrush01 (Migrated from github.com) reviewed 2017-07-29 10:28:05 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-29 10:28:05 +02:00

Done

Done
hackrush01 (Migrated from github.com) reviewed 2017-07-29 10:28:14 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-29 10:28:14 +02:00

Done

Done
hackrush01 (Migrated from github.com) reviewed 2017-07-29 10:28:21 +02:00
hackrush01 (Migrated from github.com) commented 2017-07-29 10:28:21 +02:00

Done

Done
kauffj (Migrated from github.com) reviewed 2017-08-08 00:44:02 +02:00
kauffj (Migrated from github.com) left a comment

More feedback.

More feedback.
@ -169,2 +178,4 @@
onClick={this.handleSupportButtonClicked.bind(this)}
/>
{showMenu
? <div className="button-set-item">
kauffj (Migrated from github.com) commented 2017-08-08 00:40:22 +02:00

This shouldn't get rendered here.

This shouldn't get rendered here.
kauffj (Migrated from github.com) commented 2017-08-08 00:40:38 +02:00

I think it probably needs to go into FilePage.

I think it probably needs to go into `FilePage`.
kauffj (Migrated from github.com) commented 2017-08-08 00:39:14 +02:00

It's fine for this to be this.props.sendSupport(claim_id, amount).

It's fine for this to be `this.props.sendSupport(claim_id, amount)`.
kauffj (Migrated from github.com) commented 2017-08-08 00:42:38 +02:00

Please review React docs on controlled and uncontrolled components. I suspect this may not reset to defaults the way you expect.

defaultValue can only be used when rendering the element for the first time.

Please review React docs on controlled and uncontrolled components. I suspect this may not reset to defaults the way you expect. `defaultValue` can only be used when rendering the element for the first time.
@ -193,0 +193,4 @@
reducers[types.SUPPORT_TRANSACTION_STARTED] = function(state, action) {
const newSupportTransaction = Object.assign({}, state.supportTransaction, {
sendingSupport: true,
});
kauffj (Migrated from github.com) commented 2017-08-08 00:43:29 +02:00

All of this can be simplified by having the component send these values directly to the action, unless I'm missing the need for these to be in Redux state.

All of this can be simplified by having the component send these values directly to the action, unless I'm missing the need for these to be in Redux state.
hackrush01 (Migrated from github.com) reviewed 2017-08-08 00:51:34 +02:00
@ -169,2 +178,4 @@
onClick={this.handleSupportButtonClicked.bind(this)}
/>
{showMenu
? <div className="button-set-item">
hackrush01 (Migrated from github.com) commented 2017-08-08 00:51:34 +02:00

Yes, UI changes will be made in subsequent commits. I have a list of them.

Yes, UI changes will be made in subsequent commits. I have a list of them.
hackrush01 (Migrated from github.com) reviewed 2017-08-08 09:46:53 +02:00
hackrush01 (Migrated from github.com) commented 2017-08-08 09:46:53 +02:00

Amount's value in store is needed for this

As for claim_id; currently it being passed as a prop here, which was possible due to having the claimInfo in FileActions, but since this component will be moved to FilePage, claim_id(for support) will be set during the loading of the page by directly fetching the values from the store(FETCH_FILE_INFO_COMPLETED action to be specific). Seems to me a neater and React way of doing this. Also it will ensure no redundant data is being passed between the components.

Amount's value in store is needed for [this](https://github.com/lbryio/lbry-app/pull/391/files#diff-10945e96d61f083b2a59634a088e8c7aR16) As for `claim_id`; currently it being passed as a prop [here](https://github.com/lbryio/lbry-app/pull/391/files#diff-1fa5cb7e26763162ff46465cbb589c6eR190), which was possible due to having the `claimInfo` in FileActions, but since this component will be moved to `FilePage`, `claim_id`(for support) will be set during the loading of the page by directly fetching the values from the store(`FETCH_FILE_INFO_COMPLETED` action to be specific). Seems to me a neater and React way of doing this. Also it will ensure no redundant data is being passed between the components.
hackrush01 (Migrated from github.com) reviewed 2017-08-08 09:49:28 +02:00
hackrush01 (Migrated from github.com) commented 2017-08-08 09:49:28 +02:00

As far as I understood by reading the docs, controlled components are not a problem, so long all of them have associated setState handlers, as the component will re-render. So I'm inclined to keep it here.
But If you have some particular scenario in mind, I'll be happy to test it out though.

As far as I understood by reading the [docs](https://facebook.github.io/react/docs/forms.html#controlled-components), controlled components are not a problem, so long all of them have associated `setState` handlers, as the component will re-render. So I'm inclined to keep it here. But If you have some particular scenario in mind, I'll be happy to test it out though.
hackrush01 (Migrated from github.com) reviewed 2017-08-08 09:50:20 +02:00
@ -193,0 +193,4 @@
reducers[types.SUPPORT_TRANSACTION_STARTED] = function(state, action) {
const newSupportTransaction = Object.assign({}, state.supportTransaction, {
sendingSupport: true,
});
hackrush01 (Migrated from github.com) commented 2017-08-08 09:50:20 +02:00

Clarified in first comment, above.

Clarified in first comment, above.
hackrush01 commented 2017-08-20 12:16:52 +02:00 (Migrated from github.com)
  • Rework tipping to use the wallet_send API command
  • Render tipping UI in FilePage instead of FileActions
  • Extract Wallet_Send form and use that for tipping instead of the FormFieldPrice as one can tip in LBC only
  • Something with controlled and uncontrolled components
  • Borrow things from tip_and_supports branch?????? (Not at sure what to do with that)
  • Display a better Transaction List with columns for types of transaction(Support, claim, update, unbound), a link to claim if applicable(this might need some changes depending on how lbryio/lbryum#148 goes)
  • Use a better name instead of "Unbound" transaction. Using "Unfiltered"
  • Do a whole lot of conflict fixing in the end.
- [x] Rework tipping to use the `wallet_send` API command - [x] Render tipping UI in `FilePage` instead of `FileActions` - [x] ~Extract `Wallet_Send` form and use that for tipping instead of the `FormFieldPrice` as one can tip in LBC only~ - [x] Something with controlled and uncontrolled components - [x] ~Borrow things from `tip_and_supports` branch?????? (Not at sure what to do with that)~ - [x] Display a better `Transaction List` with columns for types of transaction(Support, claim, update, unbound), a link to claim if applicable(this might need some changes depending on how lbryio/lbryum#148 goes) - [x] Use a better name instead of "Unbound" transaction. **Using "Unfiltered"** - [x] Do a whole lot of conflict fixing in the end.
hackrush01 commented 2017-08-29 09:58:04 +02:00 (Migrated from github.com)

Made the merge to master, definitely must have broken something.

Made the merge to master, definitely must have broken something.
kauffj commented 2017-08-30 23:06:19 +02:00 (Migrated from github.com)

@hackrush01 there are changes in master that affect the TransactionList component. I'd advise rebasing this onto master before continuing.

@hackrush01 there are changes in master that affect the `TransactionList` component. I'd advise rebasing this onto master before continuing.
hackrush01 commented 2017-08-31 15:51:02 +02:00 (Migrated from github.com)

@kauffj Ok, I'll look into it.

@kauffj Ok, I'll look into it.
hackrush01 (Migrated from github.com) reviewed 2017-09-02 20:00:26 +02:00
@ -12,0 +43,4 @@
onChange={this.handleFilterChanged.bind(this)}
>
<option value="unfiltered">{__("All")}</option>
<option value="claim">{__("Publishes")}</option>
hackrush01 (Migrated from github.com) commented 2017-09-02 20:00:26 +02:00

I was not sure about the css part so I left it as is.

I was not sure about the css part so I left it as is.
kauffj commented 2017-09-03 20:29:59 +02:00 (Migrated from github.com)

Ran the latest today. Here's what ought to change. It might seem long but it's all very minor -- very close to shippable.

Tipping

  • Clicking "Support" ought to hide everything below FileActions (description and report I noticed stay)
  • The title of the form should not use the word claim. Maybe just "Support"?
  • The form should have a one sentence description (probably just a <p>) with a link to lbry.io/faq/tipping (to be created). First draft: "Support the creator and the success of their content by sending a tip. <a>Learn more.</a>"
  • Submitting a negative amount errors uncleanly (possibly out of scope, don't write specific code for this in the form).
  • Ideally the support form would have an additional select with two options: Permanent and Temporary. Permanent issues a tip, temporary issues a support. But this also isn't a hard requirement.

Transaction List

  • TransactionTableXXX probably ought to be moved into an internal folder inside of TransactionList, since they are strongly tied to this component rather than likely to be used individually. See the Video component for an example of this.
  • The empty message needs to be displayed when no items match the transaction filter.
  • The "Claim Name" header shouldn't change in visibility. This should always be displayed, and should be filled even on the default view when relevant.
  • Column widths shouldn't jump on filter. We probably should set some widths specifically for a transaction table.
  • Change some labels and orders on filtering:
    • Unfiltered -> All
    • Claims -> Publishes
    • Drop updates if possible. Updates should be in-line with others of the type (presumably publishes / supports).
  • Let's try displaying the fee below the amount. Display it in class "meta" and without a label for the unit.
  • Let's try dropping all labels on CreditAmount components in the table (i.e. label=false).
Ran the latest today. Here's what ought to change. It might seem long but it's all very minor -- very close to shippable. ### Tipping - Clicking "Support" ought to hide _everything_ below `FileActions` (description and report I noticed stay) - The title of the form should not use the word claim. Maybe just "Support"? - The form should have a one sentence description (probably just a `<p>`) with a link to lbry.io/faq/tipping (to be created). First draft: "Support the creator and the success of their content by sending a tip. &lt;a&gt;Learn more.&lt;/a&gt;" - Submitting a negative amount errors uncleanly (possibly out of scope, don't write specific code for this in the form). - _Ideally_ the support form would have an additional select with two options: Permanent and Temporary. Permanent issues a tip, temporary issues a support. But this also isn't a hard requirement. ### Transaction List - `TransactionTableXXX` probably ought to be moved into an `internal` folder inside of `TransactionList`, since they are strongly tied to this component rather than likely to be used individually. See the `Video` component for an example of this. - The empty message needs to be displayed when no items match the transaction filter. - The "Claim Name" header shouldn't change in visibility. This should always be displayed, and should be filled even on the default view when relevant. - Column widths shouldn't jump on filter. We probably should set some widths specifically for a transaction table. - Change some labels and orders on filtering: - Unfiltered -> All - Claims -> Publishes - Drop updates if possible. Updates should be in-line with others of the type (presumably publishes / supports). - Let's try displaying the fee below the amount. Display it in class "meta" and without a label for the unit. - Let's try dropping all labels on `CreditAmount` components in the table (i.e. `label=false`).
kauffj (Migrated from github.com) requested changes 2017-09-03 22:25:01 +02:00
kauffj (Migrated from github.com) left a comment

See above.

See above.

Pull request closed

Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: LBRYCommunity/lbry-desktop#391
No description provided.