Untitled

update the below code to call the service and then save the response , then send the response to questions component to render the values.
import BodySection from '@/Layout/BodySection';
import { withPage, useAppState ,Lift} from '@d-lift/core';
import React, { useEffect } from 'react';
import webService from '@/Services/WebService';
import Questions from './Components/Questions';
import { Button, Label, Column, Page, Header, Row, Para } from '@d-lift/uxcomponents';
import './response.scss';

const RFIResponse = () => {
    useEffect(() => {
        loadResponseData();
    }, []);

    const loadResponseData = async () => {
        try {
            Lift.spinner.show();

            const updatedData = await webService.createRFIRequest();

            if (updatedData) {
                Lift.Application.Notification.success('Response Data loaded sucessfully');
            }
        } catch (error) {
            console.log(error);
            Lift.Application.Notification.error('Failed to load Response Data');
        } finally {
            Lift.spinner.hide();
        }
    };

    return (
        <Page>
            <BodySection>
                <div className="ux-rfi-grey-border w-100 mt-3">
                    <Header
                        className="pt-3 ux-rfi-font-header"
                        size="2"
                        labelKey="RFI_Title"></Header>
                    <Row>
                        <Column className="col-9">
                            <Row className="d-flex flex-wrap">
                                <Para
                                    labelKey="very_much_longer"
                                    className="mr-2 mt-2 p-1 ml-3 ux-rfi-label-normal ux-rfi-green-label"></Para>
                                <Para
                                    labelKey="selection_1"
                                    className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal"></Para>
                                <Para
                                    labelKey="selection_1"
                                    className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal"></Para>
                                <Para
                                    labelKey="selection_1"
                                    className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal"></Para>
                                <Para
                                    labelKey="selection_1"
                                    className="ux-rfi-green-label mt-2 p-1 ux-rfi-label-normal"></Para>
                            </Row>
                        </Column>

                        <Column>
                            <div className="ux-rfi-grey-border">
                                <Label
                                    labelKey="requested_by"
                                    className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                                <Para labelKey="massachusetts" className="ux-rfi-bold"></Para>

                                <Label
                                    labelKey="due"
                                    className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                                <Para labelKey="nov_15" className="ux-rfi-bold"></Para>

                                <Label
                                    labelKey="responses"
                                    className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                                <Para labelKey="18_of_30" className="ux-rfi-bold"></Para>

                                <div className="m-0 p-1">
                                    <Button
                                        id="summarizeBtn"
                                        size="small"
                                        className="ux-rfi-green-button"
                                        // click={}
                                        labelKey="summarize_btn"></Button>
                                </div>
                            </div>
                        </Column>
                    </Row>
                </div>

                <div className="ux-rfi-grey-border w-100 mt-3">
                    <Para labelKey="content" className="mt-2 scrollable-content"></Para>
                </div>

                <Questions></Questions>
            </BodySection>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Respond to an RFI page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
    },
    RFIResponse,
);