IO-1550 Updated production boards to simplify subscription.

This commit is contained in:
Patrick Fic
2021-12-06 16:39:13 -08:00
parent df83acb5ed
commit 4393bf42ed
5 changed files with 200 additions and 56 deletions

View File

@@ -1,8 +1,13 @@
import { useQuery, useSubscription } from "@apollo/client";
import React from "react";
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 { SUBSCRIPTION_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
import {
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,
@@ -14,13 +19,47 @@ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
currentUser: selectCurrentUser,
});
export function ProductionBoardKanbanContainer({ bodyshop, currentUser }) {
const { loading, data } = useSubscription(
SUBSCRIPTION_JOBS_IN_PRODUCTION,
{}
const { loading, data } = useQuery(QUERY_JOBS_IN_PRODUCTION);
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(
updatedJobs.jobs,
joblist,
(a, b) => a.id === b.id && a.updated_at === b.updated_at
);
jobDiff.forEach((job) => {
getUpdatedJobData(job.id);
});
setJoblist(updatedJobs);
// 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 { loading: associationSettingsLoading, data: associationSettings } =
useQuery(QUERY_KANBAN_SETTINGS, {
variables: { email: currentUser.email },

View File

@@ -1,13 +1,53 @@
import { useSubscription } from "@apollo/client";
import React from "react";
import { SUBSCRIPTION_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
import { useApolloClient, useQuery, useSubscription } from "@apollo/client";
import React, { useEffect, useState } from "react";
import {
QUERY_EXACT_JOB_IN_PRODUCTION,
QUERY_JOBS_IN_PRODUCTION,
SUBSCRIPTION_JOBS_IN_PRODUCTION,
} from "../../graphql/jobs.queries";
import ProductionListTable from "./production-list-table.component";
import _ from "lodash";
export default function ProductionListTableContainer() {
const { loading, data } = useSubscription(
SUBSCRIPTION_JOBS_IN_PRODUCTION,
{}
const { loading, data } = useQuery(QUERY_JOBS_IN_PRODUCTION);
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(
updatedJobs.jobs,
joblist,
(a, b) => a.id === b.id && a.updated_at === b.updated_at
);
jobDiff.forEach((job) => {
getUpdatedJobData(job.id);
});
setJoblist(updatedJobs);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [updatedJobs]);
const getUpdatedJobData = async (jobId) => {
client.query({
query: QUERY_EXACT_JOB_IN_PRODUCTION,
variables: { id: jobId },
});
};
return <ProductionListTable loading={loading} data={data ? data.jobs : []} />;
}

View File

@@ -3,10 +3,10 @@ import { Button, List, notification, Popover } from "antd";
import React, { useMemo, useState } from "react";
import { useMutation } from "@apollo/client";
import { useTranslation } from "react-i18next";
import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
import { UPDATE_JOB_LINE_SUBLET } from "../../graphql/jobs-lines.queries";
export default function ProductionSubletsManageComponent({ subletJobLines }) {
const { t } = useTranslation();
const [updateJobLine] = useMutation(UPDATE_JOB_LINE);
const [updateJobLine] = useMutation(UPDATE_JOB_LINE_SUBLET);
const [loading, setLoading] = useState(false);
const subletCount = useMemo(() => {
return {
@@ -22,6 +22,8 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
const result = await updateJobLine({
variables: {
jobId: sublet.jobid,
now: new Date(),
lineId: sublet.id,
line: {
sublet_completed: