diff --git a/src/components/molecules/ActionDescriptionBox.tsx b/src/components/molecules/ActionDescriptionBox.tsx index c8a18a02..f6b3f612 100644 --- a/src/components/molecules/ActionDescriptionBox.tsx +++ b/src/components/molecules/ActionDescriptionBox.tsx @@ -43,7 +43,12 @@ const Content = styled.div` `; const ActionDescriptionBox = () => { - const { getText, getScreenshot, getList, captureStage } = useActionContext(); + const { getText, getScreenshot, getList, captureStage } = useActionContext() as { + getText: boolean; + getScreenshot: boolean; + getList: boolean; + captureStage: 'initial' | 'pagination' | 'limit' | 'complete'; + }; const messages = [ { stage: 'initial' as const, text: 'Select the list you want to extract along with the texts inside it' }, @@ -52,6 +57,9 @@ const ActionDescriptionBox = () => { { stage: 'complete' as const, text: 'Capture is complete' }, ]; + const stages = messages.map(({ stage }) => stage); // Create a list of stages + const currentStageIndex = stages.indexOf(captureStage); // Get the index of the current stage + const renderActionDescription = () => { if (getText) { return ( @@ -75,17 +83,12 @@ const ActionDescriptionBox = () => { Hover over the list you want to extract. Once selected, you can hover over all texts inside the list you selected. Click to select them. - {messages.map(({ stage, text }) => ( + {messages.map(({ stage, text }, index) => ( }