Skip to content

refactor(typescript): tighten types and migrate core JS files to TS#7444

Open
Shevilll wants to merge 1 commit into
RocketChat:developfrom
Shevilll:refactor/rn-type-tightening
Open

refactor(typescript): tighten types and migrate core JS files to TS#7444
Shevilll wants to merge 1 commit into
RocketChat:developfrom
Shevilll:refactor/rn-type-tightening

Conversation

@Shevilll

@Shevilll Shevilll commented Jun 25, 2026

Copy link
Copy Markdown

Summary of Changes

This PR tightens types and migrates several core untyped JavaScript files to strict TypeScript to enhance reliability, autocompletion, and compile-time correctness across the app.

  1. protectedFunction Migration (.js -> .ts):

    • Converted app/lib/methods/helpers/protectedFunction.js to TypeScript.
    • Fully typed using TypeScript Generics <T extends (...args: any[]) => any> and the Parameters<T> utility type, ensuring compile-time safety and autocompletion when wrapping callback functions.
  2. Root Redux Reducer Migration (.js -> .ts):

    • Converted app/reducers/index.js to TypeScript.
    • Properly aggregated and registered sub-reducers with modern TypeScript definitions.
  3. Mapped Icons Configuration Migration (.js -> .ts):

    • Converted app/containers/CustomIcon/mappedIcons.js to TypeScript.
    • Applied the as const modifier on the mapped icons object to strongly type the TIconsName union type (keyof typeof mappedIcons). This ensures compile-time validation for icon names used throughout the entire codebase.

Verification

  • Successfully ran pnpm lint (which runs eslint . && tsc) and verified that the project compiles with absolutely zero type or formatting errors.

Summary by CodeRabbit

  • Style

    • Standardized icon mapping entries to use unquoted names where possible, improving readability without changing any icon values.
  • Bug Fixes

    • Restored a safe function-wrapping helper that catches errors and logs them instead of letting them propagate.

@coderabbitai

coderabbitai Bot commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Walkthrough

The icon map now uses unquoted property names where valid, while preserving the same numeric IDs. A TypeScript protectedFunction helper is added that wraps a function call and logs caught errors.

Changes

Icon map normalization

Layer / File(s) Summary
Identifier keys in mappedIcons
app/containers/CustomIcon/mappedIcons.ts
Quoted keys are converted to unquoted identifier properties where allowed, while hyphenated keys remain quoted and the icon ID values stay unchanged.

Protected function helper

Layer / File(s) Summary
TypeScript wrapper export
app/lib/methods/helpers/protectedFunction.ts
protectedFunction exports a wrapper that calls the input function with the same parameters, catches thrown errors, and logs them to console.log.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

