BOD-11 BOD-12 BOD-10 Updated packages + changes apollo hooks imports

client/package.json

@@ -4,11 +4,11 @@
   "private": true,
   "proxy": "https://localhost:5000",
   "dependencies": {
-    "@ckeditor/ckeditor5-build-classic": "^17.0.0",
+    "@ckeditor/ckeditor5-build-classic": "^18.0.0",
     "@ckeditor/ckeditor5-react": "^2.1.0",
     "@nivo/pie": "^0.61.1",
-    "@tanem/react-nprogress": "^3.0.18",
-    "antd": "^4.0.0",
+    "@tanem/react-nprogress": "^3.0.19",
+    "antd": "^4.0.4",
     "apollo-boost": "^0.4.4",
     "apollo-link-context": "^1.0.19",
     "apollo-link-error": "^1.1.12",
@@ -17,19 +17,19 @@
     "axios": "^0.19.2",
     "chart.js": "^2.9.3",
     "dotenv": "^8.2.0",
-    "firebase": "^7.9.3",
+    "firebase": "^7.12.0",
     "graphql": "^14.6.0",
-    "i18next": "^19.3.2",
+    "i18next": "^19.3.3",
     "node-sass": "^4.13.1",
-    "react": "^16.13.0",
+    "react": "^16.13.1",
     "react-apollo": "^3.1.3",
     "react-barcode": "^1.4.0",
-    "react-big-calendar": "^0.24.0",
-    "react-dom": "^16.13.0",
+    "react-big-calendar": "^0.24.1",
+    "react-dom": "^16.13.1",
     "react-grid-gallery": "^0.5.5",
-    "react-grid-layout": "^0.18.2",
+    "react-grid-layout": "^0.18.3",
     "react-html-email": "^3.0.0",
-    "react-i18next": "^11.3.3",
+    "react-i18next": "^11.3.4",
     "react-icons": "^3.9.0",
     "react-image-file-resizer": "^0.2.1",
     "react-image-gallery": "^1.0.6",
@@ -38,7 +38,7 @@
     "react-pdf": "^4.1.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0",
+    "react-scripts": "3.4.1",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
@@ -47,7 +47,7 @@
     "source-map-explorer": "^2.3.1",
     "styled-components": "^5.0.1",
     "subscriptions-transport-ws": "^0.9.16",
-    "twilio": "^3.39.5"
+    "twilio": "^3.41.1"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",

client/src/components/allocations-assignment/allocations-assignment.container.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import AllocationsAssignmentComponent from "./allocations-assignment.component";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/react-hooks";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
 import { useTranslation } from "react-i18next";
 import { notification } from "antd";

client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.container.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import AllocationsBulkAssignment from "./allocations-bulk-assignment.component";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/react-hooks";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
 import { useTranslation } from "react-i18next";
 import { notification } from "antd";

client/src/components/allocations-employee-label/allocations-employee-label.container.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/react-hooks";
 import { DELETE_ALLOCATION } from "../../graphql/allocations.queries";
 import AllocationsLabelComponent from "./allocations-employee-label.component";
 import { notification } from "antd";

client/src/components/audit-trail-list/audit-trail-list.container.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import AuditTrailListComponent from "./audit-trail-list.component";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
 import AlertComponent from "../alert/alert.component";
 

client/src/components/documents-upload/documents-upload.container.jsx

@@ -1,7 +1,7 @@
 import { notification } from "antd";
 import axios from "axios";
 import React from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import Resizer from "react-image-file-resizer";
 import { connect } from "react-redux";

client/src/components/email-overlay/email-overlay.container.jsx

@@ -1,7 +1,7 @@
 import { Modal, notification } from "antd";
 import axios from "axios";
 import React, { useEffect, useState } from "react";
-import { useLazyQuery } from "react-apollo";
+import { useLazyQuery } from "@apollo/react-hooks";
 import ReactDOMServer from "react-dom/server";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";

client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { notification } from "antd";
-import { useLazyQuery, useQuery, useMutation } from "react-apollo";
+import { useLazyQuery, useQuery, useMutation } from "@apollo/react-hooks";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx

@@ -1,6 +1,6 @@
 import { notification } from "antd";
 import React from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/jobs-available-new/jobs-available-new.container.jsx

@@ -1,6 +1,6 @@
 import { notification } from "antd";
 import React, { useState } from "react";
-import { useMutation, useQuery } from "react-apollo";
+import { useMutation, useQuery } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import { withRouter } from "react-router-dom";
 import { DELETE_ALL_AVAILABLE_NEW_JOBS, QUERY_AVAILABLE_NEW_JOBS } from "../../graphql/available-jobs.queries";

client/src/components/jobs-available-supplement/jobs-available-supplement.container.jsx

@@ -1,6 +1,6 @@
 import { notification } from "antd";
 import React, { useState } from "react";
-import { useMutation, useQuery } from "react-apollo";
+import { useMutation, useQuery } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import { withRouter } from "react-router-dom";
 import {

client/src/components/jobs-create-owner-info/jobs-create-owner-info.container.jsx

@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 import JobsCreateOwnerInfoComponent from "./jobs-create-owner-info.component";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 import { QUERY_SEARCH_OWNER_BY_IDX } from "../../graphql/owners.queries";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import AlertComponent from "../alert/alert.component";
 
 export default function JobsCreateOwnerContainer() {

client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx

@@ -128,7 +128,7 @@ export default function JobsCreateOwnerInfoSearchComponent({
                     selectedid: record.id
                   }
                 });
-                console.log("Should be clearing fields.");
+       
                 return;
               }
             }

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.container.jsx

