Implement trimming of leading/trailing whitespace and newlines for verification codes #586
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
apps/router/src/guardian-ui/components/setup/screens/verifyGuardians/VerifyGuardians.tsxOops! Something went wrong! :( ESLint: 8.40.0 Error: Cannot read config file: /apps/router/.eslintrc.js
📝 WalkthroughWalkthroughThe pull request introduces a custom hook, Changes
Sequence DiagramsequenceDiagram
participant Component as VerifyGuardians
participant Hook as useTrimmedInputArray
participant State as Input State
Component->>Hook: Initialize with empty values
Hook-->>Component: Return values and handleChange
Component->>Hook: Call handleChange with index and value
Hook->>State: Update trimmed value at specific index
State-->>Component: Reflect updated input state
The sequence diagram illustrates how the new Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
apps/router/src/hooks/custom/useTrimmedInput.tsx (1)
3-3: Memoize cleanInput functionThe
cleanInputfunction should be memoized usinguseCallbackto prevent unnecessary re-renders.-const cleanInput = (value: string) => value.trim(); +const cleanInput = useCallback((value: string) => value.trim(), []);apps/router/src/guardian-ui/components/setup/screens/verifyGuardians/VerifyGuardians.tsx (1)
Line range hint
138-141: Memoize isAllValid checkThe
isAllValidcheck should be memoized to prevent unnecessary recalculations.-const isAllValid = - peersWithHash && - peersWithHash.every(({ hash }, idx) => hash === enteredHashes[idx]); +const isAllValid = useMemo( + () => + peersWithHash && + peersWithHash.every(({ hash }, idx) => hash === enteredHashes[idx]), + [peersWithHash, enteredHashes] +);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/router/src/guardian-ui/components/setup/screens/verifyGuardians/VerifyGuardians.tsx(5 hunks)apps/router/src/hooks/custom/useTrimmedInput.tsx(1 hunks)apps/router/src/hooks/index.tsx(1 hunks)
🔇 Additional comments (1)
apps/router/src/hooks/index.tsx (1)
6-6: LGTM! Verify the exported module exists.
The new export follows the established pattern and supports the PR's objective.
✅ Verification successful
The exported module exists at the expected location
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Verify that the exported module exists
fd --type f "useTrimmedInput.tsx" apps/router/src/hooks/custom
Length of output: 111
apps/router/src/guardian-ui/components/setup/screens/verifyGuardians/VerifyGuardians.tsx
Show resolved
Hide resolved
apps/router/src/guardian-ui/components/setup/screens/verifyGuardians/VerifyGuardians.tsx
Show resolved
Hide resolved
kleysc
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/router/src/guardian-ui/components/setup/screens/verifyGuardians/VerifyGuardians.tsx (2)
67-69: Optimize initial values array creationThe initial values array creation should be memoized to prevent unnecessary array allocations on each render.
- const [enteredHashes, handleHashChange] = useTrimmedInputArray( - peersWithHash ? peersWithHash.map(() => '') : [] - ); + const initialValues = useMemo( + () => (peersWithHash ? peersWithHash.map(() => '') : []), + [peersWithHash] + ); + const [enteredHashes, handleHashChange] = useTrimmedInputArray(initialValues);
229-229: Extract duplicated input handlerThe same input handling logic is duplicated in two places. Consider extracting it to a memoized function.
+ const handleInputChange = useCallback( + (idx: number, value: string) => handleHashChange(idx, value), + [handleHashChange] + ); + // ... then use handleInputChange in both places: - onChange={(ev) => handleHashChange(idx, ev.currentTarget.value)} + onChange={(ev) => handleInputChange(idx, ev.currentTarget.value)}Also applies to: 334-334
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/router/src/guardian-ui/components/setup/screens/verifyGuardians/VerifyGuardians.tsx(5 hunks)
🔇 Additional comments (2)
apps/router/src/guardian-ui/components/setup/screens/verifyGuardians/VerifyGuardians.tsx (2)
106-116: LGTM: Error state clearing implemented
The implementation now properly clears the error state before prefilling hashes, addressing a previous review comment.
123-123: Optimize effect dependencies
Including handleHashChange in the dependency array could cause unnecessary re-renders.
kleysc
force-pushed
the
trim-verification-codes
branch
from
4b9766b to
d5dcca2
Compare
|
The |
| const handleChange = (index: number, newValue: string) => { | ||
| setValues((prev) => { | ||
| const newValues = [...prev]; | ||
| newValues[index] = cleanInput(newValue); | ||
| return newValues; | ||
| }); | ||
| }; |
| @@ -63,7 +64,9 @@ export const VerifyGuardians: React.FC<Props> = ({ next }) => { | |||
| const isHost = role === GuardianRole.Host; | |||
| const [myHash, setMyHash] = useState(''); | |||
| const [peersWithHash, setPeersWithHash] = useState<PeerWithHash[]>(); | |||
| const [enteredHashes, setEnteredHashes] = useState<string[]>([]); | |||
| const [enteredHashes, handleHashChange] = useTrimmedInputArray( | |||
| peersWithHash ? peersWithHash.map(() => '') : [] | |||
There was a problem hiding this comment.
Can you help me understand the purpose of the map? It looks like we're mapping the array entries to an empty string. Is this the intended behavior?
| }); | ||
| }; | ||
|
|
||
| return [values, handleChange] as const; |
There was a problem hiding this comment.
nit: this return seems a bit strange ([] as const)
Once the returned items are memoized, you can just use return { values, handleChange }.
Issue #585
Implementation Summary
Objective: Implement a hook to trim leading and trailing whitespace from verification codes, improving user input validation and enhancing the overall experience during setup.
Key Changes
Custom Hook
useTrimmedInputArray:ui/apps/router/src/hooks/custom/useTrimmedInput.tsx.Updated Components:
VerifyGuardians.tsx: IntegrateduseTrimmedInputArrayto sanitize the verification codes entered by guardians.Features
Before and Now
useTrimmedInputArrayensures all inputs are sanitized automatically, improving robustness and maintainability.Summary by CodeRabbit
New Features
VerifyGuardianscomponent for improved input handling and verification of guardian hashes.Bug Fixes
Documentation