workflow slice added#41
Conversation
📝 WalkthroughWalkthroughThe pull request introduces Redux-based workflow state management and automatic initialization. A new Redux slice manages workflow identity and status, integrated into the root reducer. The CreateWorkFlow component now fetches an empty workflow from the database on mount and dispatches it to Redux store via server-side database handler. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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: 3
🧹 Nitpick comments (4)
apps/web/app/workflow/lib/dbHandler.ts (1)
5-15: Add error handling for database queries.The database query lacks error handling. Network issues, database connection failures, or query errors could cause unhandled exceptions to propagate to the client.
🔎 Proposed enhancement
export const getEmptyWorkflow = async(): Promise<{id: string; isEmpty: boolean} | null> => { + try { const workflow = await prismaClient.workflow.findFirst({ where:{ isEmpty: true }, orderBy:{ createdAt: 'desc' } }); return workflow + } catch (error) { + console.error('Error fetching empty workflow:', error); + return null; + } }apps/web/app/components/nodes/CreateWorkFlow.tsx (1)
14-14: Remove unused import.
workflowReduceris imported but never used in this file. OnlyworkflowActionsis needed.🔎 Proposed fix
-import { workflowActions, workflowReducer } from "@/store/slices/workflowSlice"; +import { workflowActions } from "@/store/slices/workflowSlice";apps/web/store/slices/workflowSlice.ts (2)
23-25: Fix clearWorkflow reducer signature.The
clearWorkflowreducer doesn't use thestateparameter. While Redux Toolkit doesn't error on this, it's better practice to include the parameter for consistency.🔎 Proposed fix
- clearWorkflow(){ + clearWorkflow(state){ return initialState }Alternatively, you can mutate the state instead of returning a new object:
- clearWorkflow(){ - return initialState + clearWorkflow(state){ + state.workflow_id = null; + state.empty = true; }
3-11: Consider renaming "empty" to "isEmpty" for clarity.The field name
emptyis less descriptive thanisEmpty, which better indicates it's a boolean status flag. This would also align with the database field name used in the Prisma query (isEmpty: true).🔎 Proposed refactor
export interface WorkflowSlice{ workflow_id: string | null, - empty: boolean | null + isEmpty: boolean | null } const initialState: WorkflowSlice = { workflow_id :null, - empty: true + isEmpty: true } const workflowSlice = createSlice({ name: 'workflow', initialState, reducers:{ setWorkflowId(state, action:PayloadAction<string | null>){ state.workflow_id = action.payload }, setWorkflowStatus(state, action: PayloadAction<boolean | null>){ - state.empty = action.payload + state.isEmpty = action.payload }, clearWorkflow(state){ return initialState } } })Note: This would require updating the usage in CreateWorkFlow.tsx as well.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web/app/components/nodes/CreateWorkFlow.tsxapps/web/app/workflow/lib/dbHandler.tsapps/web/store/root-reducer.tsapps/web/store/slices/workflowSlice.ts
🧰 Additional context used
🧬 Code graph analysis (3)
apps/web/app/workflow/lib/dbHandler.ts (1)
packages/db/src/index.ts (1)
prismaClient(17-18)
apps/web/store/root-reducer.ts (2)
apps/web/store/slices/userSlice.ts (1)
userReducer(30-30)apps/web/store/slices/workflowSlice.ts (1)
workflowReducer(29-29)
apps/web/app/components/nodes/CreateWorkFlow.tsx (2)
apps/web/app/workflow/lib/dbHandler.ts (1)
getEmptyWorkflow(5-15)apps/web/store/slices/workflowSlice.ts (1)
workflowActions(30-30)
🪛 Biome (2.1.2)
apps/web/app/components/nodes/CreateWorkFlow.tsx
[error] 124-124: Const declarations must have an initialized value.
This variable needs to be initialized.
(parse)
🔇 Additional comments (2)
apps/web/store/root-reducer.ts (1)
3-8: LGTM! Redux integration follows best practices.The integration of
workflowReducerinto the root reducer is correct and follows Redux Toolkit conventions.apps/web/store/slices/workflowSlice.ts (1)
1-30: LGTM! Redux slice structure is well-formed.The Redux Toolkit slice follows best practices with clear action creators and proper TypeScript typing. The state shape is simple and appropriate for workflow management.
| useEffect(()=>{ | ||
| async function getEmptyWorkflowID(){ | ||
| const workflow = await getEmptyWorkflow() | ||
|
|
||
| if(workflow){ | ||
| const {id, isEmpty} = workflow | ||
| dispatch(workflowActions.setWorkflowId(id)) | ||
| dispatch(workflowActions.setWorkflowStatus(isEmpty)) | ||
| } | ||
| else{ | ||
| const newWorkflow | ||
| } | ||
| } | ||
| getEmptyWorkflowID() | ||
| },[dispatch]) |
There was a problem hiding this comment.
Fix syntax error in incomplete else branch.
The else branch at Line 124 contains an uninitialized const declaration, which is a syntax error. This will prevent the code from compiling.
🔎 Proposed fix
If the else branch is not yet implemented, remove it:
if(workflow){
const {id, isEmpty} = workflow
dispatch(workflowActions.setWorkflowId(id))
dispatch(workflowActions.setWorkflowStatus(isEmpty))
}
- else{
- const newWorkflow
- }
}Alternatively, if you intend to create a new workflow when none exists, complete the implementation:
if(workflow){
const {id, isEmpty} = workflow
dispatch(workflowActions.setWorkflowId(id))
dispatch(workflowActions.setWorkflowStatus(isEmpty))
}
- else{
- const newWorkflow
- }
+ else{
+ // TODO: Create a new empty workflow
+ }📝 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.
| useEffect(()=>{ | |
| async function getEmptyWorkflowID(){ | |
| const workflow = await getEmptyWorkflow() | |
| if(workflow){ | |
| const {id, isEmpty} = workflow | |
| dispatch(workflowActions.setWorkflowId(id)) | |
| dispatch(workflowActions.setWorkflowStatus(isEmpty)) | |
| } | |
| else{ | |
| const newWorkflow | |
| } | |
| } | |
| getEmptyWorkflowID() | |
| },[dispatch]) | |
| useEffect(()=>{ | |
| async function getEmptyWorkflowID(){ | |
| const workflow = await getEmptyWorkflow() | |
| if(workflow){ | |
| const {id, isEmpty} = workflow | |
| dispatch(workflowActions.setWorkflowId(id)) | |
| dispatch(workflowActions.setWorkflowStatus(isEmpty)) | |
| } | |
| } | |
| getEmptyWorkflowID() | |
| },[dispatch]) |
🧰 Tools
🪛 Biome (2.1.2)
[error] 124-124: Const declarations must have an initialized value.
This variable needs to be initialized.
(parse)
🤖 Prompt for AI Agents
In apps/web/app/components/nodes/CreateWorkFlow.tsx around lines 114–128 the
else branch contains an incomplete declaration ("const newWorkflow") which is a
syntax error; either remove the empty else block entirely or implement it by
creating a new workflow (await a createNewWorkflow()/getOrCreateEmptyWorkflow()
call), extract its id and isEmpty status, and dispatch
workflowActions.setWorkflowId(id) and
workflowActions.setWorkflowStatus(isEmpty); ensure the function is awaited and
handle errors (try/catch or null checks) before dispatching.
🛠️ Refactor suggestion | 🟠 Major
Add error handling for async workflow fetch.
The async operation lacks error handling. Network failures or database errors could cause unhandled promise rejections.
🔎 Proposed enhancement
useEffect(()=>{
async function getEmptyWorkflowID(){
- const workflow = await getEmptyWorkflow()
-
- if(workflow){
- const {id, isEmpty} = workflow
- dispatch(workflowActions.setWorkflowId(id))
- dispatch(workflowActions.setWorkflowStatus(isEmpty))
+ try {
+ const workflow = await getEmptyWorkflow()
+
+ if(workflow){
+ const {id, isEmpty} = workflow
+ dispatch(workflowActions.setWorkflowId(id))
+ dispatch(workflowActions.setWorkflowStatus(isEmpty))
+ }
+ } catch (error) {
+ console.error('Failed to fetch empty workflow:', error);
}
- else{
- const newWorkflow
- }
}
getEmptyWorkflowID()
},[dispatch])📝 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.
| useEffect(()=>{ | |
| async function getEmptyWorkflowID(){ | |
| const workflow = await getEmptyWorkflow() | |
| if(workflow){ | |
| const {id, isEmpty} = workflow | |
| dispatch(workflowActions.setWorkflowId(id)) | |
| dispatch(workflowActions.setWorkflowStatus(isEmpty)) | |
| } | |
| else{ | |
| const newWorkflow | |
| } | |
| } | |
| getEmptyWorkflowID() | |
| },[dispatch]) | |
| useEffect(()=>{ | |
| async function getEmptyWorkflowID(){ | |
| try { | |
| const workflow = await getEmptyWorkflow() | |
| if(workflow){ | |
| const {id, isEmpty} = workflow | |
| dispatch(workflowActions.setWorkflowId(id)) | |
| dispatch(workflowActions.setWorkflowStatus(isEmpty)) | |
| } | |
| } catch (error) { | |
| console.error('Failed to fetch empty workflow:', error); | |
| } | |
| } | |
| getEmptyWorkflowID() | |
| },[dispatch]) |
🧰 Tools
🪛 Biome (2.1.2)
[error] 124-124: Const declarations must have an initialized value.
This variable needs to be initialized.
(parse)
🤖 Prompt for AI Agents
In apps/web/app/components/nodes/CreateWorkFlow.tsx around lines 114-128, the
async getEmptyWorkflow call has no error handling which can cause unhandled
promise rejections; wrap the await getEmptyWorkflow() call in a try/catch, log
the error (console.error or app logger), and handle failure by dispatching an
error or fallback workflow state (e.g., dispatch a workflow error action or
setWorkflowStatus(false)) and optionally show a user-facing notification; ensure
the catch prevents further state updates when the component is unmounted (use a
mounted flag or abort pattern) so no setState on unmounted component.
| export const getEmptyWorkflow = async() =>{ | ||
| const workflow_id = await prismaClient.workflow.findFirst({ | ||
| where:{ | ||
| isEmpty: true | ||
| }, | ||
| orderBy:{ | ||
| createdAt: 'desc' | ||
| } | ||
| }); | ||
| return workflow_id || null | ||
| } |
There was a problem hiding this comment.
Fix misleading variable naming and return type.
The function has several issues:
- Misleading variable name:
workflow_idcontains the entire workflow object, not just the ID. - Return type inconsistency: The function returns the full workflow object but the variable name suggests only an ID is returned. This is confirmed by Line 119 in CreateWorkFlow.tsx which destructures
{id, isEmpty}from the result. - Missing return type annotation: The function should explicitly declare its return type.
- Redundant null coalescing:
findFirstalready returnsnullif no record is found, making|| nullredundant.
🔎 Proposed fix
-export const getEmptyWorkflow = async() =>{
- const workflow_id = await prismaClient.workflow.findFirst({
+export const getEmptyWorkflow = async(): Promise<{id: string; isEmpty: boolean} | null> => {
+ const workflow = await prismaClient.workflow.findFirst({
where:{
isEmpty: true
},
orderBy:{
createdAt: 'desc'
}
});
- return workflow_id || null
+ return workflow
}📝 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.
| export const getEmptyWorkflow = async() =>{ | |
| const workflow_id = await prismaClient.workflow.findFirst({ | |
| where:{ | |
| isEmpty: true | |
| }, | |
| orderBy:{ | |
| createdAt: 'desc' | |
| } | |
| }); | |
| return workflow_id || null | |
| } | |
| export const getEmptyWorkflow = async(): Promise<{id: string; isEmpty: boolean} | null> => { | |
| const workflow = await prismaClient.workflow.findFirst({ | |
| where:{ | |
| isEmpty: true | |
| }, | |
| orderBy:{ | |
| createdAt: 'desc' | |
| } | |
| }); | |
| return workflow | |
| } |
🤖 Prompt for AI Agents
In apps/web/app/workflow/lib/dbHandler.ts around lines 5 to 15, the function
uses a misleading variable name and lacks a return type: rename workflow_id to
workflow (or workflowRecord) to reflect that it holds the whole Workflow object,
add an explicit return type (Promise<Workflow | null> or the appropriate Prisma
Workflow type) on the function signature, remove the redundant "|| null" since
findFirst already returns null when not found, and return the workflow variable
directly; ensure you import or reference the correct Workflow type from your
Prisma client types if needed.
3 participants
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.