Untitled

Add th code in submit function to Clear the rfiRequest object after successful API hit. set it to the initial value of empty request same as defaultRFIRequest


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


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);
    };

    useEffect(() => {
        let refTableContent = JSON.parse(Util.getSessionData(ConstantKeys.REF_TABLE.GET_OFFERING));
        console.log('refTableContent:', refTableContent);
    });


    return (
        <Page ref-table-list="PROGRAM, CATEGORY, OFFERING">
            <div className="d-flex">
                <BodySection>
                    <RFIRequestForm
                        rfiRequest={rfiRequest}
                        updateRFIRequest={updateRFIRequest}
                        ></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,
    Label,
} 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 }) => {
    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 {
            Lift.spinner.show();
            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 });
            Lift.Application.Notification.success('Question deleted sucessfully');
        } catch (error) {
            console.error('Failed to delete the question from the database', error);
        } finally {
            Lift.spinner.hide();
        }
    };

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

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

             // add a code here to Clear the rfiRequest object after successful API hit. set it to the initial value of empty request same as defaultRFIRequest
            Lift.Application.Notification.success('Application submitted Sucessfully');
        } catch (error) {
            Lift.Application.Notification.error('Application could not be submitted');
        } finally {
            Lift.spinner.hide();
        }
    };

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

            const updatedData = await webService.createRFIRequest({
                requestBody: draftRFIRequest,
            });

            if (updatedData) {
                const dueDate = new Date(updatedData.dueDT);
                const formattedDueDt =
                    updatedData.status === 'DT'
                        ? dueDate.toISOString().split('T')[0]
                        : updatedData.neededBy;

                const updatedRfiRequest = {
                    ...updatedData,
                    category: updatedData.category.split(','),
                    programs: updatedData.programs.split(','),
                    neededBy: formattedDueDt,
                };
                updateRFIRequest(updatedRfiRequest);
                Lift.Application.Notification.success('Draft saved Sucessfully');
            }
        } catch (error) {
            console.log(error);
            Lift.Application.Notification.error('Draft could not be saved');
        } finally {
            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;