Untitled

In the response when we save draft we are getting the value as {
        "id": 6851,
        "questionsList": [
            {
                "rfiId": 6851,
                "id": 7001,
                "question": "jytbiuytiun",
                "description": "Class components are ES6 classes that extend from Component and have lifecycle meth"
            }
        ],
        "title": "mbnvbmnv,m",
        "description": "bbbbbbbbbbbbbbbbbbb",
        "reqDT": "2024-05-30T16:59:44.6347095",
        "state": "",
        "programs": "PIPP,MA",
        "category":  "RP,FO,IF",
        "status": "SB",
        "dueDT": "05-08-2024",
        "offering": "EE"
    }	
Update the code so that on getting the response update the values of category and program to category: ["RP", "FO", "IF"], programs: ["PIPP", "MA"] and then update this value to rfiRequest. also add async await to saveDraft, so that we can move only after we get updatedData from the response
	




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

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

    const handleAddQuestion = () => {
        console.log(rfiRequest.category, 'categoryList');

        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) {
            let updatedQuestions = rfiRequest.questionsList.filter((q) => q.id !== id);
            updateRFIRequest({ ...rfiRequest, questionsList: updatedQuestions });
        } else {
            deleteQuestionFromDatabase(id);
        }
    };

    const deleteQuestionFromDatabase = async (id) => {
        try {
            const response = await webService.deleteRFIQuesion(`/questions/${id}`, {
                requestBody: {
                    questionId: id,
                    requestId: 1, // hard coding the value as of now
                },
            });

            updateRFIRequest({ ...rfiRequest, questionsList: response.data.updatedQuestions });
        } catch (error) {
            console.error('Failed to delete the question from the database', error);
        }
    };

    const handleSubmit = () => {
        // event.preventDefault();
        // Lift.spinner.show();
        try {
            const submitRFIRequest = {
                ...rfiRequest,
                status: ConstantKeys.STATUS_CODES.SUBMITTED,
            };
            updateRFIRequest(submitRFIRequest);

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

            resetRFIRequest(); // Clear the rfiRequest object after successful API hit
            // Lift.spinner.hide();
        } catch (error) {
            console.log(error);
            // Lift.spinner.hide();
        }
    };

    const saveDraft = () => {
        // Lift.spinner.show();
        try {
            const draftRFIRequest = {
                ...rfiRequest,
                status: ConstantKeys.STATUS_CODES.DRAFT,
            };
            updateRFIRequest(draftRFIRequest);

            webService.createRFIRequest({
                requestBody: draftRFIRequest,
            }).then((updatedData) => {
                if (updatedData) {
                    updateRFIRequest(updatedData);
                }
            });
            // Lift.spinner.hide();
        } catch (error) {
            console.log(error);
            // Lift.spinner.hide();
        }
    };

    return (
        <>
            <Header size="2" labelKey="request_header" className="pt-3 ux-rfi-font-header"></Header>

            <Label className="mb-0 mt-3 mandatory_field" labelKey="title"></Label>

            <Textbox
                name="title"
                model="rfiRequest.title"
                placeholder="Placeholder text"
                className="ux-rfi-remove-padding"
                validationRules="alphaNumericCheck"
                errormessages={{ alphaNumericCheck: 'only_alphabets_allowed' }}
                required></Textbox>

            <Textarea
                id="noresize"
                maxLength="100"
                model="rfiRequest.description"
                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;