Refactor WebhookRouterForm to use axios for API calls instead of fetch #177
Conversation
WalkthroughReplaces a native Changes
Sequence Diagram(s)sequenceDiagram
participant UI as WebhookRouterForm
participant HTTP as axios.get
participant API as /completion-endpoint
UI->>HTTP: axios.get(endpoint)
HTTP->>API: GET request
API-->>HTTP: 200 { ...payload... }
HTTP-->>UI: { data: ...payload... }
Note right of UI `#D6EAF8`: construct webhookOptions from response.data
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/flow/routers/webhook/WebhookRouterForm.tsx (1)
78-102: Add error handling for the API call.Unlike
fetch, axios throws on non-2xx status codes. Without error handling, failures will cause unhandled promise rejections. Consider adding a try-catch block to handle errors gracefully.Apply this diff:
async componentDidMount() { - const endpoint = this.context.config.endpoints.completion; - const response = await axios.get(endpoint); - const data = response.data; - - const webhookOptions = (data.webhook || []).map((webhook: any) => ({ - name: webhook.name, - value: webhook.name, - id: webhook.name, - label: webhook.name, - body: webhook.body - })); - - if (this.state.method.value.value === Methods.FUNCTION && this.state.url.value) { - const functionName = this.state.url.value; - const selectedOption = webhookOptions.find((opt: any) => opt.name === functionName); - - this.setState({ - webhookOptions, - webhookFunction: { value: selectedOption || null } - }); - } else { - this.setState({ webhookOptions }); - } + try { + const endpoint = this.context.config.endpoints.completion; + const response = await axios.get(endpoint); + const data = response.data; + + const webhookOptions = (data.webhook || []).map((webhook: any) => ({ + name: webhook.name, + value: webhook.name, + id: webhook.name, + label: webhook.name, + body: webhook.body + })); + + if (this.state.method.value.value === Methods.FUNCTION && this.state.url.value) { + const functionName = this.state.url.value; + const selectedOption = webhookOptions.find((opt: any) => opt.name === functionName); + + this.setState({ + webhookOptions, + webhookFunction: { value: selectedOption || null } + }); + } else { + this.setState({ webhookOptions }); + } + } catch (error) { + console.error('Failed to fetch webhook options:', error); + // Consider setting an error state or showing a user-friendly message + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/flow/routers/webhook/WebhookRouterForm.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/flow/routers/webhook/WebhookRouterForm.tsx (1)
src/__mocks__/axios.ts (1)
axios(3-3)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Tests (16.x)
🔇 Additional comments (1)
src/components/flow/routers/webhook/WebhookRouterForm.tsx (1)
37-37: LGTM!The axios import is correctly added.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/flow/routers/webhook/WebhookRouterForm.test.tsx (1)
25-28: Consider adding mock cleanup for better test isolation.The beforeEach correctly sets up the axios mock, but adding
mockedAxios.get.mockClear()would prevent potential test pollution and ensure each test starts with a clean mock state.Apply this diff:
beforeEach(() => { + mockedAxios.get.mockClear(); mockedAxios.get.mockResolvedValue({ data: {} }); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/flow/routers/webhook/WebhookRouterForm.test.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/flow/routers/webhook/WebhookRouterForm.test.tsx (2)
src/test/utils.tsx (1)
mock(73-75)src/__mocks__/axios.ts (1)
axios(3-3)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Tests (16.x)
- GitHub Check: Coverage
🔇 Additional comments (1)
src/components/flow/routers/webhook/WebhookRouterForm.test.tsx (1)
12-16: LGTM! Axios mock setup is correct.The axios import, mock declaration, and typed mock instance are properly configured. The use of
jest.Mocked<typeof axios>provides good type safety for the test mocks.
Summary by CodeRabbit
Refactor
Tests
Chore