My Gigs 2nd Week PROD Release

src/App.jsx

@@ -88,33 +88,89 @@ const App = () => {
     if (location.pathname === "/earn/my-gigs" && isLoggedIn) {
       if (!location.search) {
         store.dispatch(actions.filter.updateGigFilter(initialGigFilter));
-
+        const cachedGigs = store.getState().myGigs[initialGigFilter.status];
+        if (cachedGigs.myGigs && cachedGigs.myGigs.length !== 0) {
+          return;
+        }
         store.dispatch(
-          actions.myGigs.getMyGigs(
+          actions.myGigs.getMyOpenGigs(
             constants.GIGS_FILTER_STATUSES_PARAM[initialGigFilter.status]
           )
         );
         return;
       }
       const params = utils.url.parseUrlQuery(location.search);
       if (_.keys(params).length == 1 && params.externalId) {
+        store.dispatch(actions.myGigs.startCheckingGigs(params.externalId));
         return;
       }
+      const s =
+        _.values(constants.GIGS_FILTER_STATUSES).indexOf(params.status) >= 0
+          ? params.status
+          : null;
       const updatedGigFilter = {
-        status: params.status || "Open Applications",
+        status: s || "Open Applications",
       };
       const currentGig = store.getState().filter.gig;
       const diff = !_.isEqual(updatedGigFilter, currentGig);
       if (diff) {
         store.dispatch(actions.filter.updateGigFilter(updatedGigFilter));
       }
-      getDataDebounced.current(() =>
-        store.dispatch(
-          actions.myGigs.getMyGigs(
-            constants.GIGS_FILTER_STATUSES_PARAM[updatedGigFilter.status]
-          )
-        )
-      );
+      if (updatedGigFilter.status !== initialGigFilter.status) {
+        // preload the open application first page data.
+        const cachedOpenGigs = store.getState().myGigs[initialGigFilter.status];
+        if (!cachedOpenGigs.myGigs) {
+          store.dispatch(
+            actions.myGigs.getMyOpenGigs(
+              constants.GIGS_FILTER_STATUSES_PARAM[initialGigFilter.status]
+            )
+          );
+        }
+      }
+      const cachedGigs = store.getState().myGigs[updatedGigFilter.status];
+      if (cachedGigs.myGigs) {
+        return;
+      }
+      getDataDebounced.current(() => {
+        if (
+          updatedGigFilter.status == constants.GIGS_FILTER_STATUSES.ACTIVE_JOBS
+        ) {
+          store.dispatch(
+            actions.myGigs.getMyActiveGigs(
+              constants.GIGS_FILTER_STATUSES_PARAM[updatedGigFilter.status]
+            )
+          );
+        }
+        if (
+          updatedGigFilter.status == constants.GIGS_FILTER_STATUSES.OPEN_JOBS
+        ) {
+          store.dispatch(
+            actions.myGigs.getMyOpenGigs(
+              constants.GIGS_FILTER_STATUSES_PARAM[updatedGigFilter.status]
+            )
+          );
+        }
+        if (
+          updatedGigFilter.status ==
+          constants.GIGS_FILTER_STATUSES.COMPLETED_JOBS
+        ) {
+          store.dispatch(
+            actions.myGigs.getMyCompletedGigs(
+              constants.GIGS_FILTER_STATUSES_PARAM[updatedGigFilter.status]
+            )
+          );
+        }
+        if (
+          updatedGigFilter.status ==
+          constants.GIGS_FILTER_STATUSES.ARCHIVED_JOBS
+        ) {
+          store.dispatch(
+            actions.myGigs.getMyArchivedGigs(
+              constants.GIGS_FILTER_STATUSES_PARAM[updatedGigFilter.status]
+            )
+          );
+        }
+      });
     }
   }, [location, isLoggedIn]);
 

src/actions/myGigs.js

@@ -6,24 +6,36 @@ import {
 } from "../constants";
 import service from "../services/myGigs";
 
