refactor: job loading for RB

ref issue #90

Author: maxceem

src/routes/ResourceBookingDetails/ResourceDetails/index.jsx

@@ -12,7 +12,7 @@ import IconComputer from "../../../assets/images/icon-computer.svg";
 import IconBag from "../../../assets/images/icon-bag.svg";
 import "./styles.module.scss";
 
-const ResourceDetails = ({ resource }) => {
+const ResourceDetails = ({ resource, jobTitle }) => {
   return (
     <div styleName="resource-details">
       <div styleName="table">
@@ -21,7 +21,7 @@ const ResourceDetails = ({ resource }) => {
             <DataItem
               icon={<IconComputer />}
               title="Job Title"
-              children={resource.title}
+              children={jobTitle}
             />
           </div>
           <div styleName="table-cell">
@@ -68,8 +68,8 @@ const ResourceDetails = ({ resource }) => {
 };
 
 ResourceDetails.propTypes = {
+  jobTitle: PT.string,
   resource: PT.shape({
-    title: PT.string,
     startDate: PT.string,
     endDate: PT.string,
     id: PT.string,

src/routes/ResourceBookingDetails/ResourceSummary/index.jsx

@@ -8,14 +8,14 @@ import PT from "prop-types";
 import User from "components/User";
 import "./styles.module.scss";
 
-const ResourceSummary = ({ candidate }) => {
+const ResourceSummary = ({ member }) => {
   return (
     <div styleName="resource-summary">
       <div styleName="resource-summary-wrapper">
         <User
           user={{
-            ...candidate,
-            photoUrl: candidate.photo_url,
+            ...member,
+            photoUrl: member.photo_url,
           }}
         />
       </div>
@@ -24,7 +24,7 @@ const ResourceSummary = ({ candidate }) => {
 };
 
 ResourceSummary.propTypes = {
-  candidate: PT.shape({
+  member: PT.shape({
     firstName: PT.string,
     handle: PT.string,
     id: PT.string,

src/routes/ResourceBookingDetails/index.jsx

@@ -20,48 +20,54 @@ import ResourceDetails from "./ResourceDetails";
 import "./styles.module.scss";
 
 const ResourceBookingDetails = ({ teamId, resourceBookingId }) => {
-  const [rb, loadingError] = useData(getReourceBookingById, resourceBookingId);
+  const [resource, loadingError] = useData(getReourceBookingById, resourceBookingId);
   const [team, loadingTeamError] = useData(getTeamById, teamId);
+  const [jobTitle, setJobTitle] = useState("")
+  const [member, setMember] = useState("")
 
-  const member = useMemo(() => {
+  useEffect(() => {
     if (team) {
-      const resource = _.find(
+      const resourceWithMemberDetails = _.find(
         team.resources,
-        (r) => r.id === resourceBookingId
+        { id: resourceBookingId }
       );
-      let job;
-      if (resource.jobId) {
-        job = _.find(team.jobs, { id: resource.jobId });
+
+      // resource inside Team object has all the member details we need
+      setMember(resourceWithMemberDetails);
+
+      if (resourceWithMemberDetails.jobId) {
+        const job = _.find(team.jobs, { id: resourceWithMemberDetails.jobId });
+        setJobTitle(_.get(job, "title", `<Not Found> ${resourceWithMemberDetails.jobId}`));
+      } else {
+        setJobTitle("<Not Assigned>")
       }
-      resource.jobTitle = _.get(job, "title", "<Not Assigned>");
-      return resource;
     }
   }, [team, resourceBookingId]);
 
   return (
     <Page title="Member Details">
       {!member ? (
-        <LoadingIndicator error={loadingError} />
+        <LoadingIndicator error={loadingError || loadingTeamError} />
       ) : (
-        <>
-          <PageHeader
-            title="Member Details"
-            backTo={`/taas/myteams/${teamId}`}
-          />
-          <div styleName="content-wrapper">
-            <ResourceSummary candidate={member} />
-            <ResourceDetails resource={{ ...rb, title: member.jobTitle }} />
-            <div styleName="actions">
-              <Button
-                size="medium"
-                routeTo={`/taas/myteams/${teamId}/rb/${rb.id}/edit`}
-              >
-                Edit Member Details
+          <>
+            <PageHeader
+              title="Member Details"
+              backTo={`/taas/myteams/${teamId}`}
+            />
+            <div styleName="content-wrapper">
+              <ResourceSummary member={member} />
+              <ResourceDetails resource={resource} jobTitle={jobTitle} />
+              <div styleName="actions">
+                <Button
+                  size="medium"
+                  routeTo={`/taas/myteams/${teamId}/rb/${resource.id}/edit`}
+                >
+                  Edit Member Details
               </Button>
+              </div>
             </div>
-          </div>
-        </>
-      )}
+          </>
+        )}
     </Page>
   );
 };

src/routes/ResourceBookingForm/index.jsx

@@ -4,7 +4,7 @@
  * Page for edit resource booking details.
  * It gets `teamId` and `resourceBookingId` from the router.
  */
-import React, { useState, useEffect } from "react";
+import React, { useState, useMemo } from "react";
 import PT from "prop-types";
 import _ from "lodash";
 import { toastr } from "react-redux-toastr";
@@ -24,37 +24,31 @@ import "./styles.module.scss";
 
 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(() => {
-    if (!!rb) {
-      setJobId(rb.jobId);
-    }
-  }, [rb]);
-
-  useEffect(() => {
+  const formData = useMemo(() => {
     if (team && rb) {
       const resource = _.find(
         team.resources,
-        (r) => r.id === resourceBookingId
+        { 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,
+        // resource inside Team object has all the member details we need
+        // so we can get user handle from there
+        handle: resource.handle,
       };
-      setFormData(data);
+
+      if (resource.jobId) {
+        const job = _.find(team.jobs, { id: resource.jobId });
+        data.jobTitle = _.get(job, "title", `<Not Found> ${resource.jobId}`);
+      } else {
+        data.jobTitle = "<Not Assigned>";
+      }
+
+      return data;
     }
   }, [rb, team, resourceBookingId]);
 
@@ -89,25 +83,25 @@ const ResourceBookingDetails = ({ teamId, resourceBookingId }) => {
   return (
     <Page title="Edit Member Details">
       {!formData ? (
-        <LoadingIndicator error={loadingError} />
+        <LoadingIndicator error={loadingError || loadingTeamError} />
       ) : (
-        <>
-          <PageHeader
-            title="Edit Member Details"
-            backTo={`/taas/myteams/${teamId}/rb/${rb.id}`}
-          />
-          <div styleName="rb-modification-details">
-            <TCForm
-              configuration={getEditResourceBookingConfig(onSubmit)}
-              initialValue={formData}
-              submitButton={{ text: "Save" }}
-              backButton={{ text: "Cancel", backTo: `/taas/myteams/${teamId}` }}
-              submitting={submitting}
-              setSubmitting={setSubmitting}
+          <>
+            <PageHeader
+              title="Edit Member Details"
+              backTo={`/taas/myteams/${teamId}/rb/${rb.id}`}
             />
-          </div>
-        </>
-      )}
+            <div styleName="rb-modification-details">
+              <TCForm
+                configuration={getEditResourceBookingConfig(onSubmit)}
+                initialValue={formData}
+                submitButton={{ text: "Save" }}
+                backButton={{ text: "Cancel", backTo: `/taas/myteams/${teamId}` }}
+                submitting={submitting}
+                setSubmitting={setSubmitting}
+              />
+            </div>
+          </>
+        )}
     </Page>
   );
 };