100 lines
2.9 KiB
JavaScript
100 lines
2.9 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_JOBS_IN_PRODUCTION,
|
|
QUERY_EXACT_JOB_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);
|