type: chore

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main change: tightening TypeScript types and migrating core JavaScript files to TypeScript.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/lib/methods/helpers/protectedFunction.ts`:
- Around line 1-8: The protectedFunction helper only catches synchronous
exceptions, so promise-returning callbacks can still reject unhandled. Update
the wrapper in protectedFunction to detect when fn returns a promise from the
returned callback and attach a rejection handler (or await it in an async
wrapper) so both sync throws and async rejections are handled; use the existing
protectedFunction symbol and keep the current logging behavior in the catch
path.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9bed448f-eb96-4944-8c33-e208b53dbed3

📥 Commits

Reviewing files that changed from the base of the PR and between da389be and 6d28dcb.

📒 Files selected for processing (4)
  • app/containers/CustomIcon/mappedIcons.ts
  • app/lib/methods/helpers/protectedFunction.js
  • app/lib/methods/helpers/protectedFunction.ts
  • app/reducers/index.ts
💤 Files with no reviewable changes (1)
  • app/lib/methods/helpers/protectedFunction.js
📜 Review details
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,ts,jsx,tsx}: Use descriptive names for functions, variables, and classes that clearly convey their purpose
Write comments that explain the 'why' behind code decisions, not the 'what'
Keep functions small and focused on a single responsibility
Use const by default, let when reassignment is needed, and avoid var
Prefer async/await over .then() chains for handling asynchronous operations
Use explicit error handling with try/catch blocks for async operations
Avoid deeply nested code; refactor complex logic into helper functions

Files:

  • app/lib/methods/helpers/protectedFunction.ts
  • app/containers/CustomIcon/mappedIcons.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use TypeScript for type safety; add explicit type annotations to function parameters and return types
Prefer interfaces over type aliases for defining object shapes in TypeScript
Use enums for sets of related constants rather than magic strings or numbers

Use TypeScript with strict mode enabled

Files:

  • app/lib/methods/helpers/protectedFunction.ts
  • app/containers/CustomIcon/mappedIcons.ts
**/*.{js,jsx,ts,tsx,json}

📄 CodeRabbit inference engine (CLAUDE.md)

Use Prettier formatting with tabs, single quotes, 130 character line width, no trailing commas, and avoid arrow function parentheses

Files:

  • app/lib/methods/helpers/protectedFunction.ts
  • app/containers/CustomIcon/mappedIcons.ts
**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Enforce ESLint rules from @rocket.chat/eslint-config with React, React Native, TypeScript, and Jest plugins

Files:

  • app/lib/methods/helpers/protectedFunction.ts
  • app/containers/CustomIcon/mappedIcons.ts
app/containers/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Place reusable UI components in 'app/containers/' directory

Files:

  • app/containers/CustomIcon/mappedIcons.ts
🧠 Learnings (1)
📚 Learning: 2026-04-30T17:07:51.020Z
Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7274
File: app/lib/services/voip/MediaCallEvents.ts:0-0
Timestamp: 2026-04-30T17:07:51.020Z
Learning: In this Rocket.Chat React Native codebase, the ESLint rule `no-void: error` is enforced. When you see a promise returned from an async call that is not awaited (a “floating promise”), do not silence it with the `void somePromise()` pattern. Instead, handle the promise explicitly by attaching `.catch(...)` (or otherwise awaiting/handling the error) so unhandled-rejection risks are addressed in a way that satisfies the existing ESLint configuration.

Applied to files:

  • app/lib/methods/helpers/protectedFunction.ts
  • app/containers/CustomIcon/mappedIcons.ts
🔇 Additional comments (1)
app/containers/CustomIcon/mappedIcons.ts (1)

2-233: LGTM!

Comment on lines +1 to +8
export default <T extends (...args: any[]) => any>(fn: T): ((...params: Parameters<T>) => void) =>
(...params: Parameters<T>) => {
try {
fn(...params);
} catch (e) {
console.log(e);
}
};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Handle promise-returning callbacks too.

try/catch only covers synchronous throws. This helper is already used around an async stream handler in app/lib/services/connect.ts:153-166, so a rejection will bypass this catch and become an unhandled rejection. Based on learnings, this codebase expects floating promises to be handled explicitly.

♻️ Proposed fix
 export default <T extends (...args: any[]) => any>(fn: T): ((...params: Parameters<T>) => void) =>
 	(...params: Parameters<T>) => {
 		try {
-			fn(...params);
+			Promise.resolve(fn(...params)).catch((e) => {
+				console.log(e);
+			});
 		} catch (e) {
 			console.log(e);
 		}
 	};
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export default <T extends (...args: any[]) => any>(fn: T): ((...params: Parameters<T>) => void) =>
(...params: Parameters<T>) => {
try {
fn(...params);
} catch (e) {
console.log(e);
}
};
export default <T extends (...args: any[]) => any>(fn: T): ((...params: Parameters<T>) => void) =>
(...params: Parameters<T>) => {
try {
Promise.resolve(fn(...params)).catch((e) => {
console.log(e);
});
} catch (e) {
console.log(e);
}
};
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/lib/methods/helpers/protectedFunction.ts` around lines 1 - 8, The
protectedFunction helper only catches synchronous exceptions, so
promise-returning callbacks can still reject unhandled. Update the wrapper in
protectedFunction to detect when fn returns a promise from the returned callback
and attach a rejection handler (or await it in an async wrapper) so both sync
throws and async rejections are handled; use the existing protectedFunction
symbol and keep the current logging behavior in the catch path.

Source: Learnings

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant