diff --git a/src/routes/ResourceBookingDetails/index.jsx b/src/routes/ResourceBookingDetails/index.jsx index d6d4249d..b3741d8b 100644 --- a/src/routes/ResourceBookingDetails/index.jsx +++ b/src/routes/ResourceBookingDetails/index.jsx @@ -4,13 +4,14 @@ * Page for resource booking details. * It gets `teamId` and `resourceBookingId` from the router. */ -import React, { useState, useEffect } from "react"; +import React, { useMemo, useState, useEffect } from "react"; import PT from "prop-types"; +import _ from "lodash"; import Page from "../../components/Page"; import PageHeader from "../../components/PageHeader"; import { useData } from "hooks/useData"; import { getReourceBookingById } from "services/resourceBookings"; -import { getPositionDetails } from "services/teams"; +import { getTeamById } from "services/teams"; import LoadingIndicator from "../../components/LoadingIndicator"; import withAuthentication from "../../hoc/withAuthentication"; import Button from "../../components/Button"; @@ -19,32 +20,27 @@ import ResourceDetails from "./ResourceDetails"; import "./styles.module.scss"; const ResourceBookingDetails = ({ teamId, resourceBookingId }) => { - const [jobId, setJobId] = useState(null); - const [title, setTitle] = useState(null); - const [candidate, setCandidate] = useState(null); const [rb, loadingError] = useData(getReourceBookingById, resourceBookingId); + const [team, loadingTeamError] = useData(getTeamById, teamId); - useEffect(() => { - if (!!rb) { - setJobId(rb.jobId); + const member = useMemo(() => { + if (team) { + const resource = _.find( + team.resources, + (r) => r.id === resourceBookingId + ); + let job; + if (resource.jobId) { + job = _.find(team.jobs, { id: resource.jobId }); + } + resource.jobTitle = _.get(job, "title", "<Not Assigned>"); + return resource; } - }, [rb]); - - useEffect(() => { - if (jobId) { - getPositionDetails(teamId, jobId).then((response) => { - const data = response.data.candidates?.find( - (x) => x.userId === rb.userId - ); - setCandidate(data); - setTitle(response.data.title); - }); - } - }, [jobId]); + }, [team, resourceBookingId]); return ( <Page title="Member Details"> - {!candidate ? ( + {!member ? ( <LoadingIndicator error={loadingError} /> ) : ( <> @@ -53,8 +49,8 @@ const ResourceBookingDetails = ({ teamId, resourceBookingId }) => { backTo={`/taas/myteams/${teamId}`} /> <div styleName="content-wrapper"> - <ResourceSummary candidate={candidate} /> - <ResourceDetails resource={{ ...rb, title: title }} /> + <ResourceSummary candidate={member} /> + <ResourceDetails resource={{ ...rb, title: member.jobTitle }} /> <div styleName="actions"> <Button size="medium" diff --git a/src/routes/ResourceBookingForm/index.jsx b/src/routes/ResourceBookingForm/index.jsx index f915c4bc..7c0d29dc 100644 --- a/src/routes/ResourceBookingForm/index.jsx +++ b/src/routes/ResourceBookingForm/index.jsx @@ -6,6 +6,7 @@ */ import React, { useState, useEffect } from "react"; import PT from "prop-types"; +import _ from "lodash"; import { toastr } from "react-redux-toastr"; import Page from "../../components/Page"; import PageHeader from "../../components/PageHeader"; @@ -14,7 +15,7 @@ import { getReourceBookingById, updateReourceBooking, } from "services/resourceBookings"; -import { getPositionDetails } from "services/teams"; +import { getTeamById } from "services/teams"; import LoadingIndicator from "../../components/LoadingIndicator"; import withAuthentication from "../../hoc/withAuthentication"; import TCForm from "../../components/TCForm"; @@ -25,6 +26,7 @@ const ResourceBookingDetails = ({ teamId, resourceBookingId }) => { const [submitting, setSubmitting] = useState(false); const [jobId, setJobId] = useState(null); const [formData, setFormData] = useState(null); + const [team, loadingTeamError] = useData(getTeamById, teamId); const [rb, loadingError] = useData(getReourceBookingById, resourceBookingId); useEffect(() => { @@ -34,20 +36,27 @@ const ResourceBookingDetails = ({ teamId, resourceBookingId }) => { }, [rb]); useEffect(() => { - if (jobId) { - getPositionDetails(teamId, jobId).then((response) => { - const candidate = response.data.candidates?.find( - (x) => x.userId === rb.userId - ); - const data = { - title: response.data.title, - ...candidate, - ...rb, - }; - setFormData(data); - }); + if (team && rb) { + const resource = _.find( + team.resources, + (r) => r.id === resourceBookingId + ); + + let job; + if (resource.jobId) { + job = _.find(team.jobs, { id: resource.jobId }); + } + + const jobTitle = _.get(job, "title", "<Not Assigned>"); + + const data = { + jobTitle, + ...resource, + ...rb, + }; + setFormData(data); } - }, [jobId, rb, teamId]); + }, [rb, team, resourceBookingId]); const onSubmit = async (values) => { const data = getRequestData(values); diff --git a/src/routes/ResourceBookingForm/utils.js b/src/routes/ResourceBookingForm/utils.js index 7d8d18aa..46ebf3ca 100644 --- a/src/routes/ResourceBookingForm/utils.js +++ b/src/routes/ResourceBookingForm/utils.js @@ -10,8 +10,8 @@ import { } from "../../constants"; const EDIT_ResourceBooking_ROWS = [ - { type: FORM_ROW_TYPE.SINGLE, fields: ["title"] }, { type: FORM_ROW_TYPE.SINGLE, fields: ["handle"] }, + { type: FORM_ROW_TYPE.SINGLE, fields: ["jobTitle"] }, { type: FORM_ROW_TYPE.GROUP, fields: ["startDate", "endDate"] }, { type: FORM_ROW_TYPE.GROUP, fields: ["customerRate", "memberRate"] }, { type: FORM_ROW_TYPE.SINGLE, fields: ["status"] }, @@ -24,8 +24,8 @@ const EDIT_ResourceBooking_ROWS = [ export const getEditResourceBookingConfig = (onSubmit) => { return { fields: [ - { readonly: true, type: FORM_FIELD_TYPE.TEXT, name: "title" }, { readonly: true, type: FORM_FIELD_TYPE.TEXT, name: "handle" }, + { readonly: true, type: FORM_FIELD_TYPE.TEXT, name: "jobTitle" }, { label: "Client Rate", type: FORM_FIELD_TYPE.NUMBER,