Fixed vehicle and owner pages with transition prevention. BOD-127

client/src/components/contract-license-decode-button/contract-license-decode-button.component.jsx

@@ -3,7 +3,6 @@ import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import aamva from "../../utils/aamva";
-import aamva_npm from "aamva";
 import DataLabel from "../data-label/data-label.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 

client/src/components/owner-detail-form/owner-detail-form.container.jsx

@@ -11,26 +11,37 @@ function OwnerDetailFormContainer({ owner, refetch }) {
 
   const [updateOwner] = useMutation(UPDATE_OWNER);
 
-  const handleFinish = (values) => {
-    updateOwner({
+  const handleFinish = async (values) => {
+    const result = await updateOwner({
       variables: { ownerId: owner.id, owner: values },
-    }).then((r) => {
-      notification["success"]({
-        message: t("owners.successes.save"),
-      });
-      //TODO Better way to reset the field decorators?
-      if (refetch) refetch().then();
-      // resetFields();
     });
+
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("owners.errors.saving", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+      return;
+    }
+
+    notification["success"]({
+      message: t("owners.successes.save"),
+    });
+
+    if (refetch) await refetch();
+    form.resetFields();
+    form.resetFields();
   };
 
   return (
     <Form
       form={form}
       onFinish={handleFinish}
-      autoComplete='off'
-      layout='vertical'
-      initialValues={owner}>
+      autoComplete="off"
+      layout="vertical"
+      initialValues={owner}
+    >
       <OwnerDetailFormComponent form={form} />
     </Form>
   );

client/src/components/owners-list/owners-list.component.jsx

@@ -5,7 +5,6 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import PhoneFormatter from "../../utils/PhoneFormatter";
-import { alphaSort } from "../../utils/sorters";
 
 export default function OwnersListComponent({
   loading,
@@ -14,7 +13,10 @@ export default function OwnersListComponent({
   refetch,
 }) {
   const search = queryString.parse(useLocation().search);
-  const { page, sortcolumn, sortorder } = search;
+  const {
+    page,
+    // sortcolumn, sortorder
+  } = search;
   const history = useHistory();
 
   const [state, setState] = useState({

client/src/components/tech-sider/tech-sider.component.jsx

@@ -3,12 +3,12 @@ import { Layout, Menu } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FiLogIn, FiLogOut } from "react-icons/fi";
-import { MdTimer, MdTimerOff } from "react-icons/md";
+import { MdTimer } from "react-icons/md";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { techLogout } from "../../redux/tech/tech.actions";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
 const { Sider } = Layout;
 
 const mapStateToProps = createStructuredSelector({

client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx

@@ -11,28 +11,39 @@ function VehicleDetailFormContainer({ vehicle, refetch }) {
   const [updateVehicle] = useMutation(UPDATE_VEHICLE);
   const [form] = Form.useForm();
 
-  const handleFinish = (values) => {
-    updateVehicle({
+  const handleFinish = async (values) => {
+    const result = await updateVehicle({
       variables: { vehId: vehicle.id, vehicle: values },
-    }).then((r) => {
-      notification["success"]({
-        message: t("vehicles.successes.save"),
-      });
-      //TODO Better way to reset the field decorators?
-      if (refetch) refetch();
     });
+
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("vehicles.errors.saving", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+    }
+
+    notification["success"]({
+      message: t("vehicles.successes.save"),
+    });
+    //TODO Better way to reset the field decorators?
+    if (refetch) await refetch();
+    form.resetFields();
+    form.resetFields();
   };
 
   return (
     <Form
       onFinish={handleFinish}
       form={form}
-      autoComplete='off'
-      layout='vertical'
+      autoComplete="off"
+      layout="vertical"
       initialValues={{
         ...vehicle,
         v_prod_dt: vehicle.v_prod_dt ? moment(vehicle.v_prod_dt) : null,
-      }}>
+      }}
+    >
       <VehicleDetailFormComponent form={form} />
     </Form>
   );

client/src/components/vehicles-list/vehicles-list.component.jsx

@@ -4,8 +4,6 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
-import { alphaSort } from "../../utils/sorters";
-
 export default function VehiclesListComponent({
   loading,
   vehicles,
@@ -13,7 +11,10 @@ export default function VehiclesListComponent({
   refetch,
 }) {
   const search = queryString.parse(useLocation().search);
-  const { page, sortcolumn, sortorder } = search;
+  const {
+    page,
+    //sortcolumn, sortorder
+  } = search;
   const history = useHistory();
 
   const [state, setState] = useState({