fix: issue #90

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"

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);

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,