refactor(home): Extract home page logic to useHome hook #1852
Conversation
WalkthroughA new custom React hook, Changes
Sequence Diagram(s)sequenceDiagram
participant HomeComponent
participant useHome
participant ApolloGraphQL
participant NextRouter
HomeComponent->>useHome: Invoke useHome()
useHome->>ApolloGraphQL: Fetch suggested questions, settings
useHome->>ApolloGraphQL: Prepare createThread mutation
useHome->>NextRouter: Setup routing handlers
HomeComponent->>useHome: User selects suggested question
useHome->>HomeComponent: Trigger prompt submission
HomeComponent->>useHome: User creates new thread
useHome->>ApolloGraphQL: Execute createThread mutation
useHome->>ApolloGraphQL: Preload thread data
useHome->>NextRouter: Navigate to new thread page
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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: 1
🔭 Outside diff range comments (1)
wren-ui/src/pages/home/index.tsx (1)
1-20: Remove unused imports after refactoring.Several imports are no longer needed since the logic has been moved to the useHome hook:
ComponentRef,useMemo,useReffrom 'react'useRouterfrom 'next/router'- GraphQL related imports
- Some utility imports
-import { ComponentRef, useMemo, useRef } from 'react'; -import { useRouter } from 'next/router'; +import { ComponentRef, useMemo, useRef } from 'react';-import useHomeSidebar from '@/hooks/useHomeSidebar'; -import useAskPrompt from '@/hooks/useAskPrompt';-import { - useSuggestedQuestionsQuery, - useCreateThreadMutation, - useThreadLazyQuery, -} from '@/apollo/client/graphql/home.generated'; -import { useGetSettingsQuery } from '@/apollo/client/graphql/settings.generated'; -import { CreateThreadInput } from '@/apollo/client/graphql/__types__';
🧹 Nitpick comments (2)
wren-ui/src/hooks/useHome.ts (2)
39-41: Add type safety for onSelectQuestion parameter.The
questionparameter should be properly typed to ensure type safety and better IDE support.-const onSelectQuestion = async ({ question }) => { +const onSelectQuestion = async ({ question }: { question: string }) => {
43-53: Enhance error handling in onCreateResponse.While the function catches errors, it only logs them to console. Consider providing user feedback or returning error state for better UX.
Consider returning error state or using a toast notification:
const onCreateResponse = async (payload: CreateThreadInput) => { try { askPrompt.onStopPolling(); const response = await createThread({ variables: { data: payload } }); const threadId = response.data.createThread.id; await preloadThread({ variables: { threadId } }); router.push(Path.Home + `/${threadId}`); } catch (error) { console.error(error); + // Consider adding user-facing error handling here + // e.g., toast notification or error state } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
wren-ai-service/src/web/v1/services/ask.py(2 hunks)wren-ui/src/hooks/useHome.ts(1 hunks)wren-ui/src/pages/home/index.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: the documentation url https://docs.getwren.ai/oss/guide/home/dashboard in emptydashboard.tsx is inte...
Learnt from: andreashimin
PR: Canner/WrenAI#1094
File: wren-ui/src/components/pages/home/dashboardGrid/EmptyDashboard.tsx:53-60
Timestamp: 2025-01-09T04:00:10.185Z
Learning: The documentation URL https://docs.getwren.ai/oss/guide/home/dashboard in EmptyDashboard.tsx is intentionally non-existent as the documentation will be added after the feature implementation.
Applied to files:
wren-ui/src/hooks/useHome.ts
📚 Learning: error handling for non-existent asking tasks in wrenai is handled at the resolver level rather than ...
Learnt from: wwwy3y3
PR: Canner/WrenAI#1388
File: wren-ui/src/apollo/server/services/askingService.ts:599-604
Timestamp: 2025-03-17T19:26:10.835Z
Learning: Error handling for non-existent asking tasks in WrenAI is handled at the resolver level rather than in the service implementation.
Applied to files:
wren-ai-service/src/web/v1/services/ask.py
📚 Learning: in the wren-ai-service codebase, when adding new fields like "alias" to the output of functions that...
Learnt from: cyyeh
PR: Canner/WrenAI#1763
File: wren-ai-service/src/pipelines/generation/semantics_description.py:31-33
Timestamp: 2025-06-20T02:37:21.292Z
Learning: In the wren-ai-service codebase, when adding new fields like "alias" to the output of functions that use Pydantic models for validation, the user prefers not to update the corresponding Pydantic model definitions to include these new fields.
Applied to files:
wren-ai-service/src/web/v1/services/ask.py
🧬 Code Graph Analysis (1)
wren-ui/src/pages/home/index.tsx (1)
wren-ui/src/hooks/useHome.ts (1)
useHome(10-65)
🔇 Additional comments (6)
wren-ui/src/hooks/useHome.ts (1)
16-32: LGTM! Well-structured data fetching and memoization.The GraphQL queries are properly configured with appropriate fetch policies, and the memoized values efficiently prevent unnecessary re-renders.
wren-ui/src/pages/home/index.tsx (2)
90-90: LGTM! Proper import of the new useHome hook.The import statement correctly references the new custom hook.
92-102: LGTM! Clean hook usage with proper destructuring.The destructuring pattern correctly extracts all necessary values and handlers from the useHome hook, maintaining the same functionality while improving code organization.
wren-ai-service/src/web/v1/services/ask.py (3)
32-32: LGTM! Well-documented timeout field with sensible default.The timeout field is properly typed, documented, and has a reasonable default value of 30 seconds.
175-192: LGTM! Robust timeout implementation with proper error handling.The timeout wrapper correctly uses
asyncio.wait_forand handles timeout scenarios by setting appropriate error state. The logging and error message provide clear feedback about timeout conditions.
193-197: LGTM! Clean refactoring preserves original functionality.The original ask logic is properly moved to the private
_askmethod with the same signature and parameters, maintaining backward compatibility.
SyedaAnshrahGillani
force-pushed
the
refactor/home-component
branch
from
dab0e67 to
3d898ae
Compare
This pull request refactors the Home component to improve its structure and
readability. The logic for handling suggested questions, creating threads,
and managing the UI state has been extracted into a new custom hook called
useHome.
This change simplifies the Home component and makes the code more reusable.
The Home component is now much cleaner and easier to understand, and the
logic for handling suggested questions and creating threads can be reused in
other parts of the application.
Summary by CodeRabbit
New Features
Refactor