Page MenuHomePhabricator
Differential D6055

[web] introduce useOnClickReact hook in reaction message utils
ClosedPublic
Actions

Authored by ginsu on Dec 27 2022, 7:21 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Mar 17, 6:04 AM
Unknown Object (File)
Mon, Mar 17, 6:04 AM
Unknown Object (File)
Mon, Mar 17, 6:04 AM
Unknown Object (File)
Mon, Mar 17, 6:04 AM
Unknown Object (File)
Mon, Mar 17, 6:04 AM
Unknown Object (File)
Mon, Mar 17, 6:04 AM
Unknown Object (File)
Mon, Mar 17, 5:58 AM
Unknown Object (File)
Feb 26 2025, 9:42 PM
View All Files
Subscribers
ashoat
atul
tomek

Details

Reviewers
tomek
ashoat
atul
Commits
rCOMM2e65a4c16214: [web] introduce useOnClickReact hook in reaction message utils
Summary

intorduce useOnClickReact hook. useOnClickReact is the web implmentation of the similar function onPressReact introduced in D5780. This function handles the calling of the create reaction message endpoint and then dispatching the results of that to the reducer

Linear Task: ENG-2473

Depends on D6054

Test Plan

This task will be futher tested in subsequent diffs. I was also able to like/unlike messages in web in my local stack using this hook and some subsequent diffs

Additionally, here is what the Alert looks like if a message fails to go through

Screenshot 2022-12-28 at 12.11.26 PM.png (2×3 px, 1 MB)

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu created this revision.Dec 27 2022, 7:21 AM
Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptDec 27 2022, 7:21 AM
ginsu edited the summary of this revision. (Show Details)Dec 27 2022, 7:25 AM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, tomek.
ginsu added a parent revision: D6054: [lib/native] move useCanCreateReactionFromMessage hook from native to lib.
ginsu attached a referenced file: F306362: Screen Recording 2022-12-27 at 10.24.44 AM.mov. (Show Details)
Harbormaster completed remote builds in B14802: Diff 20188.Dec 27 2022, 7:35 AM
ginsu requested review of this revision.Dec 27 2022, 7:35 AM
ginsu added a child revision: D6056: [web] intoduce MessageLikeTooltipButton component.Dec 27 2022, 10:29 AM
ashoat added inline comments.Dec 27 2022, 1:20 PM
web/chat/reaction-message-utils.js
42

On web we usually use pushModal instead and show something like eg. ConcurrentModificationModal. We don't currently have any usages of alert in the web codebase

Can you either:

  1. Attach some videos of what this looks like in Chrome, Firefox, Safari
  2. Or update it to match existing web conventions

Not trying to slow you down but I think we should think this through

ginsu edited the test plan for this revision. (Show Details)Dec 27 2022, 3:35 PM
ginsu attached a referenced file: F306701: Screen Recording 2022-12-27 at 6.33.06 PM.mov. (Show Details)
ginsu attached a referenced file: F306700: Screen Recording 2022-12-27 at 6.32.39 PM.mov. (Show Details)
ginsu attached a referenced file: F306699: Screen Recording 2022-12-27 at 6.32.26 PM.mov. (Show Details)
ginsu added inline comments.Dec 27 2022, 3:37 PM
web/chat/reaction-message-utils.js
42

Not trying to slow you down but I think we should think this through

No definitely this is a good shout. Just updated the test plan to show what alerts look like in Chrome, Firefox and Safari. If we don't think alerts are a good user experience, will be happy to update the code based off the existing web conventions

ashoat added a comment.Dec 27 2022, 4:00 PM

Safari looks good but the others look really bad... I think we should probably stick with the current pattern

ginsu added a comment.Dec 27 2022, 4:01 PM
In D6055#181773, @ashoat wrote:

Safari looks good but the others look really bad... I think we should probably stick with the current pattern

Gotcha I can definitely do that

ginsu planned changes to this revision.Dec 27 2022, 4:02 PM

Making changes to improve the error alert

ginsu updated this revision to Diff 20243.Dec 28 2022, 9:14 AM

updated alert to use in house Alert component

ginsu edited the test plan for this revision. (Show Details)Dec 28 2022, 9:15 AM
ginsu attached a referenced file: F308027: Screenshot 2022-12-28 at 12.11.26 PM.png. (Show Details)
Harbormaster completed remote builds in B14843: Diff 20243.Dec 28 2022, 9:29 AM
ginsu updated this revision to Diff 20257.Dec 28 2022, 12:16 PM

update to fix bug in D6057

