IO-924 Rest of phonebook implementation

client/src/components/phonebook-form/phonebook-form.container.jsx

@@ -0,0 +1,151 @@
+import { useMutation, useQuery } from "@apollo/client";
+import { Form, notification } from "antd";
+import queryString from "query-string";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useHistory, useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import {
+  DELETE_PHONEBOOK,
+  INSERT_NEW_PHONEBOOK,
+  QUERY_PHONEBOOK_BY_ID,
+  UPDATE_PHONEBOOK,
+} from "../../graphql/phonebook.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import PhonebookFormComponent from "./phonebook-form.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+function PhonebookFormContainer({ refetch, bodyshop }) {
+  const history = useHistory();
+  const search = queryString.parse(useLocation().search);
+  const { phonebookentry } = search;
+  const [formLoading, setFormLoading] = useState(false);
+  const [form] = Form.useForm();
+  const { t } = useTranslation();
+  const { loading, error, data } = useQuery(QUERY_PHONEBOOK_BY_ID, {
+    variables: { id: phonebookentry },
+    fetchPolicy: "network-only",
+    skip: !!!phonebookentry || phonebookentry === "new",
+  });
+
+  const [updatePhonebook] = useMutation(UPDATE_PHONEBOOK);
+  const [insertPhonebook] = useMutation(INSERT_NEW_PHONEBOOK);
+  const [deletePhonebook] = useMutation(DELETE_PHONEBOOK);
+
+  const handleDelete = async () => {
+    setFormLoading(true);
+    const result = await deletePhonebook({
+      variables: { id: phonebookentry },
+      refetchQueries: ["QUERY_PHONEBOOK_PAGINATED"],
+    });
+
+    if (!result.errors) {
+      notification["success"]({
+        message: t("phonebook.successes.deleted"),
+      });
+      delete search.phonebookentry;
+      history.push({ search: queryString.stringify(search) });
+      if (refetch)
+        refetch().then((r) => {
+          form.resetFields();
+        });
+    } else {
+      notification["error"]({
+        message: t("phonebook.errors.deleting", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+    }
+
+    setFormLoading(false);
+  };
+
+  const handleFinish = async (values) => {
+    setFormLoading(true);
+    if (phonebookentry && phonebookentry !== "new") {
+      //It's a phonebook to update.
+      const result = await updatePhonebook({
+        variables: { id: phonebookentry, phonebook: values },
+        refetchQueries: ["QUERY_PHONEBOOK_PAGINATED"],
+      });
+
+      if (!result.errors) {
+        notification["success"]({
+          message: t("Phonebook.successes.saved"),
+        });
+
+        if (refetch) await refetch();
+        form.setFieldsValue(data.phonebook_by_pk);
+        form.resetFields();
+
+        setFormLoading(false);
+      } else {
+        notification["error"]({
+          message: t("Phonebook.errors.saving"),
+        });
+
+        setFormLoading(false);
+      }
+    } else {
+      //It's a new phonebook to insert.
+      const result = await insertPhonebook({
+        variables: {
+          phonebook_entry: [{ ...values, bodyshopid: bodyshop.id }],
+        },
+        refetchQueries: ["QUERY_PHONEBOOK_PAGINATED"],
+      });
+
+      if (!result.errors) {
+        notification["success"]({
+          message: t("phonebook.successes.saved"),
+        });
+
+        if (refetch) await refetch();
+        form.resetFields();
+        form.resetFields();
+        delete search.phonebookentry;
+        history.push({ search: queryString.stringify(search) });
+        setFormLoading(false);
+      } else {
+        notification["error"]({
+          message: t("phonebook.errors.saving"),
+        });
+        setFormLoading(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (data || phonebookentry === "new") form.resetFields();
+  }, [data, form, phonebookentry]);
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <Form
+      onFinish={handleFinish}
+      form={form}
+      layout="vertical"
+      autoComplete="new-password"
+      initialValues={data ? data.phonebook_by_pk : null}
+    >
+      {phonebookentry ? (
+        <PhonebookFormComponent
+          form={form}
+          formLoading={formLoading}
+          handleDelete={handleDelete}
+        />
+      ) : (
+        t("phonebook.labels.noneselected")
+      )}
+    </Form>
+  );
+}
+export default connect(mapStateToProps, null)(PhonebookFormContainer);