Rough onboarding flow part 2

[voltrevo]

Dependent PR

This PR builds on top of #93. Please review and merge that first.

What is this PR doing?

Finishes the (mostly) unstyled onboarding flow by adding the confirmation phase for the secret words.

How can these changes be manually tested?

Click through the review phase.

Does this PR resolve or contribute to any issues?

Resolves #90.

Checklist

• I have manually tested these changes
• Post a link to the PR in the group chat

Guidelines

• If your PR is not ready, mark it as a draft
• The resolve conversation button is for reviewers, not authors
  • (But add a 'done' comment or similar)

[kautukkundan]

Minor Changes

[kautukkundan]

Suggested change

	className={classes.join(' ')}
	className={`button ${highlight && "highlight"} ${loading && "loading"} ${disabled && "disabled"}`}

Will keep this component stateless

[voltrevo]

Similar to before, I don't like this because it inserts false.

I think this pattern comes up a lot though, and I agree that the classes.join approach is a bit verbose. How about a utility like this?

export default function classFlags(classes: Record<string, boolean>) {
  return Object.entries(classes)
    .filter(([, flag]) => flag)
    .map(([className]) => className)
    .join(' ');
}

That way we could write:

<div className={classFlags({ button: true, highlight, loading, disabled })}/>

[kautukkundan]

This does look fine.
Also there's a popular one called classnames.

but again, it works only for this component as its static and the local variable doesn't change after this is rendered. In other components, conditional styles must set via state mutation and not local variable mutation.

Reason :
If the component's state changes, only the part where the state is consumed is re-rendered. However, in case local vars change in a component, ENTIRE component along with ALL the children are re-rendered as react sees it as a brand new component

[voltrevo]

In other components, conditional styles must set via state mutation and not local variable mutation.

I'm not sure why but I'm not able to follow what you're getting at here. Maybe an example where something similar to what I'm doing goes badly would help?

[kautukkundan]

apologies for not being clear, I meant that
state variables = variables declared using useState method
local variables = any other variable declared in the body of the component

Also I played around in a fresh project and I think that the reason I gave is wrong. Instead of re-rendering every child component, it wont do anything if a local variable is mutated.

Btw this doesn't apply in this particular case anymore, so I guess let's come back to this later if such a case arises again.

[voltrevo]

👍

[kautukkundan]

LGTM 👍🏼