Files
bodyshop/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
2021-09-23 10:29:35 -07:00

119 lines
3.4 KiB
JavaScript

import { useMutation } from "@apollo/client";
import { Form, Modal, notification } from "antd";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { INSERT_NEW_NOTE, UPDATE_NOTE } from "../../graphql/notes.queries";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectNoteUpsert } from "../../redux/modals/modals.selectors";
import { selectCurrentUser } from "../../redux/user/user.selectors";
import NoteUpsertModalComponent from "./note-upsert-modal.component";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { insertAuditTrail } from "../../redux/application/application.actions";
import AuditTrailMapping from "../../utils/AuditTrailMappings";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
noteUpsertModal: selectNoteUpsert,
});
const mapDispatchToProps = (dispatch) => ({
toggleModalVisible: () => dispatch(toggleModalVisible("noteUpsert")),
insertAuditTrail: ({ jobid, operation }) =>
dispatch(insertAuditTrail({ jobid, operation })),
});
export function NoteUpsertModalContainer({
currentUser,
noteUpsertModal,
toggleModalVisible,
insertAuditTrail,
}) {
const { t } = useTranslation();
const [insertNote] = useMutation(INSERT_NEW_NOTE);
const [updateNote] = useMutation(UPDATE_NOTE);
const { visible, context, actions } = noteUpsertModal;
const { jobId, existingNote } = context;
const { refetch } = actions;
const [form] = Form.useForm();
useEffect(() => {
//Required to prevent infinite looping.
if (existingNote && visible) {
form.setFieldsValue(existingNote);
} else if (!existingNote && visible) {
form.resetFields();
}
}, [existingNote, form, visible]);
const handleFinish = (values) => {
if (existingNote) {
logImEXEvent("job_note_update");
updateNote({
variables: {
noteId: existingNote.id,
note: values,
},
}).then((r) => {
notification["success"]({
message: t("notes.successes.updated"),
});
insertAuditTrail({
jobid: context.jobId,
operation: AuditTrailMapping.jobnoteupdated(),
});
});
if (refetch) refetch();
toggleModalVisible();
} else {
logImEXEvent("job_note_insert");
insertNote({
variables: {
noteInput: [
{ ...values, jobid: jobId, created_by: currentUser.email },
],
},
}).then((r) => {
if (refetch) refetch();
form.resetFields();
toggleModalVisible();
notification["success"]({
message: t("notes.successes.create"),
});
insertAuditTrail({
jobid: context.jobId,
operation: AuditTrailMapping.jobnoteadded(),
});
});
}
};
return (
<Modal
title={existingNote ? t("notes.actions.edit") : t("notes.actions.new")}
visible={visible}
okText={t("general.actions.save")}
onOk={() => {
form.submit();
}}
onCancel={() => {
toggleModalVisible();
}}
destroyOnClose
>
<Form form={form} onFinish={handleFinish} layout="vertical">
<NoteUpsertModalComponent form={form} />
</Form>
</Modal>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(NoteUpsertModalContainer);