Untitled

Update the code for questions screen so that it is able to render the data.


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: '',
                            answers: [
                                {
                                    id: 101,
                                    quesnId: 18001,
                                    answer: 'ismail',
                                    state: 'AL',
                                },
                            ],
                        },
                        {
                            rfiId: 14501,
                            id: 18051,
                            question: 'What are the main components provided by React Router?',
                            description: '',
                        },
                    ],
                },
                correlationId: 'FD277BD5A55147BABAD48DEA7CC63258',
            };

            console.log(response);
            if (response && response.data) {
                const formattedData = response.data.questions.map((question) => ({
                    ...question,
                }));
                setResponseData(formattedData);
                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"></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 responseData={responseData}></Questions>
            </BodySection>
        </Page>
    );
};

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






import React from 'react';
import { Accordian, AccordianElement, Label, Button, Para } from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import '@/Validations/customValidations';

const Questions = ({ responseData }) => {
    return (
        <div className="ux-rfi-green-border mt-4">
            <Label labelKey="Questions"></Label>

            {responseData.map((item, index) =>
                item.questionsList.map((question, qIndex) => (
                    <Accordian id={`outer-accordian-${index}-${qIndex}`} key={question.id}>
                        <AccordianElement headerText={question.question}>
                            <Label>{question.answers.length} &nbsp Responses:</Label>

                            {question.answers.map((answer, aIndex) => (
                                <Accordian id={`inner-accordian-${index}-${aIndex}`}>
                                    <AccordianElement key={answer.id} headerText={answer.state}>
                                        <Para>{answer.answer}</Para>
                                        <Button
                                            id={`edit-btn-${index}-${qIndex}-${aIndex}`}
                                            size="small"
                                            className="ux-rfi-green-button float-right mt-4 mb-2"
                                            labelKey="edit_response"
                                            // click={() => Navigate.to('/create-rfi')}
                                        ></Button>
                                    </AccordianElement>
                                </Accordian>
                            ))}

                            <Button
                                id={`respond-btn-${index}-${qIndex}`}
                                size="small"
                                className="ux-rfi-green-button float-right mt-4 mb-2"
                                labelKey="respond_question"
                                // click={() => Navigate.to('/create-rfi')}
                            ></Button>
                        </AccordianElement>
                    </Accordian>
                )),
            )}
        </div>
    );
};

Questions.propTypes = {
    responseData: PropTypes.array.isRequired,
};

export default Questions;
import React from 'react';
import { Accordian, AccordianElement, Label, Button, Para } from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import '@/Validations/customValidations';

const Questions = ({ responseData }) => {
    return (
        <div className="ux-rfi-green-border mt-4">
            <Label labelKey="Questions"></Label>

            {responseData.map((item, index) =>
                item.questionsList.map((question, qIndex) => (
                    <Accordian id={`outer-accordian-${index}-${qIndex}`} key={question.id}>
                        <AccordianElement headerText={question.question}>
                            <Label>{question.answers.length} &nbsp Responses:</Label>

                            {question.answers.map((answer, aIndex) => (
                                <Accordian id={`inner-accordian-${index}-${aIndex}`}>
                                    <AccordianElement key={answer.id} headerText={answer.state}>
                                        <Para>{answer.answer}</Para>
                                        <Button
                                            id={`edit-btn-${index}-${qIndex}-${aIndex}`}
                                            size="small"
                                            className="ux-rfi-green-button float-right mt-4 mb-2"
                                            labelKey="edit_response"
                                            // click={() => Navigate.to('/create-rfi')}
                                        ></Button>
                                    </AccordianElement>
                                </Accordian>
                            ))}

                            <Button
                                id={`respond-btn-${index}-${qIndex}`}
                                size="small"
                                className="ux-rfi-green-button float-right mt-4 mb-2"
                                labelKey="respond_question"
                                // click={() => Navigate.to('/create-rfi')}
                            ></Button>
                        </AccordianElement>
                    </Accordian>
                )),
            )}
        </div>
    );
};

Questions.propTypes = {
    responseData: PropTypes.array.isRequired,
};

export default Questions;