Harbormaster completed remote builds in B14852: Diff 20257.Dec 28 2022, 12:30 PM
ashoat requested changes to this revision.Dec 28 2022, 5:18 PM
ashoat added inline comments.
web/chat/reaction-message-utils.js
51 ↗(On Diff #20257)

We should still throw e... otherwise we implicitly return undefined (wish we had an ESLint rule that forced these to be explicit), and as a result will dispatch a _SUCCESS action with an undefined action.payload, instead of a _FAILED action with the exception info

This revision now requires changes to proceed.Dec 28 2022, 5:18 PM
ginsu updated this revision to Diff 20359.Dec 29 2022, 8:50 AM

address ashoat's comments

Harbormaster completed remote builds in B14941: Diff 20359.Dec 29 2022, 9:04 AM
ashoat accepted this revision.Dec 29 2022, 9:57 AM
atul resigned from this revision.Dec 29 2022, 12:49 PM

Resigning to unblock since this was approved by @ashoat.

This revision is now accepted and ready to land.Dec 29 2022, 12:49 PM
Closed by commit rCOMM2e65a4c16214: [web] introduce useOnClickReact hook in reaction message utils (authored by ginsu). · Explain WhyDec 29 2022, 1:06 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMM2e65a4c16214: [web] introduce useOnClickReact hook in reaction message utils.

Revision Contents
Changeset List

PathSize
web/
chat/
62 lines

Diff 20188

View Options

web/chat/reaction-message-utils.js

// @flow // @flow
import { HeaderBackButton as BaseHeaderBackButton } from '@react-navigation/elements'; import { HeaderBackButton as BaseHeaderBackButton } from '@react-navigation/elements';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { Text } from 'react-native'; import { Alert, Text } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler'; import { TouchableOpacity } from 'react-native-gesture-handler';
import type { NavigationRoute } from '../navigation/route-names';
import { useColors } from '../themes/colors.js'; import { useColors } from '../themes/colors.js';
type Props = React.ElementConfig<typeof BaseHeaderBackButton>; type ChangeRolesHeaderLeftButtonProps = {
function ChangeRolesHeaderLeftButton(props: Props): React.Node { +route: NavigationRoute<'ChangeRolesScreen'>,
...React.ElementConfig<typeof BaseHeaderBackButton>,
};
function ChangeRolesHeaderLeftButton(
props: ChangeRolesHeaderLeftButtonProps,
): React.Node {
const { memberInfo, role: selectedRole } = props.route.params;
const { role: memberRole } = memberInfo;
const onCancel = React.useCallback(() => {
const { onPress } = props;
invariant(onPress, 'onPress must be defined');
if (selectedRole === memberRole) {
onPress();
return;
}
Alert.alert(
'Unsaved Changes',
'You have unsaved changes, are you sure you want to cancel? You will lose all your progress',
[
{ text: 'Cancel', onPress },
{ text: 'Stay', style: 'cancel' },
],
{ cancelable: true },
);
}, [memberRole, props, selectedRole]);
rohanAuthorUnsubmitted
Done
Inline Actions

I think the wording here may be a bit confusing. In my experience, 'cancel' typically means close the alert, and there's another option like 'confirm' or something that will mean you're ok with discarding changes.

Here it seems like 'cancel' means we're ok with discarding changes. Not sure if it's just me though (cc @ted)

rohan: I think the wording here may be a bit confusing. In my experience, 'cancel' typically means…
ashoatUnsubmitted
Not Done
Inline Actions

What do we do in the current edit-message workflow? Heads-up I generally handle copy, not @ted

ashoat: What do we do in the current edit-message workflow? Heads-up I generally handle copy, not @ted
rohanAuthorUnsubmitted
Done
Inline Actions

Ah my bad. It looks like in message editing: Continue editing closes the alert and continues editing while Discard edit closes the alert and exits editing

rohan: Ah my bad. It looks like in message editing: `Continue editing` closes the alert and continues…
ashoatUnsubmitted
Not Done
Inline Actions
  1. I agree we shouldn't use the term Cancel here... how about Leave?
  2. I don't think we need { cancelable: true }... we can just default to Stay if the user dismisses the Alert
  3. Can we try to match copy for title / description with the edit-message workflow?
ashoat: 1. I agree we shouldn't use the term `Cancel` here... how about `Leave`? 2. I don't think we…
rohanAuthorUnsubmitted
Done
Inline Actions

Yeah that makes sense, I'll update the diff

rohan: Yeah that makes sense, I'll update the diff
const { panelForegroundSecondaryLabel } = useColors(); const { panelForegroundSecondaryLabel } = useColors();
const labelStyle = React.useMemo( const labelStyle = React.useMemo(
() => ({ () => ({
color: panelForegroundSecondaryLabel, color: panelForegroundSecondaryLabel,
marginLeft: 10, marginLeft: 10,
}), }),
[panelForegroundSecondaryLabel], [panelForegroundSecondaryLabel],
); );
return ( return (
<TouchableOpacity onPress={props.onPress}> <TouchableOpacity onPress={onCancel}>
<Text style={labelStyle}>Cancel</Text> <Text style={labelStyle}>Cancel</Text>
</TouchableOpacity> </TouchableOpacity>
); );
} }
export default ChangeRolesHeaderLeftButton; export default ChangeRolesHeaderLeftButton;