Refactor (packages/web/src/components/Share.tsx): Function with many returns

[ahmaddpathan]

P1B: Starter Task: Refactoring PR

1. Issue

Link to the associated GitHub issue:

#7

Full path to the refactored file:

packages/web/src/components/Share.tsx

What do you think this file does?

This file appears to implement the UI for viewing a shared OpenCode session. It manages live session updates through a WebSocket connection and renders session messages, connection status, usage statistics and related UI state.

What is the scope of your refactoring within that file?

The refactoring is limited to getStatusText(), which converts the current connection status into the appropriate display message. I changed its return structure without changing the behavior of the larger Share component.

Which Qlty‑reported issue did you address?

Qlty reported Function with many returns (count = 6): getStatusText at line 24 of packages/web/src/components/Share.tsx.

2. Refactoring

How did the specific issue you chose impact the codebase’s maintainability?

The function had six separate return paths, which fragmented its control flow and could make future changes to connection-status handling easier to overlook. A single return point makes the result of each branch easier to follow consistently.

What changes did you make to resolve the issue?

I replaced the individual returns inside the switch with assignments to a local text variable and added one return at the end of the function. I preserved all existing status mappings, including the custom error-message fallback, and exported the function so its behavior could be tested directly.

How do your changes improve maintainability? Did you consider alternatives?

The refactor gives the function one consistent exit point while preserving its existing switch-based structure and behavior. I considered replacing the switch with a lookup object, but the error case has special fallback behavior, so retaining the switch required fewer behavioural changes and kept the refactor focused.

3. Validation

How did you validate that the change is correct?

I reran Qlty and confirmed that the getStatusText many-returns smell is no longer reported. I also added targeted Bun tests covering all normal connection statuses, a supplied error message, and the default error fallback; all three tests pass locally, and LCOV confirms that the refactored lines are executed.

Attach a screenshot of the test coverage showing the lines were executed by the tests.

Attach a screenshot showing the tests that cover the change passing during CI

Attach a screenshot of qlty smells --no-snippets <full/path/to/file.ts> showing fewer reported issues after the changes.

Before Refactoring:

After Refactoring:

MORE SCREENSHOTS

1. New Tests Written to Check Code Changes

Note: The tests cover all possible six cases/branches in the function. All tests pass after refactoring. The 3 tests cover successful signals, error message and default case. No tests were previously given for the refactored function.

2. bun test Output

Note: bun test command executed successfully in the terminal for the relevant file and all written tests passed.

3. bun lint Output

Note: bun lint command executed successfully in the terminal for the relevant file and no errors/warnings were shown.