Files
imexmobile/components/camera-select-job/camera-select-job.component.jsx
2021-03-09 17:03:19 -08:00

86 lines
2.6 KiB
JavaScript

import { useQuery } from "@apollo/client";
import { Picker } from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
import { selectCurrentCameraJobId } from "../../redux/app/app.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ErrorDisplay from "../error-display/error-display.component";
import LoadingDisplay from "../loading-display/loading-display.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
cameraJobId: selectCurrentCameraJobId,
});
const mapDispatchToProps = (dispatch) => ({
setCameraJobId: (id) => dispatch(setCameraJobId(id)),
setCameraJob: (job) => dispatch(setCameraJob(job)),
});
export function CameraSelectJob({
bodyshop,
cameraJobId,
setCameraJobId,
setCameraJob,
}) {
const { loading, error, data } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
variables: {
statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
},
skip: !bodyshop,
});
const { t } = useTranslation();
if (loading) return <LoadingDisplay />;
if (error) return <ErrorDisplay errorMessage={error.message} />;
console.log("Picker Render");
return (
<View
style={{
marginHorizontal: 10,
}}
>
<Picker
selectedValue={cameraJobId}
onValueChange={(value, idx) => {
logImEXEvent("imexmobile_setcamerajobid");
setCameraJobId(value);
setCameraJob(data.jobs[idx]);
}}
>
<Picker.Item
label={t("mediabrowser.labels.selectjob")}
value={null}
key="null"
/>
<Picker.Item
label={t("mediabrowser.labels.temporarystorage")}
value="temp"
key="temp"
/>
{data.jobs.map((j) => {
return (
<Picker.Item
label={`${j.ro_number ? `${j.ro_number} - ` : ``}${
j.ownr_fn || ""
} ${j.ownr_ln || ""} ${j.ownr_co_nm || ""} - ${
j.v_model_yr || ""
} ${j.v_make_desc || ""} ${j.v_model_desc || ""}`}
value={j.id}
key={j.id}
/>
);
})}
</Picker>
</View>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(CameraSelectJob);