Big progress!

client/src/components/bill-detail-edit/bill-detail-edit-component.jsx

@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React, {useState} from "react";
 import {useTranslation} from "react-i18next";
 import {connect} from "react-redux";
-import {useSearchParams} from "react-router-dom";
+import {useLocation} from "react-router-dom";
 import {createStructuredSelector} from "reselect";
 import {DELETE_BILL_LINE, INSERT_NEW_BILL_LINES, UPDATE_BILL_LINE} from "../../graphql/bill-lines.queries";
 import {QUERY_BILL_BY_PK, UPDATE_BILL} from "../../graphql/bills.queries";
@@ -38,7 +38,7 @@ export default connect(
 )(BillDetailEditcontainer);
 
 export function BillDetailEditcontainer({setPartsOrderContext, insertAuditTrail, bodyshop,}) {
-    const search = queryString.parse(useSearchParams().toString());
+    const search = queryString.parse(useLocation().search);
 
     const {t} = useTranslation();
     const [form] = Form.useForm();

client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx

@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useSearchParams, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -32,7 +32,7 @@ export function BillDetailEditReturn({
   data,
   disabled,
 }) {
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const history = useNavigate();
   const { t } = useTranslation();
   const [form] = Form.useForm();

client/src/components/bill-detail-edit/bill-detail-edit.container.jsx

@@ -1,11 +1,11 @@
 import { Drawer, Grid } from "antd";
 import queryString from "query-string";
 import React from "react";
-import { useSearchParams, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import BillDetailEditComponent from "./bill-detail-edit-component";
 
 export default function BillDetailEditcontainer() {
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const history = useNavigate();
 
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())

client/src/components/billline-add-inventory/billline-add-inventory.component.jsx

@@ -13,7 +13,7 @@ import {
 } from "../../redux/user/user.selectors";
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import queryString from "query-string";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -35,8 +35,7 @@ export function BilllineAddInventory({
   jobid,
 }) {
   const [loading, setLoading] = useState(false);
-  const { billid } = queryString.parse(useSearchParams().toString());
-
+  const { billid } = queryString.parse(useLocation().search);
   const [insertInventoryLine] = useMutation(INSERT_INVENTORY_AND_CREDIT);
 
   const addToInventory = async () => {

client/src/components/bills-vendors-list/bills-vendors-list.component.jsx

@@ -2,14 +2,14 @@ import React, { useState } from "react";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import { useQuery } from "@apollo/client";
 import queryString from "query-string";
-import { useSearchParams, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { Table, Input } from "antd";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 import AlertComponent from "../alert/alert.component";
 
 export default function BillsVendorsList() {
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const history = useNavigate();
 
   const { loading, error, data } = useQuery(QUERY_ALL_VENDORS, {

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

@@ -3,7 +3,7 @@ import { Button, Card, Input, Space, Table, Typography } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
@@ -40,7 +40,7 @@ export function ContractsList({
     filteredInfo: { text: "" },
   });
   const history = useNavigate();
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const { page } = search;
 
   const { t } = useTranslation();

client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx

@@ -2,7 +2,7 @@ import { Card, Table } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useSearchParams, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import {pageLimit} from "../../utils/config";
@@ -11,7 +11,7 @@ export default function CourtesyCarContractListComponent({
   contracts,
   totalContracts,
 }) {
-  const search = queryString.parse(useSearchParams().toString());
+  const search =queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder } = search;
   const history = useNavigate();
 

client/src/components/csi-response-form/csi-response-form.container.jsx

@@ -1,8 +1,9 @@
 import { useQuery } from "@apollo/client";
 import { Card, Form, Result } from "antd";
+import queryString from "query-string";
 import React, { useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
 import { QUERY_CSI_RESPONSE_BY_PK } from "../../graphql/csi.queries";
 import AlertComponent from "../alert/alert.component";
 import ConfigFormComponents from "../config-form-components/config-form-components.component";
@@ -11,7 +12,7 @@ import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 export default function CsiResponseFormContainer() {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const searchParams = Object.fromEntries(useSearchParams());
+  const searchParams = queryString.parse(useLocation().search);
   const { responseid } = searchParams;
   const { loading, error, data } = useQuery(QUERY_CSI_RESPONSE_BY_PK, {
     variables: {

client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx

@@ -3,7 +3,7 @@ import { Button, Card, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useSearchParams, useNavigate } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
@@ -15,7 +15,7 @@ export default function CsiResponseListPaginated({
   responses,
   total,
 }) {
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const { responseid, page, sortcolumn, sortorder } = search;
   const history = useNavigate();
   const [state, setState] = useState({
@@ -128,7 +128,7 @@ export default function CsiResponseListPaginated({
               handleOnRowClick(record);
             }, // click row
           };
-        }}q
+        }}
       />
     </Card>
   );

client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Form, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../alert/alert.component";
-import {useSearchParams } from "react-router-dom";
+import {useLocation } from "react-router-dom";
 import "./form-fields-changed.styles.scss";
 import Prompt from "../../utils/prompt";
 
@@ -12,7 +12,7 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
   const handleReset = () => {
     form.resetFields();
   };
-  const loc = useSearchParams();
+  const loc = useLocation();
   //if (!form.isFieldsTouched()) return <></>;
   return (
     <Form.Item

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

@@ -4,7 +4,7 @@ import queryString from "query-string";
 import React from "react";
 import {useTranslation} from "react-i18next";
 import {connect} from "react-redux";
-import {Link, useNavigate, useSearchParams} from "react-router-dom";
+import {Link, useNavigate, useLocation} from "react-router-dom";
 import {createStructuredSelector} from "reselect";
 import {setModalContext} from "../../redux/modals/modals.actions";
 import {selectBodyshop} from "../../redux/user/user.selectors";
@@ -23,7 +23,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function JobsList({bodyshop, refetch, loading, jobs, total, setInventoryUpsertContext,}) {
-    const search = queryString.parse(useSearchParams().toString());
+    const search = queryString.parse(useLocation().search);
     const {page, sortcolumn, sortorder} = search;
     const history = useNavigate();
 

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

@@ -2,7 +2,7 @@ import { useQuery } from "@apollo/client";
 import queryString from "query-string";
 import React from "react";
 import { connect } from "react-redux";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_INVENTORY_PAGINATED } from "../../graphql/inventory.queries";
 import {
@@ -23,7 +23,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function InventoryList({ setBreadcrumbs, setSelectedHeader }) {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder, search, showall } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(

client/src/components/job-at-change/schedule-event.component.jsx

@@ -17,7 +17,7 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import {
   openChatByPhone,
@@ -60,7 +60,7 @@ export function ScheduleEventComponent({
   const { t } = useTranslation();
   const [visible, setVisible] = useState(false);
   const history = useNavigate();
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const [title, setTitle] = useState(event.title);
   const blockContent = (

client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx

@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useSearchParams, useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../../../firebase/firebase.utils";
 import {
@@ -50,7 +50,7 @@ export function JobChecklistForm({
 
   const { jobId } = useParams();
   const history = useNavigate();
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const [form] = Form.useForm();
 
   const handleFinish = async (values) => {

client/src/components/job-detail-cards/job-detail-cards.component.jsx

@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -54,7 +54,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
     ? bpoints[selectedBreakpoint[0]]
     : "100%";
 
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
   const history = useNavigate();
   const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {

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

@@ -14,7 +14,7 @@ import queryString from "query-string";
 import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
@@ -64,7 +64,7 @@ export function JobsAvailableContainer({
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
   });
-  const { clm_no, availableJobId } = queryString.parse(useSearchParams().toString());
+  const { clm_no, availableJobId } = queryString.parse(useLocation().search);
   const history = useNavigate();
   const { t } = useTranslation();
 

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

@@ -1,7 +1,7 @@
 import { useQuery } from "@apollo/client";
 import queryString from "query-string";
 import React from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { QUERY_BILLS_BY_JOBID } from "../../graphql/bills.queries";
 import JobsDetailPliComponent from "./jobs-detail-pli.component";
 
@@ -12,7 +12,7 @@ export default function JobsDetailPliContainer({ job }) {
     nextFetchPolicy: "network-only",
   });
 
-  const search = queryString.parse(useSearchParams().toString());
+  const search =queryString.parse(useLocation().search);
   const history = useNavigate();
 
   const handleBillOnRowClick = (record) => {

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -6,7 +6,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -22,7 +22,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const [openSearchResults, setOpenSearchResults] = useState([]);
   const [searchLoading, setSearchLoading] = useState(false);
   const { page, sortcolumn, sortorder } = search;

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

@@ -10,7 +10,7 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -26,7 +26,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function JobsList({ bodyshop }) {
-    const searchParams = queryString.parse(useSearchParams().toString());
+    const searchParams = queryString.parse(useLocation().search);
     const { selected } = searchParams;
     const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
         .filter((screen) => !!screen[1])

client/src/components/jobs-ready-list/jobs-ready-list.component.jsx

@@ -10,7 +10,7 @@ import queryString from "query-string";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -27,7 +27,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function JobsReadyList({ bodyshop }) {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams =queryString.parse(useLocation().search);
   const { selected } = searchParams;
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
     .filter((screen) => !!screen[1])

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

@@ -3,7 +3,7 @@ import { Button, Card, Input, Space, Table, Typography } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import {pageLimit} from "../../utils/config";
@@ -14,7 +14,7 @@ export default function OwnersListComponent({
   total,
   refetch,
 }) {
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const {
     page,
     // sortcolumn, sortorder

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

@@ -4,11 +4,11 @@ import { QUERY_ALL_OWNERS_PAGINATED } from "../../graphql/owners.queries";
 import AlertComponent from "../alert/alert.component";
 import OwnersListComponent from "./owners-list.component";
 import queryString from "query-string";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import {pageLimit} from "../../utils/config";
 
 export default function OwnersListContainer() {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder, search } = searchParams;
   const { loading, error, data, refetch } = useQuery(
     QUERY_ALL_OWNERS_PAGINATED,

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -16,7 +16,7 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { DELETE_PARTS_ORDER } from "../../graphql/parts-orders.queries";
@@ -78,7 +78,7 @@ export function PartsOrderListTableComponent({
   const [state, setState] = useState({
     sortedInfo: {},
   });
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const selectedpartsorder = search.partsorderid;
   const [searchText, setSearchText] = useState("");
 

client/src/components/payments-list-paginated/payment-list-paginated.component.jsx

@@ -6,7 +6,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_PAYMENT_BY_ID } from "../../graphql/payments.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -42,7 +42,7 @@ export function PaymentsListPaginated({
   total,
   bodyshop,
 }) {
-  const search =queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const [openSearchResults, setOpenSearchResults] = useState([]);
   const [searchLoading, setSearchLoading] = useState(false);
   const { page, sortcolumn, sortorder } = search;

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

@@ -4,7 +4,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import {
   DELETE_PHONEBOOK,
@@ -23,7 +23,7 @@ const mapStateToProps = createStructuredSelector({
 
 function PhonebookFormContainer({ refetch, bodyshop }) {
   const history = useNavigate();
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const { phonebookentry } = search;
   const [formLoading, setFormLoading] = useState(false);
   const [form] = Form.useForm();

client/src/components/production-list-detail/production-list-detail.component.jsx

@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -44,7 +44,7 @@ export function ProductionListDetail({
   setPrintCenterContext,
   technician,
 }) {
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const history = useNavigate();
   const { selected } = search;
 

client/src/components/production-remove-button/production-remove-button.component.jsx

@@ -5,13 +5,13 @@ import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import queryString from "query-string";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 
 export default function ProductionRemoveButton({ jobId }) {
   const [removeJobFromProduction] = useMutation(UPDATE_JOB);
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const history = useNavigate();
 
   const handleRemoveFromProd = async () => {

client/src/components/qbo-authorize/qbo-authorize.component.jsx

@@ -3,11 +3,11 @@ import Axios from "axios";
 import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useCookies } from "react-cookie";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import QboSignIn from "../../assets/qbo/C2QB_green_btn_med_default.svg";
 
 export default function QboAuthorizeComponent() {
-  const location = useSearchParams();
+  const location = useLocation();
   const history = useNavigate();
   const [setCookie] = useCookies(["access_token", "refresh_token"]);
 
@@ -15,7 +15,7 @@ export default function QboAuthorizeComponent() {
     const result = await Axios.post("/qbo/authorize");
     window.location.href = result.data;
   };
-  const qs = queryString.parse(location.toString());
+  const qs = queryString.parse(location.search);
 
   const { error } = qs;
 

client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx

@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React from "react";
 import { Calendar, momentLocalizer } from "react-big-calendar";
 import { connect } from "react-redux";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import Event from "../job-at-change/schedule-event.container";
@@ -30,7 +30,7 @@ export function ScheduleCalendarWrapperComponent({
   date,
   ...otherProps
 }) {
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const history = useNavigate();
   const { t } = useTranslation();
   const handleEventPropStyles = (event, start, end, isSelected) => {

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

@@ -1,7 +1,7 @@
 import { useQuery } from "@apollo/client";
 import queryString from "query-string";
 import React, { useMemo, useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { QUERY_ALL_ACTIVE_APPOINTMENTS } from "../../graphql/appointments.queries";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
@@ -19,7 +19,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
 
   const { date, view } = search;
   const range = useMemo(() => getRange(date, view), [date, view]);

client/src/components/scoreboard-timetickets/scoreboard-timetickets.component.jsx

@@ -4,7 +4,7 @@ import _ from "lodash";
 import moment from "moment";
 import queryString from "query-string";
 import React, { useMemo } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { QUERY_TIME_TICKETS_IN_RANGE_SB } from "../../graphql/timetickets.queries";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
@@ -13,7 +13,7 @@ import ScoreboardTicketsBar from "./scoreboard-timetickets.bar.component";
 import ScoreboardTicketsStats from "./scoreboard-timetickets.stats.component";
 
 export default function ScoreboardTimeTickets() {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { start, end } = searchParams;
   const startDate = start
     ? moment(start)

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -16,7 +16,7 @@ import moment from "moment";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
@@ -48,7 +48,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
   const { t } = useTranslation();
   const [form] = useForm();
   const history = useNavigate();
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const [deleteVacation] = useMutation(DELETE_VACATION);
   const { error, data } = useQuery(QUERY_EMPLOYEE_BY_ID, {
     variables: { id: search.employeeId },

client/src/components/shop-employees/shop-employees-list.component.jsx

@@ -2,13 +2,12 @@ import { Button, Table } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 
 export default function ShopEmployeesListComponent({ loading, employees }) {
   const { t } = useTranslation();
   const history = useNavigate();
-  const search = queryString.parse(useSearchParams().toString());
-
+  const search = queryString.parse(useLocation().search);
   const handleOnRowClick = (record) => {
     if (record) {
       search.employeeId = record.id;

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

@@ -15,7 +15,7 @@ import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycen
 import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
 import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
 import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import queryString from "query-string";
 
 const mapStateToProps = createStructuredSelector({
@@ -34,8 +34,8 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
   );
   const { t } = useTranslation();
   const history = useNavigate();
-  const location = useSearchParams();
-  const search = queryString.parse(location.toString());
+  const location = useLocation();
+  const search = queryString.parse(location.search);
 
   return (
     <Card

client/src/components/shop-template-add/shop-template-add.component.jsx

@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
@@ -29,7 +29,7 @@ export function ShopTemplateAddComponent({
   refetch,
 }) {
   const { t } = useTranslation();
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const history = useNavigate();
   const [insertTemplate] = useMutation(INSERT_TEMPLATE);
 

client/src/components/shop-template-delete/shop-template-delete.component.jsx

@@ -3,13 +3,13 @@ import { Button, notification, Popconfirm } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { DELETE_TEMPLATE } from "../../graphql/templates.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 
 export default function ShopTemplateDeleteComponent({ templateId, refetch }) {
   const { t } = useTranslation();
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const history = useNavigate();
   const [deleteTemplate] = useMutation(DELETE_TEMPLATE);
 

client/src/components/shop-templates-list/shop-templates-list.container.jsx

@@ -5,7 +5,7 @@ import { QUERY_CUSTOM_TEMPLATES } from "../../graphql/templates.queries";
 import AlertComponent from "../alert/alert.component";
 import Skeleton from "../loading-skeleton/loading-skeleton.component";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import queryString from "query-string";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ShopTemplateAdd from "../shop-template-add/shop-template-add.component";
@@ -18,7 +18,7 @@ export default function ShopTemplatesListContainer({ visibleState }) {
     nextFetchPolicy: "network-only",
   });
   const { t } = useTranslation();
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const history = useNavigate();
   if (error) return <AlertComponent message={error.message} type="error" />;
 

client/src/components/sign-in-form/sign-in-form.component.jsx

@@ -4,7 +4,7 @@ import queryString from "query-string";
 import React, {useEffect} from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import ImEXOnlineLogo from "../../assets/logo192.png";
 import {
@@ -38,8 +38,7 @@ export function SignInComponent({
   sendPasswordReset,
   loginLoading,
 }) {
-  const [searchParams] = useSearchParams();
-  const redirect = searchParams.get("redirect");
+  const { redirect } = queryString.parse(useLocation().search);
   const navigate = useNavigate();
 
   const { t } = useTranslation();

client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx

@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -51,7 +51,7 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
     ? bpoints[selectedBreakpoint[0]]
     : "100%";
 
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams =queryString.parse(useLocation().search);
   const { selected } = searchParams;
   const history = useNavigate();
   const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {

client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx

@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -19,7 +19,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function TechLookupJobsList({ bodyshop }) {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {

client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx

@@ -3,10 +3,10 @@ import { DatePicker } from "antd";
 import moment from "moment";
 import queryString from "query-string";
 import React from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 
 export default function TimeTicketsDatesSelector() {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { start, end } = searchParams;
   const history = useNavigate();
 

client/src/components/time-tickets-attendance-table/time-tickets-attendance-table.component.jsx

@@ -1,7 +1,7 @@
 import { Button } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { useTranslation } from "react-i18next";
@@ -9,7 +9,7 @@ import moment from "moment";
 const AttendanceCsv = TemplateList("special").attendance_detail_csv;
 
 export default function TimeTicketsAttendanceTable() {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { start, end } = searchParams;
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);

client/src/components/time-tickets-payroll-table/time-tickets-payroll-table.component.jsx

@@ -1,14 +1,14 @@
 import { Button } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { useTranslation } from "react-i18next";
 import moment from "moment";
 const PayrollTemplate = TemplateList("special").exported_payroll;
 export default function TimeTicketsPayrollTable() {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { start, end } = searchParams;
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);

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

@@ -3,7 +3,7 @@ import { Button, Card, Input, Space, Table, Typography } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 import {pageLimit} from "../../utils/config";
 export default function VehiclesListComponent({
@@ -12,7 +12,7 @@ export default function VehiclesListComponent({
   total,
   refetch,
 }) {
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const {
     page,
     //sortcolumn, sortorder,

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

@@ -4,11 +4,11 @@ import { useQuery } from "@apollo/client";
 import AlertComponent from "../alert/alert.component";
 import { QUERY_ALL_VEHICLES_PAGINATED } from "../../graphql/vehicles.queries";
 import queryString from "query-string";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import {pageLimit} from "../../utils/config";
 
 export default function VehiclesListContainer() {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder, search } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(

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

@@ -4,7 +4,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import {
   DELETE_VENDOR,
@@ -23,7 +23,7 @@ const mapStateToProps = createStructuredSelector({
 
 function VendorsFormContainer({ refetch, bodyshop }) {
   const history = useNavigate();
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const { selectedvendor } = search;
   const [formLoading, setFormLoading] = useState(false);
   const [form] = Form.useForm();

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

@@ -3,7 +3,7 @@ import { Button, Card, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { alphaSort } from "../../utils/sorters";
 
 export default function VendorsListComponent({
@@ -13,7 +13,7 @@ export default function VendorsListComponent({
   vendors,
   refetch,
 }) {
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const { selectedvendor } = search;
 
   const [state, setState] = useState({

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

@@ -1,7 +1,7 @@
 import { useQuery } from "@apollo/client";
 import queryString from "query-string";
 import React from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import VendorsListComponent from "./vendors-list.component";
@@ -11,7 +11,7 @@ export default function VendorsListContainer() {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
   });
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const history = useNavigate();
 
   const handleNewVendor = () => {