cache data added

Author: LieutenantRoger

src/App.jsx

@@ -112,8 +112,19 @@ const App = () => {
       if (diff) {
         store.dispatch(actions.filter.updateGigFilter(updatedGigFilter));
       }
+      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 && cachedGigs.myGigs.length !== 0) {
+      if (cachedGigs.myGigs) {
         return;
       }
       getDataDebounced.current(() => {

src/actions/myGigs.js

@@ -12,9 +12,9 @@ import service from "../services/myGigs";
  * @param {number} perPage items per page. by default is 10.
  * @returns
  */
-async function getMyGigs(status = "open_jobs", page = 1, perPage = PER_PAGE) {
-  return service.getMyGigs(status, page, perPage);
-}
+// async function getMyGigs(status = "open_jobs", page = 1, perPage = PER_PAGE) {
+//   return service.getMyGigs(status, page, perPage);
+// }
 
 async function getMyActiveGigs(
   status = "active_jobs",
@@ -54,9 +54,9 @@ async function getMyArchivedGigsDone(
  * @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 loadMoreMyGigs(status, nextPage, perPage = PER_PAGE) {
+//   return service.getMyGigs(status, nextPage, perPage);
+// }
 
 async function getProfile() {
   return service.getProfile();
@@ -90,8 +90,8 @@ export default createActions({
   GET_MY_OPEN_GIGS: getMyOpenGigs,
   GET_MY_COMPLETED_GIGS: getMyCompletedGigs,
   GET_MY_ARCHIVED_GIGS: getMyArchivedGigsDone,
-  GET_MY_GIGS: getMyGigs,
-  LOAD_MORE_MY_GIGS: loadMoreMyGigs,
+  // GET_MY_GIGS: getMyGigs,
+  // LOAD_MORE_MY_GIGS: loadMoreMyGigs,
   GET_PROFILE: getProfile,
   UPDATE_PROFILE: updateProfile,
   START_CHECKING_GIGS: startCheckingGigs,

src/constants/index.js

@@ -359,7 +359,7 @@ export const SORT_STATUS_ORDER = [
   MY_GIG_PHASE.COMPLETED,
 ];
 
-export const PER_PAGE = 10;
+export const PER_PAGE = 1;
 
 /**
  * defines which status can show remarks

src/containers/MyGigs/JobListing/JobCard/tooltips/EarnTooltip/styles.scss

@@ -5,4 +5,5 @@
   padding: 7px 10px;
   line-height: $line-height-base;
   font-size: 12px;
+  text-align: center;
 }

src/containers/MyGigs/JobListing/index.jsx

@@ -7,27 +7,27 @@ import * as constants from "../../../constants";
 
 import "./styles.scss";
 
-const JobListing = ({ jobs, loadMore, total, numLoaded, gigStatus }) => {
+const JobListing = ({ jobs, loadMore, total, numLoaded, gigStatus, page }) => {
   const scrollLock = useScrollLock();
-  const [page, setPage] = useState(1);
+  // const [page, setPage] = useState(1);
 
   const varsRef = useRef();
   varsRef.current = { scrollLock };
 
   const handleLoadMoreClick = () => {
     const nextPage = page + 1;
     scrollLock(true);
-    setPage(nextPage);
+    // setPage(nextPage);
     loadMore(constants.GIGS_FILTER_STATUSES_PARAM[gigStatus], nextPage);
   };
 
   useEffect(() => {
     varsRef.current.scrollLock(false);
   }, [jobs]);
 
-  useEffect(() => {
-    setPage(1);
-  }, [gigStatus]);
+  // useEffect(() => {
+  //   setPage(1);
+  // }, [gigStatus]);
   return (
     <div styleName="card-container">
       {![
@@ -75,6 +75,7 @@ JobListing.propTypes = {
   total: PT.number,
   numLoaded: PT.number,
   gigStatus: PT.string,
+  page: PT.number,
 };
 
 export default JobListing;

src/containers/MyGigs/index.jsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useLocation } from "@reach/router";
+import React, { useEffect, useRef, useState, useCallback } from "react";
+// import { useLocation } from "@reach/router";
 import PT from "prop-types";
 import { connect } from "react-redux";
 import Modal from "../../components/Modal";
@@ -17,11 +17,11 @@ import UpdateSuccess from "./modals/UpdateSuccess";
 import "./styles.scss";
 
 const MyGigs = ({
-  myGigs,
-  getMyGigs,
-  loadMore,
-  total,
-  numLoaded,
+  // myGigs,
+  // getMyGigs,
+  // loadMore,
+  // total,
+  // numLoaded,
   myActiveGigs,
   myOpenGigs,
   myCompletedGigs,
@@ -35,12 +35,17 @@ const MyGigs = ({
   startCheckingGigs,
   gigStatus,
   loadingMyGigs,
+  getMyActiveGigs,
+  getMyOpenGigs,
+  getMyCompletedGigs,
+  getMyArchivedGigs,
 }) => {
   // const location = useLocation();
   // const params = utils.url.parseUrlQuery(location.search);
   const propsRef = useRef();
   propsRef.current = {
-    getMyGigs,
+    // getMyGigs,
+    getMyOpenGigs,
     getProfile,
     getAllCountries,
     startCheckingGigs,
@@ -59,7 +64,8 @@ const MyGigs = ({
       return;
     }
     if (!checkingGigs) {
-      propsRef.current.getMyGigs();
+      // propsRef.current.getMyGigs();
+      propsRef.current.getMyOpenGigs();
     }
   }, [checkingGigs]);
 
@@ -90,6 +96,30 @@ const MyGigs = ({
     }
   }, [updateProfileSuccess]);
 
+  const currentLoadMore = useCallback(
+    (status, page) => {
+      if (gigStatus == constants.GIGS_FILTER_STATUSES.ACTIVE_JOBS) {
+        getMyActiveGigs(status, page);
+      }
+      if (gigStatus == constants.GIGS_FILTER_STATUSES.OPEN_JOBS) {
+        getMyOpenGigs(status, page);
+      }
+      if (gigStatus == constants.GIGS_FILTER_STATUSES.COMPLETED_JOBS) {
+        getMyCompletedGigs(status, page);
+      }
+      if (gigStatus == constants.GIGS_FILTER_STATUSES.ARCHIVED_JOBS) {
+        getMyArchivedGigs(status, page);
+      }
+    },
+    [
+      gigStatus,
+      getMyActiveGigs,
+      getMyOpenGigs,
+      getMyCompletedGigs,
+      getMyArchivedGigs,
+    ]
+  );
+
   return (
     <>
       <div styleName="page">
@@ -126,12 +156,15 @@ const MyGigs = ({
             <JobListing
               gigStatus={gigStatus}
               jobs={currentGigs.myGigs}
-              loadMore={loadMore}
+              loadMore={currentLoadMore}
               total={currentGigs.total}
               numLoaded={currentGigs.numLoaded}
+              page={currentGigs.page}
             />
           )}
-        {checkingGigs || (loadingMyGigs && !currentGigs.myGigs && <Loading />)}
+        {(checkingGigs || (loadingMyGigs && !currentGigs.myGigs)) && (
+          <Loading />
+        )}
       </div>
       <Modal open={openUpdateProfile}>
         <UpdateGigProfile
@@ -158,11 +191,11 @@ const MyGigs = ({
 
 MyGigs.propTypes = {
   gigStatus: PT.string,
-  myGigs: PT.arrayOf(PT.shape()),
-  getMyGigs: PT.func,
-  loadMore: PT.func,
-  total: PT.number,
-  numLoaded: PT.number,
+  // myGigs: PT.arrayOf(PT.shape()),
+  // getMyGigs: PT.func,
+  // loadMore: PT.func,
+  // total: PT.number,
+  // numLoaded: PT.number,
   profile: PT.shape(),
   getProfile: PT.func,
   updateProfile: PT.func,
@@ -175,14 +208,18 @@ MyGigs.propTypes = {
   myCompletedGigs: PT.shape(),
   myArchivedGigs: PT.shape(),
   loadingMyGigs: PT.bool,
+  getMyActiveGigs: PT.func,
+  getMyOpenGigs: PT.func,
+  getMyCompletedGigs: PT.func,
+  getMyArchivedGigs: PT.func,
 };
 
 const mapStateToProps = (state) => ({
   gigStatus: state.filter.gig.status,
   checkingGigs: state.myGigs.checkingGigs,
-  myGigs: state.myGigs.myGigs,
-  total: state.myGigs.total,
-  numLoaded: state.myGigs.numLoaded,
+  // myGigs: state.myGigs.myGigs,
+  // total: state.myGigs.total,
+  // numLoaded: state.myGigs.numLoaded,
   loadingMyGigs: state.myGigs.loadingMyGigs,
   myActiveGigs: state.myGigs[constants.GIGS_FILTER_STATUSES.ACTIVE_JOBS],
   myOpenGigs: state.myGigs[constants.GIGS_FILTER_STATUSES.OPEN_JOBS],
@@ -193,8 +230,12 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = {
-  getMyGigs: actions.myGigs.getMyGigs,
-  loadMore: actions.myGigs.loadMoreMyGigs,
+  // getMyGigs: actions.myGigs.getMyGigs,
+  // loadMore: actions.myGigs.loadMoreMyGigs,
+  getMyActiveGigs: actions.myGigs.getMyActiveGigs,
+  getMyOpenGigs: actions.myGigs.getMyOpenGigs,
+  getMyCompletedGigs: actions.myGigs.getMyCompletedGigs,
+  getMyArchivedGigs: actions.myGigs.getMyArchivedGigs,
   getProfile: actions.myGigs.getProfile,
   updateProfile: actions.myGigs.updateProfile,
   getAllCountries: actions.lookup.getAllCountries,