Untitled

mail@pastecode.io avatar
unknown
plain_text
a month ago
7.7 kB
2
Indexable
Never
update the below code to display the description at {responseData.description} and call a function to display value similar to example :18 of 30 (60%) between::
<Label labelKey="responses" className="mt-1 ux-rfi-label-normal ux-rfi-grey-font">
     <Para className="ux-rfi-bold">{number of question answered, total number of question asked, and percentage answered  example :18 of 30 (60%)}</Para>
</Label>



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', []);
    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,
                    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.questions);
                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();
        }
    };

    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">{number of question answered, total number of question asked, and percentage answered  example :18 of 30 (60%)}</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>
            </BodySection>
        </Page>
    );
};

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