diff --git a/package.json b/package.json
index 1c5f0789..77c9b7cc 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
"react": "17.0.1",
"react-dom": "17.0.1",
"react-hook-form": "^6.15.5",
+ "react-waypoint": "^10.3.0",
"sass": "^1.30.0",
"validator": "^13.7.0"
},
diff --git a/src/components/home/index.js b/src/components/home/index.js
index 798581cd..094b34b5 100644
--- a/src/components/home/index.js
+++ b/src/components/home/index.js
@@ -7,18 +7,44 @@ import Designers from '@components/designers';
import SearchBox from '@components/UI/search-box/index';
import styles from '@components/home/home.module.scss';
import { userContext } from '@store/user/user-context';
-import { useState } from 'react';
+import { membersContext } from '@store/members/members-context';
+import { searchMemberContext } from '@store/search-members/searchMembers-context';
+import { searchMembers } from '@helper-functions/search-members';
+import { useState, useEffect } from 'react';
+import { Waypoint } from 'react-waypoint';
+
import {
BRAND_NAME,
MEMBERS_TITLE,
NEW_MEMBERS_TITLE,
+ NEW_MEMBERS_TO_SHOW,
} from '@constants/AppConstants';
const Home = () => {
const { showMemberRoleUpdateModal, isSuperUserMode } = userContext();
+ const {
+ state: { newMembers: newMembersList },
+ } = membersContext();
+ const { searchTerm } = searchMemberContext();
+ const filterMembersList = searchMembers(newMembersList, searchTerm);
+
const { query } = useRouter() || { query: { dev: false } };
const { dev } = query;
const [isOptionKey, setIsOptionKey] = useState(false);
+ const [newMembers, setNewMembers] = useState([]);
+ const [scrollCount, setScrollCount] = useState(0);
+
+ const fetchNewMembers = () => {
+ const newMemberArr = searchTerm ? filterMembersList : newMembersList;
+ const noOfMembersToShow = scrollCount * NEW_MEMBERS_TO_SHOW;
+ const slicedNewMembersList = newMemberArr.slice(0, noOfMembersToShow);
+ setNewMembers(slicedNewMembersList);
+ setScrollCount(scrollCount + 1);
+ };
+
+ useEffect(() => {
+ fetchNewMembers();
+ }, [newMembersList]);
return (
{
)}
{NEW_MEMBERS_TITLE}
-
+
+ {newMembers && }
);
};
diff --git a/src/components/new-members/index.js b/src/components/new-members/index.js
index b2feed9b..7b7b9a6f 100644
--- a/src/components/new-members/index.js
+++ b/src/components/new-members/index.js
@@ -2,9 +2,6 @@ import React from 'react';
import Card from '@components/member-card';
import PropTypes from 'prop-types';
import styles from '@components/new-members/new-members.module.scss';
-import { membersContext } from '@store/members/members-context';
-import { searchMemberContext } from '@store/search-members/searchMembers-context';
-import { searchMembers } from '@helper-functions/search-members';
import Link from 'next/link';
import { userContext } from '@store/user/user-context';
@@ -40,16 +37,11 @@ const renderNewUser = (newMember, isOptionKey) => {
return renderNewUserCard(newMember, isOptionKey);
};
-const NewMemberList = ({ isOptionKey }) => {
- const {
- state: { newMembers },
- } = membersContext();
- const { searchTerm } = searchMemberContext();
- const filterMembers = searchMembers(newMembers, searchTerm);
- if (newMembers) {
+const NewMemberList = ({ isOptionKey, newMembers }) => {
+ if (newMembers?.length) {
return (
- {filterMembers.map((newMember) => (
+ {newMembers.map((newMember) => (
{renderNewUser(newMember, isOptionKey)}
diff --git a/src/constants/AppConstants.js b/src/constants/AppConstants.js
index 5f2b47cf..b36c7222 100644
--- a/src/constants/AppConstants.js
+++ b/src/constants/AppConstants.js
@@ -65,3 +65,4 @@ export const HOST_NAME = 'members.realdevsquad.com';
export const TIMEOUT = 1000;
export const KEY_TAB = 9;
export const KEY_ESC = 27;
+export const NEW_MEMBERS_TO_SHOW = 10;
diff --git a/yarn.lock b/yarn.lock
index c418c02a..4cf54113 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4780,6 +4780,11 @@ console-control-strings@^1.0.0, console-control-strings@^1.1.0:
resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
+"consolidated-events@^1.1.0 || ^2.0.0":
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/consolidated-events/-/consolidated-events-2.0.2.tgz#da8d8f8c2b232831413d9e190dc11669c79f4a91"
+ integrity sha512-2/uRVMdRypf5z/TW/ncD/66l75P5hH2vM/GR8Jf8HLc2xnfJtmina6F6du8+v4Z2vTrMo7jC+W1tmEEuuELgkQ==
+
constants-browserify@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -10080,6 +10085,11 @@ react-is@^16.13.1, react-is@^16.7.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+"react-is@^17.0.1 || ^18.0.0":
+ version "18.2.0"
+ resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+ integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
react-popper-tooltip@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz#329569eb7b287008f04fcbddb6370452ad3f9eac"
@@ -10147,6 +10157,16 @@ react-textarea-autosize@^8.3.0:
use-composed-ref "^1.0.0"
use-latest "^1.0.0"
+react-waypoint@^10.3.0:
+ version "10.3.0"
+ resolved "https://registry.yarnpkg.com/react-waypoint/-/react-waypoint-10.3.0.tgz#fcc60e86c6c9ad2174fa58d066dc6ae54e3df71d"
+ integrity sha512-iF1y2c1BsoXuEGz08NoahaLFIGI9gTUAAOKip96HUmylRT6DUtpgoBPjk/Y8dfcFVmfVDvUzWjNXpZyKTOV0SQ==
+ dependencies:
+ "@babel/runtime" "^7.12.5"
+ consolidated-events "^1.1.0 || ^2.0.0"
+ prop-types "^15.0.0"
+ react-is "^17.0.1 || ^18.0.0"
+
react@17.0.1:
version "17.0.1"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"