Gigs Optimization Update Release

package.json

@@ -81,6 +81,7 @@
     "react-date-range": "^1.1.3",
     "react-dom": "^16.12.0",
     "react-dropzone": "^11.3.2",
+    "react-loading": "^2.0.3",
     "react-redux": "^7.2.3",
     "react-responsive-modal": "^6.1.0",
     "react-select": "^1.3.0",

src/App.jsx

@@ -112,8 +112,8 @@ const App = () => {
           </div>
           <div className="sidebar-footer">
             <a
-              className="button button-primary"
-              href="https://github.com/topcoder-platform/micro-frontends-earn-app/issues/new?assignees=&labels=&template=bug_report.md&title="
+              className="button"
+              href="https://discussions.topcoder.com/discussion/8870/new-beta-site-discuss?new=1"
               target="_blank"
             >
               GIVE APPLICATION FEEDBACK

src/actions/myGigs.js

@@ -1,5 +1,9 @@
 import { createActions } from "redux-actions";
-import { PER_PAGE } from "../constants";
+import {
+  PER_PAGE,
+  CHECKING_GIG_TIMES,
+  DELAY_CHECK_GIG_TIME,
+} from "../constants";
 import service from "../services/myGigs";
 
 /**
@@ -30,9 +34,29 @@ async function updateProfile(profile) {
   return service.updateProfile(profile);
 }
 
+async function startCheckingGigs(externalId) {
+  let i = 0;
+  while (i < CHECKING_GIG_TIMES) {
+    const res = await service.startCheckingGigs(externalId);
+    if (res && !res.synced) {
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, DELAY_CHECK_GIG_TIME);
+      });
+      i++;
+      continue;
+    } else {
+      return {};
+    }
+  }
+  return {};
+}
+
 export default createActions({
   GET_MY_GIGS: getMyGigs,
   LOAD_MORE_MY_GIGS: loadMoreMyGigs,
   GET_PROFILE: getProfile,
   UPDATE_PROFILE: updateProfile,
+  START_CHECKING_GIGS: startCheckingGigs,
 });

src/api/app-constants.js

@@ -5,6 +5,7 @@
 const Scopes = {
   // JobApplication
   READ_JOBAPPLICATION: "read:earn-jobApplications",
+  READ_JOB: "read:earn-job",
   READ_PROFILE: "read:earn-profile",
   WRITE_PROFILE: "write:earn-profile",
   ALL_PROFILE: "all:earn-profile",

src/api/controllers/JobApplicationController.js

@@ -15,6 +15,12 @@ async function getMyJobApplications(req, res) {
   res.send(result.result);
 }
 
+async function getJob(req, res) {
+  const result = await service.getJob(req.authUser, req.query);
+  res.send(result);
+}
+
 module.exports = {
   getMyJobApplications,
+  getJob,
 };

src/api/docs/swagger.yaml

@@ -88,6 +88,60 @@ paths:
             application/json:
               schema:
                 $ref: "#/components/schemas/Error"
+  /job:
+    get:
+      tags:
+        - Job
+      description: |
+        Check whether the Job Application info has been synced.
+
+        **Authorization** All topcoder members are allowed.
+      security:
+        - bearerAuth: []
+      parameters:
+        - in: query
+          name: externalId
+          required: true
+          schema:
+            type: string
+          description: The Job External Id
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/JobSynced"
+        "400":
+          description: Bad request
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Error"
+        "401":
+          description: Not authenticated
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Error"
+        "403":
+          description: Forbidden
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Error"
+        "404":
+          description: Not Found
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Error"
+        "500":
+          description: Internal Server Error
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Error"
   /profile:
     get:
       tags:
@@ -187,6 +241,14 @@ components:
       scheme: bearer
       bearerFormat: JWT
   schemas:
+    JobSynced:
+      required:
+        - synced
+      properties:
+        synced:
+          type: boolean
+          description: "Whether the job application has been synced"
+          example: true
     JobApplication:
       required:
         - title

src/api/routes/JobApplicationRoutes.js

@@ -12,4 +12,12 @@ module.exports = {
       scopes: [constants.Scopes.READ_JOBAPPLICATION],
     },
   },
+  "/job": {
+    get: {
+      controller: "JobApplicationController",
+      method: "getJob",
+      auth: "jwt",
+      scopes: [constants.Scopes.READ_JOB],
+    },
+  },
 };

src/api/services/JobApplicationService.js

@@ -61,7 +61,8 @@ async function getMyJobApplications(currentUser, criteria) {
         min: job.minSalary,
         max: job.maxSalary,
         frequency: job.rateType,
-        currency: job.currency,
+        // currency: job.currency,
+        currency: "$",
       },
       hoursPerWeek: job.hoursPerWeek,
       location: job.jobLocation,
@@ -96,6 +97,51 @@ getMyJobApplications.schema = Joi.object()
   })
   .required();
 
+async function getJob(currentUser, criteria) {
+  const emptyResult = {
+    synced: false,
+  };
+  // we expect logged-in users
+  if (currentUser.isMachine) {
+    return emptyResult;
+  }
+  // get user id by calling taas-api with current user's token
+  const { id: userId } = await helper.getCurrentUserDetails(
+    currentUser.jwtToken
+  );
+  if (!userId) {
+    throw new errors.NotFoundError(
+      `Id for user: ${currentUser.userId} not found`
+    );
+  }
+  // get job based on the jobExternalId
+  const { result: jobs } = await helper.getJobs(criteria);
+  if (jobs && jobs.length) {
+    const candidates = jobs[0].candidates || [];
+    const newJob = candidates.find((item) => item.userId == userId);
+    if (newJob) {
+      return {
+        synced: true,
+      };
+    }
+  }
+  return {
+    synced: false,
+  };
+}
+
+getJob.schema = Joi.object()
+  .keys({
+    currentUser: Joi.object().required(),
+    criteria: Joi.object()
+      .keys({
+        externalId: Joi.string(),
+      })
+      .required(),
+  })
+  .required();
+
 module.exports = {
   getMyJobApplications,
+  getJob,
 };

src/components/Banner/index.jsx

@@ -37,17 +37,7 @@ const Banner = () => {
             please let us know! This is what the Beta phase is intended for, and
             your feedback will enable us to greatly improve the new site.{" "}
           </p>
-          <p>
-            You can click on the Feedback button on page or file a github ticket
-            at{" "}
-            <a
-              href="https://github.com/topcoder-platform/micro-frontends-earn-app/issues/new?assignees=&labels=&template=bug_report.md"
-              target="_blank"
-            >
-              https://github.com/topcoder-platform/micro-frontends-earn-app/issues/new?template=bug_report.md
-            </a>
-            .
-          </p>
+          <p>You can click on the Feedback button on page.</p>
           <p>Thank you!</p>
         </div>
       )}

src/components/Empty/index.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { EMPTY_GIGS_TEXT } from "../../constants";
+import Button from "../Button";
+import "./styles.scss";
+
+const Empty = () => {
+  return (
+    <div styleName="empty-wrapper">
+      <div styleName="empty-inner">
+        <h6>{EMPTY_GIGS_TEXT}</h6>
+        <span>Interested in getting a gig?</span>
+        <Button
+          isPrimary
+          size="lg"
+          onClick={() => {
+            window.location.href = `${process.env.URL.BASE}/gigs`;
+          }}
+        >
+          VIEW GIGS
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Empty;

src/components/Empty/styles.scss

@@ -0,0 +1,34 @@
+@import "styles/variables";
+@import "styles/mixins";
+@import "styles/animations";
+
+.empty-wrapper {
+  width: 100%;
+  border-radius: $border-radius-lg;
+  background-color: #ffffff;
+  padding: 81px 0px 330px 0px;
+  min-width: 650px;
+    .empty-inner {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        & > h6 {
+            font-size: 20px;
+            color: $tc-black;
+            line-height: 24px;
+            @include barlow-semibold;
+        }
+        & > span {
+            font-size: 16px;
+            color: $tc-black;
+            line-height: 26px;
+            margin-top: 30px;
+            @include roboto-regular;
+        }
+        & > button {
+            margin-top: 20px;
+            letter-spacing: 0.8px;
+        }
+    }
+}

src/components/Loading/index.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import ReactLoading from "react-loading";
+import PT from "prop-types";
+import "./styles.scss";
+
+const Loading = (props) => {
+  const { color, type, height, width } = props;
+  return (
+    <div styleName="loading-wrapper">
+      <div styleName="loading-inner">
+        <div>
+          <ReactLoading
+            type={type}
+            color={color}
+            height={height}
+            width={width}
+          />
+        </div>
+        <h6>LOADING</h6>
+        <span>We are processing your gigs data</span>
+      </div>
+    </div>
+  );
+};
+
+Loading.defaultProps = {
+  color: "#0ab88a",
+  type: "spin",
+  width: 35,
+  height: 35,
+};
+
+Loading.propTypes = {
+  color: PT.string,
+  type: PT.string,
+  width: PT.number,
+  height: PT.number,
+};
+
+export default Loading;