Page MenuHomePhabricator

[web] Introduce `pendingColorSelection` state to `ColorSelector` component
ClosedPublic

Authored by atul on Apr 10 2022, 7:14 PM.
Tags
None
Referenced Files
F3294640: D3684.diff
Sat, Nov 16, 7:38 PM
Unknown Object (File)
Fri, Nov 8, 10:42 PM
Unknown Object (File)
Tue, Nov 5, 8:58 PM
Unknown Object (File)
Sat, Nov 2, 9:54 AM
Unknown Object (File)
Sat, Nov 2, 9:54 AM
Unknown Object (File)
Sat, Nov 2, 9:54 AM
Unknown Object (File)
Wed, Oct 23, 3:18 AM
Unknown Object (File)
Tue, Oct 22, 8:44 PM

Details

Summary

Introduce pendingColorSelection state to the ColorSelector component that keeps track of the user's color selection.

pendingColorSelection is passed to the ColorSelectorButton component to style the button based on whether it is the actively selected color or not.

setPendingColorSelection is also passed down to the ColorSelectorButton so any "new" color selections will update the pendingColorSelection state in ColorSelector.

Test Plan

Works as expected:

Diff Detail

Repository
rCOMM Comm
Branch
master
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

atul added reviewers: tomek, jacek.
atul published this revision for review.Apr 10 2022, 7:17 PM
atul added inline comments.
web/modals/threads/color-selector.react.js
27–28 ↗(On Diff #11266)

Aware of the "repetition" here, will be fixed in future diffs where these children will be created in a for loop

web/modals/threads/color-selector-button.react.js
11 ↗(On Diff #11266)

It doesn't matter here, but it's worth mentioning, that when passing set state function, we can always use SetState<T> type defined in hook-types.js:

export type SetState<T> = ((T => T) | T) => void;
16–19 ↗(On Diff #11266)

I don't think we need useMemo here. Here is Ashoat's answer for similar case in one of my diffs (https://phabricator.ashoat.com/D3377?id=10819#inline-21183)

There are two reasons to put something inside a React.useMemo:

  1. The more important one, which is to make sure objects are not re-generated. In this case we have a primitive (boolean) so it does not matter, but if this useMemo returned an object or an array, then preventing it from regenerating one when the inputs do not change could reduce unnecessary render cycles deeper in the render tree
  2. Sometimes there is some expensive calculation, and React.useMemo can save the processing time by caching the answer. In this case the calculation is extremely cheap
tomek requested changes to this revision.Apr 11 2022, 6:55 AM

Agree with @def-au1t comments.

@def-au1t in the future, please request changes in cases like that

This revision now requires changes to proceed.Apr 11 2022, 6:55 AM

rebase before addressing feedback

atul added inline comments.
web/modals/threads/color-selector-button.react.js
11 ↗(On Diff #11266)

Ah thanks for pointing that out

16–19 ↗(On Diff #11266)

Good point, thanks for catching that!

This revision is now accepted and ready to land.Apr 12 2022, 3:11 AM
atul marked an inline comment as done.

rebase before landing