Untitled

for each number of object present in the questionsList we need to render this outer-accordian and on basis of answers object present in questionsList.answers, we need to render the inner-accordian. the statement "{+1} &nbsp Responses:" should be able to display the number objects in questionsList.answers as in the number of answers provided


import React, { useState, useEffect } from 'react';
import { withPage, Lift } from '@d-lift/core';
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 [responseData, setResponseData] = useState([]);

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

    const loadResponseData = async () => {
        try {
            Lift.spinner.show();
            const data = [
                {
                    id: 0,
                    questionsList: [
                        {
                            rfiId: 0,
                            id: 0,
                            question: 'What is the airspeed velocity of an unladen swallow?',
                            description: 'string',
                            answers: [
                                {
                                    id: 0,
                                    quesnId: 0,
                                    answer: 'Although the story takes place in Europe, it is almost certainly a reference to the bit about the coconuts. Almost no data recorded actually indicates the airspeed of either type of African swallow. Rather than make blind guesses about the African swallow, it may be better to look into the capabilities of the European, or barn, swallow, for which extensive study data exists.',
                                    respondDt: '2024-06-06T05:46:37.758Z',
                                    state: 'IOWA',
                                },
                                {
                                    id: 0,
                                    quesnId: 0,
                                    answer: '12 km/hr',
                                    respondDt: '2024-06-06T05:46:37.758Z',
                                    state: 'Massachusetts',
                                },
                            ],
                        },
                    ],
                    title: 'string',
                    description: 'string',
                    reqDT: '2024-06-06T05:46:37.758Z',
                    state: 'string',
                    programs: 'string',
                    category: 'string',
                    status: 'string',
                    dueDT: '2024-06-06',
                    pocId: 0,
                    offering: 'string',
                },
            ];

            // const data = await webService.getFullDetails();
            if (data) {
                const respondDt = new Date(updatedData.dueDT);
                const formattedRespondDt = respondDt.toISOString().split('T')[0];
                
                const updatedData = {
                    ...data,
                    respondDt: formattedRespondDt,
                };

                setResponseData(updatedData);
                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,
    AccordianElementData,
    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="question"></Label>

            {/* OUTER COLLAPSE PANEL COMPONENTS */}
            <Accordian id="outer-accordian">
                <AccordianElement headerText={responseData.questionsList.question}>
                    <Label>{responseData.questionsList.length()} &nbsp Responses:</Label>

                    {/* INNER COLLAPSE PANEL COMPONENTS */}
                    <Accordian id="inner-accordian">
                        <AccordianElement headerText={responseData.questionsList.answers.state}>
                            <Para>{responseData.questionsList.answers.answer}</Para>
                            <Button
                                id="edit-btn"
                                size="small"
                                className="ux-rfi-green-button float-right m-2"
                                // click={handleSubmit}
                                labelKey="edit_response"></Button>
                        </AccordianElement>
                    </Accordian>
                    <Button
                        id="respond-btn"
                        size="small"
                        className="ux-rfi-green-button float-right m-2"
                        // click={handleSubmit}
                        labelKey="respond_question"></Button>
                </AccordianElement>
            </Accordian>
        </div>
    );
};

Questions.propTypes = {
    index: PropTypes.number.isRequired,
};
export default Questions;