Untitled

update the below code so that the if the values are given now then remove the question for which delete has been cliked and update the list, else send the request as below(hardcode it for now) to the delete API to delete the value, then use .(then) to get the response and update the question list with the received response. refer to the sumbit functionality for reference.
request:
{

  "questionId": 0,

  "requestId": 0

}




import BodySection from '@/Layout/BodySection';
import RightSection from '@/Layout/RightSection';
import { useAppState, withPage } from '@d-lift/core';
import { Page } from '@d-lift/uxcomponents';
import React from 'react';
import RFIFilters from './Components/RFIFilters';
import RFIRequestForm from './Components/RFIRequestForm';
import './create-rfi.scss';
import ConstantKeys from '@/Constants/ConstantKeys';

const RFIRequest = () => {
    const defaultRFIRequest = {
        title: '',
        reqDescription: '',
        questionsList: [{ question: '', description: '' }],
        requestedBy: '',
        neededBy: '',
        offering: ConstantKeys.DEFAULT_OPTION.OFFERING,
        category: ConstantKeys.DEFAULT_OPTION.CATEGORY,
        programs: ConstantKeys.DEFAULT_OPTION.PROGRAM,
        status: '',
    };

    const [rfiRequest, setRFIRequest] = useAppState('rfiRequest', defaultRFIRequest);

    const updateRFIRequest = (newState) => {
        setRFIRequest(newState);
    };

    return (
        <Page>
            <div className="d-flex">
                <BodySection>
                    <RFIRequestForm
                        rfiRequest={rfiRequest}
                        updateRFIRequest={updateRFIRequest}
                        resetRFIRequest={defaultRFIRequest}></RFIRequestForm>
                </BodySection>
                <RightSection>
                    <RFIFilters
                        rfiRequest={rfiRequest}
                        updateRFIRequest={updateRFIRequest}></RFIFilters>
                </RightSection>
            </div>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Make a Request Page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
    },
    RFIRequest,
);



import {
    Button,
    Checkbox,
    Column,
    Grid,
    Header,
    Row,
    Textarea,
    Textbox,
} from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import React, { useEffect } from 'react';
import Questionnaire from './Questionnaire';
import webService from '@/Services/WebService';
import ConstantKeys from '@/Constants/ConstantKeys';
import '@/Validations/customValidations'


const RFIRequestForm = ({ rfiRequest, updateRFIRequest, resetRFIRequest }) => {
    const generateUniqueId = () => {
        return Math.floor(Math.random() * 100 + 1);
    };

    const handleAddQuestion = () => {
        let updatedQuestions = [
            ...rfiRequest.questionsList,
            { id: generateUniqueId(), question: '', description: '' },
        ];
        updateRFIRequest({ ...rfiRequest, questionsList: updatedQuestions });
    };

    const handleDeleteQuestion = (id) => {
        const questionToDelete = rfiRequest.questionsList.find((q) => q.id === id);
        if (questionToDelete.saved) {
            deleteQuestionFromDatabase(id);
        } else {
            let updatedQuestions = rfiRequest.questionsList.filter((q) => q.id !== id);
            updateRFIRequest({ ...rfiRequest, questionsList: updatedQuestions });
        }
    };

    const deleteQuestionFromDatabase = async (id) => {
        try {
            // Your delete request logic here
            // Example:
            // await webService.deleteRFIQuesion(`/questions/${id}`);
            let updatedQuestions = rfiRequest.questionsList.filter((q) => q.id !== id);
            updateRFIRequest({ ...rfiRequest, updatedQuestions });
        } catch (error) {
            console.error('Failed to delete the question from the database', error);
        }
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log('Submitted data', rfiRequest);

        try {
            const submitRFIRequest = {
                ...rfiRequest,
                status: ConstantKeys.STATUS_CODES.SUBMITTED,
            };
            updateRFIRequest(submitRFIRequest);

            webService.createRFIRequest({
                requestBody:  submitRFIRequest ,
            });

            resetRFIRequest(); //Clear the rfiRequest object after sucessful API hit
        } catch (error) {
            console.log(error);
        }
    };

    const saveDraft = () => {
        console.log('Draft saved: ', rfiRequest);
        const draftRFIRequest = {
            ...rfiRequest,
            status: ConstantKeys.STATUS_CODES.DRAFT,
        };
        updateRFIRequest(draftRFIRequest);

        webService.createRFIRequest({
            requestBody:  draftRFIRequest ,
        });
    };

    useEffect(() => {
        // Update the document title using the browser API
        console.log('On Page Load');
    });

    return (
        <>
            <Header size="2" labelKey="request_header" className="pt-3 ux-rfi-font-header"></Header>
            <Textbox
                name="title"
                model="rfiRequest.title"
                placeholder="Placeholder text"
                inputPattern="^[A-Za-z0-9 ,?']+$"
                labelKey="title"
                className="pt-3">
            </Textbox>

            <Textarea
                id="noresize"
                maxLength="100"
                model="rfiRequest.reqDescription"
                placeholderText="Placeholder text"
                // validationRules="alphaNumericCheck"
                // errormessages='{{"alphaNumericCheck":"only_alphabets_allowed"}}'
                rows="5"
                wrap="hard"
                labelKey="request_desc">
                {' '}
            </Textarea>

            {rfiRequest?.questionsList.map((q, index) => (
                <Questionnaire
                    key={q.id}
                    index={index}
                    onDeleteQuestion={() => handleDeleteQuestion(q.id)}
                />
            ))}

            <div className="pt-4">
                <Button
                    id="addQues-btn"
                    size="small"
                    className="ux-rfi-green-button"
                    click={handleAddQuestion}
                    labelKey="addQues_btn"></Button>
            </div>
            <Grid>
                <Row className="mt-5 mb-2">
                    <Column className="col-md-4">
                        <Button
                            id="saveDraft-btn"
                            size="small"
                            className="ux-rfi-green-button"
                            click={saveDraft}
                            labelKey="save_draft_btn"></Button>
                    </Column>
                    <Column className="align-self-center col-md-4 ">
                        <Checkbox
                            id="notification"
                            labelKey="email_notification"
                            model="rfiRequest.email_notification"
                        />
                    </Column>
                    <Column className="col-md-4">
                        <Button
                            id="submit-btn"
                            size="small"
                            className="ux-rfi-green-button float-right"
                            click={handleSubmit}
                            labelKey="submit_btn"></Button>
                    </Column>
                </Row>
            </Grid>
        </>
    );
};

RFIRequestForm.propTypes = {
    rfiRequest: PropTypes.object.isRequired,
    updateRFIRequest: PropTypes.func.isRequired,
};
export default RFIRequestForm;