Page MenuHomePhabricator
Differential D4680

[web] Introduce `ThreadSettingsRelationshipTab` component
ClosedPublic
Actions

Authored by • jacek on Jul 29 2022, 3:06 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 3:07 PM
Unknown Object (File)
Wed, Mar 12, 1:59 AM
Unknown Object (File)
Mon, Mar 3, 9:15 PM
Unknown Object (File)
Mon, Mar 3, 9:15 PM
Unknown Object (File)
Mon, Mar 3, 9:15 PM
Unknown Object (File)
Mon, Mar 3, 9:15 PM
Unknown Object (File)
Mon, Mar 3, 9:14 PM
Unknown Object (File)
Mon, Mar 3, 8:54 PM
View All Files
Subscribers
• abosh
• adrian
ashoat

Details

Reviewers
tomek
atul
Commits
rCOMM0bd92b5ec2a1: [web] Introduce `ThreadSettingsRelationshipTab` component
Summary

Introduce container for list of relationship buttons. It will be used as tab in thread settings modal on web

Screenshot_Google Chrome_2022-07-29_122412.png (665×460 px, 25 KB)

Test Plan

The component is not used yet. Test if tab displays correctly after introducing this tab in thread settings modal

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

• jacek created this revision.Jul 29 2022, 3:06 AM
Herald added subscribers: • abosh, • adrian, ashoat. · View Herald TranscriptJul 29 2022, 3:06 AM
Harbormaster completed remote builds in B10969: Diff 15091.Jul 29 2022, 3:18 AM
• jacek requested review of this revision.Jul 29 2022, 3:18 AM
• jacek added a child revision: D4681: [web] Include `Relationship` tab in thread settings modal.Jul 29 2022, 3:24 AM
• jacek edited the summary of this revision. (Show Details)
• jacek added a parent revision: D4679: [web] Introduce `ThreadSettingsRelationshipButton` component.
tomek requested changes to this revision.Jul 29 2022, 5:55 AM
tomek added inline comments.
web/modals/threads/settings/thread-settings-relationship-tab.react.js
14–15 ↗(On Diff #15091)

These props aren't used. Shouldn't this give a warning?

30 ↗(On Diff #15091)

In ThreadSettingsRelationshipButton setErrorMessage is string => void but here we use SetState<string>. Is flow ok with that? Is there a good reason for having different types?

This revision now requires changes to proceed.Jul 29 2022, 5:55 AM
• jacek added inline comments.Jul 29 2022, 6:35 AM
web/modals/threads/settings/thread-settings-relationship-tab.react.js
14–15 ↗(On Diff #15091)

Interesting. I thought flow should indicate warning for such variables.

30 ↗(On Diff #15091)

Flow is ok here. I'll replace the type in ...Button with SetState<string>

ashoat added inline comments.Jul 29 2022, 8:46 AM
web/modals/threads/settings/thread-settings-relationship-tab.react.js
14–15 ↗(On Diff #15091)

There can be a good reason for having a prop that you never use: to force the component to rerender. For instance, we do something similar here

• jacek updated this revision to Diff 15102.Jul 29 2022, 8:49 AM

Disable buttons basing on loading status

Harbormaster completed remote builds in B10974: Diff 15102.Jul 29 2022, 9:02 AM
tomek accepted this revision.Aug 1 2022, 6:45 AM
tomek added inline comments.
web/modals/threads/settings/thread-settings-relationship-tab.react.js
15–17 ↗(On Diff #15102)

I think that this selector should be in the same file where we create the action. We can either, create an action here and pass it to the component, or select the state there. The reason is that these need to be in sync, and having them in the same file makes it more likely to keep them in sync.

This revision is now accepted and ready to land.Aug 1 2022, 6:45 AM
• jacek updated this revision to Diff 15185.Aug 2 2022, 2:35 AM

Move createLoadingStatusSelector into Button component & simplify sintax

Harbormaster completed remote builds in B11042: Diff 15185.Aug 2 2022, 2:47 AM
Closed by commit rCOMM0bd92b5ec2a1: [web] Introduce `ThreadSettingsRelationshipTab` component (authored by • jacek). · Explain WhyAug 3 2022, 4:27 AM
This revision was automatically updated to reflect the committed changes.
• jacek added a commit: rCOMM0bd92b5ec2a1: [web] Introduce `ThreadSettingsRelationshipTab` component.

Revision Contents
Changeset List

Diff 15185

View Options

web/modals/threads/settings/thread-settings-relationship-tab.css

// @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;
View Options

web/modals/threads/settings/thread-settings-relationship-tab.react.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;