99 lines
3.1 KiB
JavaScript
99 lines
3.1 KiB
JavaScript
import {useApolloClient, useQuery, useSubscription} from "@apollo/client";
|
|
import _ from "lodash";
|
|
import React, {useEffect, useState} from "react";
|
|
import {connect} from "react-redux";
|
|
import {createStructuredSelector} from "reselect";
|
|
import {
|
|
QUERY_EXACT_JOB_IN_PRODUCTION,
|
|
QUERY_EXACT_JOBS_IN_PRODUCTION,
|
|
QUERY_JOBS_IN_PRODUCTION,
|
|
SUBSCRIPTION_JOBS_IN_PRODUCTION,
|
|
} from "../../graphql/jobs.queries";
|
|
import {QUERY_KANBAN_SETTINGS} from "../../graphql/user.queries";
|
|
import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
|
|
import ProductionBoardKanbanComponent from "./production-board-kanban.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
currentUser: selectCurrentUser,
|
|
});
|
|
|
|
export function ProductionBoardKanbanContainer({bodyshop, currentUser}) {
|
|
const {refetch, loading, data} = useQuery(QUERY_JOBS_IN_PRODUCTION, {
|
|
pollInterval: 3600000,
|
|
fetchPolicy: "network-only",
|
|
nextFetchPolicy: "network-only",
|
|
});
|
|
const client = useApolloClient();
|
|
const [joblist, setJoblist] = useState([]);
|
|
const {data: updatedJobs} = useSubscription(
|
|
SUBSCRIPTION_JOBS_IN_PRODUCTION
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!(data && data.jobs)) return;
|
|
setJoblist(
|
|
data.jobs.map((j) => {
|
|
return {id: j.id, updated_at: j.updated_at};
|
|
})
|
|
);
|
|
}, [data]);
|
|
|
|
useEffect(() => {
|
|
if (!updatedJobs || joblist.length === 0) return;
|
|
|
|
const jobDiff = _.differenceWith(
|
|
joblist,
|
|
updatedJobs.jobs,
|
|
(a, b) => a.id === b.id && a.updated_at === b.updated_at
|
|
);
|
|
|
|
jobDiff.forEach((job) => {
|
|
getUpdatedJobData(job.id);
|
|
});
|
|
if (jobDiff.length > 1) {
|
|
getUpdatedJobsData(jobDiff.map((j) => j.id));
|
|
} else if (jobDiff.length === 1) {
|
|
jobDiff.forEach((job) => {
|
|
getUpdatedJobData(job.id);
|
|
});
|
|
}
|
|
|
|
setJoblist(updatedJobs.jobs);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [updatedJobs]);
|
|
|
|
const getUpdatedJobData = async (jobId) => {
|
|
client.query({
|
|
query: QUERY_EXACT_JOB_IN_PRODUCTION,
|
|
variables: {id: jobId},
|
|
});
|
|
};
|
|
const getUpdatedJobsData = async (jobIds) => {
|
|
client.query({
|
|
query: QUERY_EXACT_JOBS_IN_PRODUCTION,
|
|
variables: {ids: jobIds},
|
|
});
|
|
};
|
|
|
|
const {loading: associationSettingsLoading, data: associationSettings} =
|
|
useQuery(QUERY_KANBAN_SETTINGS, {
|
|
variables: {email: currentUser.email},
|
|
});
|
|
|
|
return (
|
|
<ProductionBoardKanbanComponent
|
|
loading={loading || associationSettingsLoading}
|
|
data={data ? data.jobs : []}
|
|
refetch={refetch}
|
|
associationSettings={
|
|
associationSettings && associationSettings.associations[0]
|
|
? associationSettings.associations[0]
|
|
: null
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(ProductionBoardKanbanContainer);
|