|
| 1 | +/** |
| 2 | + * Example usage of the StepActionList component |
| 3 | + * |
| 4 | + * This file demonstrates how to use the StepActionList component |
| 5 | + * in different scenarios within your application. |
| 6 | + */ |
| 7 | + |
| 8 | +import React, { useState } from 'react'; |
| 9 | +import StepActionList from '../components/StepActionList'; |
| 10 | +import { Step, StepStatus, AgentType } from '../models'; |
| 11 | +import { apiService } from '../api/apiService'; |
| 12 | + |
| 13 | +/** |
| 14 | + * Example: Using StepActionList in a plan page |
| 15 | + */ |
| 16 | +const PlanPageExample: React.FC = () => { |
| 17 | + const [steps, setSteps] = useState<Step[]>([]); |
| 18 | + const [loading, setLoading] = useState(false); |
| 19 | + |
| 20 | + // Example: Handle approve action |
| 21 | + const handleApproveStep = async (stepId: string) => { |
| 22 | + setLoading(true); |
| 23 | + try { |
| 24 | + // Call your API service to approve the step |
| 25 | + await apiService.provideStepFeedback( |
| 26 | + stepId, |
| 27 | + 'plan-id', // Replace with actual plan ID |
| 28 | + 'session-id', // Replace with actual session ID |
| 29 | + true // approved = true |
| 30 | + ); |
| 31 | + |
| 32 | + // Update the local state or refetch data |
| 33 | + // This is where you would update multiple components |
| 34 | + await refetchPlanData(); |
| 35 | + } catch (error) { |
| 36 | + console.error('Failed to approve step:', error); |
| 37 | + } finally { |
| 38 | + setLoading(false); |
| 39 | + } |
| 40 | + }; |
| 41 | + |
| 42 | + // Example: Handle reject action |
| 43 | + const handleRejectStep = async (stepId: string) => { |
| 44 | + setLoading(true); |
| 45 | + try { |
| 46 | + // Call your API service to reject the step |
| 47 | + await apiService.provideStepFeedback( |
| 48 | + stepId, |
| 49 | + 'plan-id', // Replace with actual plan ID |
| 50 | + 'session-id', // Replace with actual session ID |
| 51 | + false // approved = false |
| 52 | + ); |
| 53 | + |
| 54 | + // Update the local state or refetch data |
| 55 | + // This is where you would update multiple components |
| 56 | + await refetchPlanData(); |
| 57 | + } catch (error) { |
| 58 | + console.error('Failed to reject step:', error); |
| 59 | + } finally { |
| 60 | + setLoading(false); |
| 61 | + } |
| 62 | + }; |
| 63 | + |
| 64 | + // Example: Refetch plan data to update all components |
| 65 | + const refetchPlanData = async () => { |
| 66 | + // This would trigger updates to: |
| 67 | + // - Plan status |
| 68 | + // - Progress bars |
| 69 | + // - Step counts |
| 70 | + // - Other plan-related components |
| 71 | + console.log('Refetching plan data to update all components'); |
| 72 | + }; |
| 73 | + |
| 74 | + return ( |
| 75 | + <div> |
| 76 | + <h2>Plan Steps Requiring Action</h2> |
| 77 | + <StepActionList |
| 78 | + steps={steps} |
| 79 | + onApprove={handleApproveStep} |
| 80 | + onReject={handleRejectStep} |
| 81 | + loading={loading} |
| 82 | + showOnlyAwaitingFeedback={true} |
| 83 | + emptyMessage="No steps are currently awaiting your feedback" |
| 84 | + /> |
| 85 | + </div> |
| 86 | + ); |
| 87 | +}; |
| 88 | + |
| 89 | +/** |
| 90 | + * Example: Using StepActionList for all steps (not just awaiting feedback) |
| 91 | + */ |
| 92 | +const AllStepsExample: React.FC = () => { |
| 93 | + const [steps, setSteps] = useState<Step[]>([]); |
| 94 | + |
| 95 | + const handleApprove = async (stepId: string) => { |
| 96 | + // Your approval logic here |
| 97 | + console.log('Approving step:', stepId); |
| 98 | + }; |
| 99 | + |
| 100 | + const handleReject = async (stepId: string) => { |
| 101 | + // Your rejection logic here |
| 102 | + console.log('Rejecting step:', stepId); |
| 103 | + }; |
| 104 | + |
| 105 | + return ( |
| 106 | + <div> |
| 107 | + <h2>All Plan Steps</h2> |
| 108 | + <StepActionList |
| 109 | + steps={steps} |
| 110 | + onApprove={handleApprove} |
| 111 | + onReject={handleReject} |
| 112 | + showOnlyAwaitingFeedback={false} // Show all steps |
| 113 | + emptyMessage="No steps found for this plan" |
| 114 | + /> |
| 115 | + </div> |
| 116 | + ); |
| 117 | +}; |
| 118 | + |
| 119 | +/** |
| 120 | + * Example: Integration with existing plan data |
| 121 | + */ |
| 122 | +const IntegratedExample: React.FC<{ planId: string; sessionId: string }> = ({ |
| 123 | + planId, |
| 124 | + sessionId |
| 125 | +}) => { |
| 126 | + const [steps, setSteps] = useState<Step[]>([]); |
| 127 | + const [loading, setLoading] = useState(false); |
| 128 | + |
| 129 | + // Example: Load steps from API |
| 130 | + React.useEffect(() => { |
| 131 | + const loadSteps = async () => { |
| 132 | + try { |
| 133 | + const planSteps = await apiService.getSteps(planId); |
| 134 | + setSteps(planSteps); |
| 135 | + } catch (error) { |
| 136 | + console.error('Failed to load steps:', error); |
| 137 | + } |
| 138 | + }; |
| 139 | + |
| 140 | + loadSteps(); |
| 141 | + }, [planId]); |
| 142 | + |
| 143 | + // Integrated action handlers that update multiple components |
| 144 | + const handleStepAction = async (stepId: string, approved: boolean) => { |
| 145 | + setLoading(true); |
| 146 | + try { |
| 147 | + await apiService.provideStepFeedback(stepId, planId, sessionId, approved); |
| 148 | + |
| 149 | + // Update local steps state |
| 150 | + setSteps(prevSteps => |
| 151 | + prevSteps.map(step => |
| 152 | + step.id === stepId |
| 153 | + ? { ...step, status: approved ? StepStatus.APPROVED : StepStatus.REJECTED } |
| 154 | + : step |
| 155 | + ) |
| 156 | + ); |
| 157 | + |
| 158 | + // Trigger updates to other components |
| 159 | + // This could be through: |
| 160 | + // - Context updates |
| 161 | + // - Parent component callbacks |
| 162 | + // - Global state management |
| 163 | + // - Event emitters |
| 164 | + |
| 165 | + } catch (error) { |
| 166 | + console.error('Failed to update step:', error); |
| 167 | + } finally { |
| 168 | + setLoading(false); |
| 169 | + } |
| 170 | + }; |
| 171 | + |
| 172 | + return ( |
| 173 | + <StepActionList |
| 174 | + steps={steps} |
| 175 | + onApprove={(stepId) => handleStepAction(stepId, true)} |
| 176 | + onReject={(stepId) => handleStepAction(stepId, false)} |
| 177 | + loading={loading} |
| 178 | + showOnlyAwaitingFeedback={true} |
| 179 | + /> |
| 180 | + ); |
| 181 | +}; |
| 182 | + |
| 183 | +export { PlanPageExample, AllStepsExample, IntegratedExample }; |
0 commit comments