Page MenuHomePhabricator
Differential D3823

[web] Lift `buttons: React.Node` from `ThreadSettingsModal` to `ConnectedThreadSettingsModal`
ClosedPublic
Actions

Authored by atul on Apr 24 2022, 12:26 PM.
Tags
None
Referenced Files
F5109815: D3823.id11828.diff
Tue, Apr 1, 8:55 PM
F5109806: D3823.id11943.diff
Tue, Apr 1, 8:53 PM
F5107671: D3823.id11828.diff
Tue, Apr 1, 11:57 AM
Unknown Object (File)
Tue, Apr 1, 2:46 AM
Unknown Object (File)
Tue, Apr 1, 12:49 AM
Unknown Object (File)
Mon, Mar 31, 4:28 PM
Unknown Object (File)
Mon, Mar 31, 5:22 AM
Unknown Object (File)
Sat, Mar 29, 3:08 AM
View All Files
Subscribers
• abosh
• adrian
ashoat
• karol

Details

Reviewers
• jacek
tomek
Commits
rCOMMe9c961bedef6: [web] Lift `buttons: React.Node` from `ThreadSettingsModal` to…
Summary

Lift button from the ThreadSettingsModal class component to the ConnectedThreadSettingsModal functional component.

Doing this to "stage" the lifting of JSX markup into separate steps to hopefully make it easier to review.

As part of the work to refactor ThreadSettingsModal... specifically to turn it into a functional component.

Depends on D3822

Test Plan
  1. Open ThreadSettingsModal
  2. Make sure the "buttons" of the ThreadSettingsModal component continues to look and behave as expected (since that was what was moved)
  3. Change some settings around, hit save, make sure things are saved as expected

Diff Detail

Repository
rCOMM Comm
Branch
clean (branched from master)
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

atul created this revision.Apr 24 2022, 12:26 PM
Herald added subscribers: • abosh, • karol, • adrian, ashoat. · View Herald TranscriptApr 24 2022, 12:26 PM
Harbormaster completed remote builds in B8482: Diff 11827.Apr 24 2022, 12:30 PM
atul requested review of this revision.Apr 24 2022, 12:30 PM
atul updated this revision to Diff 11828.Apr 24 2022, 12:41 PM

fix

atul added a child revision: D3824: [web] Lift `tabs: React.Node` from `ThreadSettingsModal` to `ConnectedThreadSettingsModal`.Apr 24 2022, 12:45 PM
Harbormaster completed remote builds in B8483: Diff 11828.Apr 24 2022, 12:45 PM
tomek accepted this revision.Apr 26 2022, 7:58 AM
tomek added inline comments.
web/modals/threads/thread-settings-modal.react.js
109 ↗(On Diff #11828)

It seems like this is always defined. Can we avoid using optional here?

453–471 ↗(On Diff #11828)

What do you think about wrapping it with memo?

This revision is now accepted and ready to land.Apr 26 2022, 7:58 AM
atul updated this revision to Diff 11943.Apr 26 2022, 10:07 AM

rebase

Harbormaster completed remote builds in B8564: Diff 11943.Apr 26 2022, 10:14 AM
atul added inline comments.Apr 26 2022, 10:18 AM
web/modals/threads/thread-settings-modal.react.js
109 ↗(On Diff #11828)

Flow wasn't able to determine that button is always defined so I made this React.Node prop optional for now.

The class component gets cut entirely in the diff after this one (D3825) so I didn't spend too much time trying to do this "correctly."

453–471 ↗(On Diff #11828)

That definitely makes sense.

Just moving things around in this diff, the buttons eventually move into the ThreadSettings[General/Privacy/Delete]Tabs child components in later diffs.

I was planning on doing three "passes" after the refactor to make sure everything is good since a lot of things changed/got moved around.

  1. Optimizing (avoiding unnecessary renders, memoizing things, etc.)
  2. Styling (making sure that things look consistent, styles aren't broken, etc)
  3. Testing (go through all of the ThreadSettingsModal functionality thoroughly to ensure that there aren't any regressions)

Will take a look at memoizing the buttons in the first pass.

atul mentioned this in D3824: [web] Lift `tabs: React.Node` from `ThreadSettingsModal` to `ConnectedThreadSettingsModal`.Apr 26 2022, 10:22 AM
atul updated this revision to Diff 11959.Apr 26 2022, 12:02 PM

rebase before landing

Harbormaster completed remote builds in B8580: Diff 11959.Apr 26 2022, 12:07 PM
Closed by commit rCOMMe9c961bedef6: [web] Lift `buttons: React.Node` from `ThreadSettingsModal` to… (authored by atul). · Explain WhyApr 26 2022, 12:10 PM
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMMe9c961bedef6: [web] Lift `buttons: React.Node` from `ThreadSettingsModal` to….
atul mentioned this in D3845: [web] Use new `Tabs.Container` instead of existing `Tabs` component.Apr 28 2022, 3:12 PM

Revision Contents
Changeset List

PathSize
web/
modals/
threads/
51 lines

Diff 11943

View Options

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