Add Filter Completed

Author: dengjun

package.json

@@ -6,7 +6,7 @@
     "dev-https": "cross-env APPMODE=development webpack-dev-server --https --port 8008",
     "build": "webpack --mode=${APPMODE:-development} --env.config=${APPENV:-dev}",
     "analyze": "webpack --mode=production --env.analyze=true",
-    "lint": "eslint src --ext js,jsx",
+    "lint": "eslint src --ext js,jsx --fix",
     "format": "prettier --write \"./**\"",
     "test": "cross-env BABEL_ENV=test jest",
     "watch-tests": "cross-env BABEL_ENV=test jest --watch",

src/App.jsx

@@ -5,14 +5,15 @@ import React, { useState, useLayoutEffect, useEffect, useRef } from "react";
 import { Router, useLocation, Redirect } from "@reach/router";
 import Challenges from "./containers/Challenges";
 import Filter from "./containers/Filter";
+import MyGigsFilter from "./containers/MyGigsFilter";
 import MyGigs from "./containers/MyGigs";
 import Menu from "./components/Menu";
 import { disableSidebarForRoute } from "@topcoder/micro-frontends-navbar-app";
 import * as constants from "./constants";
 import actions from "./actions";
 import * as utils from "./utils";
 import store from "./store";
-import { initialChallengeFilter } from "./reducers/filter";
+import { initialChallengeFilter, initialGigFilter } from "./reducers/filter";
 import _ from "lodash";
 import { usePreviousLocation } from "./utils/hooks";
 import { useSelector } from "react-redux";
@@ -49,7 +50,7 @@ const App = () => {
   const location = useLocation();
   const previousLocation = usePreviousLocation();
 
-  const getChallengesDebounced = useRef(_.debounce((f) => f(), 500));
+  const getDataDebounced = useRef(_.debounce((f) => f(), 500));
 
   useEffect(() => {
     store.dispatch(actions.lookup.checkIsLoggedIn());
@@ -77,12 +78,44 @@ const App = () => {
       if (diff) {
         store.dispatch(actions.filter.updateFilter(updatedFilter));
       }
-      getChallengesDebounced.current(() =>
+      getDataDebounced.current(() =>
         store.dispatch(actions.challenges.getChallenges(updatedFilter))
       );
     }
   }, [location]);
 
+  useEffect(() => {
+    if (location.pathname === "/earn/my-gigs" && isLoggedIn) {
+      if (!location.search) {
+        store.dispatch(
+          actions.myGigs.getMyGigs(
+            constants.GIGS_FILTER_STATUSES_PARAM[initialGigFilter.status]
+          )
+        );
+        return;
+      }
+      const params = utils.url.parseUrlQuery(location.search);
+      if (_.keys(params).length == 1 && params.externalId) {
+        return;
+      }
+      const updatedGigFilter = {
+        status: params.status || "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]
+          )
+        )
+      );
+    }
+  }, [location, isLoggedIn]);
+
   const varsRef = useRef();
   varsRef.current = { previousLocation };
 