@@ -3,7 +3,7 @@ import JobsCreateVehicleInfoComponent from "./jobs-create-vehicle-info.component
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 import AlertComponent from "../alert/alert.component";
 import { SEARCH_VEHICLE_BY_VIN } from "../../graphql/vehicles.queries";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 
 export default function JobsCreateVehicleInfoContainer({ form }) {
   const [state] = useContext(JobCreateContext);

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx

@@ -101,7 +101,7 @@ export default function JobsCreateVehicleInfoSearchComponent({
                     selectedid: record.id
                   }
                 });
-                console.log("Should be clearing fields here...");
+
                 return;
               }
             }

client/src/components/jobs-detail-pli/jobs-detail-pli.container.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import JobsDetailPliComponent from "./jobs-detail-pli.component";
 import { QUERY_INVOICES_BY_JOBID } from "../../graphql/invoices.queries";
 export default function JobsDetailPliContainer({ job }) {

client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";

client/src/components/jobs-find-modal/jobs-find-modal.container.jsx

@@ -1,6 +1,6 @@
 import { Modal } from "antd";
 import React from "react";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import AlertComponent from "../alert/alert.component";

client/src/components/jobs-notes/jobs-notes.container.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import JobNotesComponent from "./jobs.notes.component";
-import { useQuery, useMutation } from "react-apollo";
+import { useQuery, useMutation } from "@apollo/react-hooks";
 import AlertComponent from "../../components/alert/alert.component";
 //import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
 import {

client/src/components/note-upsert-modal/note-upsert-modal.container.jsx

@@ -1,6 +1,6 @@
 import { notification } from "antd";
 import React, { useEffect, useState } from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import { INSERT_NEW_NOTE, UPDATE_NOTE } from "../../graphql/notes.queries";
 import NoteUpsertModalComponent from "./note-upsert-modal.component";

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

@@ -1,6 +1,6 @@
 import { Form, notification } from "antd";
 import React from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import { UPDATE_OWNER } from "../../graphql/owners.queries";
 import OwnerDetailFormComponent from "./owner-detail-form.component";

client/src/components/owner-find-modal/owner-find-modal.container.jsx

@@ -1,6 +1,6 @@
 import { Modal } from "antd";
 import React from "react";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import { QUERY_SEARCH_OWNER_BY_IDX } from "../../graphql/owners.queries";
 import AlertComponent from "../alert/alert.component";

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import { QUERY_ALL_OWNERS } from "../../graphql/owners.queries";
 import AlertComponent from "../alert/alert.component";
 import OwnersListComponent from "./owners-list.component";

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -1,6 +1,6 @@
 import { Modal, notification } from "antd";
 import React, { useState, useEffect } from "react";
-import { useMutation, useQuery } from "react-apollo";
+import { useMutation, useQuery } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/profile-shops/profile-shops.container.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useQuery, useMutation } from "react-apollo";
+import { useQuery, useMutation } from "@apollo/react-hooks";
 import {
   QUERY_ALL_ASSOCIATIONS,
   UPDATE_ASSOCIATION

client/src/components/schedule-appointment-modal/schedule-appointment-modal.container.jsx

@@ -1,7 +1,7 @@
 import { notification } from "antd";
 import moment from "moment";
 import React, { useState } from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/schedule-calendar/schedule-calendar.container.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import ScheduleCalendarComponent from "./schedule-calendar.component";
 import { QUERY_ALL_ACTIVE_APPOINTMENTS } from "../../graphql/appointments.queries";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";

client/src/components/schedule-day-view/schedule-day-view.container.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ScheduleDayViewComponent from "./schedule-day-view.component";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import { QUERY_APPOINTMENT_BY_DATE } from "../../graphql/appointments.queries";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import moment from "moment";

client/src/components/schedule-event/schedule-event.container.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/react-hooks";
 import { CANCEL_APPOINTMENT_BY_ID } from "../../graphql/appointments.queries";
 import ScheduleEventComponent from "./schedule-event.component";
 import { notification } from "antd";

client/src/components/schedule-job-modal/schedule-job-modal.container.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import ScheduleJobModalComponent from "./schedule-job-modal.component";
-import { useMutation, useQuery } from "react-apollo";
+import { useMutation, useQuery } from "@apollo/react-hooks";
 import {
   INSERT_APPOINTMENT,
   QUERY_APPOINTMENTS_BY_JOBID

client/src/components/shop-employees/shop-employees.container.jsx

@@ -1,6 +1,6 @@
 import { Form, notification } from "antd";
 import React, { useState } from "react";
-import { useMutation, useQuery } from "react-apollo";
+import { useMutation, useQuery } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/shop-info/shop-info.container.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import ShopInfoComponent from "./shop-info.component";
 import { Form, notification } from "antd";
-import { useQuery, useMutation } from "react-apollo";
+import { useQuery, useMutation } from "@apollo/react-hooks";
 import { QUERY_BODYSHOP, UPDATE_SHOP } from "../../graphql/bodyshop.queries";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import AlertComponent from "../alert/alert.component";

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Form, notification } from "antd";
-import { useMutation } from "react-apollo";
+import { useMutation } from "@apollo/react-hooks";
 import VehicleDetailFormComponent from "./vehicle-detail-form.component";
 import { useTranslation } from "react-i18next";
 import moment from "moment";

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

@@ -1,6 +1,6 @@
 import React from "react";
 import VehiclesListComponent from "./vehicles-list.component";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import AlertComponent from "../alert/alert.component";
 import { QUERY_ALL_VEHICLES } from "../../graphql/vehicles.queries";
 

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

@@ -1,6 +1,6 @@
 import { Form, notification } from "antd";
 import React, { useEffect } from "react";
-import { useMutation, useQuery } from "react-apollo";
+import { useMutation, useQuery } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/vendors-list/vendors-list.container.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import VendorsListComponent from "./vendors-list.component";

client/src/graphql/owners.queries.js

@@ -94,6 +94,7 @@ export const QUERY_ALL_OWNERS = gql`
 export const QUERY_OWNER_FOR_JOB_CREATION = gql`
   query QUERY_OWNER_FOR_JOB_CREATION($id: uuid!) {
     owners_by_pk(id: $id) {
+      id
       ownr_addr1
       ownr_addr2
       ownr_co_nm

client/src/pages/jobs-available/jobs-available.page.container.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { useMutation, useLazyQuery } from "react-apollo";
+import { useMutation, useLazyQuery } from "@apollo/react-hooks";
 import {
   DELETE_AVAILABLE_JOB,
   QUERY_AVAILABLE_NEW_JOBS_EST_DATA_BY_PK

client/src/pages/jobs-create/jobs-create.component.jsx

@@ -1,11 +1,11 @@
-import { Button, message, Steps } from "antd";
-import React, { useState, useContext } from "react";
+import { Button, Steps } from "antd";
+import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
+import AlertComponent from "../../components/alert/alert.component";
+import JobsCreateJobsInfo from "../../components/jobs-create-jobs-info/jobs-create-jobs-info.component";
 import JobsCreateOwnerInfoContainer from "../../components/jobs-create-owner-info/jobs-create-owner-info.container";
 import JobsCreateVehicleInfoContainer from "../../components/jobs-create-vehicle-info/jobs-create-vehicle-info.container";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
-import AlertComponent from "../../components/alert/alert.component";
-import JobsCreateJobsInfo from "../../components/jobs-create-jobs-info/jobs-create-jobs-info.component";
 
 export default function JobsCreateComponent({ form }) {
   const [pageIndex, setPageIndex] = useState(0);
@@ -42,7 +42,7 @@ export default function JobsCreateComponent({ form }) {
 
   const ProgressButtons = () => {
     return (
-      <div className="steps-action" style={{ float: "right" }}>
+      <div>
         {pageIndex > 0 && (
           <Button style={{ margin: 8 }} onClick={() => prev()}>
             Previous
@@ -69,11 +69,7 @@ export default function JobsCreateComponent({ form }) {
           </Button>
         )}
         {pageIndex === steps.length - 1 && (
-          <Button
-            type="primary"
-            htmlType="submit"
-            onClick={() => message.success("Processing complete!")}
-          >
+          <Button type="primary" htmlType="submit">
             Done
           </Button>
         )}
@@ -108,7 +104,10 @@ export default function JobsCreateComponent({ form }) {
       <ProgressButtons />
 
       {errorMessage ? (
-        <AlertComponent message={errorMessage} type="error" />
+        <div>
+         
+          <AlertComponent message={errorMessage} type="error" />
+        </div>
       ) : null}
 
       {steps.map((item, idx) => (

client/src/pages/jobs-create/jobs-create.container.jsx

@@ -1,8 +1,8 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import JobsCreateComponent from "./jobs-create.component";
 import { Form } from "antd";
 import JobCreateContext from "./jobs-create.context";
-import { useMutation, useLazyQuery } from "react-apollo";
+import { useMutation, useLazyQuery } from "@apollo/react-hooks";
 import { INSERT_NEW_JOB } from "../../graphql/jobs.queries";
 import { QUERY_OWNER_FOR_JOB_CREATION } from "../../graphql/owners.queries";
 import { connect } from "react-redux";
@@ -22,11 +22,27 @@ function JobsCreateContainer({ bodyshop }) {
   const [form] = Form.useForm();
   const [state] = contextState;
   const [insertJob] = useMutation(INSERT_NEW_JOB);
-  const [loadOwner] = useLazyQuery(QUERY_OWNER_FOR_JOB_CREATION);
+  const [loadOwner, RemoteOwnerData] = useLazyQuery(
+    QUERY_OWNER_FOR_JOB_CREATION
+  );
+
+  useEffect(() => {
+    if (!!state.owner.selectedid) {
+      console.log("Loading Selected Owner ID");
+      loadOwner({
+        variables: { id: state.owner.selectedid }
+      });
+    }
+  }, [state.owner.selectedid]);
+
+  const runInsertJob = job => {
+    console.log("Job To Save", job);
+    insertJob({ variables: { job: job } });
+  };
 
   const handleFinish = values => {
     console.log("Form Values", values);
-    console.log("state", state);
+    console.log("Progress State", state);
     let job = Object.assign(
       {},
       values,
@@ -43,30 +59,19 @@ function JobsCreateContainer({ bodyshop }) {
         shopid: bodyshop.id
       }
     );
-
+    //TODO Logic to ensure the owner is actually fetched.
+    let ownerData;
     if (!!job.owner) {
-      //spread the owner into to the job
-      console.log("Spread New Owner");
-      let ownerData = job.owner.data;
+      ownerData = job.owner.data;
       delete ownerData.allow_text_message;
       delete ownerData.preferred_contact;
-      job = { ...job, ...ownerData };
-      runInsertJob(job);
     } else {
-      //lookup the owner and spread it then.
-      loadOwner({
-        variables: { id: state.owner.selectedid },
-        onCompleted: data => {
-          console.log("data", data);
-          runInsertJob({ ...job, ...data.owners_by_pk });
-        }
-      });
+      ownerData = RemoteOwnerData.data.owners_by_pk;
+      delete ownerData.id;
+      delete ownerData.__typename;
     }
-  };
-
-  const runInsertJob = job => {
-    console.log("Job To Save", job);
-    insertJob({ variables: { job: job } });
+    job = { ...job, ...ownerData };
+    runInsertJob(job);
   };
 
   return (

client/src/pages/jobs-detail/jobs-detail.page.container.jsx

@@ -1,6 +1,6 @@
 import { notification } from "antd";
 import React, { useEffect, useState } from "react";
-import { useMutation, useQuery } from "react-apollo";
+import { useMutation, useQuery } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../../components/alert/alert.component";
 import SpinComponent from "../../components/loading-spinner/loading-spinner.component";

client/src/pages/manage/manage.page.container.jsx

@@ -1,6 +1,6 @@
 import { notification } from "antd";
 import React, { useEffect } from "react";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/pages/owners-detail/owners-detail.page.container.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import OwnersDetailComponent from "./owners-detail.page.component";
 import { useTranslation } from "react-i18next";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_OWNER_BY_ID } from "../../graphql/owners.queries";

client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import VehicleDetailComponent from "./vehicles-detail.page.component";
-import { useQuery } from "react-apollo";
+import { useQuery } from "@apollo/react-hooks";
 import { QUERY_VEHICLE_BY_ID } from "../../graphql/vehicles.queries";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import AlertComponent from "../../components/alert/alert.component";