Merge branch 'zhoufang/dev/449' into 'dev'

#449 Add pagination support to "Your Projects" list and updated view more button for rep card

See merge request !472

src/main/www/src/components/Portal/Dashboard/DashboardIntro.tsx

@@ -174,11 +174,13 @@ export default function DashboardIntro(props: { orgRepData: Array<OrgRep> | null
 
       <Card className={classNames(classes.card, classes.companyRepCard)}>
         <List>{orgRepData ? renderOrgRep?.slice(0, 3) : <CircularProgress />}</List>
-        <Container className={classes.viewAllBtnCtn}>
-          <Button className={classes.viewAllBtn} onClick={() => setOpen(true)}>
-            View more
-          </Button>
-        </Container>
+        {orgRepData && orgRepData?.length > 3 && (
+          <Container className={classes.viewAllBtnCtn}>
+            <Button className={classes.viewAllBtn} onClick={() => setOpen(true)}>
+              View more
+            </Button>
+          </Container>
+        )}
       </Card>
 
       <Card className={classNames(classes.card, classes.companyContentCard)}>

src/main/www/src/components/Portal/Dashboard/DashboardProjectsAndWG/DashboardProjects.tsx

@@ -9,7 +9,7 @@ import {
 import CustomCard from '../../../UIComponents/CustomCard/CustomCard';
 import { useEffect, useContext, useState } from 'react';
 import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
-import { fetchWrapper } from '../../../../Utils/formFunctionHelpers';
+import { fetchWrapper, fetchWrapperPagination } from '../../../../Utils/formFunctionHelpers';
 import { pickRandomItems } from '../../../../Utils/portalFunctionHelpers';
 import PortalContext from '../../../../Context/PortalContext';
 import { DashboardProjectsAndWGProps, ProjectsAndWGItem } from '../../../../Interfaces/portal_interface';
@@ -29,7 +29,7 @@ export default function DashboardProjects({ setSelectedItemArray, setOpen }: Das
     // For your projects data
     const urlForYourProjects = isReactOnlyMode
       ? '/membership_data/test_your_projects.json'
-      : api_prefix() + `/${END_POINT.organizations}/${orgId}/${END_POINT.projects}`;
+      : api_prefix() + `/${END_POINT.organizations}/${orgId}/${END_POINT.projects}?page=`;
 
     const saveYourProjectsData = (data: Array<any>) => {
       if (data.length === 0) {
@@ -55,7 +55,11 @@ export default function DashboardProjects({ setSelectedItemArray, setOpen }: Das
       fetchWrapper(urlForAllProjects, FETCH_METHOD.GET, saveInterestedProjectsData);
     };
 
-    orgId !== 0 && fetchWrapper(urlForYourProjects, FETCH_METHOD.GET, saveYourProjectsData);
+    if (isReactOnlyMode) {
+      orgId !== 0 && fetchWrapper(urlForYourProjects, FETCH_METHOD.GET, saveYourProjectsData);
+    } else {
+      orgId !== 0 && fetchWrapperPagination(urlForYourProjects, 1, saveYourProjectsData);
+    }
 
     // For interested projects data
     const saveInterestedProjectsData = (data: Array<any>) => {

src/main/www/src/components/Portal/Portal.tsx

@@ -4,7 +4,13 @@ import { Switch, Route, Redirect } from 'react-router-dom';
 import { CircularProgress, Theme } from '@material-ui/core';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
 import LeftNavBar from './NavBar/LeftNavBar';
-import { LOGIN_FROM_KEY, mainContentBGColor, ORIGINAL_PATH_KEY } from '../../Constants/Constants';
+import {
+  getCurrentMode,
+  LOGIN_FROM_KEY,
+  mainContentBGColor,
+  MODE_REACT_ONLY,
+  ORIGINAL_PATH_KEY,
+} from '../../Constants/Constants';
 import Dashboard from './Dashboard/Dashboard';
 import AppTopBar from './NavBar/AppTopBar';
 import OrgProfile from './OrgProfile/OrgProfiles';
@@ -60,7 +66,7 @@ export default function MainPortal({
   setIsFetchingUser,
 }: {
   isFetchingUser: boolean;
-  setIsFetchingUser: () => void;
+  setIsFetchingUser: (param: boolean) => void;
 }) {
   const classes = useStyles();
   const [mobileOpen, setMobileOpen] = useState(false);
@@ -76,6 +82,10 @@ export default function MainPortal({
       : sessionStorage.setItem(ORIGINAL_PATH_KEY, '/portal');
   }, [loggedIn]);
 
+  useEffect(() => {
+    getCurrentMode() === MODE_REACT_ONLY && setIsFetchingUser(false);
+  }, [setIsFetchingUser]);
+
   useEffect(() => {
     localStorage.setItem(LOGIN_FROM_KEY, 'Form');
   }, []);