Untitled

import React, { useState, useEffect } from 'react';
import { withPage, Lift, useAppState } from '@d-lift/core';
import { useLocation } from 'react-router-dom';
import BodySection from '@/Layout/BodySection';
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 = () => {
    const location = useLocation();
    const [responseData, setResponseData] = useAppState('responseData', { description: '', questions: [] });
    const [rfiObj, setRfiObj] = useAppState('rfiObj', location.state?.model?.rfi || {});

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

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

            // const response = await webService.getFullDetails({
            //     requestBody: { rfiId: rfi?.id },
            // });

            const response = {
                timestamp: '2024-06-12T08:40:55.159891600Z',
                message: {
                    code: 200,
                    notify: false,
                },
                data: {
                    rfiId: 14501,
                    description: 'This is the description for the RFI.',
                    questions: [
                        {
                            rfiId: 14501,
                            id: 18001,
                            question: 'What is React Router?',
                            description: 'Duis sit amet rhoncus est. Praesent elit nibh, venenatis lacinia consequat eu, lacinia in felis. Curabitur consectetur tempus est, tempor uis, nec convallis enim commodo ac.Nullam sit amet justo nec est sagittis rutrum. Vestibulum lectus tortor, finibus sed ipsum sed, condimentum malesuada enim. Donec interdum, odio ac consectetur vulputate, sem nisi facilisis quam, id sollicitudin nibh magna sed justo. Pellentesque euismod imperdiet arcu in vestibulum. Sed sed varius nulla, vitae accumsan ni sodales vehicula. Duis viverra metus dui, eget malesuada quam vehicula ac. Nunc ultrices sapien arcu, et ullamcorper turpis egestas at.rem maximus purus ullamcorper consectetur.',
                            answers: [
                                {
                                    id: 101,
                                    quesnId: 18001,
                                    answer: 'React Router is a routing library for React.',
                                    state: 'IOWA',
                                },
                            ],
                        },
                        {
                            rfiId: 14501,
                            id: 18051,
                            question: 'What are the main components provided by React Router?',
                            description: '',
                            answers: [],
                        },
                    ],
                },
                correlationId: 'FD277BD5A55147BABAD48DEA7CC63258',
            };

            console.log(response);
            if (response && response.data) {
                setResponseData(response.data);
                Lift.Application.Notification.success('Response Data loaded successfully');
            }
        } catch (error) {
            console.log(error);
            Lift.Application.Notification.error('Failed to load Response Data');
        } finally {
            Lift.spinner.hide();
        }
    };

    const calculateResponseStats = () => {
        const totalQuestions = responseData.questions.length;
        const answeredQuestions = responseData.questions.filter(q => q.answers && q.answers.length > 0).length;
        const percentageAnswered = totalQuestions > 0 ? ((answeredQuestions / totalQuestions) * 100).toFixed(2) : 0;
        return `${answeredQuestions} of ${totalQuestions} (${percentageAnswered}%)`;
    };

    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">
                                    <Para className="ux-rfi-bold">{calculateResponseStats()}</Para>
                                </Label>

                                <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 className="mt-2 scrollable-content">{responseData.description}</Para>
                </div>

                <Questions responseData={responseData.questions}></Questions>
            </BodySection>
        </Page>
    );
};

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