@@ -111,7 +144,8 @@ const App = () => {
           <div className="sidebar-content">
             {menu}
             <hr />
-            <Filter />
+            {location.pathname === "/earn/find/challenges" && <Filter />}
+            {location.pathname === "/earn/my-gigs" && <MyGigsFilter />}
           </div>
           <div className="sidebar-footer">
             <a

src/actions/filter.js

@@ -5,6 +5,10 @@ function updateFilter(partialUpdate) {
   return partialUpdate;
 }
 
+function updateGigFilter(partialUpdate) {
+  return partialUpdate;
+}
+
 function clearChallengeFilter(defaultFilter) {
   return defaultFilter;
 }
@@ -15,8 +19,16 @@ function updateChallengeQuery(filter) {
   return params;
 }
 
+function updateGigQuery(filter) {
+  const params = utils.myGig.createGigParams(filter);
+  utils.url.updateQuery(params);
+  return params;
+}
+
 export default createActions({
   UPDATE_FILTER: updateFilter,
   CLEAR_CHALLENGE_FILTER: clearChallengeFilter,
   UPDATE_CHALLENGE_QUERY: updateChallengeQuery,
+  UPDATE_GIG_FILTER: updateGigFilter,
+  UPDATE_GIG_QUERY: updateGigQuery,
 });

src/actions/myGigs.js

@@ -12,8 +12,8 @@ import service from "../services/myGigs";
  * @param {number} perPage items per page. by default is 10.
  * @returns
  */
-async function getMyGigs(page = 1, perPage = PER_PAGE) {
-  return service.getMyGigs(page, perPage);
+async function getMyGigs(status = "open_jobs", page = 1, perPage = PER_PAGE) {
+  return service.getMyGigs(status, page, perPage);
 }
 
 /**
@@ -22,8 +22,8 @@ async function getMyGigs(page = 1, perPage = PER_PAGE) {
  * @param {*} perPage items per page. by default is 10
  * @returns
  */
-async function loadMoreMyGigs(nextPage, perPage = PER_PAGE) {
-  return service.getMyGigs(nextPage, perPage);
+async function loadMoreMyGigs(status, nextPage, perPage = PER_PAGE) {
+  return service.getMyGigs(status, nextPage, perPage);
 }
 
 async function getProfile() {

src/constants/index.js

@@ -103,6 +103,18 @@ export const CURRENCY_SYMBOL = {
   USD: "$",
 };
 
+export const GIGS_FILTER_STATUSES = {
+  OPEN_JOBS: "Open Applications",
+  COMPLETED_JOBS: "Completed Gigs",
+  ARCHIVED_JOBS: "Archived Applications",
+};
+
+export const GIGS_FILTER_STATUSES_PARAM = {
+  [GIGS_FILTER_STATUSES.OPEN_JOBS]: "open_jobs",
+  [GIGS_FILTER_STATUSES.COMPLETED_JOBS]: "completed_jobs",
+  [GIGS_FILTER_STATUSES.ARCHIVED_JOBS]: "archived_jobs",
+};
+
 export const MY_GIG_PHASE = {
   APPLIED: "Applied",
   SKILLS_TEST: "Skills Test",

src/containers/MyGigs/JobListing/index.jsx

@@ -3,10 +3,11 @@ import PT from "prop-types";
 import JobCard from "./JobCard";
 import Button from "../../../components/Button";
 import { useScrollLock } from "../../../utils/hooks";
+import * as constants from "../../../constants";
 
 import "./styles.scss";
 
-const JobListing = ({ jobs, loadMore, total, numLoaded }) => {
+const JobListing = ({ jobs, loadMore, total, numLoaded, gigStatus }) => {
   const scrollLock = useScrollLock();
   const [page, setPage] = useState(1);
 
@@ -17,13 +18,17 @@ const JobListing = ({ jobs, loadMore, total, numLoaded }) => {
     const nextPage = page + 1;
     scrollLock(true);
     setPage(nextPage);
-    loadMore(nextPage);
+    loadMore(constants.GIGS_FILTER_STATUSES_PARAM[gigStatus], nextPage);
   };
 
   useEffect(() => {
     varsRef.current.scrollLock(false);
   }, [jobs]);
 
+  useEffect(() => {
+    setPage(1);
+  }, [gigStatus]);
+
   return (
     <div styleName="card-container">
       {jobs.map((job, index) => (
@@ -32,7 +37,7 @@ const JobListing = ({ jobs, loadMore, total, numLoaded }) => {
         </div>
       ))}
 
-      {numLoaded < total && (
+      {numLoaded < total && page * constants.PER_PAGE < total && (
         <div styleName="load-more">
           <Button onClick={handleLoadMoreClick}>LOAD MORE</Button>
         </div>
@@ -46,6 +51,7 @@ JobListing.propTypes = {
   loadMore: PT.func,
   total: PT.number,
   numLoaded: PT.number,
+  gigStatus: PT.string,
 };
 
 export default JobListing;

src/containers/MyGigs/index.jsx

@@ -28,6 +28,7 @@ const MyGigs = ({
   getAllCountries,
   checkingGigs,
   startCheckingGigs,
+  gigStatus,
 }) => {
   const location = useLocation();
   const params = utils.url.parseUrlQuery(location.search);
@@ -46,7 +47,7 @@ const MyGigs = ({
     if (propsRef.current.params.externalId) {
       propsRef.current.startCheckingGigs(propsRef.current.params.externalId);
     } else {
-      propsRef.current.getMyGigs();
+      // propsRef.current.getMyGigs();
     }
   }, []);
 
@@ -101,6 +102,7 @@ const MyGigs = ({
         {!checkingGigs && myGigs && myGigs.length == 0 && <Empty />}
         {!checkingGigs && myGigs && myGigs.length > 0 && (
           <JobListing
+            gigStatus={gigStatus}
             jobs={myGigs}
             loadMore={loadMore}
             total={total}
@@ -133,6 +135,7 @@ const MyGigs = ({
 };
 
 MyGigs.propTypes = {
+  gigStatus: PT.string,
   myGigs: PT.arrayOf(PT.shape()),
   getMyGigs: PT.func,
   loadMore: PT.func,
@@ -148,6 +151,7 @@ MyGigs.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
+  gigStatus: state.filter.gig.status,
   checkingGigs: state.myGigs.checkingGigs,
   myGigs: state.myGigs.myGigs,
   total: state.myGigs.total,

src/containers/MyGigsFilter/GigsFilter/index.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import PT from "prop-types";
+import _ from "lodash";
+import RadioButton from "../../../components/RadioButton";
+import * as utils from "../../../utils";
+
+import "./styles.scss";
+
+const GigsFilter = ({ gigStatus, gigsStatuses, updateGigFilter }) => {
+  const bucketOptions = utils.createRadioOptions(gigsStatuses, gigStatus);
+
+  return (
+    <div styleName="filter">
+      <div styleName="buckets vertical-list">
+        <RadioButton
+          options={bucketOptions}
+          onChange={(newBucketOptions) => {
+            const filterChange = {
+              status: utils.getSelectedRadioOption(newBucketOptions).label,
+            };
+            updateGigFilter(filterChange);
+          }}
+        />
+        <span></span>
+      </div>
+    </div>
+  );
+};
+
+GigsFilter.propTypes = {
+  gigStatus: PT.string,
+  gigsStatuses: PT.arrayOf(PT.string),
+  updateGigFilter: PT.func,
+};
+
+export default GigsFilter;

src/containers/MyGigsFilter/GigsFilter/styles.scss

@@ -0,0 +1,28 @@
+@import "styles/variables";
+@import "styles/mixins";
+
+$filter-padding-x: 4 * $base-unit;
+$filter-padding-y: 3 * $base-unit;
+
+.filter {
+  padding: $filter-padding-y $filter-padding-x;
+  font-size: $font-size-sm;
+}
+
+.buckets {
+  margin-bottom: 18px;
+
+  > h3 {
+    margin-bottom: 15px;
+    font-size: inherit;
+    line-height: 19px;
+  }
+}
+
+.buckets {
+  &.vertical-list {
+    > div > div {
+      margin: $base-unit 0;
+    }
+  }
+}

src/containers/MyGigsFilter/index.jsx

@@ -0,0 +1,65 @@
+import React, { useRef } from "react";
+import PT from "prop-types";
+import { useLocation } from "@reach/router";
+import { connect } from "react-redux";
+import GigsFilter from "./GigsFilter";
+import actions from "../../actions";
+import { updateQuery } from "../../utils/url";
+
+const MyGigsFilter = ({ gigStatus, gigsStatuses, updateGigFilter }) => {
+  const location = useLocation();
+  const propsRef = useRef(null);
+  propsRef.current = { location };
+
+  if (location.pathname === "/earn/my-gigs") {
+    return (
+      <GigsFilter
+        gigStatus={gigStatus}
+        gigsStatuses={gigsStatuses}
+        updateGigFilter={(gigFilterChanged) => {
+          updateGigFilter(gigFilterChanged);
+          updateQuery(gigFilterChanged);
+        }}
+      />
+    );
+  }
+
+  return null;
+};
+
+MyGigsFilter.propTypes = {
+  gigStatus: PT.string,
+  gigsStatuses: PT.arrayOf(PT.string),
+  updateGigFilter: PT.func,
+};
+
+const mapStateToProps = (state) => ({
+  state: state,
+  gigStatus: state.filter.gig.status,
+  gigsStatuses: state.lookup.gigsStatuses,
+});
+
+const mapDispatchToProps = {
+  updateGigFilter: actions.filter.updateGigFilter,
+  updateGigQuery: actions.filter.updateGigQuery,
+};
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => ({
+  ...ownProps,
+  ...stateProps,
+  ...dispatchProps,
+  updateQuery: (change) =>
+    dispatchProps.updateGigQuery(
+      {
+        ...stateProps.state.filter.gig,
+        ...change,
+      },
+      change
+    ),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps
+)(MyGigsFilter);