-/**
- * Action to get my gigs.
- * @param {number} page page to fetch
- * @param {number} perPage items per page. by default is 10.
- * @returns
- */
-async function getMyGigs(status = "open_jobs", page = 1, perPage = PER_PAGE) {
+async function getMyActiveGigs(
+  status = "active_jobs",
+  page = 1,
+  perPage = PER_PAGE
+) {
   return service.getMyGigs(status, page, perPage);
 }
 
-/**
- * Action to load more pages of my gigs
- * @param {number} nextPage page to fetch
- * @param {*} perPage items per page. by default is 10
- * @returns
- */
-async function loadMoreMyGigs(status, nextPage, perPage = PER_PAGE) {
-  return service.getMyGigs(status, nextPage, perPage);
+async function getMyOpenGigs(
+  status = "open_jobs",
+  page = 1,
+  perPage = PER_PAGE
+) {
+  return service.getMyGigs(status, page, perPage);
+}
+
+async function getMyCompletedGigs(
+  status = "completed_jobs",
+  page = 1,
+  perPage = PER_PAGE
+) {
+  return service.getMyGigs(status, page, perPage);
+}
+
+async function getMyArchivedGigsDone(
+  status = "archived_jobs",
+  page = 1,
+  perPage = PER_PAGE
+) {
+  return service.getMyGigs(status, page, perPage);
 }
 
 async function getProfile() {
@@ -54,8 +66,10 @@ async function startCheckingGigs(externalId) {
 }
 
 export default createActions({
-  GET_MY_GIGS: getMyGigs,
-  LOAD_MORE_MY_GIGS: loadMoreMyGigs,
+  GET_MY_ACTIVE_GIGS: getMyActiveGigs,
+  GET_MY_OPEN_GIGS: getMyOpenGigs,
+  GET_MY_COMPLETED_GIGS: getMyCompletedGigs,
+  GET_MY_ARCHIVED_GIGS: getMyArchivedGigsDone,
   GET_PROFILE: getProfile,
   UPDATE_PROFILE: updateProfile,
   START_CHECKING_GIGS: startCheckingGigs,

src/api/common/helper.js

@@ -299,7 +299,7 @@ async function getJobCandidates(criteria) {
  * @param {*} userId
  * @returns
  */
-async function handlePlacedJobCandidates(jobCandidates, userId) {
+async function handlePlacedJobCandidates(jobCandidates, userId, userHandle) {
   if (!jobCandidates || jobCandidates.length == 0 || !userId) {
     return;
   }
@@ -345,13 +345,71 @@ async function handlePlacedJobCandidates(jobCandidates, userId) {
           new Date(rb.endDate).toDateString() != new Date().toDateString()
         ) {
           jc.status = "completed";
+          jc.rbStartDate = rb.startDate;
+          jc.rbEndDate = rb.endDate;
+          jc.rbId = rb.id;
+          jc.userHandle = userHandle;
         }
       }
     }
   });
+  await getWorkingPeriods(jobCandidates, userHandle, rbRes);
   return;
 }
 
+/**
+ * Get payment Total for working period
+ *
+ * @param {*} jobCandidates job candidates we will process
+ * @param {*} userHandle the user's handle
+ * @param {*} resourceBookings the resource booking belongs to this user
+ * @returns
+ */
+async function getWorkingPeriods(jobCandidates, userHandle, resourceBookings) {
+  if (
+    !userHandle ||
+    !resourceBookings ||
+    resourceBookings.length == 0 ||
+    !jobCandidates ||
+    jobCandidates.length == 0
+  ) {
+    return;
+  }
+  const rbIds = resourceBookings.map((item) => item.id);
+  const token = await getM2MToken();
+  const url = `${config.API.V5}/work-periods`;
+  const criteria = {
+    userHandle: userHandle,
+    resourceBookingIds: rbIds.join(","),
+  };
+  const res = await request
+    .get(url)
+    .query(criteria)
+    .set("Authorization", `Bearer ${token}`)
+    .set("Accept", "application/json");
+  localLogger.debug({
+    context: "getWorkingPeriods",
+    message: `response body: ${JSON.stringify(res.body)}`,
+  });
+  if (res.body && res.body.length == 0) {
+    return;
+  }
+  // All the working periods for the rbs.
+  const wpRes = res.body;
+  _.each(rbIds, (rbId) => {
+    const wps = wpRes.filter(
+      (wp) => wp.userHandle == userHandle && wp.resourceBookingId == rbId
+    );
+    const paymentTotal = wps.reduce((total, wp) => total + wp.paymentTotal, 0);
+    const jc = jobCandidates.find(
+      (item) => item.rbId == rbId && item.userHandle == userHandle
+    );
+    if (jc) {
+      jc.paymentTotal = paymentTotal;
+    }
+  });
+}
+
 /**
  * Return jobs by given criteria
  * @param {string} criteria the search criteria

src/api/docs/swagger.yaml

@@ -273,6 +273,23 @@ components:
           example: "Dummy title"
           description: "The title."
           maxLength: 64
+        paymentTotal:
+          type: integer
+          example: 20
+          description: "the amount of payment that a member has received for a completed job"
+        rbStartDate:
+          type: string
+          example: "2021-06-05"
+          description: "the official start time for a job"
+        rbEndDate:
+          type: string
+          example: "2021-07-05"
+          description: "the official end time for a job"
+        updatedAt:
+          type: string
+          format: date-time
+          example: "2021-06-21T03:57:17.774Z"
+          description: "The latest updated date time for a jobCandidate."
         payment:
           $ref: "#/components/schemas/Payment"
         hoursPerWeek:

src/api/services/JobApplicationService.js

@@ -30,12 +30,12 @@ async function getMyJobApplications(currentUser, criteria) {
     return emptyResult;
   }
   // get user id by calling taas-api with current user's token
-  const { id: userId } = await helper.getCurrentUserDetails(
+  const { id: userId, handle: userHandle } = await helper.getCurrentUserDetails(
     currentUser.jwtToken
   );
-  if (!userId) {
+  if (!userId || !userHandle) {
     throw new errors.NotFoundError(
-      `Id for user: ${currentUser.userId} not found`
+      `Id for user: ${currentUser.userId} or handle for user: ${currentUser.handle} not found`
     );
   }
   // get jobCandidates of current user by calling taas-api
@@ -54,7 +54,11 @@ async function getMyJobApplications(currentUser, criteria) {
   let jcResult = jobCandidates.result;
   // handle placed status for completed_jobs, archived_jobs query
   if (status && (status == "active_jobs" || status == "completed_jobs")) {
-    await helper.handlePlacedJobCandidates(jobCandidates.result, userId);
+    await helper.handlePlacedJobCandidates(
+      jobCandidates.result,
+      userId,
+      userHandle
+    );
     if (status == "completed_jobs") {
       jcResult = jobCandidates.result.filter(
         (item) => item.status == "completed"
@@ -76,6 +80,10 @@ async function getMyJobApplications(currentUser, criteria) {
     const job = _.find(jobs, ["id", jobCandidate.jobId]);
     return {
       title: job.title,
+      paymentTotal: jobCandidate.paymentTotal,
+      rbStartDate: jobCandidate.rbStartDate,
+      rbEndDate: jobCandidate.rbEndDate,
+      updatedAt: jobCandidate.updatedAt,
       payment: {
         min: job.minSalary,
         max: job.maxSalary,

src/components/Empty/styles.scss

@@ -8,6 +8,7 @@
   background-color: #ffffff;
   padding: 81px 0px 330px 0px;
   min-width: 650px;
+  min-height: 551px;
     .empty-inner {
         display: flex;
         flex-direction: column;

src/constants/index.js

@@ -353,10 +353,10 @@ export const SORT_STATUS_ORDER = [
   MY_GIG_PHASE.PHONE_SCREEN,
   MY_GIG_PHASE.SKILLS_TEST,
   MY_GIG_PHASE.APPLIED,
+  MY_GIG_PHASE.WITHDRAWN,
   MY_GIG_PHASE.JOB_CLOSED,
   MY_GIG_PHASE.NOT_SELECTED,
   MY_GIG_PHASE.COMPLETED,
-  MY_GIG_PHASE.WITHDRAWN,
 ];
 
 export const PER_PAGE = 10;
@@ -373,6 +373,8 @@ export const AVAILABLE_REMARK_BY_JOB_STATUS = [
   MY_GIGS_JOB_STATUS.REJECTED_OTHER,
   MY_GIGS_JOB_STATUS.REJECTED_PRE_SCREEN,
   MY_GIGS_JOB_STATUS.JOB_CLOSED,
+  MY_GIGS_JOB_STATUS.WITHDRAWN,
+  MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
 ];
 export const MY_GIG_STATUS_PLACED = "PLACED";
 
@@ -387,14 +389,23 @@ export const GIG_STATUS_TOOLTIP = {
 };
 
 export const MY_GIGS_STATUS_EMPTY_TEXT = {
-  [GIGS_FILTER_STATUSES.ACTIVE_JOBS]: "YOU DON'T HAVE ANY ACTIVE GIGS YET.",
+  [GIGS_FILTER_STATUSES.ACTIVE_JOBS]:
+    "YOU ARE NOT ENGAGED IN ANY GIGS AT THE MOMENT.",
   [GIGS_FILTER_STATUSES.OPEN_JOBS]:
     "LOOKS LIKE YOU HAVEN'T APPLIED TO ANY GIG OPPORTUNITIES YET.",
   [GIGS_FILTER_STATUSES.COMPLETED_JOBS]:
     "YOU DON'T HAVE ANY COMPLETED GIGS YET.",
   [GIGS_FILTER_STATUSES.ARCHIVED_JOBS]: "YOU DON'T HAVE ANY ARCHIVED GIGS YET.",
 };
 
+export const MY_GIGS_STATUS_REMARK_TEXT = {
+  [MY_GIGS_JOB_STATUS.WITHDRAWN]:
+    "You withdrew your application for this gig or you have been placed in another gig.",
+  [MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN]:
+    "You withdrew your application for this gig or you have been placed in another gig.",
+  [MY_GIGS_JOB_STATUS.COMPLETED]: "Congrats on completing the gig!",
+};
+
 export const CHECKING_GIG_TIMES = 3;
 
 export const DELAY_CHECK_GIG_TIME = 2000;