89 lines
3.5 KiB
JavaScript
89 lines
3.5 KiB
JavaScript
import { useEffect } from "react";
|
|
import VehicleDetailComponent from "./vehicles-detail.page.component";
|
|
import { useQuery } from "@apollo/client";
|
|
import { useParams } from "react-router-dom";
|
|
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";
|
|
import { useTranslation } from "react-i18next";
|
|
import { addRecentItem, setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
|
|
import { connect } from "react-redux";
|
|
import { CreateRecentItem } from "../../utils/create-recent-item";
|
|
import NotFound from "../../components/not-found/not-found.component";
|
|
import InstanceRenderManager from "../../utils/instanceRenderMgr";
|
|
import { selectIsPartsEntry } from "../../redux/application/application.selectors";
|
|
import { createStructuredSelector } from "reselect";
|
|
import getPartsBasePath from "../../utils/getPartsBasePath.js";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
isPartsEntry: selectIsPartsEntry
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
|
|
addRecentItem: (item) => dispatch(addRecentItem(item)),
|
|
setSelectedHeader: (key) => dispatch(setSelectedHeader(key))
|
|
});
|
|
|
|
export function VehicleDetailContainer({ setBreadcrumbs, addRecentItem, setSelectedHeader, isPartsEntry }) {
|
|
const { vehId } = useParams();
|
|
const { t } = useTranslation();
|
|
const basePath = getPartsBasePath(isPartsEntry);
|
|
|
|
const { loading, data, error, refetch } = useQuery(QUERY_VEHICLE_BY_ID, {
|
|
variables: { id: vehId },
|
|
fetchPolicy: "network-only",
|
|
nextFetchPolicy: "network-only"
|
|
});
|
|
|
|
useEffect(() => {
|
|
document.title = t("titles.vehicledetail", {
|
|
app: InstanceRenderManager({
|
|
imex: "$t(titles.imexonline)",
|
|
rome: "$t(titles.romeonline)"
|
|
}),
|
|
vehicle: data?.vehicles_by_pk
|
|
? `${data.vehicles_by_pk?.v_model_yr || ""} ${
|
|
data.vehicles_by_pk?.v_make_desc || ""
|
|
} ${data.vehicles_by_pk?.v_model_desc || ""}`
|
|
: ""
|
|
});
|
|
setSelectedHeader("vehicles");
|
|
|
|
const crumbs = [];
|
|
if (isPartsEntry) crumbs.push({ link: "/parts", label: t("titles.bc.parts") });
|
|
crumbs.push({ link: `${basePath}/vehicles`, label: t("titles.bc.vehicles") });
|
|
crumbs.push({
|
|
link: `${basePath}/vehicles/${vehId}`,
|
|
label: t("titles.bc.vehicle-details", {
|
|
vehicle: data?.vehicles_by_pk
|
|
? `${data.vehicles_by_pk?.v_model_yr || ""} ${
|
|
data.vehicles_by_pk?.v_make_desc || ""
|
|
} ${data.vehicles_by_pk?.v_model_desc || ""}`
|
|
: ""
|
|
})
|
|
});
|
|
|
|
setBreadcrumbs(crumbs);
|
|
|
|
if (data?.vehicles_by_pk)
|
|
addRecentItem(
|
|
CreateRecentItem(
|
|
vehId,
|
|
"vehicle",
|
|
`${data.vehicles_by_pk.v_vin || "N/A"} | ${
|
|
data.vehicles_by_pk.v_model_yr || ""
|
|
} ${data.vehicles_by_pk.v_make_desc || ""} ${data.vehicles_by_pk.v_model_desc || ""}`.trim(),
|
|
`${basePath}/vehicles/${vehId}`
|
|
)
|
|
);
|
|
}, [t, data, setBreadcrumbs, vehId, addRecentItem, setSelectedHeader, basePath, isPartsEntry]);
|
|
|
|
if (loading) return <LoadingSpinner />;
|
|
if (error) return <AlertComponent message={error.message} type="error" />;
|
|
if (!data.vehicles_by_pk) return <NotFound />;
|
|
return <VehicleDetailComponent vehicle={data.vehicles_by_pk} refetch={refetch} />;
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(VehicleDetailContainer);
|