Page MenuHomePhabricator
Differential D3760

[web] Move `queuedChanges` state up from `ThreadSettingsModal` to `ConnectedThreadSettingsModal`
ClosedPublic
Actions

Authored by atul on Apr 18 2022, 11:38 AM.
Tags
None
Referenced Files
F5108478: D3760.id11558.diff
Tue, Apr 1, 1:52 PM
Unknown Object (File)
Tue, Apr 1, 12:59 AM
Unknown Object (File)
Mon, Mar 31, 9:18 PM
Unknown Object (File)
Sun, Mar 30, 11:54 AM
Unknown Object (File)
Sun, Mar 30, 10:17 AM
Unknown Object (File)
Sat, Mar 29, 9:31 PM
Unknown Object (File)
Sat, Mar 29, 9:10 PM
Unknown Object (File)
Tue, Mar 25, 9:01 PM
View All Files
Subscribers
• abosh
• adrian
ashoat
• benschac
• karol

Details

Reviewers
• jacek
tomek
Commits
rCOMM5c826a4f1daa: [web] Move `queuedChanges` state up from `ThreadSettingsModal` to…
Summary

Move currentTabType state out of the inner class component state, and move it out to the wrapping "Connected" functional component.

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

Depends on D3759

Test Plan

Was able to change settings in the ThreadSettingsModal and things continued to look/work as expected.

Diff Detail

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

Event Timeline

atul created this revision.Apr 18 2022, 11:38 AM
Herald added subscribers: • abosh, • benschac, • karol and 2 others. · View Herald TranscriptApr 18 2022, 11:38 AM
atul published this revision for review.Apr 18 2022, 11:39 AM
Harbormaster completed remote builds in B8267: Diff 11558.Apr 18 2022, 11:43 AM
atul added a child revision: D3762: [web] Move `namePlaceholder` up from `ThreadSettingsModal` to `ConnectedThreadSettingsModal`.Apr 18 2022, 12:46 PM
atul edited the summary of this revision. (Show Details)Apr 18 2022, 10:03 PM
tomek accepted this revision.Apr 19 2022, 3:52 AM
tomek added inline comments.
web/modals/threads/thread-settings-modal.react.js
349–352 ↗(On Diff #11558)

I know this is pure refactor diff, but just wanted to let you know that there's an inconsistency in what we're storing in state. When we clear the state, we set it to Object.freeze({}), but when we update it, we no longer freeze. We should either always freeze or never.

I think it should be fine to avoid freezing, as ThreadChanges has readonly fields.

This revision is now accepted and ready to land.Apr 19 2022, 3:52 AM
atul updated this revision to Diff 11639.Apr 19 2022, 12:58 PM

rebase before landing

Harbormaster completed remote builds in B8330: Diff 11639.Apr 19 2022, 1:02 PM
atul added inline comments.Apr 19 2022, 2:18 PM
web/modals/threads/thread-settings-modal.react.js
349–352 ↗(On Diff #11558)

Used Object.freeze() where it was used initially and ran into flow issues when I removed it:

1c31-1.png (876×1 px, 199 KB)

We should either always freeze or never.

Updating this diff to "freeze" everywhere.

atul updated this revision to Diff 11641.Apr 19 2022, 2:40 PM

Object.freeze() everywhere

Harbormaster completed remote builds in B8332: Diff 11641.Apr 19 2022, 2:44 PM
Closed by commit rCOMM5c826a4f1daa: [web] Move `queuedChanges` state up from `ThreadSettingsModal` to… (authored by atul). · Explain WhyApr 19 2022, 2:49 PM
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMM5c826a4f1daa: [web] Move `queuedChanges` state up from `ThreadSettingsModal` to….

Revision Contents
Changeset List

PathSize
web/
modals/
threads/
80 lines

Diff 11639

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;